前端实战：网页版井字棋游戏实现

2. CSS 装饰

编写 CSS 代码对页面进行样式修饰，包括字体引入、全局重置、布局设计及交互反馈。

1. 引入字体和全局样式

/* 引入自定义字体 Bungee Inline */
@import url("https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap");

/* 全局样式 */
* {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
}

这部分引入了自定义字体并清除了默认边距，确保布局一致性。

2. 设置 body 样式

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    font-family: "Bungee Inline", cursive;
    color: #f5f5f5;
    overflow: hidden;
    background-image: linear-gradient(to top, #a8edea 0%, #ffc7d9 100%);
}

使用 Flexbox 实现内容垂直水平居中，设置视口高度及渐变背景。

3. 设置 .wrapper 样式

.wrapper {
    background-color: #55acee53;
    padding: 50px;
}

包裹游戏内容的容器，添加内边距避免内容贴边。

4. 设置 .current-status 样式

.current-status {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}
.current-status p {
    margin: 0 5px 0 0;
    font-size: 24px;
}
.current-status img {
    width: auto;
    height: 32px;
}

显示当前回合玩家信息，居中对齐。

5. 设置 board 和 .cell 样式

.board {
    display: grid;
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    grid-template-rows: repeat(3, minmax(90px, 1fr));
    grid-gap: 12px;
    width: 100%;
    height: 100%;
    max-width: 495px;
    margin: 0 auto 15px;
}
.cell {
    cursor: pointer;
    position: relative;
    background-color: #f5f5f5;
    width: 90px;
    height: 90px;
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}
.cell:hover {
    opacity: 1;
}

使用 CSS Grid 创建 3x3 棋盘，设置单元格悬停透明度变化以提供交互反馈。

6. 鼠标悬浮时的图片效果

/* 鼠标悬浮时显示图片 */
.board.unicorn .cell:not(.dragon):not(.unicorn):hover::before,
.board.dragon .cell:not(.dragon):not(.unicorn):hover::before {
    content: "";
    width: 70%;
    height: 70%;
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background-size: contain;
    opacity: 50%;
}
.board.unicorn .cell:not(.dragon):hover::before {
    background-image: url("./1.gif");
}
.board.dragon .cell:not(.unicorn):hover::before {
    background-image: url("./2.gif");
}

利用伪元素在空白格子上显示对应的棋子预览图。

7. 设置 game-end-overlay 样式

.game-end-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0d1021;
}
.game-end-overlay.show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

控制游戏结束弹窗的显示与隐藏。

8. 设置 .winning-message 样式

.winning-message {
    margin: -50px 0 20px;
}
.winning-message img {
    width: 100px;
}
.winning-message p {
    font-size: 48px;
    margin: 0;
}

显示获胜消息或平局提示。

9. 重启按钮样式

.reset-button {
    color: #f5f5f5;
    font-family: "Bungee Inline", cursive;
    font-size: 30px;
    white-space: nowrap;
    border: none;
    padding: 10px 20px;
    background-color: #a186be;
    box-shadow: 5px 5px 0 #55acee;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
    position: relative;
}
.reset-button:hover {
    transform: scale(1.2);
}
.reset-button:active {
    top: 6px;
    left: 6px;
    box-shadow: none;
    background-color: #9475b5;
}

定义'重新开始'按钮的交互样式。

3. JavaScript 交互

添加 JavaScript 逻辑以实现游戏的核心功能。

1. 获取页面元素

const board = document.getElementById('board');
const cells = document.querySelectorAll('[data-cell]');
const currentStatus = document.getElementById('currentStatus');
const resetButton = document.getElementById('resetButton');
const gameEndOverlay = document.querySelector('.game-end-overlay');
const currentBeastStatusImg = document.getElementById('currentBeastImg');
const winningMessage = document.querySelector('[data-winning-message]');
const winningMessageText = document.querySelector('[data-winning-message] p');
const winningMessageImg = document.createElement('img');

通过 ID 和选择器获取操作所需的 DOM 节点。

2. 初始化游戏状态

let gameIsLive = true;
let unicornTurn = true; // true 代表独角兽，false 代表龙
let winner = null;

定义游戏状态变量。

3. 所有获胜组合

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]             // 对角线
];

定义所有可能的连线索引组合。

4. 设置鼠标悬停时的样式

const setBoardHoverClass = () => {
    board.classList.remove('unicorn');
    board.classList.remove('dragon');
    if (unicornTurn) {
        board.classList.add('unicorn');
    } else {
        board.classList.add('dragon');
    }
};

