基于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 相关文章推荐
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
详解node和ES6的模块导出与导入
Feb 19 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
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
利用PHP实现短域名互转
2013/07/05 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
vue.js中created方法作用
2018/03/30 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
python提取字典key列表的方法
2015/07/11 Python
Python自动发邮件脚本
2017/03/31 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python程序 创建多线程过程详解
2019/09/23 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
新闻网站实习自我鉴定
2013/09/25 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
党员十八大心得体会
2014/09/12 职场文书
政工师工作总结2015
2015/05/26 职场文书
Python数据类型最全知识总结
2021/05/31 Python