微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】


Posted in Javascript onFebruary 20, 2019

本文实例讲述了微信小程序五子棋游戏的棋盘,重置,对弈实现方法。分享给大家供大家参考,具体如下:

DEMO下载

效果图

微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】

分析

1. 采用微信小程序的canvas制作五子棋;
2. 确定棋盘大小及格数;
3. 绘制棋盘—-通过棋盘宽高和格数计算间距,同时保存坐标点;
4. 黑方和白方下子—-定义一个布尔变量代表各自的身份;
5. 重置棋盘—-重新开始;
6. 通过判断当前棋手,悔棋时进行改变。

绘制棋盘

drawLine(arr){
 arr.forEach(current => {
  this.ctx.setFillStyle(this.lineColor);
  this.ctx.beginPath();
  this.ctx.lineWidth = 1;
  this.ctx.moveTo(current[0].x, current[0].y);
  for (var i = 1; i < current.length; i++) {
  this.ctx.lineTo(current[i].x, current[i].y);
  }
  this.ctx.stroke();
  this.ctx.closePath();
  this.ctx.draw(true);
 });
 }
 drawChessboard(){
 // 每个格子的宽高
 var everyLen = this.everyLen;
 // 标记坐标的个数
 var count = 0;
 // 从纵向保存坐标
 var arrY = [];
 // 双循环计算每个坐标的横纵坐标
 for(var i = 0;i <= this.type; i++){
  var arr = [],arr0 = [];
  for(var j = 0;j <= this.type; j++){
  count++;
  arr.push({
   y: this.margin + i * everyLen,
   x: this.margin + j * everyLen,
   pointX: j,
   pointY: i,
   index: count
  });
  arr0.push({
   x: this.margin + i * everyLen,
   y: this.margin + j * everyLen
  })
  }
  // 清空canvas
  this.ctx.clearRect(0, 0, this.width, this.height);
  // 保存横线坐标和竖线坐标
  this.everyPoint.push(arr);
  arrY.push(arr0);
 }
 // 绘制横向线
 this.drawLine(this.everyPoint);
 // 绘制竖向线
 this.drawLine(arrY);
 }

绘制当前点击坐标的棋子

// 获取当前点击位置的坐标
 getPosition(e){
 return {
  x: e.touches[0].x,
  y: e.touches[0].y
 };
 }
 // 将当前坐标和棋盘坐标数组对比,找到精确坐标
 checkPoint(arr,po){
 for (var i = 0; i < this.everyPoint.length; i++){
  for (var j = 0; j < this.everyPoint[i].length; j++){
  if (Math.abs(this.everyPoint[i][j].x - po.x) < this.everyLen/2 && Math.abs(this.everyPoint[i][j].y - po.y) < this.everyLen/2){
   // 将棋盘精确坐标保存到当前持棋方数组
   arr.push(this.everyPoint[i][j]);
   // 同时删除棋盘坐标数组的该值,表示当前位置已经存在棋子
   this.everyPoint[i].splice(j,1);
   break;
  }
  }
 }
 }
 // 绘制当前坐标棋子
 drawCle(opts,color){
 this.ctx.setFillStyle(color);
 this.ctx.beginPath();
 this.ctx.arc(opts.x, opts.y, this.r, 0, Math.PI * 2, true);
 this.ctx.closePath();
 this.ctx.fill();
 this.ctx.draw(true);
 }
 drawLastPoint(type){
 // 判断是黑方持棋还是白方持棋,进行绘制棋子
 if(type == 'AI'){
  this.AIPoint.forEach((current, index) => {
  this.drawCle(current, '#000000');
  });
 }else{
  this.myPoint.forEach((current, index) => {
  this.drawCle(current, '#ffffff');
  });
 }
 }
 this.page.changeTouchStart = function (e) {
  // 判断游戏是否开始
  if (self.START_GAME){
  // 获取当前坐标
  var newPo = self.getPosition(e);
  // 获取棋盘精确坐标
  if (!self.boolAI && self.boolMy) {
   self.checkPoint(self.myPoint, newPo);
  } else if (self.boolAI && !self.boolMy) {
   self.checkPoint(self.AIPoint, newPo);
  }
  }
 }
 this.page.changeTouchEnd = function (e) {
  if (self.START_GAME) {
  // 绘制棋子
  if (!self.boolAI && self.boolMy) {
   self.boolAI = !self.boolAI;
   self.boolMy = !self.boolMy;
   self.drawLastPoint('PO');
   // 判断白棋是否五子胜利
   if (self.myPoint.length >= 5 && self.checkWinner(self.myPoint)){
   wx.showToast({title: '白棋胜利!'});
   self.START_GAME = false;
   }
  } else if (self.boolAI && !self.boolMy) {
   self.boolAI = !self.boolAI;
   self.boolMy = !self.boolMy;
   self.drawLastPoint('AI');
   // 判断黑棋是否五子胜利
   if(self.AIPoint.length >= 5 && self.checkWinner(self.AIPoint)){
   wx.showToast({ title: '黑棋胜利!' });
   self.START_GAME = false;
   }
  }
  }
 }