根据当前回合更新棋盘类名，以改变悬停预览图。

5. 在格子上放置图片

const placeBeastImg = (cell, currentBeast) => {
    cell.classList.add(currentBeast);
};

为点击的格子添加对应玩家的类名。

6. 切换回合

const swapTurns = () => {
    unicornTurn = !unicornTurn;
};

反转当前回合标志。

7. 更新当前状态

const updateCurrentStatus = () => {
    if (unicornTurn) {
        currentBeastStatusImg.src = './1.gif';
        currentBeastStatusImg.alt = 'unicorn';
    } else {
        currentBeastStatusImg.src = './2.gif';
        currentBeastStatusImg.alt = 'dragon';
    }
};

更新顶部状态栏的图片。

8. 检查是否获胜

const checkWin = (currentBeast) => {
    return winningCombinations.some(combination => {
        return combination.every(i => {
            return cells[i].classList.contains(currentBeast);
        });
    });
};

遍历获胜组合，判断是否有任意一组被当前玩家占领。

9. 判断是否平局

const isDraw = () => {
    return [...cells].every(cell => {
        return cell.classList.contains('unicorn') || cell.classList.contains('dragon');
    });
};

检查所有格子是否均已被填满。

10. 开始游戏

const startGame = () => {
    cells.forEach(cell => {
        winningMessageImg.remove();
        cell.classList.remove('unicorn', 'dragon');
        cell.removeEventListener('click', handleCellClick);
        cell.addEventListener('click', handleCellClick, { once: true });
    });
    setBoardHoverClass();
    gameEndOverlay.classList.remove('show');
};

重置棋盘状态，重新绑定事件。

11. 结束游戏

const endGame = (draw) => {
    if (draw) {
        winningMessageText.innerText = `draw!`;
    } else {
        winningMessageImg.src = unicornTurn ? './1.gif' : './2.gif';
        winningMessageImg.alt = unicornTurn ? 'unicorn' : 'dragon';
        winningMessage.insertBefore(winningMessageImg, winningMessageText);
        winningMessageText.innerText = `wins!!!`;
    }
    gameEndOverlay.classList.add('show');
};

显示结果并展示结束遮罩层。

12. 处理格子点击事件

const handleCellClick = (e) => {
    const cell = e.target;
    const currentBeast = unicornTurn ? 'unicorn' : 'dragon';
    placeBeastImg(cell, currentBeast);
    if (checkWin(currentBeast)) {
        endGame(false);
    } else if (isDraw()) {
        endGame(true);
    } else {
        swapTurns();
        updateCurrentStatus();
        setBoardHoverClass();
    }
};

核心交互逻辑：落子、判胜、判平局或切换回合。

13. 重置游戏

resetButton.addEventListener('click', startGame);

绑定重启按钮事件。

14. 启动游戏

startGame();

初始化并启动游戏。

完整代码示例

