基于JavaScript实现五子棋游戏


Posted in Javascript onAugust 26, 2020

本文实例为大家分享了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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript this调用规则说明
Mar 08 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
vue调用语音播放的方法
Sep 27 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 #Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 #Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 #Javascript
深入研究React中setState源码
Nov 17 #Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 #Javascript
jQuery实现滚动效果
Nov 17 #jQuery
不使用 JS 匿名函数理由
Nov 17 #Javascript
You might like
Terran兵种对照表
2020/03/14 星际争霸
用session做客户验证时的注意事项
2006/10/09 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
js+xml生成级联下拉框代码
2012/07/24 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Python快速从注释生成文档的方法
2016/12/26 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
python中添加模块导入路径的方法
2021/02/03 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
二年级数学教学反思
2014/01/21 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书