基于Canvas的JS游戏引擎(一)

最新推荐文章于 2025-05-17 15:40:04 发布

xxxspade

最新推荐文章于 2025-05-17 15:40:04 发布

阅读量6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 JavaScript 文章标签：游戏引擎 canvas

本文链接：https://blog.youkuaiyun.com/jlin991/article/details/61970971

本文介绍了基于Canvas的JS游戏引擎的基本原理，重点讲述了游戏循环的实现，包括窗口.requestAnimationFrame()的使用，以及动画重绘的三种方法。此外，还探讨了精灵的绘制策略，通过策略模式和命令模式实现精灵的行为解耦和动态组合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

这是一个非常精简的游戏引擎，它仅仅包含了一般游戏所必须拥有的功能。

游戏引擎

主要功能如下
1. 游戏循环
2. 绘制精灵
3. 基于时间运动
4. 碰撞检测
5. 帧速率更新
4. 暂停游戏
5. 事件处理
6. 图片加载

动画循环 /游戏循环

其实游戏循环就是依赖动画循环实现的。
window.requestAnimationFrame()
传统的是window.setTimeout()

核心：只需在播放动画时持续更新并绘制就行了。持续更新和重绘：动画循环。
它是所有动画的核心逻辑。

setInterval setTimeout的缺点

使用setInterval实现动画循环，只需要调用一次，而setTimeOut() 则需要持续调用。
他们的问题：对于setTimeout()它要明确告诉浏览器下一次执行动画循环的时间。所以，每次调用它都要把下次执行动画循环的时间点计算出来。
它不提供精确计时机制，它们只是让程序能在某个大致时间点上运行代码的通用方法而已。
“强制规定时间间隔的下限”。况且浏览器也是在这么做。

比如FIREFOX 允许最小时间间隔是10ms。后续调用的最小间隔是5ms。这也就是说如果你以3ms 为参数来调用setTimeout()方法，浏览器就会根据规则认定参数无效。

不应主动命令浏览器何时去绘制下一frame动画，这应该由浏览器告诉你

虽然setTimeout() setInterval() 时间间隔机制不精确，不过调用的时候，会主动告知绘制下一frame的时间。然而调用者并不知道下一frame动画最佳时机，你可能根本不了解浏览器绘制动画内部机制。我们应该让浏览器在它觉得可以绘制下一frame动画时通知你。我们用requestAnimationFrame() 实现。

function animate(time){
requestAnimationFrame(animate);
}
function animate() { ...}

实现动画效果：

   animate:function(time,that){
        //let self=this; 
        if(this.paused){
            //check if the game is still paused , in PAUSE_TIMEOUT. no need to check
            //more frequently

            setTimeout(()=>{
                window.requestNextAnimationFrame((time)=>{
                    //this.animate.call(this,time);
                    this.animate(time,that);
                }) ; 
            },this.PAUSE_TIMEOUT);
        }else{  //game is not paused      
             this.updateSprites(time); //Invoke sprite behavirus
            //call this method again when