基于js+canvas实现五子棋小游戏

PHP中文网 • 2025年3月7日 23:31:32 • 编程技术 • 阅读 2

本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码，供大家参考，具体内容如下

效果展示：

源码展示：

nbsp;html>  五子棋  * { margin: 0; padding: 0; }  body { margin-top: 20px; margin-left: 20px; }  canvas { background-image: url("img/bak.jpg"); border: 1px solid #000; }   /*准备工作： 1获取画布，获取画笔对象 */ var mcanvas = document.querySelector("canvas"); var ctx = mcanvas.getContext("2d");  /*准备工作：2创建一个二维数组 用来定义绘制棋盘线*/ var count = 15;//用来定义棋盘的行数和列数 var map = new Array(count); for (var i = 0; i < map.length; i++) { map[i] = new Array(count); for (var j = 0; j < map[i].length; j++) { map[i][j] = 0; } } /*准备工作：3初始化棋子*/ var black = new Image(); var white = new Image(); black.src = "img/black.png"; white.src = "img/white.png";   //开始绘制 1绘制棋盘线 ctx.strokeStyle = "#fff"; var rectWH = 40; //设置绘制矩形的大小 for (var i = 0; i < map.length; i++) { for (var j = 0; j  0 && map[row][col - 1] == t) { //判断下一个值 注意一定是：col-1 total++; col--; } row = orgrow; col = orgcol; while (col + 1 = 5) { if (t == 1){ alert("黑子赢"); } else{ alert("白子赢"); } return;//判断出输赢结束后续判断 }  // 2垂直方向判断 row = orgrow; col = orgcol; total = 1; while (row - 1 > 0 && map[row - 1][col] == t) { row--; total++; } row = orgrow; col = orgcol; while (row + 1 = 5) { if (t == 1){ alert("黑子赢"); } else{ alert("白子赢"); } return;//判断出输赢结束后续判断 }  //左下 右上 row = orgrow; col = orgcol; total = 1; while (row + 1  0 && map[row + 1][col - 1] == t) { row++; col--; total++; } row = orgrow; col = orgcol; while (row - 1 > 0 && col + 1 = 5) { if (t == 1){ alert("黑子赢"); } else{ alert("白子赢"); } return;//判断出输赢结束后续判断 } //左上右下 row = orgrow; col = orgcol; total = 1; while (row - 1 > 0 && col - 1 > 0 && map[row - 1][col - 1] == t) { row--; col--; total++; } row = orgrow; col = orgcol; while (row + 1 < 15 && col + 1 = 5) { if (t == 1){ alert("黑子赢"); } else{ alert("白子赢"); } return;//判断出输赢结束后续判断 } }   /*功能扩充： 1当胜利后 弹框：a是否在来一局 b 精彩回复 a 如果点击在来一句 清空数据重新开始 b 精彩回放将棋盘黑白子按照下棋的顺序进行棋子编号2悔棋功能 3对算法的扩充 a如果是双三 则直接弹出胜利 b若是桶四 则直接弹出胜利 */

登录后复制

图片资源：