|
簡介： 憤怒鳥遊戲的特色是可以將物件用拉弓射箭的方式拋射出去，本單元就來介紹如何用JavaScript程式實現這個動作。 網頁介面設計 首先還是下載一個球的圖案  接著開啟一個HTML網頁，設計兩個div物件如下：  黃色遊戲區id設為'Q'，球務建設為'B'，B物件要放在Q物件內部，並加上滑鼠事件(md,mv,mup)宣告如下：  拉弓的程式 拉弓就是按住B物件拖曳的動作，程式碼寫在md與mv如下：  sx與sy是滑鼠拖曳座標的起點，x0與y0則是物件B的位置起點，稍後需要用來計算初速度。 此時執行程式就可以拖曳B物件了！ 直線拋射的程式 先試試看寫出直線拋射的程式，關鍵就是要以拖曳球離開原來位置(x0,y0)的距離作為X與Y的初速度(vx,vy)，同時啟動一個計時器，如同乒乓球的單元讓球開始運動！  試試看！此時執行程式就可以作投射了，拉的距離越大速度越快，且拉甚麼方向就會射到相反方向！ 超出範圍的程式停止機制 物件拋出遊戲區當然應該停止，不然繼續跑的物件不僅不繼續玩，終究會因為數字太大讓程式當掉的！ 檢查程式要寫在 run副程式如下：  請記得Q是遊戲區，B是那顆球，上面的判斷式就是看看球是不是跑出上下左右各個邊界了？如果任一狀況成立 outside變數就會是 true，就停止計時器，而且將球拉回到發射點(x0,y0)。試試看，現在球一跑出去就會直接跳回原發射點等待下一次發射了！ 拋射的程式 所謂的拋體運動就是國中學過的重力加速度，簡單說就是讓垂直速度(vy)隨著時間越來越往下加速，每單位時間變化的亮就是加速度了！因為我們的單位與課本中的公尺秒等等都不一樣，所以「重力加速度」不會剛好是9.8！完全看我們自己的喜好設定，讓物件拋射時像是拋體運動就好。程式碼只需要加兩行，增修如下：  程式先宣告一個「加速度」a=2，接著在每次執行 run的時候都讓 vy加上一個 a值！請注意在電腦繪圖中是以下為正的，所以vy增加就是往下加速的意思。好啦！你的程式應該可以拉弓射箭拋射物體了。 |