微信小程序实现五子棋游戏

本文实例为大家分享了微信小程序实现五子棋游戏的具体代码,供大家参考,具体内容如下

效果图

.wxml

<view class="title">
  <view wx:if="{{currindex < 324 || defeat}}">
  {{defeat?'胜出方:'+(outindex?'黑棋':'白棋'):'轮到了:'+(outindex?'白棋':'黑棋')}}
  </view>
  <view wx:else>平局</view>
</view>
<view class="gobang">
  <view wx:for="{{detail}}" wx:key="index" bindtap="{{defeat || item.type > 0?'':'palyclass'}}" data-index="{{index}}">
    <view class="piece {{item.type > 0?item.type == 1?'black':'white':''}}"></view>
  </view>
</view>
<button wx:if="{{defeat || currindex > 323}}" bindtap="reset">重新开始</button>

.wxss

page{background: #fff;}
.title{width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 20rpx;font-size: 34rpx;}
.gobang{width: 342px;height: 342px;margin: 30rpx calc((100% - 342px) / 2);float: left;
position: relative;right: 9.5px;}
.gobang>view{width: 5.55%;height: 19px;float: left;display: flex;align-content: center;justify-content: center;
border-left: 1px solid #333;border-top: 1px solid #333;background: #F0BF7C;}
.gobang>view:nth-child(18n+1){width: 5.6%;border-left: 0;border-top: 0;background: #fff;}
.gobang>view:nth-child(18n){border-right: 1px solid #333;}
.gobang>view:nth-child(n+307){border-left: 0;background: #fff;border-right: 0;}
.piece{background: rgba(255,255,255,0);width: 100%;height: 100%;border-radius: 50%;transition: background 0.3s;
position: relative;left: 9.5px;bottom: 9.5px;}
.white{background:radial-gradient(15px 15px at 15px 15px,#fff,#e2e2e2);box-shadow:2px 2px 4px rgba(0,0,0,0.3);}
.black{background:radial-gradient(10px 10px at 15px 15px,#e2e2e2,#333);box-shadow:2px 2px 4px rgba(0,0,0,0.4);}

.js

Page({
  data: {
  },
  onLoad: function (options) {
    this.reset()
  },
  reset(e){
    var detail = []
    for(let i = 0;i < 324;i++){
      detail.push({type:0})
    }
    this.setData({
      detail:detail,
      defeat:false,
      outindex:false,
      currindex:0,
    })
  },
  palyclass(e){
    var index = e.currentTarget.dataset.index,detail = this.data.detail,outindex = this.data.outindex,
    currindex = this.data.currindex;
    currindex++
    detail[index].type = outindex?2:1
    this.setData({
      detail:detail,
      outindex:!outindex,
      currindex:currindex,
    })
    if(currindex > 8){
      this.validate(index)
    }
  },
  validate(index){
    var detail = this.data.detail,type = this.data.outindex?1:2,remai_left = (index%18)+1,remai_right = 19 - remai_left,
    remai_upper = Math.floor(index / 18) + 1,remai_lower = 19 - remai_upper,arr = [];
    for(let i = 1;i < (remai_left > 4?5:remai_left);i++){
      arr.unshift(index - i)
    }
    for(let i = 1;i < (remai_right > 4?5:remai_right);i++){
      arr.push(index + i)
    }
    this.result(arr,type).then(() => {
      arr = [];
      for(let i = 1;i < (remai_upper > 4?5:remai_upper);i++){
        arr.unshift(index - (18*i))
      }
      for(let i = 1;i < (remai_lower > 4?5:remai_lower);i++){
        arr.push(index + (18*i))
      }
      this.result(arr,type).then(() => {
        var oblique_left = remai_upper < remai_left?remai_upper:remai_left,
        oblique_right = remai_lower < remai_right?remai_lower:remai_right;
        arr = [];
        for(let i = 1;i < (oblique_left > 4?5:oblique_left);i++){
          arr.unshift(index - (18*i) - i)
        }
        for(let i = 1;i < (oblique_right > 4?5:oblique_right);i++){
          arr.push(index + (18*i) + i)
        }
        this.result(arr,type).then(() => {
          var curved_left = remai_upper < remai_right?remai_upper:remai_right,
          curved_right = remai_lower < remai_left?remai_lower:remai_left;
          arr = [];
          for(let i = 1;i < (curved_left > 4?5:curved_left);i++){
            arr.unshift(index - (18*i) + i)
          }
          for(let i = 1;i < (curved_right > 4?5:curved_right);i++){
            arr.push(index + (18*i) - i)
          }
          this.result(arr,type).then(() => {
            return;
          })
        })
      })
    })
  },
  result(arr,type){
    var detail = this.data.detail,number = 0;
    for(let i = 0;i < arr.length;i++){
      if(detail[arr[i]].type == type){
        number++
      }else if(number > 0){
        break;
      }
    }
    return new Promise((resolve, reject) => {
      if(number > 3){
        this.tips(type);
      }else{
        resolve()
      }
    })
  },
  tips(type){
    this.setData({
      defeat:true,
    })
    wx.showModal({
      title: '提示',
      content: '恭喜'+(type == 1?'黑棋':'白棋')+'获得了胜利',
      showCancel:false,
      confirmText:'我知道了'
    })
  },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

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

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

  • 微信小程序实现井字棋游戏

    本文实例为大家分享了微信小程序实现井字棋游戏的具体代码,供大家参考,具体内容如下 效果图 .wxml <view class="title">   <view wx:if="{{currindex < 9 || defeat}}">   {{defeat?'胜出方:':'轮到了:'}}<span class="span">{{defeat?(outindex?'○':'x'):(outindex?'x':

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

    本文实例讲述了微信小程序五子棋游戏的棋盘,重置,对弈实现方法.分享给大家供大家参考,具体如下: DEMO下载 五子棋对弈.悔棋DEMO 效果图 分析 1. 采用微信小程序的canvas制作五子棋: 2. 确定棋盘大小及格数: 3. 绘制棋盘--通过棋盘宽高和格数计算间距,同时保存坐标点: 4. 黑方和白方下子--定义一个布尔变量代表各自的身份: 5. 重置棋盘--重新开始: 6. 通过判断当前棋手,悔棋时进行改变. 绘制棋盘 drawLine(arr){ arr.forEach(current

  • 微信小程序五子棋游戏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. 最后对该位置的分值进行比较,取最大分值位置

  • 微信小程序实现五子棋游戏

    本文实例为大家分享了微信小程序实现五子棋游戏的具体代码,供大家参考,具体内容如下 效果图 .wxml <view class="title">   <view wx:if="{{currindex < 324 || defeat}}">   {{defeat?'胜出方:'+(outindex?'黑棋':'白棋'):'轮到了:'+(outindex?'白棋':'黑棋')}}   </view>   <view wx:el

  • 微信小程序实现拼图游戏

    本文实例为大家分享了微信小程序实现拼图游戏的具体代码,供大家参考,具体内容如下 页面展示 项目链接 微信小程序实现拼图游戏 项目设计 首页面 wxml <!--index.wxml--> <view class="container"> <!-- 标题 --> <view class="title">游戏选关</view> <!-- 关卡列表 --> <view class="l

  • 微信小程序实现弹球游戏

    本文实例为大家分享了微信小程序实现弹球游戏的具体代码,供大家参考,具体内容如下 实验内容: 小球按照随机的角度直线运动,如果碰到四壁则反弹.你们不需要做游戏计时.设置小球及背景颜色等,只完成小球在方框内反弹运动的功能.这里主要考查绘图知识,数学计算能力,以及对定时器的应用. 实验效果(最简单版本): 实验代码: index.js // index.js Page({     data:{       cx:200,       cy:50,       destinaX:3,       des

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

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

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

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

  • 微信小程序登录换取token的教程

    前言: 这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说在开发届狠狠的火了一把.微信小程序可以开发游戏,腾讯率先带头,做出了一个跳一跳也是点爆朋友圈.所谓落后就要挨打,那么今天就开始学习小程序的一些小知识吧(本文基于十年磨一剑的tp5) 目录: 微信登录换取token的流程 如何将code变成openid和session_key 抛出错误异常和派发令牌 一:微信登录换取token的流程 多说无益,直接上图 小程序获取token.p

  • 微信小程序新闻网站详情页实例代码

    准备工作: 1.在微信公众号平台,申请小程序账号,获取appid 2.下载并安装微信开发者工具 3.做不同分辨率设备的自适应:单位使用rpx IPhone6下 1px=1rpx=0.5pt 使用rpx,小程序会自动在不同分辨率下进行转换 首先是项目的入口页面 welcome.wxml <view class="container"> <image class="avatar" src="/images/avatar/1.png"

随机推荐