<!DOCTYPE html>
<html>
<head>
<title>¿ø Ŭ¸¯ °ÔÀÓ</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="700" height="700"></canvas>
<div>
<button id="newGameButton">»õ °ÔÀÓ</button>
</div>
<div>
<p>Ŭ¸¯ÇÑ È½¼ö: <span id="clickCount">0</span></p>
</div>
<script>
window.addEventListener('load', () => {
const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const circleSize = 35;
const initialSpeed = 1000; // Ãʱ⠻ý¼º ¼Óµµ (¹Ð¸®ÃÊ)
let circles = [];
let gameRunning = false;
let speed = initialSpeed;
let clickCount = 0;
const newGameButton = document.getElementById('newGameButton');
const clickCountElement = document.getElementById('clickCount');
canvas.addEventListener('click', handleClick);
newGameButton.addEventListener('click', startNewGame);
function handleClick(event) {
if (!gameRunning) {
return; // °ÔÀÓ ½ÃÀÛ Àü¿¡ Ŭ¸¯ À̺¥Æ® ¹«½Ã
}
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
let clickedCircleIndex = -1;
// ¿øÀÇ Á᫐ ÁÂÇ¥¿Í Ŭ¸¯ ÁÂÇ¥ »çÀÌÀÇ °Å¸® °è»ê
for (let i = 0; i < circles.length; i++) {
const circle = circles[i];
const dx = circle.x - mouseX;
const dy = circle.y - mouseY;
const distance = Math.sqrt(dx * dx + dy * dy);
// Ŭ¸¯ÇÑ À§Ä¡°¡ ¿ø ¾È¿¡ ÀÖ´Â °æ¿ì, ÇØ´ç ¿ø »èÁ¦
if (distance < circleSize / 2) {
clickedCircleIndex = i;
break;
}
}
if (clickedCircleIndex !== -1) {
circles.splice(clickedCircleIndex, 1);
speed -= 10; // ¿ø Ŭ¸¯ ½Ã ¼Óµµ Áõ°¡
clickCount++;
clickCountElement.textContent = clickCount;
} else {
endGame();
}
}
function drawCircle(x, y) {
context.beginPath();
context.arc(x, y, circleSize / 2, 0, Math.PI * 2);
context.fillStyle = 'red';
context.fill();
context.closePath();
}
function createRandomCircle() {
if (!gameRunning) {
return; // °ÔÀÓ ½ÃÀÛ Àü¿¡ ¿ø »ý¼º ¹«½Ã
}
const x = Math.random() * (canvas.width - circleSize) + circleSize / 2;
const y = Math.random() * (canvas.height - circleSize) + circleSize / 2;
drawCircle(x, y);
circles.push({ x, y });
setTimeout(() => {
if (gameRunning) {
circles.shift();
createRandomCircle();
}
}, speed);
}
function startNewGame() {
circles = [];
gameRunning = true;
speed = initialSpeed;
clickCount = 0;
clickCountElement.textContent = clickCount;
newGameButton.disabled = true;
createRandomCircle();
}
function endGame() {
gameRunning = false;
newGameButton.disabled = false;
alert('°ÔÀÓ Á¾·á');
}
function gameLoop() {
context.clearRect(0, 0, canvas.width, canvas.height);
// ¸ðµç ¿ø ±×¸®±â
circles.forEach(circle => {
drawCircle(circle.x, circle.y);
});
requestAnimationFrame(gameLoop);
}
gameLoop();
});
</script>
</body>
</html>
ÄÚµù¸ô¶óµµ ÄÚµùÀÌ °¡´ÉÇϳ׿ä. À§ÀÇ ÄÚµå html·Î ÀúÀåÇؼ À¥ºê¶ó¿ìÀú ¿¾îº¸½Ã¸é ¿øŬ¸¯ °ÔÀÓÀÌ µË´Ï´Ù.
½É½ÉÇؼ êGPT¶û ³î´Ù°¡ ¸¸µé¾î ºÃ¾î¿ä~
|