您的位置:首页 > 教程 > JavaScript > 微信小程序开发之实现摇色子游戏

微信小程序开发之实现摇色子游戏

2023-01-21 09:07:37 来源:易采站长站 作者:

目录一、项目展示二、核心代码三、效果图一、项目展示摇色子是一款简易的游戏类小程序用户可以投出1-9个色子二、核心代码dice.wxml!--pages/dice/dice.wxml--imports...

目录
一、项目展示
二、核心代码
三、效果图

一、项目展示

摇色子是一款简易的游戏类小程序

用户可以投出1-9个色子

<a href=https://www.easck.com/tags/%e5%be%ae%e4%bf%a1/0.shtml target=_blank class=infotextkey><a href=https://www.easck.com/tags/%e5%be%ae%e4%bf%a1/0.shtml target=_blank class=infotextkey>微信</a></a>小程序开发之实现摇色子游戏

二、核心代码

dice.wXML

<!--pages/dice/dice.wxml-->
<import src="dice/dice-template.wxml" />
<view id="header">
  <view class="btn" catchtap="reduceDice">
    <image src="/images/btn-left.png"></image>
  </view>
  <text id="dice-count">{{diceCount}}</text>
  <view class="btn" catchtap="addDice">
    <image src="/images/btn-right.png"></image>
  </view>
</view>
<view id="dice-zone">
  <block wx:for="{{dicesData}}">
    <template is="dice-template" data="{{...item}}" />
  </block>
</view>
<view id="btn-roll-container" catchtap="onRollTap">
  <text id="btn-roll" >摇</text>
</view>

dice.js

// pages/dice/dices.js
Page({
  data: {
    diceCount: 1,
    dicesData:[]
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    this.dotsData = {
      1: "5",
      2: "28",
      3: "357",
      4: "1379",
      5: "13579",
      6: "134679"
    };
    this.timer = null;
    this.animation = wx.createAnimation({
      duration: 400,
      timingFunction: 'linear',
    });
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },

  // 产生色子点数
  createDotData: function () {
    var num = Math.ceil(Math.random() * 6);
    var diceData = this.dotsData[num];
    var dotsHidden = {};
    for (var i = 1; i <= 9; i++) {
      if (diceData.indexOf(i) > -1) {
        dotsHidden[i] = "black";
      } else {
        dotsHidden[i] = "white";
      }
    };
    return dotsHidden;
  },

  // 产生色子动画
  createAnim: function (left, top) {
    // 色子移入屏幕
    this.animation.top(top + "rpx").left(left + "rpx").rotate(Math.random()*180).step({ duration: 1000, timingFunction: "ease-out" });
    return this.animation.export();
  },

  // 产生色子移动终点位置
  createDicesPos: function () {
    var dicesPos = [];
    // 色子位置判断
    function judgePos(l, t) {
      for (var j = 0; j < dicesPos.length; j++) {
        // 判断新产生的色子位置是否与之前产生的色子位置重叠
        if ((dicesPos[j].left-146 < l && l < dicesPos[j].left + 146) && (dicesPos[j].top-146 < t && t < dicesPos[j].top + 146)) {
          return false;
        }
      }
      return true;
    }
    for (var i = 0; i < this.data.diceCount; i++) {
      var posData = {},
          left = 0,
          top = 0;
      do {
        // 随机产生色子的可能位置
        left = Math.round(Math.random() * 600); // 0~600,根据色子区域和色子的大小计算得出
        top = Math.round(Math.random() * 550); // 0~550,根据色子区域和色子的大小计算得出
      } while (!judgePos(left,top));
      posData.left = left;
      posData.top = top;
      dicesPos.push(posData);
    }
    return dicesPos;
  },

  // 设置色子数据
  setDicesData: function (diceCount) {
    var dicesData = [];

    // 色子动画数据
    var dicesPos = this.createDicesPos(); // 所有色子的位置数据
    for (var i = 0; i < diceCount; i++) {
      var diceData = {};
      diceData.anim = this.createAnim(dicesPos[i].left, dicesPos[i].top);
      diceData.dots = this.createDotData();
      dicesData.push(diceData);
    }
    this.setData({ dicesData: dicesData });
    
  },

  // 摇色子
  onRollTap: function () {
    // 设置色子移出动画
    var newData = this.data.dicesData;
    if(newData.length < this.data.diceCount){
      for(var i = 0; i < this.data.diceCount;i++){
        var data = {};
        newData.push(data);
      }
    }
    for (var i = 0; i < newData.length; i++) {
      this.animation.left("-233rpx").top("123rpx").rotate(-180).step();
      newData[i].anim = this.animation.export();
      this.setData({ dicesData: newData });
    }
    
    var that = this;
    this.timer = setTimeout(function(){
      // 色子改变点数并移入屏幕
      that.setDicesData(that.data.diceCount);
    },1400)
    
  },

  // 减少色子数量
  reduceDice: function () {
    if (this.data.diceCount > 1) {
      this.setData({
        diceCount: this.data.diceCount - 1
      })
    }
  },

  // 增加色子数量
  addDice: function () {
    if (this.data.diceCount < 9) {
      this.setData({
        diceCount: this.data.diceCount + 1
      })
    }
  }
})

三、效果图

具体的效果展示如下

微信小程序开发之实现摇色子游戏

以上就是微信小程序开发之实现摇色子游戏的详细内容,更多关于小程序摇色子游戏的资料请关注我们其它相关文章!

如有侵权,请发邮件到 [email protected]

相关文章

  • vue跳转页面的几种方法(推荐)

    vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转
    2020-03-26
  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用
    2020-03-23
  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/
    2020-03-10
  • 微信小程序实现canvas分享朋友圈海报

    微信小程序实现canvas分享朋友圈海报

    本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕
    2020-06-21
  • 详解ES6 Modules

    详解ES6 Modules

    当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。 我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制, 并总结下常用的操
    2020-07-04
  • Vue-router 报错NavigationDuplicated的解决方法

    Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push()、replace()进行导航时,不能重复导航到当前路由。 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot
    2020-03-31
  • vue使用better-scroll实现滑动以及左右联动

    vue使用better-scroll实现滑动以及左右联动

    本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以
    2020-06-30
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响
    2020-06-25