正文

揭秘HTML5五子棋源码：轻松上手，打造指尖上的围棋盛宴

/0 浏览量
0321

引言

HTML5作为现代网页开发的核心技术，为开发者提供了丰富的功能。本文将深入解析一个HTML5五子棋游戏的源码，帮助读者轻松上手，并打造属于自己的指尖上的围棋盛宴。

一、项目概述

本HTML5五子棋游戏采用原生JavaScript编写，结合HTML5 Canvas实现棋盘绘制和棋子放置。游戏界面简洁，操作方便，适合初学者学习和实践。

二、技术栈

  • HTML5：构建网页骨架
  • CSS3：美化界面，增强视觉效果
  • JavaScript：实现游戏逻辑和交互功能
  • Canvas：绘制棋盘和棋子

三、游戏设计

1. 游戏规则

  • 棋盘大小：15x15
  • 先手玩家：玩家1（黑子）
  • 后手玩家：玩家2（白子）
  • 胜利条件：任意一方向连成5子

2. 游戏流程

  1. 初始化棋盘，绘制15x15网格。
  2. 玩家轮流落子，选择棋盘上的空白格子放置棋子。
  3. 判断胜负，若一方连成5子，则宣布该方获胜。
  4. 游戏结束，显示获胜玩家或平局。

四、源码解析

1. HTML结构

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

2. CSS样式

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

#chessboard {
    border: 1px solid #000;
}

3. JavaScript核心代码

// 初始化棋盘
function initChessboard() {
    // 创建棋盘网格
    const grid = [];
    for (let i = 0; i < 15; i++) {
        grid[i] = [];
        for (let j = 0; j < 15; j++) {
            grid[i][j] = 0; // 0表示空白格子，1表示黑子，2表示白子
        }
    }
    return grid;
}

// 绘制棋盘
function drawChessboard(grid) {
    const canvas = document.getElementById('chessboard');
    const ctx = canvas.getContext('2d');
    const cellSize = canvas.width / 15;
    // 绘制网格线
    for (let i = 0; i <= 15; i++) {
        ctx.moveTo(i * cellSize, 0);
        ctx.lineTo(i * cellSize, canvas.height);
        ctx.moveTo(0, i * cellSize);
        ctx.lineTo(canvas.width, i * cellSize);
    }
    ctx.strokeStyle = '#000';
    ctx.stroke();
}

// 绘制棋子
function drawChess(grid, x, y, color) {
    const canvas = document.getElementById('chessboard');
    const ctx = canvas.getContext('2d');
    const cellSize = canvas.width / 15;
    const radius = cellSize / 2 - 2;
    ctx.beginPath();
    ctx.arc(x * cellSize + radius, y * cellSize + radius, radius, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
}

// 判断胜负
function checkWin(grid, x, y, color) {
    // 检查水平方向
    let count = 1;
    for (let i = 1; i <= 4; i++) {
        if (grid[y][x + i] === color) {
            count++;
        } else {
            break;
        }
    }
    for (let i = 1; i <= 4; i++) {
        if (grid[y][x - i] === color) {
            count++;
        } else {
            break;
        }
    }
    if (count === 5) {
        return true;
    }

    // 检查垂直方向
    count = 1;
    for (let i = 1; i <= 4; i++) {
        if (grid[y + i][x] === color) {
            count++;
        } else {
            break;
        }
    }
    for (let i = 1; i <= 4; i++) {
        if (grid[y - i][x] === color) {
            count++;
        } else {
            break;
        }
    }
    if (count === 5) {
        return true;
    }

    // 检查对角线方向
    count = 1;
    for (let i = 1; i <= 4; i++) {
        if (grid[y + i][x + i] === color) {
            count++;
        } else {
            break;
        }
    }
    for (let i = 1; i <= 4; i++) {
        if (grid[y - i][x - i] === color) {
            count++;
        } else {
            break;
        }
    }
    if (count === 5) {
        return true;
    }

    // 检查另一条对角线方向
    count = 1;
    for (let i = 1; i <= 4; i++) {
        if (grid[y + i][x - i] === color) {
            count++;
        } else {
            break;
        }
    }
    for (let i = 1; i <= 4; i++) {
        if (grid[y - i][x + i] === color) {
            count++;
        } else {
            break;
        }
    }
    if (count === 5) {
        return true;
    }

    return false;
}

// 游戏主逻辑
function game() {
    const grid = initChessboard();
    let currentPlayer = 1; // 1表示玩家1，2表示玩家2
    const canvas = document.getElementById('chessboard');
    const ctx = canvas.getContext('2d');
    canvas.addEventListener('click', function (e) {
        const x = Math.floor(e.offsetX / (canvas.width / 15));
        const y = Math.floor(e.offsetY / (canvas.height / 15));
        if (grid[y][x] === 0) {
            grid[y][x] = currentPlayer;
            drawChess(grid, x, y, currentPlayer === 1 ? 'black' : 'white');
            if (checkWin(grid, x, y, currentPlayer)) {
                alert(currentPlayer === 1 ? '玩家1获胜' : '玩家2获胜');
                return;
            }
            currentPlayer = currentPlayer === 1 ? 2 : 1;
        }
    });
}

// 初始化游戏
game();

五、总结

通过本文的解析，读者可以了解到HTML5五子棋游戏的基本原理和实现方法。在实际开发过程中，可以根据需求对游戏进行扩展，例如添加计时器、悔棋功能等。希望本文对您的学习和实践有所帮助。

-- 展开阅读全文 --