간단한 미로 게임을 HTML과 JavaScript로 만들어보겠습니다. 이 게임은 기본적인 미로를 탐험하는 예제입니다.
1. HTML 파일 생성하기
HTML 파일을 생성합니다. 파일을 "index.html"로 저장하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>미로 게임</title>
</head>
<body>
<div id="maze"></div>
<script src="script.js"></script>
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장하세요. 스타일 시트에서 미로와 플레이어의 초기 스타일을 정의합니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#maze {
width: 400px;
height: 400px;
border: 2px solid #333;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 4px;
}
.cell {
width: 100%;
height: 100%;
background-color: #fff;
border: 1px solid #ccc;
}
.player {
background-color: #ff0000;
border-radius: 50%;
}
3. JavaScript 파일 생성하기
미로 게임의 로직을 처리할 JavaScript 파일을 생성합니다. 이 파일을 "script.js"로 저장하세요. JavaScript 파일에서 미로와 플레이어를 생성하고 플레이어의 움직임을 처리합니다.
// script.js
const maze = document.getElementById("maze");
const mazeSize = 4;
const cellCount = mazeSize * mazeSize;
const player = document.createElement("div");
player.className = "player";
for (let i = 0; i < cellCount; i++) {
const cell = document.createElement("div");
cell.className = "cell";
maze.appendChild(cell);
}
maze.appendChild(player);
let playerPosition = 0;
document.addEventListener("keydown", (event) => {
switch (event.key) {
case "ArrowUp":
if (playerPosition >= mazeSize) {
playerPosition -= mazeSize;
}
break;
case "ArrowDown":
if (playerPosition < cellCount - mazeSize) {
playerPosition += mazeSize;
}
break;
case "ArrowLeft":
if (playerPosition % mazeSize !== 0) {
playerPosition--;
}
break;
case "ArrowRight":
if (playerPosition % mazeSize !== mazeSize - 1) {
playerPosition++;
}
break;
}
player.style.gridArea = `${Math.floor(playerPosition / mazeSize) + 1} / ${playerPosition % mazeSize + 1}`;
});
4. 실행하기
위의 코드를 모두 작성한 후, HTML 파일을 브라우저에서 열어서 테스트하세요. 미로 안에서 화살표 키를 사용하여 플레이어를 움직일 수 있습니다.
'HTML 예제' 카테고리의 다른 글
| 깜빡이는 눈동자: CSS 애니메이션으로 눈동자 깜빡임 효과 (0) | 2023.12.06 |
|---|---|
| 텍스트 애니메이션: CSS로 텍스트가 글자 하나씩 나타나는 애니메이션 (0) | 2023.12.05 |
| 이펙트 버튼: 버튼 클릭 시 이펙트와 음악 재생 (0) | 2023.12.05 |
| 레인보우 그래디언트 배경: CSS로 페이지 전체에 레인보우 그래디언트 배경 생성 (0) | 2023.12.05 |
| 실시간 시계: JavaScript로 현재 시간을 실시간으로 표시 (0) | 2023.12.05 |
