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

r囧r小猫 2023-06-24 06:26 125阅读 0赞

## 整体分析飞机大战游戏 ##

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

#### 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>