搜索

首页  >  问答  >  正文

javascript - 我做了一个h5的画布游戏,用requestanimation控制方向移动,按键控制是否按下方向键,但是有点卡,请问大神怎么优化

代码具体没办法打出来,有没有大神提供宝贵的意见

过去多啦不再A梦过去多啦不再A梦2743 天前918

全部回复(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
  • 取消回复