五子棋胜利方判断

五子棋胜利就是横向、纵向、45度斜线方向、135度斜线方向连成五个颜色相同的棋子,为了更加清楚的表示,我将四个方向的判断做四个函数处理。

checkTransverse(arr,po){//横向检查
 var len = arr.length - 1;
 var count = 1;
 // 东
 for(var i = 1; i < this.CHESS_LEN ; i++){
  for (var j = 0; j < len; j++){
  if(arr[j].pointX == po.pointX - i && arr[j].pointY == po.pointY){
   count++;
  }
  }
 }
 if (count == this.CHESS_LEN) { return true;}
 // 西
 for (var i = 1; i < this.CHESS_LEN; i++) {
  for (var j = 0; j < len; j++) {
  if (arr[j].pointX == po.pointX + i && arr[j].pointY == po.pointY) {
   count++;
  }
  }
 }
 if (count == this.CHESS_LEN) { return true; }
 }
 checkPortrait(arr,po){//纵向检查
 var len = arr.length - 1;
 var count = 1;
 // 南
 for (var i = 1; i < this.CHESS_LEN; i++) {
  for (var j = 0; j < len; j++) {
  if (arr[j].pointX == po.pointX && arr[j].pointY == po.pointY - i) {
   count++;
  }
  }
 }
 if (count == this.CHESS_LEN) { return true; }
 // 北
 for (var i = 1; i < this.CHESS_LEN; i++) {
  for (var j = 0; j < len; j++) {
  if (arr[j].pointX == po.pointX && arr[j].pointY == po.pointY + i) {
   count++;
  }
  }
 }
 if (count == this.CHESS_LEN) { return true; }
 }
 checkNortheast(arr,po){//45度
 var len = arr.length - 1;
 var count = 1;
 // 西南
 for (var i = 1; i < this.CHESS_LEN; i++) {
  for (var j = 0; j < len; j++) {
  if (arr[j].pointX == po.pointX - i && arr[j].pointY == po.pointY - i) {
   count++;
  }
  }
 }
 if (count == this.CHESS_LEN) { return true; }
 // 东北
 for (var i = 1; i < this.CHESS_LEN; i++) {
  for (var j = 0; j < len; j++) {
  if (arr[j].pointX == po.pointX + i && arr[j].pointY == po.pointY + i) {
   count++;
  }
  }
 }
 if (count == this.CHESS_LEN) { return true; }
 }
 checkNorthwest(arr,po){//135度
 var len = arr.length - 1;
 var count = 1;
 // 西北
 for (var i = 1; i < this.CHESS_LEN; i++) {
  for (var j = 0; j < len; j++) {
  if (arr[j].pointX == po.pointX - i && arr[j].pointY == po.pointY + i) {
   count++;
  }
  }
 }
 if (count == this.CHESS_LEN) { return true; }
 // 东南
 for (var i = 1; i < this.CHESS_LEN; i++) {
  for (var j = 0; j < len; j++) {
  if (arr[j].pointX == po.pointX + i && arr[j].pointY == po.pointY - i) {
   count++;
  }
  }
 }
 if (count == this.CHESS_LEN) { return true; }
 }
 checkWinner(arr){
 var currentPo = arr[arr.length - 1];
 var win1 = this.checkTransverse(arr, currentPo);
 var win2 = this.checkPortrait(arr, currentPo);
 var win3 = this.checkNortheast(arr, currentPo);
 var win4 = this.checkNorthwest(arr, currentPo);
 if (win1 || win2 || win3 || win4){
  return true;
 }else{
  return false;
 }
 }

重置棋盘

resetChessBoard(){
 this.page.setData({ isHide: false });
 this.init();
}
this.page.changeReset = function(e){
 self.resetChessBoard();
}

注意

1. 绘制棋盘前必须清空canvas,方便最后的重新开始和重置棋盘;
2. 对当前棋子的坐标四个方向的判断,采用的原始坐标而不是计算后的绘制坐标;
3. 在判断持棋人时,各自采用一个值,方便添加悔棋功能。

只是实现了简单的对下五子棋功能,后续添加悔棋、记分、记时等功能!

同时向判断胜利的函数可以合并为一进行优化!

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
JQuery触发事件例如click
Sep 11 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
详解关于element级联选择器数据回显问题
Feb 20 #Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 #Javascript
echarts实现词云自定义形状的示例代码
Feb 20 #Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 #Javascript
详解webpack 最简打包结果分析
Feb 20 #Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 #jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 #jQuery
You might like
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP中for循环语句的几种变型
2007/03/16 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
军训心得体会
2013/12/31 职场文书
学生思想表现的评语
2014/01/30 职场文书
诚信考试倡议书
2014/04/15 职场文书
预备党员综合考察材料
2014/05/31 职场文书
单位收入证明范本
2015/06/18 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
用Python实现Newton插值法
2021/04/17 Python