|
<!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랑 놀다가 만들어 봤어요~
| 
등록안내
