微信小程序开发之实现别踩白块游戏
失散多年的哥哥 人气:0一、项目展示
别踩白块是一款微信小游戏
分为无尽模式、计时模式、急速模式三种模式
用户需要点击不断移动的黑色方块
若点击到白色方块则游戏结束
二、无尽模式
无尽模式下可以一直进行游戏
直到失败为止
其中方块的生成和点击计数代码如下:
<!--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 = []; // 先生成一个10个长度的数组 for(var i = 0; i < 10; i++){ // 生成一个随机位数为1的数组 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; } // 正确下一个 // 分数++ // 最后一个小块的id为分数+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 = ["请点击第一个白块!游戏结束", "别点白块!游戏结束"]; wx.showToast({ title: titleArr[type], icon: 'cancel', duration: 2000, complete: function(){ // 将此分数存入全局变量 app.globalData.currentScore = score; // 若此分数比最高分数还高 将其存入本地 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 }); } })
具体的代码和实现效果如下
三、计时模式
计时模式下
用户将在指定时间内点击黑块
时间到则结束游戏
四、急速模式
急速模式下
黑块的移动速度提升
加载全部内容