一個js小遊戲----總結

花了大概一天左右的功夫實現了一個js小遊戲的基本功能，相似於「雷電」那樣的小遊戲，實現了隨即怪物發生器，碰撞檢測，運動等等都實現了，下一個功能是子彈軌跡，還有其餘一些擴展功能，沒有用庫，也沒有用webGl之類的，單純的邏輯+對DOM的操做，算是一次試手吧，之因此沒有繼續去完善，是由於想要整合一下，各個模塊要更清晰，大致的設計是按MVC來的，可是對控制器那一塊還不滿意，設計過程當中比較得意的是碰撞檢測吧，由於我用了一個數組來維護怪物的生滅，怪物產生則數組push，怪物消失則用splice來從數組中刪除，要注意要用splice而不要用delete，有些人可能圖省事用delete，那就錯了，會形成稀疏數組，浪費不少性能，並且數組的長度也是有限的，數組太長很吃性能。每個怪物都是一個對象，帶有id(total),表示它是從遊戲開始至今的第幾只怪，這個id也就是dom中怪物元素的Id，方便咱們使用document.getElementById來選擇它而後控制，操做dom應該只在更新視圖的時候操做，但是碰撞檢測也須要怪物的位置，因此這個對象中還維護有怪物的橫縱座標，這樣可使得邏輯更清晰。接着就是運動，dom中的運動就是不停的改變像素點，這裏我用setInterval來進行的，一共有兩個set，分別對應怪物的移動和怪物的產生。

原理大概就是這樣。下面說說這裏有一些坑，固然，首先要說的是，你操做dom時用document.getElementById("").style.cssText獲得的是一個相似於「192px「的字符串，而你要修改的是192，而後還要把它改爲字符串從新賦值回去，來達到修改的目的，固然，你也能夠傳個數字回去，瀏覽器會自動幫你改爲字符串，不過這不是很必定，例如你使用document.getElementById("").style.top，這就會出現錯誤。

還有這只是個小遊戲，因此我樣式表直接寫在style標籤之間的，若是你使用link去的話那麼修改樣式則要注意修改外部樣式表的js函數在各個瀏覽器並不一致，我會在隨後的庫裏面封裝。

關於上面剛剛說的將」192px「這個字符串變爲數字，除了用數組的方法其實使用parseInt最好了，之前只把parseInt作進制轉換，這種用法仍是最近剛注意到

在js改變或者生成dom元素時，若是是塊級元素要特別注意它的position，設置錯了，可能視圖看起來會很異常

 

下面說說要改進的地方，第一個，就是要更加模塊化

第二，控制移動在例如前進忽然向上，這個切換不是很流暢，這個暫時尚未什麼好的思路去改進

第三，試着考慮代碼的複用

第四，增長功能