基于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 相关文章推荐
jQuery中trigger()方法用法实例
Jan 19 Javascript
js实现圆盘记速表
Aug 03 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
JavaScript引用类型Array实例分析
Jul 24 Javascript
小程序如何使用分包加载的实现方法
May 22 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
Zend 输出产生XML解析错误
2009/03/03 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
python连接MySQL数据库实例分析
2015/05/12 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
python针对excel的操作技巧
2018/03/13 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
如何利用find命令查找文件
2015/02/07 面试题
优秀生推荐信范文
2013/11/28 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
公证处委托书
2015/01/28 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
django中websocket的具体使用
2022/01/22 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android