网页五子棋——对战前端
目录对战时序图
约定前后端交互接口
客户端实现
game_room.html
game_room.css
board.js
setScreenText
initGame()
初始化 WebSocket
发送落子请求
处置惩罚落子响应
在本篇文章中，我们就来实现网页五子棋的末了一个模块，也是最重要的一个模块——对战模块
在举行对战时，也必要使用到 WebSocket
对战时序图
https://i-blog.csdnimg.cn/direct/f36ceb1a807947ecb5c1f46091933684.png
我们来理解一下 对战过程：
1. 玩家进入游戏房间后，客户端与服务器建立连接
2. 当两个玩家都进入游戏房间时，服务器推送数据准备就绪响应
3. 先手方玩家开始落子，客户端发送落子请求
4. 服务器举行相干处置惩罚，并返回落子响应
5. 客户端吸收到落子响应，显示对应棋子，并判定是否有玩家胜利，若无，互换落子玩家
6. 玩家落子，客户端发送落子响应
......
7. 双方玩家持续落子，直到一方玩家胜利（假设 player1 胜利），服务器推送落子响应，并举行游戏房间销毁，修改玩家对应分数等操作
8. 客户端接吸收到落子响应，显示对应棋子，此时有玩家胜利，显示游戏胜利 / 游戏失败，并显示 返回游戏大厅 按钮
约定前后端交互接口
我们起首来分析可能会用到的接口：
当一个玩家进入游戏房间时，此时显示等待对手进入游戏房间
直到两个玩家都成功进入游戏房间，返回 游戏准备就绪响应，表示可以开始下棋了
当玩家点击对应位置时，发送落子请求，表示在对应位置落子，服务器举行处置惩罚后，返回落子响应
因此，我们约定连接 url 为：ws://127.0.0.1:8080/game
[连接响应]
{
"code": 200,
"data": {
"roomId": "2c7446d1-5105-49e6-8b6b-c935120c25de", // 房间号
"thisUserId": 1, // 玩家自己的 id
"thatUserId": 2, // 对手的 id
"whiteUserId": 1 // 先手方 id
},
"errorMessage": ""
} [落子请求]
{
"userId": 1, // 玩家自己的 id
"row": 6, // 落子位置——行
"col": 5 // 落子位置——列
} [落子响应]
{
"code": 200,
"data": {
"userId": 1, // 落子玩家 id
"row": 1, // 落子位置——行
"col": 2, // 落子位置——列
"winner": 0 // 获胜玩家 id
},
"errorMessage": ""
} 接着，我们先来实现客户端相干逻辑
客户端实现
game_room.html
我们起首创建 game_room.html 表示对战页面
game_room.html 页面主要包含两个部分：棋盘 和 显示当前状态的 div
https://i-blog.csdnimg.cn/direct/937ed033c37e4e51b5da6e4303e8959b.png
其中，棋盘我们使用 canvas 来举行绘制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>游戏房间</title>
</head>
<body>
<div class="container">
<div>
<div>
<canvas id="chess" width="450px" height="450px"></canvas>
</div>
<div id="screen">等待对手玩家进入游戏房间...</div>
</div>
</div>
</body>
</html>
game_room.css
创建 game_room.css，先对 screen 举行设置：
#screen {
width: 450px;
height: 50px;
margin-top: 10px;
background-color: antiquewhite;
font-size: 22px;
line-height: 50px;
text-align: center;
border-radius: 10px;
} 而对于棋盘和棋子的绘制，我们同一在 board.js 中实现
board.js
起首，我们创建一个全局变量 gameInfo，表示游戏和玩家相干信息：
gameInfo = {
roomId: null, // 房间 id
thisUserId: null, // 当前玩家id
thatUserId: null, // 对手玩家 id
isWhite: true, // 是否是先手
} setScreenText
接着，我们界说一个 setScreenText 方法，由于在落子时显示提示信息：
function setScreenText(me) {
let screen = document.querySelector('#screen');
if (me) {
screen.innerHTML = "轮到你落子了!";
} else {
screen.innerHTML = "轮到对方落子了!";
}
} 传递一个 布尔类型 的参数，若为 true，则表示当前轮到玩家落子，显示对应提示信息；若为 false，则表示当前轮到对手落子，也显示对应提示信息
initGame()
接着，我们必要对游戏举行初始化，因此，我们界说一个 initGame() 方法，来举行相干逻辑判定和棋盘/棋子的绘制操作：
function initGame() {
// 是我下还是对方下. 根据服务器分配的先后手情况决定
let me = gameInfo.isWhite;
// 游戏是否结束
let over = false;
let chessBoard = [];
//初始化chessBord数组(表示棋盘的数组)
for (let i = 0; i < 15; i++) {
chessBoard = [];
for (let j = 0; j < 15; j++) {
chessBoard = 0;
}
}
} 界说相干变量：
me 表示当前是轮到自己落子
over 表示游戏是否结束
chessBoard 表示游戏棋盘
接着对棋盘举行初始化，界说一个 15 * 15 大小的棋盘，并将其中元素都填充为 0，这样方便我们后续举行判定当前位置是否有子（若为 0，则未落子；若不为 0，则表示当前位置已有玩家落子）
接着，为棋盘添加背景图片：
let chess = document.querySelector('#chess');
let context = chess.getContext('2d');
context.strokeStyle = "#BFBFBF";
// 背景图片
let logo = new Image();
logo.src = "img/chessboard.jpg";
logo.onload = function () {
context.drawImage(logo, 0, 0, 450, 450);
initChessBoard();
}
其中，getContext() 方法用于获取一个 画图的上下文对象，获取到的对象（context）是用来举行画图操作的工具，其中必要吸收一个参数，用于指定所需的画图上下文类型
在这里，我们传递 2d，表示 二维画图 上下文，常用于平面图形的绘制、动画等
然后使用 strokeStyle 指定路径的颜色（棋盘网络的颜色）
然后界说一个 Image 对象，通过 src 属性指定图像的来源（图像可自行指定）
onload 是图像加载完毕时调用的方法
当图像加载完毕后，就使用 drawImage(img, dx, dy, dw, dh) 方法将绘制到 canvas，
其中：
dx 和 dy 是图像 x 坐标 和 y 坐标的起始位置
dw 和 dh 是图像绘制在 Canvas 上的宽度和高度
我们让图片充满整个画布：
logo.onload = function () {
context.drawImage(logo, 0, 0, 450, 450);
initChessBoard();
} 接着，我们在 initChessBoard 方法中，绘制棋盘网络:
function initChessBoard() {
for (let i = 0; i < 15; i++) {
context.moveTo(15 + i * 30, 15);
context.lineTo(15 + i * 30, 430);
context.stroke();
context.moveTo(15, 15 + i * 30);
context.lineTo(430, 15 + i * 30);
context.stroke();
}
} 通过一个 for 循环，在画布上循环画线：
其中：
context.moveTo(15 + i * 30, 15);
context.lineTo(15 + i * 30, 430);
context.stroke();
用于绘制从 (15 + i * 30, 15) 到 (15 + i * 30, 430) 的竖线
通过 15 + i * 30 盘算出每个竖线的 x 坐标
15 和 430 分别表示竖线的 起始 和 结束 的 y 坐标
例如，i = 1，此时 x = 45：
moveTo(45, 15) 表示将画笔移动到 （45, 15）的坐标位置，不绘制任何内容：
https://i-blog.csdnimg.cn/direct/a68111ca4ce741c7ae362b83c79faf36.png
接着 lineTo(45, 430) 表示从当前位置画一条直线到 （45, 430）坐标：
https://i-blog.csdnimg.cn/direct/866dd4eae06a4368b3bf16a2eda98ff1.png
末了 stroke() 方法会让这条线见效
接着，绘制横线：
context.moveTo(15, 15 + i * 30);
context.lineTo(430, 15 + i * 30);
context.stroke();
i 控制横线的 y 坐标，通过 15 + i * 30 盘算出每条横线的 y 坐标，15 和 430 是横线的 x 坐标的起始值和结束值
接着，我们通过 onStep 方法，对棋子举行绘制：
function oneStep(row, col, isWhite) {
context.beginPath();
context.arc(15 + col * 30, 15 + row * 30, 13, 0, 2 * Math.PI);
context.closePath();
var gradient = context.createRadialGradient(15 + col * 30 + 2, 15 + row * 30 - 2, 13, 15 + col * 30 + 2, 15 + row * 30 - 2, 0);
if (!isWhite) {
gradient.addColorStop(0, "#0A0A0A");
gradient.addColorStop(1, "#636766");
} else {
gradient.addColorStop(0, "#D1D1D1");
gradient.addColorStop(1, "#F9F9F9");
}
context.fillStyle = gradient;
context.fill();
} 该方法必要传递 3 个参数：
row：棋子所在的行，在棋盘上对应 y 坐标
col：棋子所在的列，在棋盘上对应 x 坐标
isWhite：决定棋子是白色（true）还是黑色（false）
起首 context.beginPath() 表示开始绘制一个新的路径，全部接下来的画图操作都会被视为这个路径的一部分，直到路径被关闭或填充
接着调用 arc 方法，绘制一个圆形：
context.arc(15 + col * 30, 15 + row * 30, 13, 0, 2 * Math.PI)
15 + col * 30 和 15 + row * 30 ：圆心的x 坐标 和 y 坐标，15 为偏移量，col * 30 表示每列之间的程度间距是 30 px，通过这个盘算方式，每个圆会程度间隔 30 像素（同样的，row * 30 表示每行之间的垂直间距是 30 像素。每个圆会垂直间隔 30 像素）
13 ：表示圆的半径为 13 px
0 和 2 * Math.PI：分别表示圆弧的的起始角度和结束角度。由于起始角度为 0，结束角度为 2 * Math.PI（360 度），这意味着这个弧线将覆盖完整的圆
接着，创建渐变色：
createRadialGradient(x1, y1, r1, x2, y2, r2)
var gradient = context.createRadialGradient(15 + col * 30 + 2, 15 + row * 30 - 2, 13, 15 + col * 30 + 2, 15 + row * 30 - 2, 0)
(15 + col * 30 + 2, 15 + row * 30 - 2)：渐变的起始点坐标，也就是渐变的中心位置
13：起始半径
(15 + col * 30 + 2, 15 + row * 30 - 2)：渐变的结束点坐标，也就是渐变的结束位置，终止点的坐标和起始点的坐标雷同，也就是渐变的止境和起点位于同一位置
0：结束半径
由于 13 是起始半径，0 为结束半径，这样就形成了一个从圆心到边缘渐变的效果，即渐变从一个较大的半径逐渐过渡到一个完全没有半径的点
创建径向渐变是为了在圆中实现颜色从中心向外扩展的效果。将这个渐变应用到棋子的填充，从而创造出从圆心逐渐改变颜色的视觉效果
接着，根据 isWhite 添加渐变色的颜色停顿点：
if (!isWhite) {
gradient.addColorStop(0, "#0A0A0A");
gradient.addColorStop(1, "#636766");
} else {
gradient.addColorStop(0, "#D1D1D1");
gradient.addColorStop(1, "#F9F9F9");
} 如果黑色棋子（!isWhite)），则从深色 #0A0A0A（黑色）到浅灰色 #636766
如果是白色棋子（isWhite），则从浅灰色 #D1D1D1 到接近白色的 #F9F9F9
末了，设置填充样式并填充棋子：
context.fillStyle = gradient;
context.fill();
当玩家点击棋盘对应位置时，就必要绘制对应棋子（先手为白子，后手为黑子）
接下来，我们就来添加对应的点击变乱：
chess.onclick = function (e) {
// 判断游戏是否结束
if (over) {
return;
}
// 当前是否轮到 我 落子
if (!me) {
return;
}
// 获取棋子的 x 和 y 坐标
let x = e.offsetX;
let y = e.offsetY;
// 注意, 横坐标是列, 纵坐标是行
let col = Math.floor(x / 30);
let row = Math.floor(y / 30);
if (chessBoard == 0) {
// TODO 发送坐标给服务器
}
} 其中，使用 Math.floor 向下取整，让每次点击操尴尬刁难应到网格线上
为什么是 / 30 ?
这是由于整个棋盘的大小是 450 * 450，而棋盘上是 15 行，15 列
因此，每行每列占用 30 px
当玩家未点击到网格线上时：
https://i-blog.csdnimg.cn/direct/69d0fbab7c5e445bbae35199856409cb.png
此时就必要将其对应到对应的网格线上：
https://i-blog.csdnimg.cn/direct/c60e5cdb7b9544a38383675fc8efa8cd.png
点击之后，若当前位置没有玩家落子，就可以将坐标发送给服务器，服务器举行对应处置惩罚（后续实现）
再绘制棋子，并将当前位置标志为 1 （表示这个位置已经有棋子了）
initGame() 方法完整代码：
function initGame() { // 是我下还是对方下. 根据服务器分配的先后手情况决定 let me = gameInfo.isWhite; // 游戏是否结束 let over = false; let chessBoard = []; //初始化chessBord数组(表示棋盘的数组) for (let i = 0; i < 15; i++) { chessBoard = []; for (let j = 0; j < 15; j++) { chessBoard = 0; } } let chess = document.querySelector('#chess');
let context = chess.getContext('2d');
context.strokeStyle = "#BFBFBF";
// 背景图片
let logo = new Image();
logo.src = "img/chessboard.jpg";
logo.onload = function () {
context.drawImage(logo, 0, 0, 450, 450);
initChessBoard();
}
// 绘制棋盘网格 function initChessBoard() {
for (let i = 0; i < 15; i++) {
context.moveTo(15 + i * 30, 15);
context.lineTo(15 + i * 30, 430);
context.stroke();
context.moveTo(15, 15 + i * 30);
context.lineTo(430, 15 + i * 30);
context.stroke();
}
} // 绘制一个棋子 /** * * @param {*} row 行 对应 y 坐标 * @param {*} col 列 对应 x 坐标 * @param {*} isWhite */ function oneStep(row, col, isWhite) {
context.beginPath();
context.arc(15 + col * 30, 15 + row * 30, 13, 0, 2 * Math.PI);
context.closePath();
var gradient = context.createRadialGradient(15 + col * 30 + 2, 15 + row * 30 - 2, 13, 15 + col * 30 + 2, 15 + row * 30 - 2, 0);
if (!isWhite) {
gradient.addColorStop(0, "#0A0A0A");
gradient.addColorStop(1, "#636766");
} else {
gradient.addColorStop(0, "#D1D1D1");
gradient.addColorStop(1, "#F9F9F9");
}
context.fillStyle = gradient;
context.fill();
} chess.onclick = function (e) { // 判定游戏是否结束 if (over) { return; } // 当前是否轮到 我 落子 if (!me) { return; } // 获取棋子的 x 和 y 坐标 let x = e.offsetX; let y = e.offsetY; // 注意, 横坐标是列, 纵坐标是行 let col = Math.floor(x / 30); let row = Math.floor(y / 30); if (chessBoard == 0) { // TODO 发送坐标给服务器, 服务器要返回结果 oneStep(row, col, gameInfo.isWhite); chessBoard = 1; } }} 初始化 WebSocket
接着，我们在 board.js 中加入 WebSocket 连接代码，实现前后端交互：
创建 WebSocket 对象，并挂载回调函数：
// 初始化 websocket
let webSocketUrl = "ws://127.0.0.1:8080/game";
let webSocket = new WebSocket(webSocketUrl);
// 处理游戏就绪
webSocket.onmessage = function(e) {
console.log("游戏就绪");
}
// 监听页面关闭事件，在页面关闭之前，手动调用 webSocket 的 close 方法
// 防止连接还没断开就关闭窗口
window.onbeforeunload = function() {
webSocket.close();
}
// 连接发生错误时，回到游戏大厅
webSocket.onerror = function() {
alert("连接异常！即将回到游戏大厅！");
location.replace("/game_hall.html");
} 当连接异常时，跳转到游戏大厅页面
在页面关闭之前，调用 close 方法关闭 WebSocket 连接
接着，我们实现 onmessage 方法，处置惩罚游戏就绪响应：
若 code != 200，则响应出现异常，我们先不举行处置惩罚，后续再举行补充
若 code = 200，则响应成功，对 gameInfo 和 棋盘举行初始化，并设置显示内容
webSocket.onmessage = function(e) {
console.log("游戏就绪");
let resp = JSON.parse(e.data);
if (resp.code != 200) {
alert("异常情况：" + resp.errorMessage);
return;
}
let readyResult = resp.data;
gameInfo.roomId =readyResult.roomId;
gameInfo.thisUserId = readyResult.thisUserId;
gameInfo.thatUserId = readyResult.thatUserId;
gameInfo.isWhite = (readyResult.whiteUserId == gameInfo.thisUserId);
// 初始化棋盘
initGame();
// 设置显示区域内容
setScreenText(gameInfo.isWhite);
}
发送落子请求
我们修改 onclick 函数，在点击落子时发送落子响应
https://i-blog.csdnimg.cn/direct/95d61e61befa487bb72f7d952810e415.png
而对于 绘制棋子 和 修改 chessBoard 操作，我们则将其放到吸收到落子响应时举行处置惩罚
实现 send 方法，用于发送落子请求：
function send(row, col) {
let req = {
userId: gameInfo.thisUserId,
row: row,
col: col
}
webSocket.send(JSON.stringify(req));
} 若当前位置未落子，发送落子请求：
if (chessBoard == 0) {
send(row, col);
}
处置惩罚落子响应
在前面的 onmessage 方法中，主要是针对 游戏就绪响应 来举行处置惩罚的，而在初始化之后，就只必要对落子响应举行处置惩罚了
因此，我们可以直接在 initGame 方法中修改 webSocket.onmessage 方法，让方法内部主要是针对落子响应举行处置惩罚：
同样的：
若 code != 200，则响应出现异常，我们先不举行处置惩罚，后续再举行补充
若 code = 200，则响应成功，举行后续逻辑处置惩罚
落子响应处置惩罚：
1. 判定 code 是否为 200，若不为，则打印异常情况，并返回
2. 判定落的子是自己的还是对手的
3. 绘制对应颜色的棋子
4. 标志当前位置有子
5. 互换落子轮次
6. 判定胜败 (winner 不为 0 时，游戏结束)
webSocket.onmessage = function(e) {
let resp = JSON.parse(e.data);
if (resp.code != 200) {
alert("异常情况：" + resp.errorMessage);
return;
}
let gameRes = resp.data;
if (gameInfo.thisUserId == gameRes.userId) {
// 自己落的子，绘制自己颜色的子
oneStep(gameRes.row, gameRes.col, gameInfo.isWhite);
} else if (gameInfo.thatUserId == gameRes.userId) {
// 对手的子，绘制对手颜色的子
oneStep(gameRes.row, gameRes.col, !gameInfo.isWhite);
} else {
console.log("落子异常");
return;
}
// 标记此处有棋子
chessBoard = 1;
// 交换轮次
me = !me;
let screenDiv = document.querySelector('#screen');
// 判定胜负
if(gameRes.winner != 0) {
if(gameRes.winner == gameInfo.thisUserId) {
screenDiv.innerHTML = "恭喜你！你赢了！";
} else if(gameRes.winner == gameInfo.thatUserId) {
screenDiv.innerHTML = "很遗憾！你输了..."
} else if(gameRes.winner == -1) {
screenDiv.innerHTML = "平局";
} else {
console.log("字段错误！" + gameRes.winner);
}
} else {
setScreenText(me);
}
} 其中，无论是自己落子还是对手落子，我们都将落子位置标志为1，这是由于在客户端不必要举行得胜的相干业务逻辑判定，也就不必要区分棋子
当游戏结束时，我们为其添加一个按钮，能够返回游戏大厅：
// 增加一个按钮，让玩家点击按钮后再返回到游戏大厅
let backBtn = document.createElement('button');
backBtn.id = "back-button";
backBtn.innerHTML = '回到大厅';
backBtn.onclick = function() {
location.replace("/game_hall.html");
}
let fatherDiv = document.querySelector('.container>div');
fatherDiv.appendChild(backBtn); 在 game_room.css 中添加对应样式：
#back-button {
width: 450px;
height: 50px;
background-color: rgb(237, 169, 79);
font-size: 20px;
color: gray;
border-radius: 10px;
text-align: center;
line-height: 50px;
margin-top: 10px;
border: none;
} 处置惩罚落子响应完整代码：
webSocket.onmessage = function(e) { let resp = JSON.parse(e.data); if (resp.code != 200) { alert("异常情况：" + resp.errorMessage); return; } let gameRes = resp.data; if (gameInfo.thisUserId == gameRes.userId) { // 自己落的子，绘制自己颜色的子 oneStep(gameRes.row, gameRes.col, gameInfo.isWhite); } else if (gameInfo.thatUserId == gameRes.userId) { // 对手的子，绘制对手颜色的子 oneStep(gameRes.row, gameRes.col, !gameInfo.isWhite); } else { console.log("落子异常"); return; } // 标志此处有棋子 chessBoard = 1; // 互换轮次 me = !me; let screenDiv = document.querySelector('#screen'); // 判定胜败 if(gameRes.winner != 0) { if(gameRes.winner == gameInfo.thisUserId) { screenDiv.innerHTML = "恭喜你！你赢了！"; } else if(gameRes.winner == gameInfo.thatUserId) { screenDiv.innerHTML = "很遗憾！你输了..." } else if(gameRes.winner == -1) { screenDiv.innerHTML = "平局"; } else { console.log("字段错误！" + gameRes.winner); } // 增加一个按钮，让玩家点击按钮后再返回到游戏大厅
let backBtn = document.createElement('button');
backBtn.id = "back-button";
backBtn.innerHTML = '回到大厅';
backBtn.onclick = function() {
location.replace("/game_hall.html");
}
let fatherDiv = document.querySelector('.container>div');
fatherDiv.appendChild(backBtn); } else { setScreenText(me); } } 至此，关于对战模块的前端代码我们就根本实现完毕了，更多的内容我们在实现服务器端逻辑时继续补充
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]