引言
HTML5作为现代网页开发的核心技术,为开发者提供了丰富的功能。本文将深入解析一个HTML5五子棋游戏的源码,帮助读者轻松上手,并打造属于自己的指尖上的围棋盛宴。
一、项目概述
本HTML5五子棋游戏采用原生JavaScript编写,结合HTML5 Canvas实现棋盘绘制和棋子放置。游戏界面简洁,操作方便,适合初学者学习和实践。
二、技术栈
- HTML5:构建网页骨架
- CSS3:美化界面,增强视觉效果
- JavaScript:实现游戏逻辑和交互功能
- Canvas:绘制棋盘和棋子
三、游戏设计
1. 游戏规则
- 棋盘大小:15x15
- 先手玩家:玩家1(黑子)
- 后手玩家:玩家2(白子)
- 胜利条件:任意一方向连成5子
2. 游戏流程
- 初始化棋盘,绘制15x15网格。
- 玩家轮流落子,选择棋盘上的空白格子放置棋子。
- 判断胜负,若一方连成5子,则宣布该方获胜。
- 游戏结束,显示获胜玩家或平局。
四、源码解析
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五子棋游戏的基本原理和实现方法。在实际开发过程中,可以根据需求对游戏进行扩展,例如添加计时器、悔棋功能等。希望本文对您的学习和实践有所帮助。
