基于JavaScript实现五子棋游戏

网络编程 2025/1/11 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

思路：

1、先用canvas画五子棋的棋盘
2、获取鼠标点击的位置
3、根据鼠标点击的位置判断，并画棋子
4、根据下的棋子判断是否赢了

代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
 * { 
 padding: 0; 
 margin: 0; 
 } 
 canvas { 
 margin: 10px; 
 border: 2px solid #000; 
 } 
 #box { 
 display: inline-block; 
 position: absolute; 
 margin-top: 200px; 
 margin-left: 100px; 
 } 
 span { 
 font: 24px "微软雅黑"; 
 display: inline-block; 
 height: 50px; 
 } 
 input { 
 margin-top: 30px; 
 display: block; 
 width: 100px; 
 height: 50px; 
 font: 16px "微软雅黑"; 
 color: #fff; 
 background-color: #0099cc; 
 } 
 </style> 
</head> 
<body> 
<canvas width="640" height="640" id="cas"> 
 您的浏览器不支持canvas，请升级到最新的浏览器 
</canvas> 
<div id="box"> 
 <span id="txt"></span> 
 <input type="button" id="btn" value="重新开始"/> 
 
</div> 
 
<script> 
 var flag = true; //true代表白棋下的棋子，false代表黑棋下的棋子 
 var isWin = false; //判断是否结束，true结束，false没有结束 
 var step = 40; //设置每个格子的宽高都是40 
 
 var txt = document.getElementById("txt"); 
 var btn = document.getElementById("btn"); 
 var cas = document.getElementById("cas");// 获取画布对象 
 var ctx = cas.getContext("2d"); //画布上下文 
 
// 创建图片对象 
 var img_b = new Image(); 
 img_b.src = "imgs/b.png";//设置黑棋图片路径 
 var img_w = new Image(); 
 img_w.src = "imgs/w.png";//设置白棋图片路径 
 
