用canvas画飞机大战（一步步详解附带源代码,源码和素材上传到csdn,可以免费下载）

canvas绘图

该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。

飞机大战

前面几期用canvas绘制了太极图和时钟。今天继续来用canvas绘制一个小游戏：飞机大战。
飞机大战想必大家都知道吧

开始绘制

添加一块画布，根据背景图片设置好画布宽高

 	<style>
		canvas{
   
			border: 1px solid #000;
			display: block;
			margin: 50px auto
		}
	</style>
	<canvas id="canvas" width="480" height="640"></canvas>
	<script>
		// 构造函数
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
	</script>

游戏初始化

设置开始前,加载中,游戏中,暂停,游戏结束五个阶段

// 0.1定义好游戏的五个阶段
		var START = 0;
		var STARTING = 1;
		var RUNNING = 2;
		var PAUSE = 3;
		var GAMEOVER = 4;

定义一个自己的状态，时刻的去和上面的五个状态做比较

	var state = START;
	var WIDTH = 480;
	var HEIGHT = 640;
	var score = 0;
	var life = 3;

游戏开始前

加载背景图片

// 1.1.1背景图片的对象
		var bg = new Image();
		bg.src = "images/background.png";
		// 1.1.2背景图片的数据
		var BG = {
   
			imgs :　bg,
			width : 480,
			height: 852   
		}
		// 1.1.3背景图片的构造函数
		function Bg(config){
   
			this.imgs = config.imgs;
			this.width = config.width;
			this.height = config.height;

			// 绘制图片的坐标
			this.x1 = 0;
			this.y1 = 0;
			this.x2 = 0;
			this.y2 = -this.height;

			// 绘制图片
			this.paint = function(){
   
				context.drawImage(this.imgs,this.x1,this.y1);
				context.drawImage(this.imgs,this.x2,this.y2);
			}

			// 图片的运动
			this.step = function(){
   
				this.y1 ++;
				this.y2 ++;
				// 判断图片的临界点
				if(this.y1 == this.height){
   
					this.y1 = -this.height;
				}
				if(this.y2 == this.height){
   
					this.y2 = -this.height;
				}
			}
		}
		// 1.1.4 创建对象
		var sky = new Bg(BG);
		console.log(sky);

		var logo = new Image();
		logo.src = "images/start.png";

加载中阶段

开始前加载动画的对象

// 2.1 开始前动画的对象
		var loadings = [];
		loadings[0] = new Image();
		loadings[0].src = "images/game_loading1.png";
		loadings[1] = new Image();
		loadings[1].src = "images/game_loading2.png";
		loadings[2] = new Image();
		loadings[2].src = "images/game_loading3.png";
		loadings[3] = new Image();
		loadings[3].src = "images/game_loading4.png";
		// 2.2 开始前动画图片的数据
		var LOADINGS = {
   
			imgs : loadings,
			length : loadings.length,
			width : 186,
			height : 38
		}
		// 2.3 开始前动画的构造函数
		function Loading(config){
   
			this.imgs = config.imgs;
			this.length = config.length;
			this.width = config.width;
			this.height = config.height;
			// 定义一个索引
			this.startIndex = 0;
			// 绘制
			this.paint = function(){
   
				context.drawImage(this.imgs[this.startIndex],0,HEIGHT - this.height);
			}

			// 定义一个速度
			this.time = 0;
			this.step = function(){
   
				this.time++;
				if(this.time % 3 ==0){
      
					this.startIndex ++;
				}

				// 当动画运行完成进入下一个阶段
				if (this.startIndex == this.length) {
   
					state = RUNNING;
				}
			}
		}
		// 2.4 创建对象
		var loading = new Loading(LOADINGS);

绑定点击事件,点击开始游戏

// 2.5 绑定事件
		canvas.onclick = function(){
   
			if(state == START){
   
				state = STARTING;
			}
		}

游戏的运行阶段

设置我方飞机

// 3.1.1 我方飞机的图片
		var heros = [];
		heros[0] = new Image();
		heros[0].src = "images/hero1.png";
		heros[1] = new Image();
		heros[1].src = "images/hero2.png";

		heros[2] = new Image();
		heros[2].src = "images/hero_blowup_n1.png";
		heros[3] = new Image();
		heros[3].src = "images/hero_blowup_n2.png";
		heros[4] = new Image();
		heros[4].src = "images/hero_blowup_n3.png";
		heros[5] = new Image();
		heros[5].src = "images/hero_blowup_n4.png";
		// 3.1.2 我方飞机的数据
		var HEROS = {
   
			imgs : heros,
			length : heros.length,
			width : 99,
			height : 124,
			frame : 2   //状态，区分正常和撞击以后的状态

		}
		// 3.1.3 我方飞机的构造函数
		function Hero(config){
   
			this.imgs = config.imgs;
			this.length = config.length;
			this.width = config.width;
			this.height = config.height;
			this.frame = config.frame;
			// 定义索引
			this.startIndex = 0;
			// 绘制坐标
			this.x = WIDTH / 2 - this.width / 2;
			this.y = HEIGHT - 150;

			// 增加标识符
			this.down = false;    //表示一直没有撞击
			// 增加标识符
			this.candel = false;  //表示撞击以后的动画是否运行完成，完成以后的恢复运行的状态

			this.paint = function(){
   
				context.drawImage(this.imgs[this.startIndex],this.x,this.y)
			}
			this.step = function(){
   
				if(!this.down){
      //没有撞击，角标应该是在0和1之间切换
					this.startIndex ++;
					this.startIndex = this.startIndex % 2;
				}else{
   
					this.startIndex ++;
					if(this.startIndex == this.length){
   
						life -- ;
						if(life == 0){
   
							state = GAMEOVER;
							this.startIndex = this.length - 1;   //优化
						}else{
   
							hero = new Hero(HEROS)
						}
					}
				}
			}
			//我方飞机增加射击方法
			this.time = 0;
			this.shoot = function(){
   
				this.time ++;
				if(this.time % 3 == 0){
   
					bullets.push(new Bullet(BULLET))
				}

				
			}
			// 撞击以后触发
			this.bang = function(){
   
				this.down = true;
			}


		}
		// 3.1.4 我放飞机的对象
		var hero = new Hero(HEROS)

绑定鼠标移动事件,我方飞机飞机跟着鼠标移动而移动

// 3.1.5 绑定鼠标移动事件
		canvas.onmousemove = function(e){
   
			if(state == RUNNING){
   
				var x = e.offsetX;
				var y = e.offsetY;
				hero.x = x - hero.width / 2;
				hero.y = y - hero.height / 2;
			}
		}

绘制我方飞机子弹

// 3.2 绘制子弹
		// 3.2