用canvas制作酷炫射击游戏--part2

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

 

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

 

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

 

 

火车跑一圈叫做一帧。火车一秒钟跑过的圈数叫做帧数率（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方法中相应的部分，浏览器就会自动帮我们运行了。

 

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