HTML5 游戏开发实战 ｜ 五子棋

01、五子棋游戏设计的思路

在下棋过程中，为了保存下过的棋子的信息，使用数组 chessData。chessData［x］［y］存储棋盘(x，y)处棋子信息，1 代表黑子，2 代表白子，0 为无棋子。

整个游戏运行时，在鼠标单击事件中判断单击位置是否合法，既不能在已有棋的位置单击，也不能超出游戏棋盘边界，如果合法则将此位置信息加入 chessData，同时调用 judge(x，y，chess)判断游戏的输赢。

02、关键技术

判断输赢的算法

本游戏关键技术是判断输赢的算法。对于算法具体实现大致如下：

判断 X=Y 轴上是否形成五子连珠；

判断 X=-Y 轴上是否形成五子连珠；

判断 X 轴上是否形成五子连珠；

判断 Y 轴上是否形成五子连珠。

以上 4 种情况只要任何一种成立，那么就可以判断输赢。

判断输赢实际上不用扫描整个棋盘，如果能得到刚下的棋子位置(x，y)，仅在此棋子附近横竖斜方向均判断一遍即可。

judge(x，y,chess)判断这个棋子是否和其他的棋子连成五子，即输赢判断。它是以(x,y)为中心，横向、纵向、斜方向判断并统计相同个数来实现的。

以水平方向(横向)判断为例，以(x，y)为中心计算水平方向棋子数量时，首先向左统计，相同则 count1 加 1；然后向右统计，相同则 count1 加 1。统计完成后，如果 count1>=5 则说明水平方向连成五子，其他方向同理。