// 用二维数组来保存棋盘，0代表没有走过，1为白棋走过，2为黑棋走过 
 var arr = new Array(15); //声明一个一维数组 
 for (var i = 0; i < 15; i++) { 
 arr[i] = new Array(15); //每个值再声明一个一维数组，这样就组成了一个二维数组 
 for (var j = 0; j < 15; j++) { 
 arr[i][j] = 0; 
 } 
 } 
 
 //绘制棋盘 
 function drawLine() { 
 for (var i = 0; i < cas.width / step; i++) { 
 // 画竖线 
 ctx.moveTo((i + 1) * step, 0); 
 ctx.lineTo((i + 1) * step, cas.height); 
 // 画横线 
 ctx.moveTo(0, (i + 1) * step); 
 ctx.lineTo(cas.width, (i + 1) * step); 
 ctx.stroke(); 
 } 
 } 
 //获取鼠标点击的位置 
 cas.onclick = function (e) { 
 // 先判断游戏是否结束 
 if (isWin) { 
 alert("游戏已经结束，请刷新重新开始！"); 
 return 0; 
 } 
 //判断棋子显示的地方，四条边上不显示棋子， 
 //鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20） 
 var x = (e.clientX - 10 - 20) / 40; 
 var y = (e.clientY - 10 - 20) / 40; 
 
 //进行取整来确定棋子最终显示的区域 
 x = parseInt(x); 
 y = parseInt(y); 
 //如果超出棋盘或者在棋盘边界直接返回，边界上不能画棋子 
 if(x < 0 || x >= 15 || y < 0 || y >= 15) { 
 return; 
 } 
 //进行判断该位置是否已经显示过棋子 
 if (arr[x][y] != 0) { 
 alert("你不能在这个位置下棋"); 
 return; 
 } 
 // 判断是显示黑子还是白子 
 if (flag) {//白子 
 flag = false; //将标志置为false,表示下次为黑子 
 drawChess(1, x, y); //调用函数来画棋子 
 
 } else {//黑子 
 flag = true; //将标志置为true,表示下次为白子 
 drawChess(2, x, y); //调用函数来画棋子 
 
 } 
 } 
 //画棋子 
 function drawChess(num, x, y) { 
 //根据x和y确定图片显示位置,让图片显示在十字线中间，因为一个格子为40，图片大小为30，所以40-30/2等于25，所以需要加上25 
 var x0 = x * step + 25; 
 var y0 = y * step + 25; 
 if (num == 1) { 
 //绘制白棋 
 ctx.drawImage(img_w, x0, y0); 
 arr[x][y] = 1; //白子 
 } else if (num == 2) { 
 // 绘制黑棋 
 ctx.drawImage(img_b, x0, y0); 
 arr[x][y] = 2; //黑子 
 } 
 //调用函数判断输赢 
 judge(num, x, y); 
 } 
 //判断输赢 
 function judge(num, x, y) { 
 var n1 = 0, //左右方向 
 n2 = 0, //上下方向 
 n3 = 0, //左上到右下方向 
 n4 = 0; // 右上到左下方向 
 //***************左右方向*************
 //先从点击的位置向左寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环 
 for (var i = x; i >= 0; i--) { 
 if (arr[i][y] != num) { 
 break; 
 } 
 n1++; 
 } 
 //然后从点击的位置向右下一个位置寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环 
 for (var i = x + 1; i < 15; i++) { 
 if (arr[i][y] != num) { 
 break; 
 } 
 n1++; 
 } 
 //****************上下方向************ 
 for (var i = y; i >= 0; i--) { 
 if (arr[x][i] != num) { 
 break; 
 } 
 n2++; 
 } 
 for (var i = y + 1; i < 15; i++) { 
 if (arr[x][i] != num) { 
 break; 
 } 
 n2++; 
 } 
 //****************左上到右下斜方向*********** 
 for(var i = x, j = y; i >=0, j >= 0; i--, j--) { 
 if (i < 0 || j < 0 || arr[i][j] != num) { 
 break; 
 } 
 n3++; 
 } 
 for(var i = x+1, j = y+1; i < 15, j < 15; i++, j++) { 
 if (i >= 15 || j >= 15 || arr[i][j] != num) { 
 break; 
 } 
 n3++; 
 } 
 //****************右上到左下斜方向*************
 for(var i = x, j = y; i >= 0, j < 15; i--, j++) { 
 if (i < 0 || j >= 15 || arr[i][j] != num) { 
 break; 
 } 
 n4++; 
 } 
 for(var i = x+1, j = y-1; i < 15, j >= 0; i++, j--) { 
 if (i >= 15 || j < 0 || arr[i][j] != num) { 
 break; 
 } 
 n4++; 
 } 
 //用一个定时器来延时，否则会先弹出对话框，然后才显示棋子 
 var str; 
 if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) { 
 if (num == 1) {//白棋 
 str = "白棋赢了，游戏结束！" 
 } else if (num == 2) {//黑棋 
 str = "黑棋赢了，游戏结束！" 
 } 
 txt.innerHTML = str; 
 isWin = true; 
 } 
 } 
 //重新开始 
 btn.onclick = function() { 
 flag = true; 
 isWin = false; 
 
 for (var i = 0; i < 15; i++) { 
 for (var j = 0; j < 15; j++) { 
 arr[i][j] = 0; 
 } 
 } 
 ctx.clearRect(0, 0, 640, 640); 
 txt.innerHTML = ""; 
 drawLine(); 
 } 
 drawLine(); 
</script> 
</body> 
</html>

代码链接地址：五子棋demo

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏玩不停

javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,五子棋

标签：

js,五子棋

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“基于JavaScript实现五子棋游戏”

暂无基于JavaScript实现五子棋游戏的评论...

www.ioogu.com 极乐门资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

基于JavaScript实现五子棋游戏

js,五子棋

基于jquery实现五星好评

JavaScript canvas实现围绕旋转动画

评论“基于JavaScript实现五子棋游戏”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

基于JavaScript实现五子棋游戏

js,五子棋

基于jquery实现五星好评

JavaScript canvas实现围绕旋转动画

评论“基于JavaScript实现五子棋游戏”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存