搜尋

首頁  >  問答  >  主體

javascript - 我做了一個h5的畫布遊戲,用requestanimation控制方向移動,按鍵控制是否按下方向鍵,但是有點卡,請問大神怎麼優化

程式碼具體沒辦法打出來,有沒有大神提供寶貴的意見

过去多啦不再A梦过去多啦不再A梦2707 天前886

全部回覆(4)我來回復

  • 高洛峰

    高洛峰2017-07-05 10:58:06

    1. 將以畫格為單位的動畫改成以時間為單位的動畫

    2. 對於不需要經常變動的圖片,如背景等,請使用離屏canvas來實現

    3. 對於一些細節的地方,如canvas.width 等,需要用width = canvas.width來保存值使用

    4. 使用函數節流

    5. 事件觸發動作不要以綁定的函數為主,需要將觸發的參數透過傳到程式內部,透過遊戲循環來實現。如:點擊右箭頭的時候,你只需要告訴遊戲主體,往右移動已經被觸發,至於怎麼運動由程式自己決定。

    6. 優化循環,一般來說導致程式運行緩慢最主要的原因都是這個,內部邏輯太多,一個單位循環內根本來不及處理,對於某些數據計算性的東西,比如說生成隨機數等可以通過worker來實現,對於一些不需要經常使用的功能,請盡量避免調用,只有在某些情況觸發了以後,參數值變了,再進行調用。 比如說if(go) dosomething(); 只有當go為true時才進行操作,這樣可以省下大量時間。

    當然具體的最佳化細節需要根據你的程式碼來決定,我只能講這麼點通用的東西,其實大部分優化的思路都一樣的

    回覆
    0
  • 天蓬老师

    天蓬老师2017-07-05 10:58:06

    有可能是事件註冊的問題,可以先從事件委託,和 dom 結束後取消事件入手。

    可以使用 chrome devtool 點開 profile 看看 cpu 和 內存,看看是否有哪些函數有洩漏或其他問題。

    回覆
    0
  • 習慣沉默

    習慣沉默2017-07-05 10:58:06

    使用canvas的局部刷新,不要每次移動就刷新整個畫面

    回覆
    0
  • 仅有的幸福

    仅有的幸福2017-07-05 10:58:06

    你是用DOM 寫的小遊戲?還是用CANVAS

    回覆
    0
  • 取消回覆