介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
& lt;才能title>
,,canvastest
,,,& lt;/title>
& lt;/head>
& lt; body>
,,,,& lt; h2>, canvas
,,,,& lt; canvas id=癱anvas"宽度=?00“高度=?00“比;
,,,,& lt;/canvas>
,,,,& lt; https://www.yisu.com/zixun/script src=" https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js ">
<脚本>
var canv=. getelementbyid(“画布”);
var ctx=canv.getContext (2 d);
ctx.strokeStyle=昂谏?
var弓=0;//画出棋盘;
var=[矩阵
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
(0,0,0,0,0,0,0,0,0,0,0,0,0,0,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 ();
我(var=0; <19;我+ +){
ctx.moveTo (10 + 20 * 10);
ctx.lineTo (10 + i * 20370);
ctx.moveTo(10, 20 *我+ 10);
ctx.lineTo(370年,我* 20 + 10);
}
ctx.stroke ();//鼠标交互;
$(" #画布”).click(函数(事件)
{
console.log (event.offsetX)
console.log(弓);
var arcPosX arcPosY;
var mtxPosX mtxPosY;
(var x=0; x <19; x + +)
{
如果((Math.abs (event.offsetX - (10 + x * 20))) <10)
{
arcPosX=10 + x * 20;
mtxPosX=x;
}
如果((Math.abs (event.offsetY - (10 + x * 20))) <10)
{
arcPosY=10 + x * 20;
mtxPosY=x;
}
}
如果(矩阵[mtxPosX] [mtxPosY]==0)
{
弓=!弓;
ctx.beginPath ();
如果(弓){
ctx.fillStyle=昂谏?
ctx.arc (arcPosX arcPosY 10 0 Math.PI * 2,假);
矩阵[mtxPosX] [mtxPosY]=1;
}
其他{
ctx.fillStyle=鞍住?
ctx.arc (arcPosX arcPosY 10 0 Math.PI * 2,假);
ctx.stroke ();
矩阵[mtxPosX] [mtxPosY]=2;
}
ctx.fill ();
}//实现输赢判断
var winFlag=0;
如果(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;w <2;w + +)
{
如果(矩阵[mtxPosX + w + 1] [mtxPosY] !=矩阵[mtxPosX] [mtxPosY])
{
winFlag=0;
打破;
}
其他的
{
winFlag=1;
}
}
}
}
其他的
{
(var w=0;w <3;w + +)
{
如果(矩阵[mtxPosX + w + 1] [mtxPosY] !=矩阵[mtxPosX] [mtxPosY])
{
winFlag=0;
打破;
}
其他的
{
winFlag=1;
}
}
}
}
其他的
{
(var w=0;w <4;w + +)
{
如果(矩阵[mtxPosX + w + 1] [mtxPosY] !=矩阵[mtxPosX] [mtxPosY])
{
winFlag=0;
打破;
}
其他的
{
winFlag=1;
}
}
}
如果(矩阵[mtxPosX] [mtxPosY-1]==矩阵[mtxPosX] [mtxPosY])
{
如果(矩阵[mtxPosX] [mtxPosY-2]==矩阵[mtxPosX] [mtxPosY])
{
如果(矩阵[mtxPosX] [mtxPosY-3]==矩阵[mtxPosX] [mtxPosY])
{
如果(矩阵[mtxPosX] [mtxPosY-4]==矩阵[mtxPosX] [mtxPosY])
{
winFlag=1;
}
其他的
{
如果(矩阵[mtxPosX] [mtxPosY + 1)==矩阵[mtxPosX] [mtxPosY])
{
winFlag=1;
}
其他的
{
winFlag=0;
}
}
}
其他的
{
(var w=0;w
这篇文章将为大家详细讲解有关JavaScript如何实现网页版五子棋游戏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
本程序主要通过三部分实现:
1。棋盘绘制
2。鼠标交互
3。输赢判断