function judge(x，y， chess)
//判断该局的输赢
//保存当前共有多少相同的黑色棋子相连var count1 =0;var count2 = 0;var count3 = 0;var count4 = 0://左右判断,横向的判断//判断横向是否有 5个棋子相连,特点是纵坐标相同,即 chessData[x][y]中y值是相同的//向左统计for(var i=x;i>=0;i--)[if(chessData[i][y] != chess){break;
count1++;
for(var i=x+1;<15; i++)!if(chessData[il[y] != chess) {break;
//向右统计
count1++
//上下判断,纵向的判断
for(var i=y;i>=0;i--)(if(chessData[x][i] != chess)break;
count2++;
for(var i=y+1;i<15;i++) /if(chessData[x][i] != chess)[break;
c懵ou对nt2++;
//左上右下判断for(var i=x,j=y;i>=0,j>=0;i--，j-- ){if(chessDatalilli] != chess)
break;count3++;
for(var i=x+1,j=y+1; < 15，j< 15; i++,j++) (if(chessData[i][j] != chess){break;
count3++:
//右上左下判断
for(var i=x，j=y;i>=0，j<15;i--，j++){if(chessDatalili] != chess)!
break;
count4++;
for(var i=x+1,j=y-1; i< 15,j>=0; i++,j-- ) {if(chessData[][j] != chess){break;
count4++;
count3
if(count1>=5count2 >
count4
if(chess == 1)
alert("白棋赢了");
else
alert("黑棋赢了");
isWell= true;//设置该局已经赢了，不可以再下棋

程序中 judge(x，y，chess)函数判断 4 种情况下是否连成五子从而判断出输赢。本程序中每下一步棋子，调用 judge(x，y，chess) 函数判断是否已经连成五子，如果已经连成五子，则弹出显示输赢结果对话框。

图形上色

如果想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。

fillStyle = color
strokeStyle = color

strokeStyle 是用于设置图形轮廓的颜色，而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串、渐变对象或者图案对象。默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000)。

下面的例子都表示同一种颜色。

//这些 fillStyle 的值均为，橙色
ctx.fillStyle="orange";
ctx.fillStyle="#FFA500";
ctx.fillStyle="rgb(255,165,0)"；
ctx.fillStyle ="rgba(255,165,0,1)";

本游戏中棋盘的背景色即是采用“orange”。

context.fillStyle="orange"；
context.fillRect(0,0,640,640);

03、五子棋游戏设计的步骤

游戏页面 five．html

游戏页面很简单，就是页面加载调用 drawRect()函数绘制棋盘，从而开始游戏。

/head >
<body onload ="drawRect()">
<div>
< canvas width= "640”id = "canvas"onmousedown = "play(event)" height = "640"> </canvas >
</div>
</body>
</htmI>

设计脚本(Main．js)

1． 初始化棋盘数组

定义两个棋子图片对象 img_b 和 img_w，初始化棋盘数组 chessData，其值 0 为没有走过的，1 为白棋走的，2 为黑棋走的；所以最初值都是 0。

"text/javascript">script type =c
var canvas ;
var context;
var isWhite = false;
//设置是否该轮到白棋
var isWell = false;
var img b =new Image();
img b.src="images/w.png";
//设置该局棋盘是否赢了,如果赢了就不能再走了
//白棋图片
var img w =new Image();img w.src ="images/b.png";//这个为棋盘的二维数组，用来保存棋盘信息var chessData = new Arrav(15)://初始化 0 为没有走过的，1 为白棋走的,2 为黑棋走的for(var x=0;x<15; x++)chessData[x]= new Array(15);for (var y=0;y<15; y++)chessData[x][y] = 0;
//黑棋图片

2． 绘制棋盘

页面加载完毕时调用 drawRect()函数，在页面上绘制 15×15 五子棋棋盘。

function drawRect() 
//页面加载完毕调用函数,页面上绘制五子棋棋盘canvas = document.getElementById("canvas");context = canvas.getContext("2d");
context.fillStyle="orange";
context.fillRect(0,0,640,640):
context.fillStyle="#000000":
//绘制棋盘的线for(var i=0;i<=640;i+=40)[
context.beginPath();
context.moveTo(0，i);
context.lineTo(640，i);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(i，0);
context.lineTo(i，640);
context.closePath();
context.stroke();

3． 走棋函数

鼠标单击事件中判断单击位置是否合法，既不能在已有棋的位置单击，也不能超出游戏棋盘边界，如果合法则将此位置信息记录到 chessData(数组)中，最后是本游戏关键输赢判断。程序中调用 judge(x，y，chess)函数判断输赢。判断 4 种情况下是否连成五子，得出谁赢。

function play(e)[
//鼠标单击时发生
//从像素坐标换算成棋盘坐标
//计算鼠标单击的位置,如果单击(65,65)位置,那么就是棋盘(1,1)的位置var x = parseInt((e.clientX - 20)/40);
var y= parseInt((e.clientY - 20)/ 40);
//判断该位置是否被下过了
if(chessData[x][y] != 0)[
alert("你不能在这个位置下棋");
return;
if(isWhite)(
//是否是白棋
isWhite= false;
drawChess(1，x，y);
else(
isWhite = true;
drawChess(2，x，y);
//换下一方走棋//绘制白棋
//换下一方走棋
//绘制黑棋

4． 画棋子函数

drawChess(chess，x，y)函数中参数 chess 为棋(1 为白棋，2 为黑棋)，(x，y)为棋盘即数组位置。

function drawChess(chess,x,y )//参数 chess 为棋(1 为白棋,2 为黑棋),，为数组位置
function drawChess(chess,x,y)if(isWell== true)
{alert("已经结束了，如果想要重新玩,请刷新”);
return;
}
if(x>=0&& x<15 && y>=0&& y<15){if(chess==1){context.drawImage(img_w，x * 40+20，y * 40+20);//绘制白棋
chessData[x][y] = 1;
else!context.drawImage(img b，x * 40+20，y * 40+20);//绘制黑棋
chessData[x][y] = 2;
judge(x，Y，chess);
}
}

04、人机五子棋游戏的开发

前面开发的五子棋游戏仅仅能够实现两个人轮流下棋，如果改进成人机五子棋对弈则比较具有挑战性。人机五子棋对弈需要人工智能技术，棋类游戏实现人工智能的算法通常有以下 3 种。

(1) 遍历式算法。

这种算法的原理是：按照游戏规则，遍历当前棋盘布局中所有可以下棋的位置，然后假设在第一个位置下棋，得到新的棋盘布局，再进一步遍历新的棋盘布局。如果遍历到最后也不能战胜对手，则退回到最初的棋盘布局，重新假设在第二个位置下棋，继续遍历新的棋盘布局，这样反复地遍历，直到找到能最终战胜对手的位置。这种算法可使电脑棋艺非常高，每一步都能找出最关键的位置。然而这种算法的计算量非常大，对 CPU 的要求很高。

(2) 思考式算法。

这种算法的原理是：事先设计一系列的判断条件，根据这些判断条件遍历棋盘，选择最佳的下棋位置。这种算法的程序往往比较复杂而且只有本身棋艺很高的程序员才能制作出“高智商的电脑”。

(3) 棋谱式算法。

这种算法的原理是：事先将常见的棋盘局部布局存储成棋谱，然后在走棋之前只对棋盘进行一次遍历，依照棋谱选择关键的位置。这种算法的程序思路清晰，计算量相对较小，而且只要棋谱足够多，也可以使电脑的棋艺达到一定的高度。

本实例采用棋谱式算法，实现人工智能。为此设计 Computer 类，实现电脑(白方)落子位置的计算。

首先，使用数组 Chess 存储棋谱，形式如下：黑棋(B)，白棋(W)，无棋(N)，需要下棋位置(S)。

image.png


数组中行数越高，表明该行棋谱中 S 位置越重要，电脑走最重要的位置。

例如，棋谱［N,S,B,B,B ］表示玩家(人)的黑棋(B)已有三子连线了，电脑必须在此附近下棋，其中 S 为需要电脑下子的位置，N 为空位置。棋谱［S，B，B，B，B ］表示玩家(人)的黑棋(B)已有四子连线了。当然棋谱［S，B，B，B，B ］级别高于棋谱［N,S,B,B,B ］。

然后，有了棋谱后就是遍历棋盘的信息是否符合某个棋谱，判断时从级别高的棋谱判断到级别低的棋谱(即从数组中行数最高 Chess．length-1 开始判断)。如果符合某个棋谱，则按棋谱指定的位置存储到(m_nCurRow，m_nCurCol)，如果所有棋谱都不符合，则随便找一个空位置。

实现人工智能的算法的 coputer．js 脚本如下：

var KONG = 0;
var BLACK = 2;
var WHITE = 1;
var N= 0;
var B= 2;
var W= 1;
//空位置 KONG
//黑色棋子//白色棋子//空位置//有黑色棋子(人的棋)
//有白色棋子(电脑的棋)

image.png

image.png

this.x = x;
this.y= y;
//获取电脑下子位置
function GetComputerPos()
//返回Point
return new Point(m nCurCol,m nCurRow):
//电脑根据输入参数 grid(棋盘),计算出落子位置(m_nCurRow，m_nCurCol)//grid 是 Arrayfunction Input(qrid)var rowSel,colSel,nLevel;
var index,nLevel;
var j;
m nCurCol=-1;
m nCurRow = -1;
nLevel= -1;
var bFind;
for(var row =0; row < 15; row ++)
{//遍历棋盘的所有行
//存储临时的选择位置
//存储临时选择的棋谱级别//是否符合棋谱的标志
for(var col= 0;col < 15; col ++)
(//遍历棋盘的所有列
for(var i= Chess.length- 1;i>= 0;i-- )//遍历所有级别的棋谱//查看从当前棋子开始的横向五个棋子是否符合该级别的棋谱if(col+4<15)rowSel= -1;colSel= -1;bFind =使炽鼓 true;for(j=0;j< 5;j++)
index = grid[col + j][row]if( index == KONG)[//如果该位置没有棋子，对应的棋谱位置上只能是 S或 Nif(Chess[i][j]== S){//如果是 S,则保存位置rowSel= row;colSel= col+j;
else if(Chess[i][j] != N)
[//不是 S也不是 n,则不符合这个棋谱,结束循环
bFind = false;
break;
if(index == BLACK && Chess i != B){//如果是黑色棋,对应的棋谱位置上应是 B,否则结束循环bFind = false;break;
if(index == WHITE && Chess il  != W)[//如果是白色棋，对应的棋谱位置上应是 ,否则结束循环bFind = false;
break;
if(bFind && i> nLevel)
{//如果符合此棋谱，且该棋谱比上次找到的棋谱的级别高
nLevel= i;
m nCurCol=colSel;
//保存级别
//保存位置
m nCurRow = rowSel;
break;
//遍历其他级别的棋谱
//查看从当前棋子开始的纵向五个棋子是否符合该级别的棋谱if(row+4<15)
rowSel= -1;colSel= -1;bFind = true;for(j=0;j<5;j++)index = grid[ col][ row + j];if(index == KONG){//如果该位置没有棋子，对应的棋谱位置上只能是 S 或Nif(Chess[illil== S){//如果是 S,则保存位置rowSel= row + i;colSel = col;else if(Chess[illil != N)
{//不是 S 也不是 n,则不符合这个棋谱,结束循环bFind = false:break;if(index == BLACK)[//如果是黑色棋,对应的棋谱位置上应是 B,否则结束循环if(Chess[il[i] != B)bFind = false;
break;
if(index == WHITE && Chess[illi] != W){//如果是白色棋,对应的棋谱位置上应是 ,否则结束循环bFind = false;break;
if(bFind && i> nLevel){//如果符合此棋谱，且该棋谱比上次找到的棋谱的级别高nLevel= i;m nCurCol=colSel;m nCurRow = rowSel;
//保存级别
//保存位置
break;
//遍历其他级别的棋谱
}
}
//查看从当前棋子开始的斜 45°向下的五个棋子是否符合该级别的棋谱if(col-4>=0&& rw+4<15)
rowSel= -1;colSel = -1;bFind = true;for(j=0;j< 5;j++)
index = grid[col - j][ row + jl;if(index == KONG)[//如果该位置没有棋子,对应的棋谱位置上只能是 S 或 Nif(Chess[i][j]== S)[//如果是 S,则保存位置rowSel = row + j;colSel= col-j;else if(Chess[il[i] != N){//不是 S 也不是 n,则不符合这个棋谱,结束循环bFind = false;break;
if(index == BLACK && Chess[i][j] != B)
[//如果是黑色棋,对应的棋谱位置上应是 B,否则结束循环bFind = false;
break;
if(index == WHITE && Chess   != W){//如果是白色棋,对应的棋谱位置上应是 ,否则结束循环bFind = false;
break;
if(bFind && i> nLevel){//如果符合此棋谱,且该棋谱比上次找到的棋谱的级别高
//保存级别
nLevel =i;
//保存位置m nCurCol= colSel;
m nCurRow = rowSel;
break;
//遍历其他级别的棋谱
//斜 135度的五个棋子
if(col+4<15 && row+4<15)
{//查看从当前棋子开始的斜 135向下的五个棋子是否符合该级别棋谱rowSel= -1;
colSel= -1;bFind = true;for(j=0;j<5;j++)
index = grid[col + j][row + jl;if(index == KONG)[//如果该位置没有棋子，对应的棋谱位置上只能是 S或Nif(Chess[il[jl== S){//如果是 S,则保存位置rowSel = row + j;
colSel= col+j;
else if(Chess[illi  != N){//不是 S 也不是 n,则不符合这个棋谱,结束循环bFind = false;
break;
if(index == BLACK && Chessil] != B)[//如果是黑色棋,对应的棋谱位置上应是 B,否则结束循环bFind = false;
break;if(index == WHITE && Chess[ill] = W)[//如果是白色棋,对应的棋谱位置上应是 w,否则结束循环bFind = false;
break;if(bFind && i> nLevel)
[//如果符合此棋谱，且该棋谱比上次找到的棋谱的级别高nLevel=i;m nCurCol= colSel;//保存位置
//保存级别
m nCurRow = rowSel;
break;
//遍历其他级别的棋谱
if(m nCurRow != -1)
[//如果选择了一个最佳位置
grid[m nCurCol][m nCurRow] = WHITE;return true;
//如果所有棋谱都不符合，则随便找一个空位置while(true
var col;
var row;
col = int(Math.random()*15);row = int(Math.random()*15)if(grid[ col][row]== KONG)
//随便找一个位置
grid[col][row]= WHITE;
m nCurCol = col;
m nCurRow = row;return true;
return false;

在游戏页面 five．html 中，由于使用上面 coputer．js 脚本，所以需要在中添加：

由于只有玩家(黑棋)需要单击棋盘落子，不再轮流下子，所以对单击事件响应函数 play(e)进行修改，玩家(黑棋)落子后，判断此时玩家(黑棋)是否赢了。如果赢了则游戏结束，否则直接电脑(白方)自动计算落子，电脑(白方)自动落子是调用 Input(chessData)函数实现计算白子位置，GetComputerPos()函数获取电脑落子位置 P，获取电脑落子位置后，在位置 P 显示白子并判断此时电脑是否赢了。

function play(e){var x = parseInt((e.clientX- 20) / 40);var y= parseInt((e.clientY- 20) / 40);if(chessDatalx][y] != 0) [
//鼠标单击时发生
//计算鼠标单击的区城
//判断该位置是否被下过了
alert("你不能在这个位置下棋");
return;
drawChess(2，x，y);//轮到电脑(白方)走Input(chessData);var p = GetComputerPos();drawChess(1,p.x,p.y);
//获取电脑落子位置 P
}

本文实现经典的五子棋游戏的基本功能，并且能够判断输赢，并把系统改进成人机对战版，使得游戏更具挑战性，从而更吸引玩家。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/70564.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

嵌入式编译FFmpeg6.0版本并且组合x264

嵌入式编译FFmpeg6.0版本并且组合x264

下载直通车:我用的是6.0版本的 1.准备编译: 2.进入ffmpeg源码目录&#xff0c;修改Makefile&#xff0c;添加编译选项&#xff1a; CFLAGS -fPIC 不加会报错 3.使用命令直接编译 ./configure --cross-prefix/home/xxx/bin/arm-linux-gnueabihf- --enable-cross-compile --targ…
阅读更多...
Kafka-eagle监控平台

Kafka-eagle监控平台

Kafka-Eagle简介 在开发工作中&#xff0c;当业务不复杂时&#xff0c;可以使用Kafka命令来进行一些集群的管理工作。但如果业务变得复杂&#xff0c;例如&#xff1a;需要增加group、topic分区&#xff0c;此时&#xff0c;再使用命令行就感觉很不方便&#xff0c;此时&#x…
阅读更多...
Spark SQL优化：NOT IN子查询优化解决

Spark SQL优化：NOT IN子查询优化解决

背景 有如下的数据查询场景。 SELECT a,b,c,d,e,f FROM xxx.BBBB WHERE dt ${zdt.addDay(0).format(yyyy-MM-dd)} AND predict_type not IN ( SELECT distinct a FROM xxx.AAAAAWHERE dt ${zdt.addDay(0).format(yyyy-MM-dd)} ) 分析 通过查看SQL语句的执行计划基本…
阅读更多...
RunnerGo链接数据库功能详解

RunnerGo链接数据库功能详解

我们在做性能测试或者场景测试时往往需要从数据库中获取一些真实的系统数据让我们配置的场景更加贴合实际。而RunnerGo也是在最近的大版本更新中推出连接数据库功能&#xff0c;本篇文章也给大家讲解一下具体的操作方法和实际应用场景。 配置数据库 首先进入RunnerGo页面&…
阅读更多...
【word密码】word怎么限制格式,但可以修改文字？

【word密码】word怎么限制格式,但可以修改文字？

想要限制word文件中文字的格式&#xff0c;但是又希望别人能够删除、输入文字&#xff0c;想要实现这种设置我们可以对word文件设置限制编辑。 点击word文件工具栏中的审阅 – 限制编辑&#xff0c;勾选上【限制对选定的样式设置格式】 然后在弹出的提示框中&#xff0c;输入我…
阅读更多...
四川玖璨电商：新媒体短视频运营是做什么？

四川玖璨电商：新媒体短视频运营是做什么？

随着互联网科技的不断发展&#xff0c;新媒体行业如今已经成为了人们获取信息、进行交流的主要渠道之一。在这样的大环境下&#xff0c;短视频成为了新媒体运营的一个重要组成部分。那么&#xff0c;新媒体短视频运营到底是做什么呢&#xff1f;接下来&#xff0c;小编将从几个…
阅读更多...
机器学习｜Softmax 回归的数学理解及代码解析

机器学习｜Softmax 回归的数学理解及代码解析

机器学习&#xff5c;Softmax 回归的数学理解及代码解析 Softmax 回归是一种常用的多类别分类算法&#xff0c;适用于将输入向量映射到多个类别的概率分布。在本文中&#xff0c;我们将深入探讨 Softmax 回归的数学原理&#xff0c;并提供 Python 示例代码帮助读者更好地理解和…
阅读更多...
3D模型格式转换工具如何与Parasolid集成？

3D模型格式转换工具如何与Parasolid集成？

概述 HOOPS Exchange包括一个 Parasolid 连接器&#xff0c;它允许 Parasolid 开发人员轻松地将 CAD 数据导入到活动的 Parasolid 会话中。如果源数据基于 Parasolid&#xff08;NX、Solid Edge 或 SolidWorks&#xff09;&#xff0c;则数据将按原样导入。 这意味着您可以假…
阅读更多...
应用在汽车前照灯系统中的环境光传感芯片

应用在汽车前照灯系统中的环境光传感芯片

为了保证行车照明的安全性和方便性&#xff0c;减轻驾驶员的劳动强度。近年来&#xff0c;出现了许多新的照明控制系统&#xff0c;例如用于日间驾驶的自动照明系统、光束调节系统、延迟控制等。尤其是汽车自适应前照灯系统&#xff0c;它是一种能够自动改变两种以上的光型以适…
阅读更多...
网络通信原理IP头部格式（第四十二课）

网络通信原理IP头部格式（第四十二课）

字段作用解析：1）版本: 指的IP地址的版本 （IPv4 或 IPV6）2）首部长度: 次数据包的首部长度一共是多少，没有加可选项3）优先级与服务类型:表示****数据包是否需要优选传递4）总长度: 表示的是整个数据包的大小，也就****是首部+数据5）标识符、标志、段偏移量:的作用将拆开的…
阅读更多...
深入理解 Flutter 图片加载原理

深入理解 Flutter 图片加载原理

作者&#xff1a;京东零售 徐宏伟 来源&#xff1a;京东云开发者社区 前言 随着Flutter稳定版本逐步迭代更新&#xff0c;京东APP内部的Flutter业务也日益增多&#xff0c;Flutter开发为我们提供了高效的开发环境、优秀的跨平台适配、丰富的功能组件及动画、接近原生的交互体验…
阅读更多...
聊聊火车的发展

聊聊火车的发展

目录 1.火车的概念 2.火车的发展历史 3.火车对战争的影响 4.火车对人们出行造成的影响 1.火车的概念 火车是一种由机械动力驱动的陆上交通工具&#xff0c;通常用来运输人员和货物。它由一列或多列的连接在一起的车厢组成&#xff0c;有轨道作为其行驶的基础&#xff0c;并通…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023