간단한 flappy bird 게임을 grok3랑 만들어 봄.
스마트폰에서는 터치로 사용 가능.
메모장에 붙여넣어 아무이름이나 html로 저장(예를들어 flappy.html)한 후 탐색기에서
더블클릭하면 실행!
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flappy Bird - Enhanced Version</title> <style> body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #87CEEB; overflow: hidden; } #gameCanvas { border: 1px solid black; background: linear-gradient(to bottom, #87CEEB, #E0FFFF); } #startScreen, #gameOverScreen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.8); padding: 20px; border-radius: 10px; text-align: center; } button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } </style> </head> <body> <canvas id="gameCanvas" width="400" height="600"></canvas> <div id="startScreen">아무 키나 눌러 시작하세요</div> <div id="gameOverScreen" style="display: none;"> <p>게임 오버! 점수: <span id="finalScore"></span></p> <button id="restartButton">다시 시작</button> </div> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const startScreen = document.getElementById('startScreen'); const gameOverScreen = document.getElementById('gameOverScreen'); const finalScore = document.getElementById('finalScore'); const restartButton = document.getElementById('restartButton'); // 새 객체 const bird = { x: 100, y: 300, radius: 15, velocity: 0, gravity: 0.3, jump: -8 }; // 파이프 객체 const pipe = { x: 400, width: 50, gap: 200, speed: 2, height: 200 }; // 게임 상태 변수 let gameStarted = false; let gameOver = false; let score = 0; // 입력 이벤트 처리 (키보드, 마우스, 터치) function jump() { if (!gameStarted) { gameStarted = true; startScreen.style.display = 'none'; gameOverScreen.style.display = 'none'; requestAnimationFrame(gameLoop); } else if (!gameOver) { bird.velocity = bird.jump; } } document.addEventListener('keydown', jump); canvas.addEventListener('click', jump); // 마우스 좌클릭으로 점프 canvas.addEventListener('touchstart', (e) => { e.preventDefault(); jump(); }); // 게임 루프 function gameLoop() { if (!gameStarted || gameOver) return; // 화면 지우기 ctx.clearRect(0, 0, canvas.width, canvas.height); // 새 업데이트 및 그리기 bird.velocity += bird.gravity; bird.y += bird.velocity; drawBird(); // 파이프 업데이트 pipe.x -= pipe.speed; if (pipe.x < -pipe.width) { pipe.x = canvas.width; pipe.height = Math.random() * (canvas.height - pipe.gap - 100) + 50; score++; } // 파이프 그리기 ctx.fillStyle = '#228B22'; ctx.fillRect(pipe.x, 0, pipe.width, pipe.height); ctx.fillRect(pipe.x, pipe.height + pipe.gap, pipe.width, canvas.height); ctx.strokeStyle = '#006400'; ctx.lineWidth = 4; ctx.strokeRect(pipe.x, 0, pipe.width, pipe.height); ctx.strokeRect(pipe.x, pipe.height + pipe.gap, pipe.width, canvas.height - (pipe.height + pipe.gap)); // 충돌 감지 if ( bird.y - bird.radius < 0 || bird.y + bird.radius > canvas.height || (bird.x + bird.radius > pipe.x && bird.x - bird.radius < pipe.x + pipe.width && (bird.y - bird.radius < pipe.height || bird.y + bird.radius > pipe.height + pipe.gap)) ) { gameOver = true; showGameOverScreen(); return; } // 점수 표시 ctx.fillStyle = 'black'; ctx.font = 'bold 20px Arial'; ctx.fillText(`Score: ${score}`, 10, 30); // 다음 프레임 요청 requestAnimationFrame(gameLoop); } // 새를 그리는 함수 function drawBird() { ctx.beginPath(); ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2); ctx.fillStyle = '#FFD700'; ctx.fill(); ctx.closePath(); } // 게임 오버 화면 표시 function showGameOverScreen() { gameOverScreen.style.display = 'block'; finalScore.textContent = score; } // 게임 리셋 함수 function resetGame() { bird.y = 300; bird.velocity = 0; pipe.x = 400; pipe.height = 200; score = 0; gameOver = false; gameStarted = false; startScreen.style.display = 'block'; gameOverScreen.style.display = 'none'; } // 리셋 버튼 이벤트 리스너 restartButton.addEventListener('click', resetGame); </script> </body> </html> |
'IT 관련 > 기타' 카테고리의 다른 글
| 세계시간 코드 설명 (0) | 2025.03.14 |
|---|---|
| 세계시간 (0) | 2025.03.14 |
| Python에서 외부 모듈을 가져오는 방법 정리 (0) | 2025.03.11 |
| Claude 가 만들어 준 Tetris(python) (0) | 2025.02.18 |
| Claude 가 만들어 준 Tetris (웹버젼) (0) | 2025.02.18 |