[源码]一个网页版的纯js写的五子棋

y * 40 20);//绘制白棋chessData[x][y] 1;}else {context.drawImage(img_b， j y; i 0， i);context.closePath();context.stroke();context.beginPath();context.moveTo(i， j 15; i--， x， y);}}function drawChess(chess。

640);context.closePath();context.stroke();}}function play(e) {//鼠标点击时发生var x parseInt((e.clientX - 20) / 40);//计算鼠标点击的区域如果点击了6565那么就是点击了11的位置var y parseInt((e.clientY - 20) / 40);if (chessData[x][y] ! 0) {//判断该位置是否被下过了alert(你不能在这个位置下棋);return;}if (isWhite) {isWhite false;drawChess(1， j y; i 0， 引用 16 楼 zhangxiaojie0321 的回复:[quote引用 14 楼 defonds 的回复:][quote引用 12 楼 zhangxiaojie0321 的回复:]!DOCTYPE htmlhtml xmlnsheadmeta http-equivContent-Type contenttext/html; charsetutf-8 /title/titlestyle typetext/cssbody {margin: 10px;}/stylescript typetext/javascriptvar canvas;var context;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/w.png;//黑棋图片var chessData new Array(15);//这个为棋盘的二维数组用来保存棋盘信息初始化0为没有走过的1为白棋走的2为黑棋走的for (var x 0; x 15; x) {chessData[x] new Array(15);for (var y 0; y 15; y) {chessData[x][y] 0;}}function drawRect() {//页面加载完毕调用函数初始化棋盘canvas document.getElementById(canvas);context canvas.getContext(2d);for (var i 0; i 640; i 40) {//绘制棋盘的线context.beginPath();context.moveTo(0，。

j--) {if (chessData[i][j] ! chess) {break;}count4;}if (count1 5 || count2 5 || count3 5 || count4 5) {if (chess 1) {alert(白棋赢了);}else {alert(黑棋赢了);}isWell true;//设置该局棋盘已经赢了不可以再走了}}/script/headbody onloaddrawRect()divcanvas width640 idcanvas onmousedownplay(event) height640你的浏览器不支持HTML5 canvas 请使用 google chrome 浏览器 打开./canvas/div/body/html由于公司网限制图片上传不了， x， y， j 15; i， y， x， j y - 1; i 15， i);context.lineTo(640， x * 40 20， j 0; i--， y) {//参数为棋1为白棋2为黑棋数组位置if (isWell true) {alert(已经结束了如果需要重新玩请刷新);return;}if (x 0 x 15 y 0 y 15) {if (chess 1) {context.drawImage(img_w， j y 1; i 15， y * 40 20);chessData[x][y] 2;}judge(x， y);}else {isWhite true;drawChess(2， chess) {//判断该局棋盘是否赢了var count1 0;var count2 0;var count3 0;var count4 0;//左右判断for (var i x; i 0; i--) {if (chessData[i][y] ! chess) {break;}count1;}for (var i x 1; i 15; i) {if (chessData[i][y] ! chess) {break;}count1;}//上下判断for (var i y; i 0; i--) {if (chessData[x][i] ! chess) {break;}count2;}for (var i y 1; i 15; i) {if (chessData[x][i] ! chess) {break;}count2;}//左上右下判断for (var i x，代码可以直接运行只需要找两张棋子的图片黑棋b.png 白棋w.png感谢老兄分享源码推荐了[/quote]太有用啦谢谢啊 ， j--) {if (chessData[i][j] ! chess) {break;}count3;}for (var i x 1， j) {if (chessData[i][j] ! chess) {break;}count3;}//右上左下判断for (var i x， j 0; i， 0);context.lineTo(i， chess);}}function judge(x， j) {if (chessData[i][j] ! chess) {break;}count4;}for (var i x 1， x * 40 20。