H5 canvas实现简单的飞机大战小游戏

整体分析飞机大战游戏

游戏存在就会有准备阶段（控制游戏全局属性）：

1. 定义游戏状态

		第一阶段：游戏欢迎状态   0     START
		第二阶段：游戏加载状态   1			LOADING
		第三阶段：游戏运行状态   2			RUNNING
		第四阶段：游戏暂停阶段   3			PAUSE
		第五阶段：游戏结束阶段   4			GAMEOVER

2. 定义游戏得分 score = 0

3. 定义我方飞机的生命值 life = 3

4. 定义游戏开关：State=0

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>飞机</title>
	<style type="text/css">
		body{
			text-align: center;
		}
		canvas{
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="480" height="850"></canvas>
	<script type="text/javascript">
	//1.	定义游戏状态 第一阶段：游戏欢迎状态 0 START  第二阶段：游戏加载状态 1 LOADING 第三阶段：游戏运行状态 2 RUNNING 第四阶段：游戏暂停阶段 3 PAUSE 第五阶段：游戏结束阶段 4	GAMEOVER
	const START = 0,
		  LOADING = 1,
		  RUNNING = 2,
		  PAUSE = 3,
		  GAMEOVER = 4;

    //2.	定义游戏得分  score = 0
      var  score = 0,
     //3.	定义我方飞机的生命值  
      	   life = 3,
     //4.	定义游戏开关
      	   State=0 ,
      //当前画布的宽高
      	   WIDTH = 480,
      	   HEIGHT = 850;
//1.第一阶段开始：游戏欢迎阶段
	var canvas = document.getElementById('canvas');
	var cxt = canvas.getContext('2d');
	var myimg = new Image();
	myimg.src ="images/background.png";
	
 //定义背景的数据
     var obj = {
     	imgs : myimg,
     	width:480,
     	height:850 
     }
//定义背景对象的构造器
	function BG(obj){
		//定义绘制背景的坐标
		this.x1 = 0;
		this.y1 = 0;
		this.x2 = 0;
		this.y2 = -obj.height;

		this.width = obj.width;
		this.height = obj.height;
//定义绘制背景图片的方法
	    this.draw = function(){
	    	cxt.drawImage(obj.imgs,this.x1,this.y1);
	    	cxt.drawImage(obj.imgs,this.x2,this.y2);
	    }
//判断两张图片的临界值
	    this.bgrun =function(){
	    	this.y1++;
	    	this.y2++;
	    	if(this.y1 == this.height){
	    		this.y1 = -this.height;
	    	}else if(this.y2 == this.height){
	    		this.y2 = -this.height;
	    	}
	    }
	}
	var bg = new BG(obj);
	var logo = new Image();
	logo.src ="images/start.png";

//控制游戏状态从一个变为第二个
	canvas.onclick = function(){
		if(State == START){
			State = LOADING;
		}
	}
  //2.第二阶段开始
	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";
  //初始化动态效果的数据
    var loading={
    	imgs:loadings,
    	width : 186,
    	height : 38,
    	length : loadings.length
    }
	function Loading(obj){
		this.startIndex = 0;
		//定义绘制加载效果图片的方法
		this.endloading = function(){
			cxt.drawImage(obj.imgs[this.startIndex],(WIDTH-obj.width)/2,HEIGHT-obj.height)
		}
		this.time = 0;
		//定义动画方法
		this.speed = function(){
			this.time++;
			if(this.time % 5 == 0){
				this.startIndex++;
			}
			if(this.startIndex == obj.length){
					State = RUNNING;
			}
		}
	}
	var load = new Loading(loading);

//  游戏运行阶段
//  绘制我方灰机
	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";

//初始化我方飞机的数据
	var HERO = {
		imgs:heros,
		length:heros.length,
		width:99,
		height :124,
		frame : 2
	}

	//我方飞机
	function Hero(obj){
		this.imgs = obj.imgs;
		this.length = obj.length;
		this.height=obj.height;
		this.width = obj.width;
		this.x =(WIDTH-this.width)/2;
		this.y = HEIGHT-this.height;
		this.frame = obj.frame;
		this.startIndex = 0;
	
		this.candel = false;
		//新增一个标识--表示是否被撞击，当前没有被撞击
		this.down = false;

		
        //绘制图片
		this.draw = function(){
			cxt.drawImage(this.imgs[this.startIndex],this.x,this.y)
		}
		this.speed = function(){
			if(!this.down){
				//没有被撞击：startIndex在0和1进行切换
				if(this.startIndex == 0){
					this.startIndex = 1
				}else{
					this.startIndex = 0;
				}
			}else{
				//被撞击
				this.startIndex++;
				if(this.startIndex == obj.length){
					//生命减少1
					life--;
					if(life == 0){
						State = GAMEOVER;
						this.startIndex = this.length-1;
					}else{
						hero = new Hero(HERO)
					}
				}
			}
		}
		this.time = 0;
		//增加子弹射击的方法
		//物体运动思想控制敌机和子弹的速度
		this.shoot = function(){
			this.time++;
			if(this.time% 5 == 0){
				bullets.push(new Bullet(BULLET));
			}
			if(this.time% 13== 0){
				shootenemys.push(new Enemy(ENEMY));
			}
			if(this.time% 120== 0){
				shootenemys.push(new Enemy(ENEMYM));
			}
			if(this.time% 310== 0){
				shootenemys.push(new Enemy(ENEMYL));
			}
		}
		this.bang = function(){
			this.down = true;
		}
	}

    var hero = new Hero(HERO);
    
    canvas.onmousemove = function(event){
    	// var event = event || e || arguments[0];
    	if(State == RUNNING){
    		var x = event.offsetX;
    		var y = event.offsetY;
    		hero.x = x-hero.width/2; 
    		hero.y = y-hero.height/2;
    	}
    }
	//制造子弹
	var bullet = new Image();
	bullet.src = "images/bullet1.png";
	//初始化子弹的构造器
	var BULLET ={
		imgs : bullet,
		width : 9,
		height : 21
	}
	function Bullet(obj){
		this.imgs = obj.imgs;
		this.width = obj.width;
		this.height = obj.height;
		//子弹绘制的坐标
		this.x = hero.x + hero.width/2-this.width/2;
		this.y = hero.y-this.height-10;
		this.draw = function(){
			cxt.drawImage(this.imgs,this.x,this.y);
		}
		this.speed = function(){
			this.y -=4;
		}
		this.candel = false;
		this.bang = function(){
			this.candel = true;
		}
	}
	//创建存储子弹的数组
	var bullets = [];
	//创建函数，用于绘制所有的子弹
	// function bulletsPanit(){
	// 	for(var i=0;i<bullets.length;i++){
	// 		bullets[i].draw();
	// 		bullets[i].speed();
	// 		if(bullets[i].y < -bullets[i].height || bullets[i].candel){
	// 			bullets.splice(i,1);
	// 		}
	// 	}
	// }
	// 绘制子弹
	function drawBullets(){
		for(var i=0;i<bullets.length;i++){
			bullets[i].draw();
		}
	}
	//子弹运动
	function speedBullets(){
		for(var i=0;i<bullets.length;i++){
			bullets[i].speed();
		}// 绘制子弹
//子弹运动
//删除击中和越界的子弹
	}
	//删除击中和越界的子弹
	function delBullets(){
		for(var i=0;i<bullets.length;i++){
			if(bullets[i].y < -bullets[i].height || bullets[i].candel){
				bullets.splice(i,1);
			}
		}
	}

	//敌机小号
    var enemys = [];
    enemys[0] = new Image();
    enemys[0].src="images/enemy1.png";
    enemys[1] = new Image();
    enemys[1].src="images/enemy1_down1.png";
    enemys[2] = new Image();
    enemys[2].src="images/enemy1_down2.png";
    enemys[3] = new Image();
    enemys[3].src="images/enemy1_down3.png";
    enemys[4] = new Image();
    enemys[4].src="images/enemy1_down4.png";

    var ENEMY = {
    	length : enemys.length,
    	imgs : enemys,
    	width : 57,
    	height : 51,
    	type : 1,
		life : 1,
		score : 1 ,
		frame : 1
    }
    //敌机构造
    function Enemy(obj){
    	this.type = obj.type;
    	this.imgs = obj.imgs;
    	this.life = obj.life;
    	this.width = obj.width;
    	this.height = obj.height;
    	this.length = obj.length;

    	this.x = Math.floor(Math.random()*(WIDTH-this.width));
    	this.y = -this.height;
    	//当前没被撞击
		this.down = false;
		this.startIndex = 0;
		//确定动画是否播完
		this.cancel = false;
		//分数
		this.score = obj.score;
		//
		this.frame = obj.frame;
    	this.draw = function(){
    		cxt.drawImage(this.imgs[this.startIndex],this.x,this.y);
    	}
    	this.speed =function(){
    		if(!this.down){
    			this.y+=5;
    			this.startIndex++;
    			this.startIndex = this.startIndex%this.frame;
    
    		}else{
    			this.startIndex++;
    			if(this.startIndex == this.length){
    				this.cancel = true;
    				this.startindex = this.length-1;
    			}
    		}
    	}
    	//碰撞
    	this.collision = function(obj){

    		return obj.y + obj.height > this.y
			&& obj.x + obj.width > this.x
			&& obj.y < this.y + this.height
			&& obj.x < this.x + this.width;
    	}
    	this.bang = function(){
    		this.life--;
    		if(this.life == 0){
    			this.down = true;
    			score += this.score;
    		}
    	}
    }
    var shootenemys = []; 
    // function shootenemy(){
    // 	for(var i=0;i<shootenemys.length;i++){
    // 		shootenemys[i].draw();
    // 		shootenemys[i].speed();
    // 		if( shootenemys[i].cancel||shootenemys[i].y > (HEIGHT+shootenemys[i].height) ){
    // 			shootenemys.splice(i,1);
    // 		}
    // 	}
    // }
    // 绘制敌机
    function drawEnemies(){
    	for(var i=0;i<shootenemys.length;i++){
    		shootenemys[i].draw();
    	}
    }
	//敌机运动
     function speedEnemies(){
    	for(var i=0;i<shootenemys.length;i++){
    		shootenemys[i].speed();
    	}
    }
	//删除击中和越界的敌机
    function delEnemies(){
    	for(var i=0;i<shootenemys.length;i++){
    		if( shootenemys[i].cancel||shootenemys[i].y > (HEIGHT+shootenemys[i].height) ){
    			shootenemys.splice(i,1);
    		}
    	}
    }
    function hit(){
    	for(var i=0;i<shootenemys.length;i++){
			// 我方飞机撞击敌方飞机
			if(shootenemys[i].collision(hero)){
				// 处理敌方飞机撞击后的逻辑
				shootenemys[i].bang();
				// 处理我方飞机撞击后的逻辑
				hero.bang();
			}

			// 子弹撞击敌方飞机bullets
			for(var j=0;j<bullets.length;j++){
				if(shootenemys[i].collision(bullets[j])){
					// 处理敌方飞机撞击后的逻辑
					shootenemys[i].bang();
					// 处理子弹撞击后的逻辑
					bullets[j].bang();
				}
			}
		}
    }
 

    //敌机中号
    var enemym = [];
    enemym[0] = new Image();
    enemym[0].src="images/enemy2.png";
    enemym[1] = new Image();
    enemym[1].src="images/enemy2_down1.png";
    enemym[2] = new Image();
    enemym[2].src="images/enemy2_down2.png";
    enemym[3] = new Image();
    enemym[3].src="images/enemy2_down3.png";
    enemym[4] = new Image();
    enemym[4].src="images/enemy2_down4.png";

    var ENEMYM = {
    	length : enemym.length,
    	imgs : enemym,
    	width : 69,
    	height : 95,
    	type : 1,
		life : 3,
		score : 4 ,
		frame : 1
    }

      // 敌机大号
    var enemyl = [];
    enemyl[0] = new Image();
    enemyl[0].src="images/enemy3_n2.png";
    enemyl[1] = new Image();
    enemyl[1].src="images/enemy3_n1.png";
    enemyl[2] = new Image();
    enemyl[2].src="images/enemy3_down1.png";
    enemyl[3] = new Image();
    enemyl[3].src="images/enemy3_down2.png";
    enemyl[4] = new Image();
    enemyl[4].src="images/enemy3_down3.png";
    enemyl[5] = new Image();
    enemyl[5].src="images/enemy3_down4.png";
    enemyl[6] = new Image();
    enemyl[6].src="images/enemy3_down5.png";
    enemyl[7] = new Image();
    enemyl[7].src="images/enemy3_down6.png";

    var  ENEMYL = {
    	length : enemyl.length,
    	imgs : enemyl,
    	width : 165,
    	height : 261,
    	type : 1,
		life : 20,
		score : 10 ,
		frame : 2
    }
    //绘制分数和生命
	function text(){
        	cxt.font = "bold 26px 宋体"
        	cxt.fillText(`score:${score}`,10,30)
        	cxt.fillText("LIFE"+life,WIDTH-80,30);
        }
    //鼠标移入
    canvas.onmouseover =function(){
    	if(State == PAUSE){
    		State = RUNNING;
    	}
    }
    //鼠标移出
    canvas.onmouseout =function(){
    	if(State == RUNNING){
    		State = PAUSE;
    	}

    }
    //暂停
    var pause = new Image();
	pause.src = "images/game_pause_nor.png";
    
	function over(){
		cxt.font = "bold 48px 宋体";	
		cxt.fillText("GAME OVER",150,400);
	}
	//游戏核心控制器
	setInterval(function(){
		bg.draw();
		//控制背景运动
		bg.bgrun();
		if(State == START){
			cxt.drawImage(logo,40,20);
		}else if(State == LOADING){
			load.endloading();
			load.speed();
		}else if(State == RUNNING){
			//我方飞机
			hero.draw();
			//我方飞机运动
			hero.speed();
			 //绘制分数和生命
			text();
			//我方飞机射击
			hero.shoot();
			// bulletsPanit();
			// 检查碰撞
			hit()
			//绘制敌机
			drawEnemies()
			//绘制敌机运动
			speedEnemies()
			//判断删除敌机
			delEnemies()
			//绘制子弹
			drawBullets()
			//绘制子弹运动
			speedBullets()
			//判断删除子弹
			delBullets()
		}else if(State == PAUSE){
			//暂停状态时保存画面除去运动
			text()
			//绘制暂停图标
			cxt.drawImage(pause,200,400);
			drawEnemies()
			drawBullets()
			hero.draw();
		}else if(State == GAMEOVER){
			//游戏结束
			drawEnemies()
			drawBullets()
			delEnemies()
			text()
			over()
			hero.draw();
		}
	},100);
</script>
</body>
</html>