第JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版五子棋游戲本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版五子棋游戲的具體代碼，供大家參考，具體內(nèi)容如下

學(xué)習(xí)js的第三天，跟著老師完成的五子棋小游戲，記錄學(xué)習(xí)成果歡迎大佬們一起分享經(jīng)驗(yàn)，批評(píng)指正。

本程序主要通過(guò)三部分實(shí)現(xiàn)：

1.棋盤(pán)繪制

2.鼠標(biāo)交互

3.輸贏判斷

!DOCTYPEhtml

html

head

title

canvastest

/title

/head

body

h1canvas/h1

canvasid="canvas"width="400"height="400"

/canvas

scriptsrc="/ajax/libs/jquery/3.6.0/jquery.js"/script

script

varcanv=document.getElementById("canvas");

varctx=canv.getContext("2d");

ctx.stroke;

varbow=0;

//畫(huà)出棋盤(pán)；

varmatrix=[

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,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();

for(vari=0;ii++){

ctx.moveTo(10+20*i,10);

ctx.lineTo(10+i*20,370);

ctx.moveTo(10,20*i+10);

ctx.lineTo(370,i*20+10);

ctx.stroke(