<!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;
overflow: hidden;
font-family: Arial, sans-serif;
}
canvas {
display: block;
background-color: #f0f0f0;
border: 1px solid #000;
margin: 20px auto;
}
#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;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<button id="startBtn">게임 시작</button>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let player = { x: 180, y: 350, width: 40, height: 40, speed: 5 };
let obstacle = { x: Math.random() * 360, y: -20, width: 40, height: 40, speed: 3 };
let gameRunning = false;
// 플레이어와 장애물 그리기
function drawPlayer() {
ctx.fillStyle = '#007bff';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function drawObstacle() {
ctx.fillStyle = '#ff0000';
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
}
// 충돌 체크 함수
function checkCollision() {
if (player.x < obstacle.x + obstacle.width &&
player.x + player.width > obstacle.x &&
player.y < obstacle.y + obstacle.height &&
player.y + player.height > obstacle.y) {
return true;
}
return false;
}
// 게임 루프
function gameLoop() {
if (!gameRunning) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawObstacle();
obstacle.y += obstacle.speed;
if (obstacle.y > canvas.height) {
obstacle.y = -20;
obstacle.x = Math.random() * 360;
}
if (checkCollision()) {
alert('게임 오버!');
gameRunning = false;
} else {
requestAnimationFrame(gameLoop);
}
}
// 키보드 조작
document.addEventListener('keydown', (e) => {
if (!gameRunning) return;
if (e.key === 'ArrowLeft' && player.x > 0) {
player.x -= player.speed;
}
if (e.key === 'ArrowRight' && player.x < canvas.width - player.width) {
player.x += player.speed;
}
});
// 게임 시작 버튼
document.getElementById('startBtn').addEventListener('click', () => {
if (!gameRunning) {
obstacle.y = -20; // 장애물 초기화
gameRunning = true;
gameLoop();
}
});
</script>
</body>
</html>
'2024-소프트웨어과 1학년 > 소프트웨어 연구실' 카테고리의 다른 글
| [HTML5]사각 점프 게임 (2) | 2024.10.07 |
|---|---|
| [아기대학생김따루]소프트웨어과에서 살아남기[도전]_처음 시작을 어떻게? (11) | 2024.09.04 |