一、整体概述
这是一个基于 HTML5、CSS 和 JavaScript 开发的五子棋网页游戏，同时结合了一个网页导航栏、背景音乐播放、视频展示等功能，整体页面设计围绕特定主题（从代码中 “别当欧尼酱了” 等元素推测）。网页主要由头部信息（包含标题、样式表链接等）、导航栏、游戏区域、背景相关元素（音乐、视频）以及用于实现游戏功能的 JavaScript 代码组成。
二、HTML 部分
- 文档声明与头部信息：
使用<!DOCTYPE html>声明文档类型为 HTML5。<html>标签表示 HTML 文档的根元素。<head>部分包含了网页的元数据，如字符编码<meta charset="UTF-8">、页面标题<title>五子棋</title>，以及外部样式表链接<link rel="stylesheet" href="欧尼酱.css">，还包含了一些内部样式定义用于设置页面元素的外观。 - 导航栏：
<div class="ar">包裹了整个导航栏部分。其中<div class="ar1">放置了 logo 图片；<div class="ar2">是导航菜单，通过<ul>和<li>列表展示了多个导航链接，如 “最新消息”“放送时间” 等，每个链接都有对应的文字和小图标。<div class="ar3">包含了背景音乐的<audio>标签、控制音乐播放的图片<img>以及一个视频的<video>标签。 - 游戏区域：
<div class="wu">是五子棋游戏的主要容器。内部包含了游戏标题展示区域<div class="wu1">、一个头像图片区域<div class="wu2">和实际游戏区域<div class="wu3">。游戏区域中有一个<canvas>元素用于绘制五子棋棋盘，还有一个 “重新开始” 按钮<a class="restart" onclick="rst()">。
三、CSS 部分
- 通用样式：
定义了.title类使标题居中显示；.chess类用于设置<canvas>元素的样式，使其以块级元素显示并居中，添加了阴影效果和指针样式。.restart类设置了 “重新开始” 按钮的样式，包括背景颜色、边框圆角、文字颜色和指针样式。 - 特定区域样式：
对div.wu及其子元素（如wu1、wu2等）设置了宽度、高度、背景、边框等样式，用于布局和美化游戏相关区域。对导航栏相关的类（如.ar、.ar1等）也有相应的样式设置，以实现整体页面的视觉效果。
四、JavaScript 部分
- 初始化与棋盘绘制：
获取<canvas>元素和其 2D 绘图上下文，定义drawChessBoard函数用于绘制 15x15 的五子棋棋盘，通过循环绘制横线和竖线。 - 赢法计算：
定义了一个三维数组wins来存储所有可能的赢法情况，通过多个循环统计了横线、竖线、正斜线和反斜线的赢法，并为每种赢法分配一个编号count。 - 游戏状态管理：
使用二维数组chessboard记录棋盘上每个位置是否落子（0 表示空白，1 表示已落子）。定义了me变量表示当前是否为人下棋（true表示人，false表示计算机），over变量表示游戏是否结束（true表示结束，false表示未结束）。还定义了myWin和computerWin数组记录人和计算机在每种赢法上的得分情况。 - 用户下棋逻辑：
为<canvas>元素添加点击事件监听器，当用户点击时，获取点击位置的坐标并转换为棋盘上的行列索引。判断该位置是否空白，若是则调用oneStep函数落子，并更新chessboard和myWin数组，检查是否获胜。如果未获胜且游戏未结束，则切换到计算机下棋。 - 计算机 AI：
computerAI函数用于计算机的下棋逻辑。通过计算空白位置在人和计算机各自赢法上的得分（myScore和computerScore数组），选择得分最高的位置落子。落子后更新chessboard和computerWin数组，检查是否获胜。如果未获胜且游戏未结束，则切换回人下棋。 - 落子与重新开始：
oneStep函数用于在指定位置绘制棋子（根据me的值确定颜色）。rst函数用于重新开始游戏，通过window.location.reload()方法刷新页面。 - 音乐播放控制：
在页面加载完成后，尝试自动播放背景音乐，并设置音量为 50%。为音乐控制图片添加点击事件监听器，实现音乐的播放和暂停功能。
五、总结
这个网页通过 HTML 构建基本结构，CSS 实现样式美化，JavaScript 完成五子棋游戏的核心逻辑以及音乐播放等功能。代码结构相对清晰，通过不同的函数和数据结构实现了游戏的各个方面，为网页游戏开发提供了一个不错的示例，同时也展示了如何在网页中集成多媒体元素。
以下是该五子棋游戏代码中一些核心功能的主要代码示例：
1. 棋盘绘制
var chess = document.getElementsByClassName("chess")[0];
var context = chess.getContext("2d");
context.strokeStyle = "#B9B9B9";
function drawChessBoard() {
for (var i = 0; i < 15; i++) {
// 绘制横线
context.moveTo(15, 15 + i * 30);
context.lineTo(435, 15 + i * 30);
context.stroke();
// 绘制竖线
context.moveTo(15 + i * 30, 15);
context.lineTo(15 + i * 30, 435);
context.stroke();
}
}
window.onload = function () {
drawChessBoard();
};2. 赢法统计
var wins = [];
for (var i = 0; i < 15; i++) {
wins[i] = [];
for (var j = 0; j < 15; j++) {
wins[i][j] = [];
}
}
var count = 0;
// 统计横线赢法
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 11; j++) {
for (var k = 0; k < 5; k++) {
wins[j + k][i][count] = true;
}
count++;
}
}
// 统计竖线赢法
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 11; j++) {
for (var k = 0; k < 5; k++) {
wins[i][j + k][count] = true;
}
count++;
}
}
// 统计正斜线赢法
for (var i = 0; i < 11; i++) {
for (var j = 0; j < 11; j++) {
for (var k = 0; k < 5; k++) {
wins[i + k][j + k][count] = true;
}
count++;
}
}
// 统计反斜线赢法
for (var i = 0; i < 11; i++) {
for (var j = 14; j > 3; j--) {
for (var k = 0; k < 5; k++) {
wins[i + k][j - k][count] = true;
}
count++;
}
}这里使用一个三维数组 wins 来记录所有可能的赢法，分别统计了横线、竖线、正斜线和反斜线的赢法情况。
3. 用户下棋逻辑
chess.onclick = function (e) {
if (over) {
return;
}
if (!me) {
return;
}
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
if (chessboard[i][j] == 0) {
oneStep(i, j, me);
chessboard[i][j] = 1;
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
myWin[k]++;
if (myWin[k] == 5) {
title.innerHTML = "恭喜你获胜了！！！~~~";
over = true;
}
}
}
}
if (!over) {
me = !me;
computerAI();
}
};当用户点击棋盘时，获取点击位置的坐标并转换为棋盘上的行列索引。若该位置未落子，则落子并检查是否获胜。若未获胜且游戏未结束，则切换到计算机下棋。
4. 计算机 AI 下棋逻辑
function computerAI() {
var myScore = [];
var computerScore = [];
for (var i = 0; i < 15; i++) {
myScore[i] = [];
computerScore[i] = [];
for (var j = 0; j < 15; j++) {
myScore[i][j] = 0;
computerScore[i][j] = 0;
}
}
var max = 0;
var x = 0, y = 0;
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
if (chessboard[i][j] == 0) {
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
if (myWin[k] == 1) {
myScore[i][j] += 200;
} else if (myWin[k] == 2) {
myScore[i][j] += 400;
} else if (myWin[k] == 3) {
myScore[i][j] += 2000;
} else if (myWin[k] == 4) {
myScore[i][j] += 10000;
}
if (computerWin[k] == 1) {
computerScore[i][j] += 220;
} else if (computerWin[k] == 2) {
computerScore[i][j] += 420;
} else if (computerWin[k] == 3) {
computerScore[i][j] += 2200;
} else if (computerWin[k] == 4) {
computerScore[i][j] += 20000;
}
}
}
if (myScore[i][j] > max) {
max = myScore[i][j];
x = i;
y = j;
} else if (myScore[i][j] == max) {
if (computerScore[i][j] > computerScore[x][y]) {
max = computerScore[i][j];
x = i;
y = j;
}
}
if (computerScore[i][j] > max) {
max = computerScore[i][j];
x = i;
y = j;
} else if (computerScore[i][j] == max) {
if (myScore[i][j] > myScore[x][y]) {
max = myScore[i][j];
x = i;
y = j;
}
}
}
}
}
oneStep(x, y, me);
chessboard[x][y] = 1;
for (var k = 0; k < count; k++) {
if (wins[x][y][k]) {
computerWin[k]++;
if (computerWin[k] == 5) {
title.innerHTML = "o(╯□╰)o抱歉计算机获胜了！！~~~";
over = true;
}
}
}
if (!over) {
me = !me;
}
}计算机 AI 通过计算每个空白位置在人和计算机各自赢法上的得分，选择得分最高的位置落子，并检查是否获胜。若未获胜且游戏未结束，则切换回人下棋。
5. 落子函数
function oneStep(i, j, me) {
context.beginPath();
context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
context.closePath();
var color;
if (me) {
color = "#000000";
} else {
color = "red";
}
context.fillStyle = color;
context.fill();
}6. 重新开始函数
function rst() {
window.location.reload();
}7. 音乐播放控制
document.addEventListener('DOMContentLoaded', function () {
const bgMusic = document.getElementById('bgMusic');
const musicControl = document.getElementById('musicControl');
function attemptAutoPlay() {
bgMusic.volume = 0.5;
const playPromise = bgMusic.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// 自动播放成功
}).catch(error => {
console.log('自动播放被阻止，请点击Logo手动播放');
});
}
}
attemptAutoPlay();
musicControl.addEventListener('click', function () {
if (bgMusic.paused) {
bgMusic.play();
} else {
bgMusic.pause();
}
});
});这段代码在页面加载完成后尝试自动播放背景音乐，并设置音量为 50%。为音乐控制图片添加点击事件监听器，实现音乐的播放和暂停功能。
效果展示
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
