繼上一節(jié)我們已經(jīng)在畫面上完成了數(shù)字盒子的繪制，現(xiàn)在我們就啟動游戲主循環(huán)产镐，在主循環(huán)中驅(qū)動游戲流程倡蝙，在此九串，我們先實現(xiàn)盒子從上往下落的效果。在gamescenecomponent.vue中添加一下代碼：
<script>
export default {
data () {
return {
fallingSpeed: 0.8,
ticksPerNewBox: 80
....
}
代碼中添加的兩個變量將用來控制數(shù)字盒子下落的速度。createjs庫給我們提供一種有效的動畫實現(xiàn)機制猪钮，它會導(dǎo)出一個Ticker類品山，該類提供了一個接口setFPS, 例如通過調(diào)用createjs.Ticker.setFPS(40), 那么createjs就能對頁面在一秒內(nèi)進行40次刷新，每次刷新時會發(fā)出一個'tick'消息烤低，我們只要監(jiān)聽這個消息肘交，并提供會調(diào)函數(shù)，那么createjs就會在一秒內(nèi)回調(diào)我們的函數(shù)40次扑馁，在該函數(shù)中涯呻，我們再通過createjs提供的其他接口繪制頁面就能實現(xiàn)動畫效果了。因此我們繼續(xù)添加相關(guān)代碼：
methods: {
init () {
this.createjs = window.createjs
this.canvas = document.getElementById('canvas')
this.stage = new this.createjs.Stage(this.canvas)
this.createjs.Ticker.setFPS(40)
this.createjs.Ticker.addEventListener('tick', this.tick)
},
tick (e) {
this.stage.update()
if (!e.paused) {
this.moveObjects()
var ticksCount = this.createjs.Ticker.getTicks(true)
if (ticksCount % this.ticksPerNewBox === 0) {
this.generateNumberBox()
}
}
},
moveObjects () {
for (var i = 0, len = this.numberBoxes.length; i < len; i++) {
var box = this.numberBoxes[i]
box.y += this.fallingSpeed
}
},
....
}
在初始化函數(shù)init中腻要，我們讓createjs一秒內(nèi)回調(diào)我們提供的tick回調(diào)函數(shù)40次魄懂，createjs不斷的回調(diào)我們的tick函數(shù)，這個情況實質(zhì)上構(gòu)成了游戲的主循環(huán)闯第，在上一個游戲神廟逃亡中市栗，我們是通過一個for循環(huán)來實現(xiàn)游戲主循環(huán)的，這里我們通過createjs的定時回調(diào)機制實現(xiàn)游戲的主循環(huán)咳短。
在tick函數(shù)被回調(diào)時填帽，createjs會給它傳遞一個參數(shù)，我們通過讀取這個參數(shù)的paused值用于判斷游戲是否處于暫停狀態(tài)咙好，如果不是篡腌，那么我們調(diào)用moveObjects,移動頁面上各個成員的位置，這種移動就構(gòu)成了一種動畫效果勾效，由于頁面里的成員都是數(shù)字盒子嘹悼，因此調(diào)用moveObjects將實現(xiàn)數(shù)字盒子從上往下落的效果。
通過getTicks接口层宫，我們能獲得當前函數(shù)被回調(diào)了多少次杨伙，如果回調(diào)的次數(shù)正好是80的倍數(shù)，也就是this.ticksPerNewBox的值的倍數(shù)時萌腿，我們通過this.generateNumberBox()在頁面上繪制新的數(shù)字盒子限匣。
moveObjects()接口的實現(xiàn)邏輯是，遍歷當前所有數(shù)字盒子毁菱，分別把他們的y坐標加上this.fallingSpeed,也就是0.8, 于是每次頁面刷新時米死，頁面上的數(shù)字盒子坐標總往下挪動0.8個單位。以上所有代碼完成后贮庞，加載頁面得到效果如下：
可以看到有很多數(shù)字盒子在單位時間內(nèi)從頂部紛紛往下落峦筒。
接下來我們需要完成的，是在底部添加一個數(shù)字鍵盤窗慎，游戲的玩法是物喷，玩家在底部數(shù)字鍵盤點擊選取兩個值后，如果兩個值的乘機與盒子中的數(shù)值相等，那么盒子就會被爆破掉脯丝。首先在template標簽中添加以下代碼：
<template>
<div>
<canvas id="canvas" width="300" height="480">
</canvas>
<div id="control-box">
<a class="control" v-for="n in 12" :data-value="n" href=# @click="controlClicked">
{{n}}
</a>
</div>
</div>
</template>
我們通過VUE的v-for指令商膊，循環(huán)生成12個下面代碼所描述的DOM元素：
<a class="control" data-value="1" href="#" @click="controlClicked"></a>
這些元素將在頁面上被繪制成兩排數(shù)字鍵盤，接著再style標簽區(qū)域添加樣式代碼：
<style scoped>
#canvas {
background: #333;
}
#control-box {
width: 100%;
overflow: auto;
position: absolute;
bottom: 0;
}
.control {
display: block;
float: left;
width: 50px;
height: 50px;
background: gray;
text-align: center;
line-height: 50px;
font-size: 24px;
font-family: impact;
}
.control.active {
background: white;
color: red;
}
</style>
代碼完成后宠进，加載如瀏覽器晕拆，你可以看到如下效果：
現(xiàn)在點擊鍵盤的話，頁面是沒有反應(yīng)的材蹬，接下來我們添加鍵盤點擊后的響應(yīng)函數(shù)实幕，在script標簽中添加如下代碼：
export default {
data () {
return {
....
calculationText: null,
controlHeight: 100,
inputs: [],
result: 1
}
},
methods: {
init () {
this.createjs = window.createjs
this.canvas = document.getElementById('canvas')
this.stage = new this.createjs.Stage(this.canvas)
this.createjs.Ticker.setFPS(40)
this.createjs.Ticker.addEventListener('tick', this.tick)
this.calculationText = new this.createjs.Text('1X1=1', '18px Impact', 'White')
this.calculationText.textAlign = 'center'
this.calculationText.x = this.gameWidth / 2
this.calculationText.y = this.gameHeight - this.controlHeight - 30
this.stage.addChild(this.calculationText)
},
updateText (string) {
this.calculationText.text = string
},
controlClicked (e) {
var value = e.target.dataset.value
var string = this.addInput(value)
this.updateText(string)
},
addInput (value) {
if (this.inputs.length >= 2) {
this.clearInputs()
}
this.inputs.push(value)
this.result *= value
return this.inputs.join('X') + '=' + this.result
},
clearInputs () {
this.inputs.length = 0
this.result = 1
},
....
}
}
calculationText是顯示在頁面上的字符串對象，在init函數(shù)里初始化后加入到stage容器中堤器，當鍵盤的按鍵被點擊時昆庇，由于我們通過@click指令進行綁定的緣故，一旦按鍵點擊后闸溃，controlClicked函數(shù)會被調(diào)用整吆，該函數(shù)調(diào)用時會把點擊事件對象當做參數(shù)傳給我們，通過該對象的target成員辉川，我們就能獲得按鍵的DOM對象表蝙，注意我們在前面實現(xiàn)的12個按鍵對象時，在里面添加一個屬性叫data-value,該屬性的值就是按鍵在頁面上顯示的值乓旗，通過e.target.dataset就是在讀取data-value屬性府蛇，e.target.dataset.value就是獲得data-value對應(yīng)的屬性值。
讀取到按鍵的data-value屬性值后屿愚，我們就知道用戶點擊了哪個按鍵汇跨，并獲得了按鍵的數(shù)值，然后把該數(shù)值傳遞給addInput函數(shù)妆距，這個函數(shù)的作用是把用戶點擊的按鈕值構(gòu)建成一個字符串穷遂，加入用戶點擊了按鈕"1"和"2",那么addInput就會構(gòu)造出字符串"1X2=2",接著調(diào)用updateText把該字符串顯示到頁面上，完成這些代碼后毅厚，加載頁面塞颁，可以看到如下效果：
再下一節(jié)，我們將在此基礎(chǔ)上完成盒子被爆破的效果吸耿，并實現(xiàn)界面美化，最后使得我們的游戲變得像本節(jié)剛開始介紹時得樣子酷窥。
更多技術(shù)信息，包括操作系統(tǒng)蓬推，編譯器妆棒，面試算法，機器學(xué)習，人工智能糕珊，請關(guān)照我的公眾號：
