中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

本實例的特點是：籃球在重力的影響下應(yīng)該呈現(xiàn)拋物線式的運(yùn)動。界面中直接給出了游戲的參考線，籃球?qū)刂@條線射出，然后在重力的作用下逐漸下降，進(jìn)入籃筐后得分。

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

一、成果展示

體驗地址：點我體驗。

交互說明：

• 當(dāng)點擊大炮的時候開始進(jìn)行蓄力，同時上方出現(xiàn)蓄力條；
• 當(dāng)松手的時候籃球?qū)涑觯?/li>
• 籃球的運(yùn)動軌跡為拋物線，且沿著指導(dǎo)線的方向射出；
• 當(dāng)籃球進(jìn)入籃筐后得分并可以進(jìn)行下一次射擊；
• 如果未能夠投中，游戲結(jié)束，刷新后繼續(xù)挑戰(zhàn)吧。

二、制作過程

1. 背景繪制

同之前的方式一樣，首先需要找到免費(fèi)的素材并下載，然后根據(jù)素材的品質(zhì)調(diào)整大小以及扣去背景。并將所有的素材加載到axure之中，然后調(diào)整位置大小并將所有素材的位置記錄下來。注意這一步以前是沒有的，記錄素材的位置有利于之后拋物線的實現(xiàn)以及一些邏輯判斷。

將所有的元素都擺放整齊之后沿著炮筒的方向畫一條直線，作為輔助線幫助用戶估計設(shè)計的角度。

2. 讓輔助線動起來

將輔助線轉(zhuǎn)化為動態(tài)面板，設(shè)置state1和state2，把state2的線略微進(jìn)行平移，這樣只要頻繁切換兩個面板就會給人線移動的錯覺。面板切換的方式為設(shè)置動態(tài)面板循環(huán)，循環(huán)的速度依據(jù)實際情況而定，總之感覺不要太違和就可以了。

3. 設(shè)置全局變量

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

x代表當(dāng)前籃球的x坐標(biāo)，e代表游戲狀態(tài)，e=0即停止所有運(yùn)動，time為蓄力時間的計算，score為得分的判定。

4. 計算方程

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

計算的思路是這樣的。

• 首先由于籃球是從炮孔出去的，所以該拋物線必然會經(jīng)過這一個坐標(biāo)；
• 由于射出的方向是和炮孔平行的，所以這條參考線是該拋物線的一條切線；
• 拋物線的確定需要三個要素，因此以上兩個條件約束后將可以得到一個拋物線系；
• 按下的時間將作為最后一個要素將拋物線完全確定。

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

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

通過上面的推倒最后經(jīng)過計算可以得到結(jié)果。

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

b=-2*a*t;

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

運(yùn)動總方程為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）。

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

5. t的獲取

上圖中的條件是邊界判定，否則計時器將會永遠(yuǎn)運(yùn)行下去，現(xiàn)在的做法就是將籃球約束在頁面內(nèi)，所以投出去之后籃球才會停下來。該操作time不斷進(jìn)行自加運(yùn)算，當(dāng)鼠標(biāo)停止按的時候直接將動態(tài)變量e設(shè)置為0,即可以停止計時，這個時候time的數(shù)值計做t，通過該數(shù)值即可以判斷最終拋物線的形狀。

上方蓄力條的制作方法也是類似的，只要獲取了time，讓time成為其長度即可，這樣進(jìn)度條就可以隨著time的積累逐漸加長了。

6. 設(shè)置球的運(yùn)動

之前我們已經(jīng)獲取了所有的數(shù)據(jù)，這里只需要讓他們成為小球的x坐標(biāo)以及y坐標(biāo)即可。我們可以使用移動功能，將小球移動到絕對位置。

設(shè)置方式如上圖所示，條件依然是游戲進(jìn)行與否的判定，主要內(nèi)容是移動，將小球移動到絕對坐標(biāo)的位置。最后x=x+100則是x值的循環(huán)，只有x不斷取新的值才能夠讓球持續(xù)的運(yùn)行下去。

7. 得分判定

得分判定的設(shè)置如上圖所示，為接觸式判定，在籃筐處放置一個動態(tài)面板，當(dāng)籃球接觸該面板的時候發(fā)生下列操作，即復(fù)位以及分?jǐn)?shù)的增加。

三、寫在最后

本實例的難度主要在函數(shù)的計算方面，且由于公式復(fù)雜，計算頻繁，導(dǎo)致實際運(yùn)行的時候比較卡，作者做的比較簡單， 僅僅保留了核心功能。

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

比如：球的旋轉(zhuǎn)，當(dāng)加上之后性能明顯下降，網(wǎng)頁運(yùn)行效率降低；再比如：球落地或者射高后的結(jié)束判斷則直接不會執(zhí)行。當(dāng)然也有可能是作者的邏輯不對，總之最終版刪去了不少功能，最后得到了這個穩(wěn)定的結(jié)果。

#專欄作家#

馬璐，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注產(chǎn)品設(shè)計以及用戶體驗，力求在技術(shù)一定的情況下將產(chǎn)品做到極致，充分發(fā)揮技術(shù)的潛能。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自作者