投籃效果實現的難度主要在于抛物線運動的實現，相比較作者的前幾個實例，該實例的運算量要大很多，也是作者首次發現網頁出現了卡頓，因此為了保證主要功能運行的流暢，次要功能沒有保留。

本實例的特點是：籃球在重力的影響下應該呈現抛物線式的運動。界面中直接給出了遊戲的參考線，籃球将會沿着這條線射出，然後在重力的作用下逐漸下降，進入籃筐後得分。

本次制作吸取了像素鳥的教訓，沒有讓背景的雲飄起來，這樣可以大大減少gif圖的體積，從而能夠上傳遊戲流程。

一、成果展示

體驗地址：點我體驗。

交互說明：

• 當點擊大炮的時候開始進行蓄力，同時上方出現蓄力條；
• 當松手的時候籃球将會射出；
• 籃球的運動軌迹為抛物線，且沿着指導線的方向射出；
• 當籃球進入籃筐後得分并可以進行下一次射擊；
• 如果未能夠投中，遊戲結束，刷新後繼續挑戰吧。

二、制作過程

1. 背景繪制

同之前的方式一樣，首先需要找到免費的素材并下載，然後根據素材的品質調整大小以及扣去背景。并将所有的素材加載到axure之中，然後調整位置大小并将所有素材的位置記錄下來。注意這一步以前是沒有的，記錄素材的位置有利于之後抛物線的實現以及一些邏輯判斷。

将所有的元素都擺放整齊之後沿着炮筒的方向畫一條直線，作為輔助線幫助用戶估計設計的角度。

2. 讓輔助線動起來

将輔助線轉化為動态面闆，設置state1和state2，把state2的線略微進行平移，這樣隻要頻繁切換兩個面闆就會給人線移動的錯覺。面闆切換的方式為設置動态面闆循環，循環的速度依據實際情況而定，總之感覺不要太違和就可以了。

3. 設置全局變量

本例子的全局變量較多，請大家一定要注意哪個是哪個，一旦稍不注意，就有可能出現錯誤，且公式複雜，錯誤的地點并不是很好找。

x代表當前籃球的x坐标，e代表遊戲狀态，e=0即停止所有運動，time為蓄力時間的計算，score為得分的判定。

4. 計算方程

這是本實例最難的一步，需要大家拿出草稿紙來仔細計算，一旦這裡出錯，結果将會未知。因為axure沒有報錯的功能，所以要找到出錯的點很難。

計算的思路是這樣的。

• 首先由于籃球是從炮孔出去的，所以該抛物線必然會經過這一個坐标；
• 由于射出的方向是和炮孔平行的，所以這條參考線是該抛物線的一條切線；
• 抛物線的确定需要三個要素，因此以上兩個條件約束後将可以得到一個抛物線系；
• 按下的時間将作為最後一個要素将抛物線完全确定。

知道了上述因素，我們大概就有思路了，首先先将方程一一寫出來。

• 抛物線方程：y=ax*x bx c；
• 切線方程：求導可以得到y=2ax b；
• 已知圖中籃球的初始位置是（88,431）；
• 已知切線的斜率為k=（y1-y2）/（x1-x2）;
• 蓄力時間t的獲得後面再講，總之，就是t也是一個已知的量；
• 讓t成為該函數的對稱軸即t=-2a/b。

通過上面的推倒最後經過計算可以得到結果。

a=0.39/(2*t-176);

b=-2*a*t;

c=431-7744*a-88*b;

運動總方程為y=（0.39/(2*t-176)）x*x -2*（0.39/(2*t-176)）*t*x 431-7744*（0.39/(2*t-176)）-88*（-2*（0.39/(2*t-176)）*t）。

聰明的你一定發現了什麼，是的，上面的總方程中沒有a,b,c了，t隻要已知，就可以繪制出完整的抛物線實現我們的投籃動作了，接下來讓我們來思考t的獲取。

5. t的獲取

上圖中的條件是邊界判定，否則計時器将會永遠運行下去，現在的做法就是将籃球約束在頁面内，所以投出去之後籃球才會停下來。該操作time不斷進行自加運算，當鼠标停止按的時候直接将動态變量e設置為0,即可以停止計時，這個時候time的數值計做t，通過該數值即可以判斷最終抛物線的形狀。

上方蓄力條的制作方法也是類似的，隻要獲取了time，讓time成為其長度即可，這樣進度條就可以随着time的積累逐漸加長了。

6. 設置球的運動

之前我們已經獲取了所有的數據，這裡隻需要讓他們成為小球的x坐标以及y坐标即可。我們可以使用移動功能，将小球移動到絕對位置。

設置方式如上圖所示，條件依然是遊戲進行與否的判定，主要内容是移動，将小球移動到絕對坐标的位置。最後x=x 100則是x值的循環，隻有x不斷取新的值才能夠讓球持續的運行下去。

7. 得分判定

得分判定的設置如上圖所示，為接觸式判定，在籃筐處放置一個動态面闆，當籃球接觸該面闆的時候發生下列操作，即複位以及分數的增加。

三、寫在最後

本實例的難度主要在函數的計算方面，且由于公式複雜，計算頻繁，導緻實際運行的時候比較卡，作者做的比較簡單， 僅僅保留了核心功能。

本實例要注意的點很多，比如：循環的速度、等待的時間、邊界的判定，很多數據都是需要不斷嘗試的，且有可能邏輯會出現矛盾，以及軟件本身bug使得某些動作不會進行。

比如：球的旋轉，當加上之後性能明顯下降，網頁運行效率降低；再比如：球落地或者射高後的結束判斷則直接不會執行。當然也有可能是作者的邏輯不對，總之最終版删去了不少功能，最後得到了這個穩定的結果。

#專欄作家#

馬璐，人人都是産品經理專欄作家。關注産品設計以及用戶體驗，力求在技術一定的情況下将産品做到極緻，充分發揮技術的潛能。

本文原創發布于人人都是産品經理。未經許可，禁止轉載

,