以下是整合后的完整 HTML 文件代码，可直接保存运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页井字棋</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap");
        * {
            padding: 0;
            margin: 0;
            box-sizing: inherit;
        }
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            text-align: center;
            font-family: "Bungee Inline", cursive;
            color: #f5f5f5;
            overflow: hidden;
            background-image: linear-gradient(to top, #a8edea 0%, #ffc7d9 100%);
        }
        .wrapper {
            background-color: #55acee53;
            padding: 50px;
        }
        .current-status {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 25px;
        }
        .current-status p {
            margin: 0 5px 0 0;
            font-size: 24px;
        }
        .current-status img {
            width: auto;
            height: 32px;
        }
        .board {
            display: grid;
            grid-template-columns: repeat(3, minmax(90px, 1fr));
            grid-template-rows: repeat(3, minmax(90px, 1fr));
            grid-gap: 12px;
            width: 100%;
            height: 100%;
            max-width: 495px;
            margin: 0 auto 15px;
        }
        .board.unicorn .cell:not(.dragon):not(.unicorn):hover::before,
        .board.dragon .cell:not(.dragon):not(.unicorn):hover::before {
            content: "";
            width: 70%;
            height: 70%;
            display: block;
            position: absolute;
            background-repeat: no-repeat;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            background-size: contain;
            opacity: 50%;
        }
        .board.unicorn .cell:not(.dragon):hover::before {
            background-image: url("./1.gif");
        }
        .board.dragon .cell:not(.unicorn):hover::before {
            background-image: url("./2.gif");
        }
        .cell {
            cursor: pointer;
            position: relative;
            background-color: #f5f5f5;
            width: 90px;
            height: 90px;
            opacity: 0.5;
            transition: opacity 0.2s ease-in-out;
        }
        .cell:hover {
            opacity: 1;
        }
        .cell.dragon, .cell.unicorn {
            opacity: 1;
            position: relative;
            cursor: not-allowed;
        }
        .cell.dragon::before, .cell.unicorn::before {
            content: "";
            width: 70%;
            height: 70%;
            display: block;
            position: absolute;
            background-repeat: no-repeat;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            background-size: contain;
        }
        .cell.dragon::before {
            background-image: url("./2.gif");
        }
        .cell.unicorn::before {
            background-image: url("./1.gif");
        }
        .game-end-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #0d1021;
        }
        .game-end-overlay.show {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .winning-message {
            margin: -50px 0 20px;
        }
        .winning-message img {
            width: 100px;
        }
        .winning-message p {
            font-size: 48px;
            margin: 0;
        }
        .btn-container {
            position: relative;
        }
        .reset-button {
            color: #f5f5f5;
            font-family: "Bungee Inline", cursive;
            font-size: 30px;
            white-space: nowrap;
            border: none;
            padding: 10px 20px;
            background-color: #a186be;
            box-shadow: 5px 5px 0 #55acee;
            cursor: pointer;
            transition: transform 0.1s ease-in-out;
            position: relative;
        }
        .reset-button:hover {
            transform: scale(1.2);
        }
        .reset-button:active {
            top: 6px;
            left: 6px;
            box-shadow: none;
            background-color: #9475b5;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="current-status">
            <img id="currentBeastImg" src="./1.gif" alt="unicorn">
            <p id="currentStatus">'s turn</p>
        </div>
        <div id="board" class="board">
            <div data-cell></div>
            <div data-cell></div>
            <div data-cell></div>
            <div data-cell></div>
            <div data-cell></div>
            <div data-cell></div>
            <div data-cell></div>
            <div data-cell></div>
            <div data-cell></div>
        </div>
        <div class="game-end-overlay">
            <div class="winning-message" data-winning-message>
                <p></p>
            </div>
            <div class="btn-container">
                <button id="resetButton">play again</button>
            </div>
        </div>
    </div>
    <script>
        const board = document.getElementById('board');
        const cells = document.querySelectorAll('[data-cell]');
        const currentStatus = document.getElementById('currentStatus');
        const resetButton = document.getElementById('resetButton');
        const gameEndOverlay = document.querySelector('.game-end-overlay');
        const currentBeastStatusImg = document.getElementById('currentBeastImg');
        const winningMessage = document.querySelector('[data-winning-message]');
        const winningMessageText = document.querySelector('[data-winning-message] p');
        const winningMessageImg = document.createElement('img');

        let gameIsLive = true;
        let unicornTurn = true;
        let winner = null;

        const winningCombinations = [
            [0, 1, 2], [3, 4, 5], [6, , ],
            [, , ], [, , ], [, , ],
            [, , ], [, , ]
        ];

          = () => {
            board..();
            board..();
             (unicornTurn) {
                board..();
            }  {
                board..();
            }
        }

          = () => {
            cell..(currentBeast);
        }

          = () => {
            unicornTurn = !unicornTurn;
        }

          = () => {
             (unicornTurn) {
                currentBeastStatusImg. = ;
                currentBeastStatusImg. = ;
            }  {
                currentBeastStatusImg. = ;
                currentBeastStatusImg. = ;
            }
        }

          = () => {
             winningCombinations.( {
                 combination.( {
                     cells[i]..(currentBeast);
                });
            });
        }

          = () => {
             [...cells].( {
                 cell..() || cell..();
            });
        }

          = () => {
            cells.( {
                winningMessageImg.();
                cell..();
                cell..();
                cell.(, handleCellClick);
                cell.(, handleCellClick, { :  });
            });
            ();
            gameEndOverlay..();
        }

          = () => {
             (draw) {
                winningMessageText. = ;
            }  {
                winningMessageImg. = unicornTurn ?  : ;
                winningMessageImg. = unicornTurn ?  : ;
                winningMessage.(winningMessageImg, winningMessageText);
                winningMessageText. = 
            }
            gameEndOverlay..();
        }

          = () => {
             cell = e.;
             currentBeast = unicornTurn ?  : ;
            (cell, currentBeast);
             ((currentBeast)) {
                ();
            }   (()) {
                ();
            }  {
                ();
                ();
                ();
            }
        }

        resetButton.(, startGame);
        ();
    </script>
</body>
</html>