正文

揭秘HTML5五子棋：轻松实现经典游戏，代码攻略大公开

/0 浏览量
0320

引言

五子棋是一款简单而经典的棋类游戏，深受各年龄段人群的喜爱。随着HTML5技术的发展，我们可以轻松地在网页上实现五子棋游戏。本文将详细介绍如何使用HTML5、CSS3和JavaScript来创建一个简单的五子棋游戏。

准备工作

在开始之前，请确保您的环境中已安装以下工具：

  • HTML5兼容的浏览器（如Chrome、Firefox等）
  • 基本的HTML、CSS和JavaScript知识

游戏界面设计

首先，我们需要设计游戏界面。以下是一个简单的HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5五子棋</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="gameBoard"></div>
    <script src="script.js"></script>
</body>
</html>

然后，使用CSS来美化界面：

#gameBoard {
    width: 300px;
    height: 300px;
    margin: 20px auto;
    background-color: #f0f0f0;
    display: grid;
    grid-template-columns: repeat(15, 20px);
    grid-template-rows: repeat(15, 20px);
}

.cell {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
}

游戏逻辑实现

接下来，我们需要用JavaScript来实现游戏逻辑。以下是一个简单的实现：

const boardSize = 15; // 棋盘大小
const player1 = 'black'; // 黑棋
const player2 = 'white'; // 白棋
let currentPlayer = player1; // 当前玩家
let board = []; // 棋盘数组

// 初始化棋盘
function initBoard() {
    for (let i = 0; i < boardSize; i++) {
        board[i] = [];
        for (let j = 0; j < boardSize; j++) {
            board[i][j] = null;
        }
    }
}

// 绘制棋盘
function drawBoard() {
    const gameBoard = document.getElementById('gameBoard');
    gameBoard.innerHTML = '';
    for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
            const cell = document.createElement('div');
            cell.className = 'cell';
            cell.addEventListener('click', () => placePiece(i, j));
            gameBoard.appendChild(cell);
        }
    }
}

// 放置棋子
function placePiece(x, y) {
    if (board[x][y] !== null) return; // 棋盘已有棋子
    board[x][y] = currentPlayer;
    const cell = document.querySelector(`.cell:nth-child(${x * boardSize + y + 1})`);
    cell.style.backgroundColor = currentPlayer === player1 ? '#000' : '#fff';
    currentPlayer = currentPlayer === player1 ? player2 : player1;
    checkWin(x, y);
}

// 检查胜利
function checkWin(x, y) {
    // ...（此处省略胜利检查代码）
}

// 初始化游戏
initBoard();
drawBoard();

游戏胜利检查

胜利检查是五子棋游戏的核心部分。以下是一个简单的胜利检查实现：

// 检查胜利
function checkWin(x, y) {
    const directions = [
        [1, 0], // 水平
        [0, 1], // 垂直
        [1, 1], // 右上
        [1, -1] // 右下
    ];
    for (let i = 0; i < directions.length; i++) {
        let count = 1;
        let dx = directions[i][0];
        let dy = directions[i][1];
        let nx = x + dx;
        let ny = y + dy;
        while (nx >= 0 && nx < boardSize && ny >= 0 && ny < boardSize && board[nx][ny] === currentPlayer) {
            count++;
            nx += dx;
            ny += dy;
        }
        nx = x - dx;
        ny = y - dy;
        while (nx >= 0 && nx < boardSize && ny >= 0 && ny < boardSize && board[nx][ny] === currentPlayer) {
            count++;
            nx -= dx;
            ny -= dy;
        }
        if (count >= 5) {
            alert(`${currentPlayer} 胜利了！`);
            return true;
        }
    }
    return false;
}

总结

通过以上步骤，我们成功实现了一个简单的HTML5五子棋游戏。当然，这只是一个基础版本，您可以根据自己的需求添加更多功能，如悔棋、计时器等。希望本文能对您有所帮助！

-- 展开阅读全文 --