HTML5小遊戲研究(二):完善上一節的問題

昨天打球打得不錯,找到手感上來兩個crossover,簡直無情。心情好了,繼續解決遺留問題。

首先,看看需要搞定哪些問題

  • 加速跳躍
  • 各種bug
  • 碰撞檢測

(吐槽,CSDN的markdown編輯器有BUG,之前打到一半的文章,因爲我編輯了一下另一篇,文章內容都沒了,這是因爲他的HTML5存儲有問題,所有文章公用一個存儲區域)

加速跳躍

之前的跳躍太呆了,完全勻速,我玩了好久原著找感覺,發現他的方塊跳躍是有加速度的,於是先加上一個跳躍的加速度。

src="//jsrun.net/5UKKp/embedded/result,js/light/" allowfullscreen="allowfullscreen" height="600" width="100%">

各種BUG

由於我之前列舉了好多問題,但由於文章丟了,我反覆調試消滅了很多BUG,我自己也想不起來有什麼了。

比如,方塊落地的一瞬間會猛的前進一小段距離;撞牆後方塊會在天上閃一下。諸如種種,都是一些小細節的參數微調,花點時間調試就可以。

碰撞檢測

這個真是難到我了,實在想不出什麼好辦法來判斷方塊撞牆。搜索了一些方法,但對我這個案例的應用性不強,最容易理解的方法是給方塊和障礙的邊加座標,但是太麻煩了了。

剛開始思考時,我給障礙加了一個輔助線,我發現勻速跳躍只有貼着線才能勉強通過。我就開始琢磨跳躍的軌跡和碰撞的關係。
這裏寫圖片描述3

我仔細觀察了原著,他的方塊跳躍的軌跡好像一個半圓,而這個半圓又是(障礙物高度 x 2)外接圓的軌跡,然後軌跡的半徑在外接圓的半徑的基礎上加上方塊的,就完美的解決了碰撞的問題。因爲方塊在空中轉180度,從跳躍到落地的軌跡,正好是這個外接圓的外切矩形的運動軌跡,這樣幾乎不存在方塊在空中時,邊角碰到障礙的情況。我覺得是個不錯的方法。

於是我也如法炮製,做了一個類似的,但是因爲想不出來怎麼才能跳出來半圓軌跡。這個也是有BUG的,如果仔細嘗試。暫時先做一個,日後再研究。

src="//jsrun.net/DUKKp/embedded/result,js/light/" allowfullscreen="allowfullscreen" height="600" width="100%">

小結

經過慢慢修改,逐漸有一點意思了,看來CANVAS做這個也是可以的,昨天看的電影《明日世界》裏說“想象力比知識更重要”,要多想少限制自己。接下來,繼續消除bug,增加開始界面,聲音,動畫元素。

發佈了39 篇原創文章 · 獲贊 37 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章