基于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中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
js实现导航吸顶效果
Feb 24 Javascript
vue component组件使用方法详解
Jul 14 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
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
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
javascript数据类型详解
2017/02/07 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
python模仿网页版微信发送消息功能
2018/02/24 Python
tensorflow获取变量维度信息
2018/03/10 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
农救科工作职责
2013/11/27 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
基督教婚礼主持词
2014/03/14 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript