틱택토 게임을 HTML, CSS, JavaScript를 사용하여 웹에서 즐길 수 있는 간단한 웹 애플리케이션으로 구현할 수 있습니다. 아래 단계별로 코드를 작성해보겠습니다.
- HTML 코드: 게임 보드와 버튼을 포함한 기본 구조를 만듭니다.
- CSS 코드: 게임 보드의 스타일을 설정합니다.
- JavaScript 코드: 게임의 로직과 AI를 구현합니다.
1. HTML 코드 (index.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>
<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="reset-button">Reset Game</button>
<script src="script.js"></script>
</body>
</html>
2. CSS 코드 (styles.css)
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f9f9f9;
}
h1 {
margin-top: 20px;
}
#game-board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
justify-content: center;
margin-top: 20px;
}
.cell {
width: 100px;
height: 100px;
background-color: #ffebcd;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: bold;
cursor: pointer;
}
#reset-button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
}
3. JavaScript 코드 (script.js)
document.addEventListener('DOMContentLoaded', () => {
const cells = document.querySelectorAll('.cell');
const resetButton = document.getElementById('reset-button');
let board = Array(9).fill('');
let currentPlayer = 'X';
const humanPlayer = 'X';
const aiPlayer = 'O';
// Winning combinations
const winCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],
[0, 3, 6], [1, 4, 7], [2, 5, 8],
[0, 4, 8], [2, 4, 6]
];
const checkWin = (board, player) => {
return winCombinations.some(combination => {
return combination.every(index => {
return board[index] === player;
});
});
};
const checkTie = (board) => {
return board.every(cell => cell !== '');
};
const minimax = (board, player) => {
if (checkWin(board, humanPlayer)) return { score: -10 };
if (checkWin(board, aiPlayer)) return { score: 10 };
if (checkTie(board)) return { score: 0 };
const availableSpots = board.reduce((acc, cell, index) => {
return cell === '' ? acc.concat(index) : acc;
}, []);
const moves = [];
for (let i = 0; i < availableSpots.length; i++) {
const index = availableSpots[i];
const move = { index };
board[index] = player;
if (player === aiPlayer) {
move.score = minimax(board, humanPlayer).score;
} else {
move.score = minimax(board, aiPlayer).score;
}
board[index] = '';
moves.push(move);
}
if (player === aiPlayer) {
return moves.reduce((bestMove, move) => move.score > bestMove.score ? move : bestMove);
} else {
return moves.reduce((bestMove, move) => move.score < bestMove.score ? move : bestMove);
}
};
const aiMove = () => {
const bestMove = minimax(board, aiPlayer).index;
board[bestMove] = aiPlayer;
cells[bestMove].innerText = aiPlayer;
if (checkWin(board, aiPlayer)) {
alert('AI wins!');
resetGame();
} else if (checkTie(board)) {
alert('It\'s a tie!');
resetGame();
}
};
const cellClickHandler = (event) => {
const index = event.target.getAttribute('data-index');
if (board[index] !== '') return;
board[index] = humanPlayer;
event.target.innerText = humanPlayer;
if (checkWin(board, humanPlayer)) {
alert('You win!');
resetGame();
} else if (checkTie(board)) {
alert('It\'s a tie!');
resetGame();
} else {
aiMove();
}
};
const resetGame = () => {
board.fill('');
cells.forEach(cell => cell.innerText = '');
};
cells.forEach(cell => cell.addEventListener('click', cellClickHandler));
resetButton.addEventListener('click', resetGame);
});
이 스크립트는 다음과 같은 기능을 포함합니다:
minimax 함수로 AI가 최적의 움직임을 계산합니다.- 각 셀 클릭 이벤트를 처리하여 게임 상태를 업데이트합니다.
- 게임이 끝났을 때 알림을 보여주고 게임을 리셋하는 기능을 포함하고 있습니다.
이 코드를 사용하여 AI와 대결할 수 있는 틱택토 게임을 웹에서 즐길 수 있습니다. 각 파일을 각각의 .html, .css, .js 파일로 저장하고 동일한 폴더에 두세요. 그런 다음 브라우저에서 index.html 파일을 열어 게임을 즐기시면 됩니다.