반응형
3. 간단한 게임 개발: 틱택토
프로젝트 개요
이번 프로젝트에서는 JavaScript를 사용하여 간단한 틱택토(Tic-Tac-Toe) 게임을 만들어보겠습니다. 두 플레이어가 번갈아가며 게임판에 자신의 마크(X 또는 O)를 놓고, 가로, 세로, 대각선으로 세 개의 마크를 먼저 나열하는 플레이어가 승리하는 게임입니다.
준비물
- HTML
- CSS
- JavaScript
단계 1: 기본 HTML 구조 만들기
먼저, 틱택토 게임의 기본 HTML 구조를 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic-Tac-Toe</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Tic-Tac-Toe</h1>
<div id="game-board">
<div class="cell" data-index="0"></div>
<div class="cell" data-index="1"></div>
<div class="cell" data-index="2"></div>
<div class="cell" data-index="3"></div>
<div class="cell" data-index="4"></div>
<div class="cell" data-index="5"></div>
<div class="cell" data-index="6"></div>
<div class="cell" data-index="7"></div>
<div class="cell" data-index="8"></div>
</div>
<button id="restart-button">Restart</button>
</div>
<script src="script.js"></script>
</body>
</html>단계 2: 기본 CSS 스타일링
틱택토 게임의 기본 스타일을 정의합니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
#game-board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 5px;
margin: 20px auto;
}
.cell {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
cursor: pointer;
}
#restart-button {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
#restart-button:hover {
background-color: #0056b3;
}단계 3: JavaScript로 기능 구현하기
이제 JavaScript를 사용하여 틱택토 게임의 기능을 구현합니다.
// script.js
document.addEventListener('DOMContentLoaded', function() {
const cells = document.querySelectorAll('.cell');
const restartButton = document.getElementById('restart-button');
let currentPlayer = 'X';
let gameBoard = ['', '', '', '', '', '', '', '', ''];
let isGameActive = true;
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
cells.forEach(cell => {
cell.addEventListener('click', handleCellClick);
});
restartButton.addEventListener('click', restartGame);
function handleCellClick(event) {
const cell = event.target;
const cellIndex = cell.getAttribute('data-index');
if (gameBoard[cellIndex] !== '' || !isGameActive) {
return;
}
updateCell(cell, cellIndex);
checkWinner();
}
function updateCell(cell, index) {
gameBoard[index] = currentPlayer;
cell.textContent = currentPlayer;
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}
function checkWinner() {
let roundWon = false;
for (let i = 0; i < winningConditions.length; i++) {
const [a, b, c] = winningConditions[i];
if (gameBoard[a] && gameBoard[a] === gameBoard[b] && gameBoard[a] === gameBoard[c]) {
roundWon = true;
break;
}
}
if (roundWon) {
announceWinner();
isGameActive = false;
return;
}
if (!gameBoard.includes('')) {
announceDraw();
}
}
function announceWinner() {
alert(`Player ${currentPlayer === 'X' ? 'O' : 'X'} has won!`);
}
function announceDraw() {
alert('The game is a draw!');
}
function restartGame() {
currentPlayer = 'X';
gameBoard = ['', '', '', '', '', '', '', '', ''];
isGameActive = true;
cells.forEach(cell => {
cell.textContent = '';
});
}
});결론
이로써 간단한 틱택토 게임을 완성했습니다. 두 플레이어가 번갈아가며 게임판에 자신의 마크(X 또는 O)를 놓고, 가로, 세로, 대각선으로 세 개의 마크를 먼저 나열하는 플레이어가 승리합니다. 이 프로젝트를 통해 JavaScript와 이벤트 핸들링, 게임 로직 구현을 배우게 됩니다.
다음 글에서는 로컬 스토리지를 이용한 메모 앱 만들기에 대해 알아보겠습니다. 다음 글에서 만나요!
반응형
'JavaScript 프로젝트 시리즈' 카테고리의 다른 글
| [JavaScript 프로젝트 시리즈] 6일차: JavaScript로 RESTful API 연동하기 (0) | 2024.08.06 |
|---|---|
| [JavaScript 프로젝트 시리즈] 5일차: JavaScript로 간단한 채팅 애플리케이션 만들기 (0) | 2024.08.05 |
| [JavaScript 프로젝트 시리즈]4일차: JavaScript로 로컬 스토리지를 이용한 메모 앱 만들기 (0) | 2024.08.04 |
| [JavaScript 프로젝트 시리즈] 2일차: JavaScript로 날씨 API를 이용한 날씨 앱 만들기 (0) | 2024.08.02 |
| [JavaScript 프로젝트 시리즈] 1일차: JavaScript로 간단한 To-Do 리스트 애플리케이션 만들기 (0) | 2024.08.01 |