不知大家是否還有印象，淘寶玩法平臺(tái)（一個(gè)內(nèi)部系統(tǒng)）前不久發(fā)布了一款新的游戲 —— 小球入洞，該游戲伴隨著淘寶技術(shù)部去年雙 11 當(dāng)天舉辦的一次抽獎(jiǎng)活動(dòng)，第一次在大家面前亮相。
游戲支持預(yù)先設(shè)定必中獎(jiǎng)項(xiàng)：離開(kāi)發(fā)射器的小球在來(lái)回彈跳一陣之后，不偏不倚的落入到指定獎(jiǎng)項(xiàng)對(duì)應(yīng)的球洞中。體驗(yàn)該功能，可在游戲測(cè)試頁(yè)右側(cè)選項(xiàng)區(qū)進(jìn)行如下的設(shè)置：
本文試著介紹游戲的這個(gè)「掉落至指定球洞」的功能，講的偏思路，并不涉及公式和代碼，我盡可能直白，如果你覺(jué)得晦澀，可以在評(píng)論處我們接著探討。在繼續(xù)之前，為了表達(dá)上的方便，我將對(duì)游戲在視覺(jué)上進(jìn)行如下圖的劃分：
做過(guò)抽獎(jiǎng) UI 組件的同學(xué)都知道，抽獎(jiǎng)結(jié)果一定是由后端計(jì)算之后返回的，原因主要有兩個(gè)：1）安全方面考慮，抽獎(jiǎng)結(jié)果的產(chǎn)生過(guò)程不能在前端實(shí)現(xiàn)；2）只有中間服務(wù)才能更加準(zhǔn)確的分配多端的抽獎(jiǎng)結(jié)果。
鑒于此，所有抽獎(jiǎng) UI 組件都必須滿足：可事先抽得結(jié)果之后再播放動(dòng)畫（顯示結(jié)果）。抽獎(jiǎng)大轉(zhuǎn)盤便是一個(gè)很典型的例子，在轉(zhuǎn)盤滾動(dòng)的時(shí)候，根據(jù) AJAX 請(qǐng)求的返回，JS 其實(shí)已經(jīng)知道它最終會(huì)停在哪個(gè)扇區(qū)上了。
小球入洞是一個(gè)抽獎(jiǎng)?lì)?UI 組件，所以當(dāng)然也必須支持指定結(jié)果的抽獎(jiǎng)，那么問(wèn)題來(lái)了，小球的整個(gè)過(guò)程并不是一段簡(jiǎn)單的動(dòng)畫，怎么才能使之落入到指定球洞呢？
如上圖示意，游戲的主場(chǎng)景三面環(huán)壁（小球反彈），一面布滿小洞（小球穿過(guò)），由于重力的關(guān)系，小球在有限次碰撞彈跳之后，最終一定會(huì)通過(guò)下面的小洞穿出。
「落入指定球洞」自然成了完成該游戲的第一個(gè)也是最棘手的一個(gè)難點(diǎn)，因?yàn)樾∏驈陌l(fā)射器射出時(shí)（離開(kāi)×××區(qū)域瞬間），方向是確定的（水平向左），難以從指定球洞開(kāi)始，逆向地推導(dǎo)運(yùn)動(dòng)路徑并使之最終以確定的方向（水平向右）進(jìn)入發(fā)射器中，此方法非常容易導(dǎo)致路徑太長(zhǎng)或者無(wú)解，尋路耗時(shí)將不可控。基于逆向推導(dǎo)在之前也嘗試過(guò)多種優(yōu)化方案，均以失敗告終。
最終采用的方式是正向推導(dǎo)路徑科普，即：從離開(kāi)發(fā)射器開(kāi)始，模擬小球的物理運(yùn)動(dòng)，迭代式演算，找出一條剛好能穿過(guò)指定球洞的路徑。
受場(chǎng)景其它物體影響（碰撞），小球的運(yùn)動(dòng)路徑并不能用一個(gè)公式描述出來(lái)，它的整個(gè)過(guò)程應(yīng)該由多段的拋物線組成，每一次碰撞都結(jié)束一段并開(kāi)始一段新的路徑，所以需要迭代法逐幀推進(jìn)，才能描繪出完整路徑，下圖是一條路徑的演算過(guò)程：
假設(shè)重力加速度、空氣阻力以及所有鋼體的彈性都是恒定的，并且墻壁和障礙物都靜止不動(dòng)，小球在離開(kāi)發(fā)射器之后，運(yùn)動(dòng)路徑就固定下來(lái)了。換句話說(shuō)，影響小球軌跡的就只剩下小球離開(kāi)發(fā)射器那一瞬間時(shí)的速度（離開(kāi)瞬間的方向固定水平向左）。
讓小球落至指定球洞，起關(guān)鍵決定作用的就是離開(kāi)發(fā)射器時(shí)的初始速度。如果能找出落向每個(gè)球洞所需的初始速度，問(wèn)題就解決了。
不知怎么給這個(gè)含義扣個(gè)名堂，我估且稱之為暴破法吧，暴破即暴力破解，通常用于破解密碼，拿大量不同的鑰匙試開(kāi)一把鎖，如果剛好其中一把鑰匙能打開(kāi)鎖，那么暴破就成功了。
包括我在內(nèi)的多數(shù)人，可能會(huì)認(rèn)為暴破的時(shí)間成本很高，所以在最開(kāi)始的思考中首先會(huì)自覺(jué)地把此方案屏蔽掉，在多次其它方案的實(shí)驗(yàn)失敗后，我偶然一試此法，發(fā)現(xiàn)其實(shí)不然。
在本游戲中，我用不斷遞增的初始速度（鑰匙）來(lái)試算路徑，由于沒(méi)有 DOM 操作，且計(jì)算量并不是很大，很快就可以找出經(jīng)過(guò)指定球洞（鎖）的其中一條路徑。
下圖是根據(jù)兩個(gè)不同初始速度試算出來(lái)的兩個(gè)不同結(jié)果：
暴破的耗時(shí)有多方面的影響，本例中我用 2000 個(gè)不同的速度（從 13 到 15，步進(jìn)為0.001），在某一次實(shí)驗(yàn)中，跑了 10 萬(wàn)次自動(dòng)用例，平均一次搜索出結(jié)果嘗試次數(shù)（使用的初始速度的個(gè)數(shù)）是 11.6 次，平均一次搜索出結(jié)果用時(shí)只有 4.65ms，這個(gè)數(shù)值讓我很意外，幾乎沒(méi)有優(yōu)化的必要。
在以上的 Demo 中，「搜索路徑」這個(gè)動(dòng)作發(fā)生在玩家釋放彈簧之后，小球彈出之前，5ms 就消耗在這里，可以體會(huì)體會(huì) ：）
暴破有時(shí)可以成為迅速解決問(wèn)題的有效手段，比起折騰 AI 來(lái)說(shuō)更加節(jié)省研發(fā)成本，對(duì)于復(fù)雜度不高的小游戲，可行性還是滿高的，也因?yàn)闆](méi)有 DOM 操作，甚至可以放在 WebWorker 里面進(jìn)行。
人機(jī)對(duì)戰(zhàn)的臺(tái)球游戲，機(jī)器的 AI 就完全可以使用此法。
搜索路徑解決了，剩下的問(wèn)題就簡(jiǎn)單得多，小球的整個(gè)運(yùn)動(dòng)，在本游戲中我將之分成三個(gè)階段：
小球彈出后，來(lái)到發(fā)射器右上拐角之前，此為第一階段，為了簡(jiǎn)便，下文記為 A 階段；
小球經(jīng)過(guò)拐角后，離開(kāi)發(fā)射器之前，此為第二階段，也就是 B 階段；
小球離開(kāi)發(fā)射器，直到落洞結(jié)束，此為第三階段，C 階段；
三個(gè)階段如下圖所示：
前面探討的搜索路徑一直指的都是 C 階段，為了使整個(gè)動(dòng)畫看起來(lái)連貫，小球的速度變化一定得平穩(wěn)，也就是：C 階段開(kāi)頭的瞬時(shí)速度，等于 B 階段結(jié)尾的瞬時(shí)速度；B 階段開(kāi)頭的瞬時(shí)速度，等于 A 階段結(jié)尾的瞬時(shí)速度。
如果不考慮磨擦和撞擊后的動(dòng)能衰減，其實(shí)階段 A 加階段 B 在速度變化上就是自由落體的逆過(guò)程，為了簡(jiǎn)便，我將階段 A 和階段 B 做了合并，以同一個(gè)拋物線公式（自由落體）表示，根據(jù) C 開(kāi)頭的瞬時(shí)速度，可以生成 AB 的完整路徑，這樣就得到小球的整個(gè)運(yùn)動(dòng)路徑了，這個(gè)過(guò)程應(yīng)該好理解，不再贅述。
由于必須落入指定球洞，所以 A 階段的初始速度自然也是固定的了，慢著！這里似乎有點(diǎn)兒不對(duì)勁？
彈簧的存在增加了整個(gè)過(guò)程的違合，正常人的理解，應(yīng)該是彈簧壓縮得越厲害，小球射出時(shí)的初始速度越大，這跟合成路徑所需的初始速度不匹配：一個(gè)是變化的，一個(gè)是固定的。
有兩個(gè)解決辦法：
1）使階段 A 的初始速度受彈簧影響，利用階段 A 或階段 AB 的路程來(lái)逐漸消除該影響，使之看起來(lái)變化是平滑的；
2）分兩種情況：彈簧壓縮比小于 0.75 時(shí)（輕輕拉），小球初始速度受彈簧影響，但使小球彈射不成功（發(fā)出去又掉回來(lái)）；彈簧壓縮比大于 0.75 時(shí)（用力拉），小球初始速度直接等于合成路徑所需的初始速度（正常發(fā)出去）；
我采用的是后一種解決辦法，因?yàn)榍耙环N在動(dòng)畫上看起來(lái)反物理，似乎重力加速度是在變化的；而后一種方案至少?gòu)椈蓧嚎s比在 0-0.75 區(qū)間時(shí)都是正常的，而 0.75 以上實(shí)際體驗(yàn)后違合感并不太明顯。
最后的這個(gè)問(wèn)題其實(shí)正是因?yàn)榉堑谩干淙胫付ㄇ蚨础惯@件事情引起的，將這一枚小瑕疵掩藏于彈簧的這 25% 的空間里，個(gè)人感覺(jué)不算太破壞完美，所謂一快遮百丑，這就是現(xiàn)實(shí)版彈珠臺(tái)和電子版的區(qū)別。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
