这篇文章主要为大家详细介绍了JavaScript(JavaScript)实现网页版五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript(JavaScript)实现网页版五子棋游戏的具体代码，供大家参考，具体内容如下
学习联署材料的第三天，跟着老师完成的五子棋小游戏，记录学习成果欢迎大佬们一起分享经验，批评指正。
本程序主要通过三部分实现：
1.棋盘绘制
2.鼠标交互
3.输赢判断
！文档类型html
超文本标记语言格式
头儿
标题(标题)
坎瓦斯测试
/标题
/头
体表
氕加农炮/h1
画布id=' canvas '宽度=' 400 '高度=' 400 '
/画布
src=' 339 cdn。net/Ajax/libs/jquery/3。6 .0/jquery。js '/脚本脚本
脚本编写
var canv=文档。getelement byid(' canvas ')；
var CTX=canv。获取上下文(“2d”)；
CTX。strokesstyle=' black
var bow=0
//画出棋盘；
风险值矩阵=[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
];
ctx.beginPath():
S7-1200可编程控制器：i19>
ctx。移动(10 20*i，10)；
CTX。line to(10i * 20.370)；
ctx。已移动(10.20 * i10)；
ctx.lineTo(370、I * 20 10)；
}
CTX。笔画()；
//鼠标交互；
$(# canvas).点击(函数事件)
{
console.log(event.offsetX)
console.log(bow):
var arcposx，arcposy
var mtxPosX、mtxposy
for(var x=0):x19；(十)
{
如果((数学。ABS(事件。offsetx-(10x * 20)))10)
{
弧x=10 x 20
mtxposx=x
}
如果((数学。ABS(事件。偏移量-(10x * 20)))10)
{
弧=10 x 20
mtxposy=x
}
}
如果(矩阵[mtxPosX][mtxPosY]==0)
{
bow=！弓；弓；
ctx.beginPath():
如果(鞠躬)>
ctx。fillstyle=' black
ctx.arc(反正切、反正切、10.0、数学)。PI*2，假
矩阵[MTX posx][MTX posy]=1；
}
其他
ctx。fillstyle=' white
ctx.arc(反正切、反正切、10.0、数学)。PI*2，假
CTX。笔画()；
矩阵[MTX posx][MTX posy]=2；
}
ctx.fill():
}
//实现输赢判断
var winFlag=0:
if(winflag==0)}
如果(矩阵[mtxPosX-1][mtxPosY]==矩阵[mtxPosX][mtxPosY])
{
如果(矩阵[mtxPosX-2][mtxPosY]==矩阵[mtxPosX][mtxPosY])
{
如果(矩阵[mtxPosX-3][mtxPosY]==矩阵[mtxPosX][mtxPosY])
{
如果(矩阵[mtxPosX-4][mtxPosY]==矩阵[mtxPosX][mtxPosY])
{
winflag=1；
}
其他语句
{
如果(矩阵[mtxPosX 1][mtxPosY]==矩阵[mtxPosX][mtxPosY])
{
winflag=1；
}
其他语句
{
winflag=0；
}
}
}
其他语句
{
对于(var w=0)；w2；(w)
{
如果(矩阵[mtxPosX w 1][mtxPosY]！=矩阵[mtxPosX][mtxPosY]
{
winflag=0；
打断；打断；
}
其他
{
winFlag=1；
}
}
}
}
其他
{
for(var w=0；w3；w)
{
if(matrix[mtxPosX w 1][mtxPosY]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
打破；
}
其他
{
winFlag=1；
}
}
}
}
其他
{
for(var w=0；w 4；w)
{
if(matrix[mtxPosX w 1][mtxPosY]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
打破；
}
其他
{
winFlag=1；
}
}
}
if(矩阵[MTX波西][MTX波西-1]==矩阵[MTX波西][MTX波西])
{
if(矩阵[MTX波西][MTX波西-2]==矩阵[MTX波西][MTX波西])
{
if(矩阵[MTX波西][MTX波西-3]==矩阵[MTX波西][MTX波西])
{
if(矩阵[MTX波西][MTX波西-4]==矩阵[MTX波西][MTX波西])
{
winFlag=1；
}
其他
{
if(矩阵[MTX波西][MTX波西1]==矩阵[MTX波西][MTX波西])
{
winFlag=1；
}
其他
{
winFlag=0；
}
}
}
其他
{
for(var w=0；w 2；w)
{
if(matrix[mtxPosX][mtxPosY w 1]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
打破；
}
其他
{
winFlag=1；
}
}
}
}
其他
{
for(var w=0；w3；w)
{
if(matrix[mtxPosX][mtxPosY w 1]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
打破；
}
其他
{
winFlag=1；
}
}
}
}
其他
{
for(var w=0；w 4；w)
{
if(matrix[mtxPosX][mtxPosY w 1]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
打破；
}
其他
{
winFlag=1；
}
}
}
if(矩阵[MTX波西-1][MTX波西-1]==矩阵[MTX波西][MTX波西])
{
if(矩阵[MTX位置x-2][MTX位置y-2]==矩阵[MTX位置x][MTX位置y])
{
if(矩阵[MTX位置x-3][MTX位置y-3]==矩阵[MTX位置x][MTX位置y])
{
if(矩阵[MTX位置x-4][MTX位置y-4]==矩阵[MTX位置x][MTX位置y])
{
winFlag=1；
}
其他
{
if(矩阵[MTX波西1][MTX波西1]==矩阵[MTX波西][MTX波西])
{
winFlag=1；
}
其他
{
winFlag=0；
}
}
}
其他
{
for(var w=0；w 2；w)
{
if(matrix[MTX波西w 1][MTX波西w 1]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
打破；
}
其他
{
winFlag=1；
}
}
}
}
其他
{
for(var w=0；w3；w)
{
if(matrix[MTX波西w 1][MTX波西w 1]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
打破；
}
其他
{
winFlag=1；
}
}
}
}
其他
{
for(var w=0；w 4；w)
{
if(matrix[MTX波西w 1][MTX波西w 1]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
打破；
}
其他
{
winFlag=1；
}
}
}
if(矩阵[MTX位置x-1][MTX位置y 1]==矩阵[MTX位置x][MTX位置y])
{
if(矩阵[MTX位置x-2][MTX位置y 2]==矩阵[MTX位置x][MTX位置y])
{
if(矩阵[MTX位置x-3][MTX位置y-3]==矩阵[MTX位置x][MTX位置y])
{
if(矩阵[MTX位置x-4][MTX位置y-4]==矩阵[MTX位置x][MTX位置y])
{
winFlag=1；
}
其他
{
if(matrix[mtxPosX 1][mtxPosY-1]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
}
其他
{
winFlag=1；
}
}
}
其他
{
for(var w=0；w 2；w)
{
if(matrix[MTX posx w1][MTX posy-w-1]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
打破；
}
其他
{
winFlag=1；
}
}
}
}
其他
{
for(var w=0；w3；w)
{
if(matrix[MTX posx w1][MTX posy-w-1]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
打破；
}
其他
{
winFlag=1；
}
}
}
}
其他
{
for(var w=0；w 4；w)
{
if(matrix[MTX posx w1][MTX posy-w-1]！=matrix[mtxPosX][mtxPosY])
{
winFlag=0；
打破；
}
其他
{
winFlag=1；
}
}
}
}
if(winFlag==1){
如果（鞠躬)
警报('黑色胜利!');
其他
警报('白色胜利!');
}
});
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。