微信小程序開發(fā)之實(shí)現(xiàn)別踩白塊游戲
一、項(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)文章
解決javascript:window.close()在chrome,Firefox下失效的問題
本篇文章是對(duì)javascript:window.close()在chrome,Firefox下失效問題的解決方法進(jìn)行了分析介紹。需要的朋友參考下2013-05-05微信小程序?qū)崿F(xiàn)商城倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)商城倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06ES6使用 Array.includes 處理多重條件用法實(shí)例分析
這篇文章主要介紹了ES6使用 Array.includes 處理多重條件用法,結(jié)合實(shí)例形式分析了Array.includes基本功能、原理及處理多重條件相關(guān)操作技巧,需要的朋友可以參考下2020-03-03JavaScript實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片輪播,左右翻轉(zhuǎn),圖片切換顯示等效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12bootstrap導(dǎo)航欄、下拉菜單、表單的簡(jiǎn)單應(yīng)用實(shí)例解析
這篇文章主要介紹了bootstrap導(dǎo)航欄、下拉菜單、表單的簡(jiǎn)單應(yīng)用實(shí)例解析,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-01-01js 使用ajax設(shè)置和獲取自定義header信息的方法小結(jié)
這篇文章主要介紹了js 使用ajax設(shè)置和獲取自定義header信息的方法,結(jié)合實(shí)例形式總結(jié)分析了js 使用ajax自定義設(shè)置和獲取header響應(yīng)信息相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-03-03JavaScript實(shí)現(xiàn)微信小程序打卡時(shí)鐘項(xiàng)目實(shí)例
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)微信小程序打卡時(shí)鐘項(xiàng)目實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04