亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序開發(fā)之實(shí)現(xiàn)別踩白塊游戲

 更新時(shí)間:2023年02月07日 10:57:32   作者:失散多年的哥哥  
這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡(jiǎn)單的別踩白塊游戲,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以和小編一起學(xué)習(xí)一下

一、項(xiàng)目展示

別踩白塊是一款微信小游戲

分為無盡模式、計(jì)時(shí)模式、急速模式三種模式

用戶需要點(diǎn)擊不斷移動(dòng)的黑色方塊

若點(diǎn)擊到白色方塊則游戲結(jié)束

二、無盡模式

無盡模式下可以一直進(jìn)行游戲

直到失敗為止

其中方塊的生成和點(diǎn)擊計(jì)數(shù)代碼如下:

<!--play.wxml-->
<view class="score">{{score}}</view>
<view class="play-box">
    <block wx:for="{{blockData}}" wx:for-index="i" wx:key="i">
        <view class="block-line" id="line-{{blockData[i].id}}">
            <block wx:for="{{blockData[i].block}}" wx:key="*this" wx:for-index="j">
                <view wx:if="{{blockData[i].block[j] == 0}}" id="block-{{blockData[i].id}}-{{j}}-{{0}}" class="block" bindtap="handleClick"></view>
                <view wx:else class="block black" id="block-{{blockData[i].id}}-{{j}}-{{1}}" bindtap="handleClick"></view>
            </block>  
        </view>
    </block>
</view>
// play 
var app = getApp()
Page({
  data: {
    typeName: '無盡模式',
    silding: false,
    score: 0,
    blockData:[]
  },
  onReady: function(){
      var array = [];
      // 先生成一個(gè)10個(gè)長(zhǎng)度的數(shù)組
      for(var i = 0; i < 10; i++){
          // 生成一個(gè)隨機(jī)位數(shù)為1的數(shù)組
          var orderArray = [0,0,0,0];
          var randomNum = Math.floor(Math.random() * 4);
          orderArray[randomNum] = 1;
          array.push({id: i, block: orderArray});
      }
      this.setData({
          blockData: array.reverse()
      });
  },
  handleClick: function(events){
      var id = events.currentTarget.id;
      var line = id.split("-")[1];
      var column = id.split("-")[2];
      var isBlack = id.split("-")[3];
      var blockData = this.data.blockData.reverse();
      var score = this.data.score;
      var orderArray = [0,0,0,0];
      // 判斷是否是第一行
      if(line != blockData[0].id){
        this.handleWrong(0, score);
        return;
      }
      // 判斷是否正確
      if(isBlack != 1){
        this.handleWrong(1, score);
        return;
      }

      // 正確下一個(gè)
      // 分?jǐn)?shù)++
      // 最后一個(gè)小塊的id為分?jǐn)?shù)+10
      score++;
      orderArray[Math.floor(Math.random() * 4)] = 1;
      blockData.push({id: score+10, block: orderArray});
      blockData.shift();
      this.setData({
          silding: true,
          score: score,
          blockData: blockData.reverse()
      });
  },
  handleWrong: function( type , score){
      const titleArr = ["請(qǐng)點(diǎn)擊第一個(gè)白塊!游戲結(jié)束", "別點(diǎn)白塊!游戲結(jié)束"];
      wx.showToast({
            title: titleArr[type],
            icon: 'cancel', 
            duration: 2000,
            complete: function(){
                // 將此分?jǐn)?shù)存入全局變量
                app.globalData.currentScore = score;
                // 若此分?jǐn)?shù)比最高分?jǐn)?shù)還高 將其存入本地
                if(score > app.globalData.endlessScore){
                    app.globalData.endlessScore = score;
                    wx.setStorageSync('endlessScore',score);
                }
                var timer = setTimeout(function(){
                        wx.redirectTo({
                            url: '../end/end?type=endless&score=' + score
                        })
                        clearTimeout(timer);
                    }, 2000);
            }
        })
  },
  onLoad: function(){
      var that = this;
      wx.setNavigationBarTitle({
        title: that.data.typeName
      });
  }
})

具體的代碼和實(shí)現(xiàn)效果如下

三、計(jì)時(shí)模式

計(jì)時(shí)模式下

用戶將在指定時(shí)間內(nèi)點(diǎn)擊黑塊

時(shí)間到則結(jié)束游戲

四、急速模式

急速模式下

黑塊的移動(dòng)速度提升

到此這篇關(guān)于微信小程序開發(fā)之實(shí)現(xiàn)別踩白塊游戲的文章就介紹到這了,更多相關(guān)小程序別踩白塊游戲內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論