//파란색이 플레이어, 빨간색이 장애물. 스페이스바로 점프
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>공룡 점프 게임</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameCanvas {
background-color: #ffffff;
display: block;
margin: 50px auto;
border: 1px solid #000;
}
#startBtn {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#startBtn:hover {
background-color: #45a049;
}
#score {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="600" height="200"></canvas>
<div id="score">점수: 0</div>
<button id="startBtn">게임 시작</button>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
// 게임 요소 초기화
let dino = { x: 50, y: 150, width: 40, height: 40, dy: 0, gravity: 0.6, jumpPower: -10, isJumping: false };
let cactus = { x: 600, y: 150, width: 20, height: 40, speed: 5 };
let score = 0;
let gameRunning = false;
// 공룡 그리기
function drawDino() {
ctx.fillStyle = '#007bff';
ctx.fillRect(dino.x, dino.y, dino.width, dino.height);
}
// 선인장 그리기
function drawCactus() {
ctx.fillStyle = '#ff6347';
ctx.fillRect(cactus.x, cactus.y, cactus.width, cactus.height);
}
// 충돌 체크 함수
function checkCollision() {
if (dino.x < cactus.x + cactus.width &&
dino.x + dino.width > cactus.x &&
dino.y < cactus.y + cactus.height &&
dino.y + dino.height > cactus.y) {
return true;
}
return false;
}
// 점프 처리
function jump() {
if (!dino.isJumping) {
dino.dy = dino.jumpPower;
dino.isJumping = true;
}
}
// 점수 업데이트 함수
function updateScore() {
scoreElement.innerText = '점수: ' + score;
}
// 게임 루프
function gameLoop() {
if (!gameRunning) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 공룡 중력 및 점프 처리
dino.dy += dino.gravity;
dino.y += dino.dy;
if (dino.y > 150) {
dino.y = 150; // 땅 위에 있을 때
dino.isJumping = false;
}
// 선인장 이동
cactus.x -= cactus.speed;
if (cactus.x < -cactus.width) {
cactus.x = 600; // 선인장이 화면을 지나가면 다시 나타남
score++;
updateScore(); // 점수 업데이트
}
// 공룡과 선인장 그리기
drawDino();
drawCactus();
// 충돌 체크
if (checkCollision()) {
alert('게임 오버! 점수: ' + score);
gameRunning = false;
} else {
requestAnimationFrame(gameLoop);
}
}
// 키보드 조작
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
jump();
}
});
// 게임 시작 버튼
document.getElementById('startBtn').addEventListener('click', () => {
if (!gameRunning) {
cactus.x = 600; // 선인장 초기화
score = 0; // 점수 초기화
updateScore(); // 점수 표시 업데이트
gameRunning = true;
gameLoop();
}
});
</script>
</body>
</html>
'2024-소프트웨어과 1학년 > 소프트웨어 연구실' 카테고리의 다른 글
| [웹프로그래밍]떨어지는 장애물 피하기 미니게임 (0) | 2024.10.07 |
|---|---|
| [아기대학생김따루]소프트웨어과에서 살아남기[도전]_처음 시작을 어떻게? (11) | 2024.09.04 |