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

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

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. 在判断持棋人时,各自采用一个值,方便添加悔棋功能。

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

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

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

(0)

相关推荐

  • 微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧

    前言 小程序跳一跳最近很火,之前爆出微信游戏小程序漏洞,网上也不乏大神.这里就用一大神的python脚本来刷下高分. 跳一跳python脚本传送门 配置过程 注: 电脑环境未配置python环境,请自行谷歌或者百度配置,这里不再做叙述. 1. 将上述传送门整个项目拷贝到本地(用git命令,或者直接压缩包下载,这里大家随意).比如我这里下载压缩包,解压我电脑以下的目录. 2. 楼主用的是 ios , 操作起来比较繁琐,也懒得找测试要 Android 测试机,所有就下了模拟器测试,首推雷电模拟器,安

  • 微信小程序实现的贪吃蛇游戏【附源码下载】

    本文实例讲述了微信小程序实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: 界面布局 pages/snake/snake/snake.wxml: <!--snake.wxml--> <view class="control" bindtouchstart="tapStart" bindtouchmove="tapMove" bindtouchend="tapEnd">

  • JS+canvas实现的五子棋游戏【人机大战版】

    本文实例讲述了JS+canvas实现的五子棋游戏.分享给大家供大家参考,具体如下: 运行效果图: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css

  • 纯JS实现五子棋游戏兼容各浏览器(附源码)

    纯JS五子棋(各浏览器兼容) 效果图:  代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/

  • Javascript和HTML5利用canvas构建Web五子棋游戏实现算法

    这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五

  • H5+C3+JS实现双人对战五子棋游戏(UI篇)

    本篇文章实现的是双人对战模式,主要是实现除人机AI算法和判断输赢之外的其他功能,下一篇将会发布AI 框架搭建 <!Doctype html> <html> <head> <!-- 百度爬虫优化 --> <meta http-equiv="author" content="成兮,缘分五月" /> <meta http-equiv="Keywords" cotent="五子棋

  • 微信小程序五子棋游戏AI实现方法【附demo源码下载】

    本文实例讲述了微信小程序五子棋游戏AI实现方法.分享给大家供大家参考,具体如下: DEMO下载 五子棋AI篇DEMO 效果图 原理 1. 将棋盘中能够胜利的五子连珠方法遍历一个数组: 2. 当AI持棋时,遍历棋盘中所有棋子的空位: 3. 如果用户落子该位置,给用户该位置的五连珠方式进行加分:1连10分,2连20分,3连40分,4连80分: 4. 如果AI落子该位置,给AI该位置的五连珠方式进行加分:1连15分,2连25分,3连45分,4连85分: 5. 最后对该位置的分值进行比较,取最大分值位置

  • 微信小程序—微信跳一跳,Android游戏助手(外挂)使用教程详解

    作为一名有着丰富实战经验的Android开发人员,作为一个有着一定基础和实战的逆向新司机,第一次面对github上的这个项目自己也是懵的,即使看完了README,也还是不知道从何下手.在此之前玩游戏从未使用过游戏助手之类的.那么我在想,作为小半个专业选手尚且这样,广大小白又能比我好到哪里去呢? 以前我也曾经是个单纯的好骚年啊! 后来经过仔细阅读README,加上摸索,和查看源码,才慢慢走上正途:下面记录一下,以备你查看: 成果 图片说明:本人排行第二,记得我自己才跳了昨天一百七十多分,大多数都是

  • 微信小程序版翻牌小游戏

    本文实例为大家分享了微信小程序翻牌游戏的具体代码,供大家参考,具体内容如下 一.新建一个quick start项目看看结构 在微信开发工具点击添加项目,选择 无appid,勾上"在当前目录中创建quick start 项目". 可以看到一共有两个目录 pages和utils,和根目录下的3个app文件.pages存放的是小程序的页面,每个也面都有自己独立的文件夹. 一个页面由4文件构成,js文件是程序逻辑:wxss是微信定义的样式文件,语法跟css一样,支持的样式要少一些:wxml文件

  • 微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】

    本文实例讲述了微信小程序五子棋游戏的悔棋实现方法.分享给大家供大家参考,具体如下: DEMO下载 五子棋悔棋DEMO 效果图 分析 悔棋功能需要的操作: 1. 判断当前持棋人: 2. 清空棋盘: 3. 将当前持棋人的棋子数组的最后一个棋子还原到全局坐标数组的位置: 4. 删除当前持棋人的棋子数组的该坐标. js this.page.changeUndo = function(e){ if (self.START_GAME){ var lastM = self.myPoint.length - 1

  • H5+C3+JS实现五子棋游戏(AI篇)

    本文实例为大家分享了H5+C3+JS实现五子棋游戏的具体代码,供大家参考,具体内容如下 新增全局变量 <script> //所有赢法总和 var count = 0; //容纳所有赢法的三维数组 var allWin = []; for(var i =0; i <15; i++){ allWin[i] = []; for(var j=0; j <15; j++){ allWin[i][j] = []; } } //横线赢法 for(var i =0; i <15; i++){

随机推荐