HTML，CSS，JavaScript实现——井字棋游戏

Traveller_man

于 2024-07-29 15:47:48 发布

阅读量179

点赞数 5

文章标签： javascript 游戏开发语言 html css 前端算法

本文链接：https://blog.csdn.net/Traveller_man/article/details/140772798

版权

和大家分享一个经典的游戏项目——井字棋游戏。这个项目不仅能带你回味童年的乐趣，还能帮助你练习 HTML、CSS 和 JavaScript 编程。

项目介绍

井字棋游戏是一个两人对战游戏，玩家轮流在一个3x3的网格上标记 X 或 O。先将三个标记连成一条直线（水平、垂直或对角线）的玩家获胜。如果所有的格子都被填满且没有玩家获胜，则游戏结束，结果为平局。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>井字棋游戏</title>
    <style>
        /* 设置整个页面的样式 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f9f9f9;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        /* 设置标题样式 */
        h1 {
            font-size: 2.5em;
            color: #333;
            margin-bottom: 20px;
        }

        /* 设置游戏板的样式 */
        #game-board {
            display: grid;
            grid-template-columns: repeat(3, 120px);
            grid-template-rows: repeat(3, 120px);
            gap: 10px;
            background-color: #333;
            padding: 10px;
            border-radius: 10px;
        }

        /* 设置每个单元格的样式 */
        .cell {
            width: 120px;
            height: 120px;
            background-color: #fff;
            border: 2px solid #ddd;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            color: #333;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
        }

        /* 设置单元格的悬停效果 */
        .cell:hover {
            background-color: #f0f0f0;
            transform: scale(1.05);
        }

        /* 设置 X 的样式 */
        .cell.x {
            color: #ff6347; /* 番茄色 */
        }

        /* 设置 O 的样式 */
        .cell.o {
            color: #4682b4; /* 钢蓝色 */
        }

        /* 设置按钮的样式 */
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 1.2em;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        /* 设置按钮的悬停效果 */
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>井字棋游戏</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">重新开始</button>
    <script>
        // 获取所有单元格元素
        const cells = document.querySelectorAll('.cell');
        // 获取重新开始按钮
        const resetButton = document.getElementById('reset-button');
        // 设置当前玩家，默认为 'X'
        let currentPlayer = 'X';
        // 创建一个长度为 9 的数组，用于存储游戏状态，初始值为 null
        let board = Array(9).fill(null);
        // 标记游戏是否在进行中
        let gameActive = true;

        // 定义胜利组合
        const winningCombinations = [
            [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 checkWinner = () => {
            for (const [a, b, c] of winningCombinations) {
                if (board[a] && board[a] === board[b] && board[a] === board[c]) {
                    return board[a];
                }
            }
            return board.includes(null) ? null : 'Tie';
        };

        // 处理单元格点击事件
        const handleClick = (e) => {
            const index = e.target.dataset.index;
            // 如果单元格已被点击或游戏已结束，则返回
            if (board[index] || !gameActive) return;

            // 更新单元格内容和样式
            board[index] = currentPlayer;
            e.target.textContent = currentPlayer;
            e.target.classList.add(currentPlayer.toLowerCase());

            // 检查是否有获胜者
            const winner = checkWinner();
            if (winner) {
                gameActive = false;
                if (winner === 'Tie') {
                    alert("平局！");
                } else {
                    alert(`${winner} 胜!`);
                }
                return;
            }

            // 切换当前玩家
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        };

        // 重置游戏
        const resetGame = () => {
            board.fill(null);
            cells.forEach(cell => {
                cell.textContent = '';
                cell.classList.remove('x', 'o');
            });
            currentPlayer = 'X';
            gameActive = true;
        };

        // 为每个单元格添加点击事件监听器
        cells.forEach(cell => cell.addEventListener('click', handleClick));
        // 为重新开始按钮添加点击事件监听器
        resetButton.addEventListener('click', resetGame);
    </script>
</body>
</html>

Traveller_man

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML，CSS，JavaScript实现——井字棋游戏

井字棋游戏是一个两人对战游戏，玩家轮流在一个3x3的网格上标记 X 或 O。先将三个标记连成一条直线（水平、垂直或对角线）的玩家获胜。如果所有的格子都被填满且没有玩家获胜，则游戏结束，结果为平局。
复制链接

扫一扫