HTML CSS JavaScriptでつくる〇×ゲーム

初めに
準備
遊び方

初めに

このシンプルなTic Tac Toeゲームは、HTML、CSS、およびJavaScriptを使用して作成されました。2人のプレイヤーが交互に”X”と”O”をマスに配置し、先に3つ並べたプレイヤーが勝者となります。以下はゲームの特徴です。

直感的なプレイ: プレイヤーはクリックするだけでマスに”X”または”O”を配置できます。
美しいデザイン: シンプルで清潔なデザインが、ゲームプレイをより楽しくします。
結果表示: 勝者が決まると、または引き分けの場合には結果が表示されます。

HTML CSS JavaScriptでつくる〇×ゲームをご紹介します。

準備

HTMLファイル、CSSファイル、JavaScriptファイルをそれぞれindex.html、style.css、script.jsとして保存してください。

遊び方

プレイヤー1は”X”で、プレイヤー2は”O”です。
交互に空いているマスをクリックして”X”または”O”を配置します。
先に横、縦、または斜めに3つ並べたプレイヤーが勝者となります。
ゲームが引き分けになるか、どちらかが勝つと結果が表示されます。

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="style.css">
    <title>Tic Tac Toe</title>
</head>
<body>
    <div id="board" class="board">
        <div class="cell" onclick="handleClick(0)"></div>
        <div class="cell" onclick="handleClick(1)"></div>
        <div class="cell" onclick="handleClick(2)"></div>
        <div class="cell" onclick="handleClick(3)"></div>
        <div class="cell" onclick="handleClick(4)"></div>
        <div class="cell" onclick="handleClick(5)"></div>
        <div class="cell" onclick="handleClick(6)"></div>
        <div class="cell" onclick="handleClick(7)"></div>
        <div class="cell" onclick="handleClick(8)"></div>
    </div>
    <div id="result" class="result"></div>
    <script src="script.js"></script>
</body>
</html>

style.css

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 5px;
}

.cell {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.cell:hover {
    background-color: #e0e0e0;
}

.result {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
}

script.js

let currentPlayer = 'X';
let board = ['', '', '', '', '', '', '', '', ''];
let gameActive = true;

function handleClick(index) {
    if (gameActive && board[index] === '') {
        board[index] = currentPlayer;
        document.getElementsByClassName('cell')[index].innerText = currentPlayer;

        if (checkWinner()) {
            document.getElementById('result').innerText = `${currentPlayer} wins!`;
            gameActive = false;
        } else if (board.every(cell => cell !== '')) {
            document.getElementById('result').innerText = 'It\'s a draw!';
            gameActive = false;
        } else {
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        }
    }
}

function checkWinner() {
    const winningCombos = [
        [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
        [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
        [0, 4, 8], [2, 4, 6]             // Diagonals
    ];

    return winningCombos.some(combo =>
        combo.every(index => board[index] === currentPlayer)
    );
}