正文

今天这一部分主要讲游戏的实现原理与游戏循环的代码实现。

先说原理，大家都看过动画吧。在我看来，游戏就是玩家能人为控制动画剧情发展方向的动画。所以，我们的游戏引擎其实说白了就是个动画引擎再加上鼠标事件、键盘事件等这些能告诉动画接下来剧情走向的模块。你点一下鼠标，动画下一个画面就开枪了，你按一下方向键，动画人物下一个画面就朝着那个方向走一步，就这么简单。

具体到代码，我大概列出了游戏运行需要的主要模块以及他们在源代码的位置。其中最核心的模块就是中间的动画循环模块。他就像一列火车，每个模块就是一个火车站。当火车停靠了所有站台跑完一圈时游戏画面就进入下一帧，除非游戏暂停，动画循环会一直跑下去。

火车跑一圈叫做一帧。火车一秒钟跑过的圈数叫做帧数率（fps）。

所以我们首先要做的就是找到一个方法能让这个循环一直进行下去。我们知道window.setInterval()可以传入一个函数与一个毫秒为单位的时间间隔。每当到了间隔时间就会执行传入的函数。但这里我们不用他，而用HTML5标准定义的window.requestAnimationFrame()方法，这个方法接受一个函数作为参数，浏览器将根据绘制的最佳时机调用这个函数。 在这里比较下二者的优劣。

window.setInterval() window.requestAnimationFrame()

接受参数： 回调函数，间隔时间 | 回调函数

用处： 通用方法 | 专门处理动画，会对动画循环机制做优化

时间间隔： 手动设置，虽然以毫秒为单位但达不到毫秒级精确度 | 浏览器自动根据绘制的最佳时机设置

接下来，就是我们游戏循环的实现。 代码见game-engine 663行起

Game.prototype= { // 调用start方法会根据浏览器最佳时机调用animate方法 start: function () { var me=this; //保存this值，因为requestAnimationFrame()方法是window上的，直接在其中使用this会指向window而不是game的实例 this.startTime=getTimeNow(); //设置游戏开始时间 window.requestAnimationFrame(function (time) { //开始循环 me.animate.call(me,time); }); }, animate: function (time) { //这就是循环要执行的函数 var me=this; if (this.paused) { //如果游戏暂停了，不会执行下面的操作 setTimeout(function () { me.animate.call(me,time); },this.PAUSE_TIMEOUT); } else { //如果游戏没有暂停，依次执行下面的方法 this.tick(time); //用于更新游戏时间 this.clearScreen(); //清空游戏画面。 因为每一帧都会重绘游戏，所有的内容都会在新的位置绘制，所以得把上一帧的内容清除了 this.startAnimate(time);　　　　　　//当开始动画时运行的函数　　　　　　　　 this.paintUnderSprites(); //在精灵对象（也就是玩家和怪物）下绘制的内容 this.updateSprites(time);　　　　　//更新精灵对象的行为 this.paintSprites(); //绘制精灵对象的新位置 this.paintOverSprites(); //精灵对象之后运行的函数 this.endAnimate(); //一帧动画结束时要运行的函数 window.requestAnimationFrame(function (time) { me.animate.call(me,time); }); } },
//后续代码省略

　　

有了这个循环，我们的游戏框架就大体搭起来了，接下来只要把每一帧动画都需要发生的事情写入animate方法中相应的部分，浏览器就会自动帮我们运行了。

今天就到这里吧，下一篇将介绍游戏运行需要的基本模块。