微信小程序实战之双人五子棋游戏是实现

 更新时间:2022年05月28日 15:28:32   作者:失散多年的哥哥  
这篇文章主要为大家详细介绍了如何利用微信小程序实现双人五子棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一、项目展示

微信小程序项目实例——双人五子棋

双人五子棋是一款游戏小程序

两位选手可以在15x15的棋盘上

进行五子棋竞技

同时小程序设置了悔棋功能

二、项目核心代码

点击落子

step: function(event)
  {
    var pos=event.currentTarget.dataset.pos;
    wx.setStorageSync('vak', this.data.vak);
    
    if(this.data.vak[pos]=="white"||this.data.vak[pos]=="black")return;
    this.count++;
    if(this.count%2)
    {
      this.data.vak[pos]="black";
    }
    else
    {
      this.data.vak[pos]="white";
    }
    this.setData({
      vak : this.data.vak
    })
    this.judge(pos);
  }

判断胜负

  judge: function(pos)
  {
    var color=this.data.vak[pos];
    var x0=parseInt(pos/15),y0=pos%15,x,y,round;
    for(var i=0;i<4;i++)
    {
      var five=0;
      round=0;
      for(x=x0,y=y0;round<5;x+=this.vec[i][0],y+=this.vec[i][1],round++)
      {
        if(this.data.vak[15*x+y]==color)
        {
          five++;
        }
        else
        {
          break;
        }
      }
      round=0;
      for(x=x0,y=y0;round<5;x-=this.vec[i][0],y-=this.vec[i][1],round++)
      {
        if(this.data.vak[15*x+y]==color)
        {
          five++;
        }
        else
        {
          break;
        }
      }
      var rstr=color+"win";
      if(five>=6)
      {
        this.setData({
          result : rstr
        });
        wx.showModal({
        title: color+'获胜',
        content: '再来一局',
        success: function(res) {
          if (res.confirm) {
         wx.redirectTo({
           url:"./index"
         });
          }
        }
        })
      }
    }
  },

三、效果展示

胜利效果

重新开始

悔棋

到此这篇关于微信小程序实战之双人五子棋游戏是实现的文章就介绍到这了,更多相关微信小程序五子棋游戏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现拖拽 闭包函数详细介绍

    js实现拖拽 闭包函数详细介绍

    在开发过程中可能会使用js实现拖拽等相关功能,本文将以此问题进行深入介绍,需要了解的朋友可以参考下
    2012-11-11
  • 修改file按钮的默认样式实现代码

    修改file按钮的默认样式实现代码

    file按钮作为上传文件使用,不过默认的样式确实让人不敢恭维啊,如何才可以修改为漂亮一点的呢?接下来与大家分享下具体的实现代码,感兴趣的朋友可以参考下哈
    2013-04-04
  • Axios get post请求传递参数的实现代码

    Axios get post请求传递参数的实现代码

    axios是基于promise用于浏览器和node.js的http客户端,支持浏览器和node.js,能拦截请求和响应,这篇文章主要介绍了axios get post请求传递参数的操作代码,需要的朋友可以参考下
    2022-11-11
  • JS中绑定事件顺序(事件冒泡与事件捕获区别)

    JS中绑定事件顺序(事件冒泡与事件捕获区别)

    本文主要介绍了JS中绑定事件顺序(事件冒泡与事件捕获区别)。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JS实现往下不断流动网页背景的方法

    JS实现往下不断流动网页背景的方法

    这篇文章主要介绍了JS实现往下不断流动网页背景的方法,实例分析了递归调用自定义函数scrollBG实现动态背景特效的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript实现GriwView单列全选(自写代码)

    JavaScript实现GriwView单列全选(自写代码)

    在 GridView 里有一系列的 Checkbox ,要实现对其全选或全不选,二网上的都不否和要求,于是我自己写了JavaScript 代码,贴出来供大家参考
    2013-05-05
  • Dojo获取下拉框的文本和值实例代码

    Dojo获取下拉框的文本和值实例代码

    这篇文章主要介绍了Dojo获取下拉框的文本和值实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • js中hasOwnProperty()方法详解

    js中hasOwnProperty()方法详解

    本文主要介绍了js中hasOwnProperty()方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • JS报错Uncaught TypeError: XXX is not a function的解决方法

    JS报错Uncaught TypeError: XXX is not a function的解决方法

    这篇文章主要给大家介绍了关于JS报错Uncaught TypeError: XXX is not a function的解决方法,本来好好的,突然就出现的错误,不过这并不是什么难解决的错误,需要的朋友可以参考下
    2023-08-08
  • 微信小程序异步处理详解

    微信小程序异步处理详解

    这篇文章主要为大家详细介绍了微信小程序异步处理的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论