五子棋源代码

定义画布和黑白象棋变量

& ltfont color = " # 2f 4f 4f " face = " Microsoft ya hei " size = " 3 " >。var画布；

var上下文；

var isWhite = true//设置是否轮到白棋。

var isWell = false//设置棋盘是否已经获胜。如果它赢了，你就不能再往前走了。

var img _ b = new Image()；

img _ b . src = " images/b . png "；//白色图片

var img _ w = new Image()；

img _ w . src = " images/c . png "；//黑色图片

棋盘的二维数组用于存储棋盘信息。

& ltfont color = " # 2f 4f 4f " face = " Microsoft ya hei " size = " 3 " >。var chessData =新数组(15)；//初始化0为没走过，1为白走过，2为黑走过。

for(var x = 0；x & lt15;x++) {

chessData[x] =新数组(15)；

for(var y = 0；y & lt15;y++) {

chess data[x][y]= 0；

}

} & lt/font & gt；

画出棋盘的线条

& ltfont color = " # 2f 4f 4f " face = " Microsoft ya hei " size = " 3 " >。for(var I = 0；我& lt= 640;i += 40) {

context . begin path()；

context.moveTo(0，I)；

context.lineTo(640，I)；

context . close path()；

context . stroke()；

context . begin path()；

context.moveTo(i，0)；

context.lineTo(i，640)；

context . close path()；

context . stroke()；

}

} & lt/font & gt；

判断比赛的输赢。

& ltfont color = " # 2f 4f 4f " face = " Microsoft ya hei " size = " 3 " >。if(count 1 & gt；= 5 | | count2 & gt= 5 | | count3 & gt= 5 | | count4 & gt= 5) {

if (chess == 1) {

Alert("白赢")；

}

否则{

Alert("黑赢")；

}

isWell = true//设置棋盘已经赢了，不能再走了。

} & lt/font & gt；

Html代码:

& ltfont color = " # 2f 4f 4f " face = " Microsoft ya hei " size = " 3 " >。& ltbody onload = " drawRect()" & gt；

& ltdiv & gt

& ltcanvas width = " 640 " id = " canvas " onmousedown = " play(event)" height = " 640 " & gt；您的浏览器不支持HTML5画布。请使用谷歌浏览器打开它。

& lt/canvas & gt；

& lt/div & gt；

& lt/body & gt；& lt/font & gt；