介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt; title> Document
& lt;/head>
& lt;身体比;
& lt;帆布id=癴ive"祝辞& lt;/canvas>
& lt; h2祝辞五子棋& lt;/h2>
& lt; h3 id=癱urrole"祝辞轮到:黑& lt;/h3>
& lt; div id=皉es"在胜者:& lt;/div>
& lt;/body>
& lt; script>
让骑兵=. getelementbyid (& # 39; 5 # 39;)
让ctx=cav.getContext (& # 39; 2 d # 39;)
让50 k=//倍数
让r=k/4
骑兵。宽度=骑兵。身高=16 * k
ctx.strokeStyle=? 000000“;
(让我=0;i<15;我+ +){
ctx.beginPath ();
ctx.moveTo ((i + 1) * k, k);
ctx.lineTo (15 * (i + 1) * k, k);
ctx.stroke ();
}
(让我=0;i<15;我+ +){
ctx.beginPath ();
ctx.moveTo (k, k (i + 1) *);
ctx.lineTo (15 * k, k (i + 1) *);
ctx.stroke ();
}
init函数(事件){
让x=事件。offsetX - k
让y=事件。offsetY - k
让xclose=关闭(x 0 14)
让yclose=关闭(y, 0, 14)
让nodearr=[]
让minxd=Math.abs (x-xclose [0] * k) & lt; Math.abs (x-xclose [1] * k), # 63;
Math.abs (x-xclose [0] * k) & lt; r& # 63; xclose [0] * k:定义
：
Math.abs (x-xclose [1] * k) & lt; r& # 63; xclose [1] * k:定义
让maxyd=Math.abs (y-yclose [0] * k) & lt; Math.abs (y-yclose [1] * k), # 63;
Math.abs (y-yclose [0] * k) & lt; r& # 63; yclose [0] * k:定义
：
Math.abs (y-yclose [1] * k) & lt; r& # 63; yclose [1] * k:定义
如果((minxd !==未定义),和(maxyd !==定义)){
nodearr=[minxd maxyd]
}
如果(nodearr.length !==0) {
setNode (nodearr)
}
}
cav.addEventListener (“click" init)
函数关闭(首席运营官,lort rorb) {
coo<0, # 63;首席运营官=0:首席运营官=首席运营官
coo> 14 * k& # 63;首席运营官=14 * k:首席运营官=首席运营官
让dect=rorb - lort
如果(dect===1) {
返回(lort, rorb)
其他}{
如果(coo<(lort + Math.ceil (dect/2)) * k) {
让nlort=lort
让nrorb=lort + Math.ceil (dect/2)
返回关闭(首席运营官,nlort nrorb)
其他}{
让nlort=lort + Math.ceil (dect/2)
让nrorb=rorb
返回关闭(首席运营官,nlort nrorb)
}
}
}
让colorflag=0
函数setNode (arr) {
如果(五子棋(arr [0]/k) (arr [1]/k) !==未定义){
返回
}
如果(colorflag===0) {
ctx.fillStyle=癰lack"
ctx.beginPath ();
ctx.arc (arr [0] + k, arr [1] + k, r, 0, 2 * Math.PI);
ctx.stroke ();
ctx.fill ();
checkFinish ([arr [0]/k, arr [1]/k))
五子棋(arr [0]/k) (arr [1]/k)=colorflag
colorflag=1
. getelementbyid (& # 39; currole& # 39;) .innerHTML=奥值?白“;
其他}{
ctx.fillStyle=皐hite"
ctx.beginPath ();
ctx.arc (arr [0] + k, arr [1] + k, r, 0, 2 * Math.PI);
ctx.stroke ();
ctx.fill ();
checkFinish ([arr [0]/k, arr [1]/k))
五子棋(arr [0]/k) (arr [1]/k)=colorflag
colorflag=0
. getelementbyid (& # 39; currole& # 39;) .innerHTML=奥值?黑“
}
}
& lt;/script>
& lt;脚本src=https://www.yisu.com/zixun/薄?five.js ">
这篇文章将为大家详细讲解有关利用js画布上实现一个五子棋游戏,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
html部分