微信小程序開(kāi)發(fā)之實(shí)現(xiàn)搖色子游戲

更新時(shí)間：2023年01月21日 08:40:27 作者：失散多年的哥哥

這篇文章主要為大家詳細(xì)介紹了如何通過(guò)微信小程序開(kāi)發(fā)一個(gè)簡(jiǎn)單的搖色子游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下

一、項(xiàng)目展示

搖色子是一款簡(jiǎn)易的游戲類(lèi)小程序

用戶(hù)可以投出1-9個(gè)色子

二、核心代碼

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) {
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
    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 () {
    // 頁(yè)面渲染完成
  },
  onShow: function () {
    // 頁(yè)面顯示
  },

  // 產(chǎn)生色子點(diǎn)數(shù)
  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;
  },

  // 產(chǎn)生色子動(dòng)畫(huà)
  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();
  },

  // 產(chǎn)生色子移動(dòng)終點(diǎn)位置
  createDicesPos: function () {
    var dicesPos = [];
    // 色子位置判斷
    function judgePos(l, t) {
      for (var j = 0; j < dicesPos.length; j++) {
        // 判斷新產(chǎn)生的色子位置是否與之前產(chǎn)生的色子位置重疊
        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 {
        // 隨機(jī)產(chǎn)生色子的可能位置
        left = Math.round(Math.random() * 600); // 0~600,根據(jù)色子區(qū)域和色子的大小計(jì)算得出
        top = Math.round(Math.random() * 550); // 0~550,根據(jù)色子區(qū)域和色子的大小計(jì)算得出
      } while (!judgePos(left,top));
      posData.left = left;
      posData.top = top;
      dicesPos.push(posData);
    }
    return dicesPos;
  },

  // 設(shè)置色子數(shù)據(jù)
  setDicesData: function (diceCount) {
    var dicesData = [];

    // 色子動(dòng)畫(huà)數(shù)據(jù)
    var dicesPos = this.createDicesPos(); // 所有色子的位置數(shù)據(jù)
    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 () {
    // 設(shè)置色子移出動(dòng)畫(huà)
    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(){
      // 色子改變點(diǎn)數(shù)并移入屏幕
      that.setDicesData(that.data.diceCount);
    },1400)
    
  },

  // 減少色子數(shù)量
  reduceDice: function () {
    if (this.data.diceCount > 1) {
      this.setData({
        diceCount: this.data.diceCount - 1
      })
    }
  },

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