您的位置:首页技术文章
文章详情页

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

【字号: 日期:2023-03-06 10:22:48浏览:35作者:猪猪

问题描述

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

问题解答

回答1:

将以帧为单位的动画改成以时间为单位的动画

对于不需要经常变动的图片,如背景等,请使用离屏canvas来实现

对于一些细节的地方,如canvas.width 等,需要用width = canvas.width来保存值使用

使用函数节流

事件触发动作不要以绑定的函数为主,需要将触发的参数通过传到程序内部,通过游戏循环来实现。如:当点击右箭头的时候,你只需要告诉游戏主体,往右移动已经被触发,至于怎么运动由程序自己决定。

优化循环,一般来说导致程序运行缓慢最主要的原因都是这个,内部逻辑太多,一个单位循环内根本来不及处理,对于某些数据计算性的东西,比如说生成随机数等可以通过worker来实现,对于一些不需要经常使用的功能,请尽量避免调用,只有在某些情况触发了以后,参数值变了,再进行调用。 比如说if(go) dosomething(); 只有当go为true时才进行操作,这样可以省下大量时间。

当然具体的优化细节需要根据你的代码来决定,我只能讲这么点通用的东西,其实大部分优化的思路都一样的

回答2:

有可能是事件注册的问题,可以先从事件委托,和 dom 结束后取消事件入手。

可以使用 chrome devtool 点开 profile 看看 cpu 和 内存,看看是否是有哪些函数有泄漏或者其他问题。

回答3:

使用canvas的局部刷新,不要每次移动就刷新整个画面

回答4:

你是用DOM 写的小游戏?还是用CANVAS

标签: JavaScript