web版canvas做飞机大战游戏 总结
唠唠:两天的时间跟着做了个飞机大战的游戏，感觉做游戏挺好的。说是用html5做，发现全都是js。说js里一切皆为对象，写的最多的还是函数，都是函数调用。对这两天的代码做个总结，希望路过的大神指点一下，我对这个游戏的思路，可改进优化的代码。
先说一下游戏的基本内容: 打飞机(不要想歪了)，有鼠标控制移动英雄机，子弹自动射击；敌机从上而下，有三种敌机；
先说下HTML代码(主要就是这一行):
<canvas id="canFly" width="480" height="650"></canvas>
一、对这个游戏的的基本数据状态做定义
主要包括:
游戏的状态: 开始状态 英雄机入场状态 游戏进行状态 暂停状态 gameOver；得分 英雄机的生命
1 var canvas = document.getElementById("canFly");//获取canvas元素 2 //创建画布对象 3 var context = canvas.getContext("2d"); 4 //游戏的基本数据 5 var gameData = { 6 state : this.START, 7 //游戏状态 8 START : 0,//开始界面状态 9 STARTING : 1,//入场动画过渡状态 10 RUNNING : 2,//游戏运行状态 11 PAUSED : 3,//暂停 12 GAMEOVER : 4,//游戏结束 13 //英雄机生命 14 heroLife : 3, 15 //得分 16 score : 0, 17 //画布宽高 18 HEIGHT : canvas.height 19 }
二、对图片资源的加载及初始化相关数据
1 /*-- 加载游戏图片 -------------------------------------------------------------------*/ 2 //背景图片 3 var bgImg = new Image(); 4 bgImg.src="images/background.png"; 5 //logo图片 6 var startLogo = new Image(); 7 startLogo.src = "images/start.png"; 8 //加载飞机入场动画 9 var loadings = []; 10 loadings[0] = new Image(); 11 loadings[0].src="Images/game_loading1.png"; 12 loadings[1] = new Image(); 13 loadings[1].src="Images/game_loading2.png"; 14 loadings[2] = new Image(); 15 loadings[2].src="Images/game_loading3.png"; 16 loadings[3] = new Image(); 17 loadings[3].src="Images/game_loading4.png"; 18 //加载英雄机图片 19 var heros = []; 20 heros[0] = new Image(); 21 heros[0].src="images/hero1.png"; 22 heros[1] = new Image(); 23 heros[1].src="images/hero2.png"; 24 //英雄机爆破动画图片 25 heros[2] = new Image(); 26 heros[2].src="images/hero_blowup_n1.png"; 27 heros[3] = new Image(); 28 heros[3].src="images/hero_blowup_n2.png"; 29 heros[4] = new Image(); 30 heros[4].src="images/hero_blowup_n3.png"; 31 heros[5] = new Image(); 32 heros[5].src="images/hero_blowup_n4.png"; 33 //加载子弹的图片 34 var bullet = []; 35 bullet[0] = new Image(); 36 bullet[0].src = "images/bullet1.png"; 37 ...
1 /*-- 初始化游戏内容相关数据 --*/ 2 //初始化游戏背景图片数据 3 var SKY = { 4 imgs : bgImg,//背景图片 5 width : 480,//图片宽度 6 height : 852 //图片高度 7 } 8 //初始化英雄机入场动画图片数据 9 var LOADING = { 10 imgs : loadings, 11 width : 186,//图片宽度 12 height : 38,//图片高度 13 sum : loadings.length //图片个数 14 } 15 //初始化英雄机的数据 16 var HERO = { 17 imgs : heros, 18 width : 99, 19 height : 124, 20 sum : heros.length, 21 length : 2//我方飞机正常图片个数 22 } 23 //初始化子弹的数据 24 var BULLET = {//默认子弹 25 imgs : bullet, 26 width : 9, 27 height : 21, 28 sum : bullet.length 29 } 30 .......
三、公用构造器及对象实例化
定义一个公用的构造器函数，这是我写这个游戏认最大的收获了，在这里体会到了面向对象的思想；相当于定义一个基础类，所有的构造器都用公用构造器函数进行初始化，提高代码的复用，然而在我的优化过程中仅仅只是节省了50多行的代码。
公共构造器函数:在这里定义了图片的宽高，图片对象是否执行爆破，是否删除，图片绘制坐标等一些公共的属性和方法
1 /*-- 通用构造器对象 前端代码尽量地使用通用代码 -------------------------------------------------------------------------------------------------------*/ 2 function Compant(config){ 3 //加载图片 4 this.imgs = config.imgs; 5 //图片的宽度和高度 6 this.width = config.width; 7 this.height = config.height; 8 this.sum = config.sum; 9 this.length = config.length; 10 // 敌方飞机具有以下属性 11 this.type = config.type;//敌机类型 12 this.life = config.life;//敌机声明值 13 this.score = config.score;//敌机分数 14 // 设置相对速度 15 this.time = 0; 16 // 设置图片的索引值 17 this.index = 0; 18 // 是否执行爆破动画的标识 19 this.down = false; 20 // 是否删除标识 21 this.canDelete = false; 22 //绘图坐标 23 this.x = 0; 24 this.y = 0; 25 // 绘制方法 26 this.paint = function(){ 27 context.drawImage(this.imgs[this.index],this.x,this.y); 28 } 29 // 移动方法 30 this.step = function(){} 31 // 执行撞击后的逻辑方法 32 this.bang = function(){} 33 }
继承实例化:
1 //---背景 2 //创建背景图片的构造器 3 function BgSky(config){ 4 //调用通用构造器初始化 5 Compant.call(this,config); 6 //图片绘制高度变量 7 this.y1 = -this.height; 8 this.y2 = 0; 9 //定义绘制方法 10 this.paint = function(){ 11 context.drawImage(this.imgs,0,this.y1);//第一张图片 12 context.drawImage(this.imgs,0,this.y2);//第二张图片 13 } 14 //背景heigth运动方法 15 this.step = function(){ 16 this.time++; 17 if (this.time%3==0) 18 {//控制背景图片height值的增加 19 this.y1++;//图片运动下一帧 20 this.y2++; 21 //图片移动处画布后将y坐标重置为-height 实现图片衔接滚动 22 this.y1>this.height&&(this.y1 = -this.height); 23 this.y2>this.height&&(this.y2 = -this.height); 24 this.time=1;//重置移动时间 25 } 26 } 27 } 28 //创建图片对象 29 var sky = new BgSky(SKY); 30 31 //---英雄机入场动画构造器 32 function Loading(config){ 33 Compant.call(this,config); 34 //定义绘制 35 this.paint = function(){ 36 //绘制飞机入场动画图片 37 context.drawImage(this.imgs[this.index],0,gameData.HEIGHT-this.height); 38 } 39 //定义入场动画 40 this.step = function(){ 41 this.time++; 42 if (this.time%20==0) 43 {//实现动画的播放速度 44 this.index++;//下一帧动画 45 if (this.index==this.sum) 46 {//判断动画结束后，更改游戏的状态，进入第三阶段游戏阶段 47 gameData.state=gameData.RUNNING; 48 this.time=0;//重置动画时间 49 } 50 } 51 } 52 } 53 //创建飞机入场动画的对象 54 var loading = new Loading(LOADING);
利用这种方式将所有的对象都进行实例化，并添加相应的方法
四、英雄机的子弹发射
英雄机的子弹发射是自动，就是说只要控制好装弹的频率就可以了；英雄机发射子弹就是向子弹数组中添加子弹
bullets[bullets.length] = new Bullet(BULLET);;//向子弹数组中添加子弹
子弹的移动，撞击，删除等功能在子弹的构造函数中定义，英雄机只管装弹的频率；
子弹的绘制:
1 function paintBullets(){ 2 for (var i=0, length=bullets.length; i<length; i++) 3 { 4 bullets[i].paint();//绘制当前子弹 5 if (gameData.state==gameData.RUNNING) 6 {//游戏运行中时移动子弹 7 bullets[i].step();//移动子弹 8 } 9 } 10 }
删除子弹的判断:
1 function clearStep(){ 2 for (var i = bullets.length-1; i>=0 ; i--) 3 { 4 if (bullets[i].y<=-bullets[i].height || (bullets[i].canDelete)) 5 { 6 bullets.splice(i,1);//删除当前超出屏幕的子弹和撞机的子弹 7 } 8 } 9 }
//这个函数可以跟上边的合并到一起
五、敌机的相关设置
敌机的创建: 应为有三种类型的敌机，按照几率小的最多，中飞机的其次，打飞机满屏只能有一个
1 //创建用于创建敌方飞机的函数 2 function createEnemies(){ 3 /*创建敌方飞机 - 小,中,大*/ 4 var num = Math.floor(Math.random()*100); 5 if (num < 80) 6 {//小飞机 7 enemies[enemies.length] = new Enemy(ENEMY1); 8 }else if (num < 90) 9 {//中飞机 10 enemies[enemies.length] = new Enemy(ENEMY2); 11 }else { 12 //大飞机只能存在一个 13 if (enemies.length > 0 && enemies[0].type != 2) 14 { 15 enemies.unshift(new Enemy(ENEMY3));//将大飞机添加到数组开头，这样每次判断数组第一个就可以知道 16 } 17 } 18 }
对敌机的绘制，检测敌机是否超出屏幕，是否被打中，是否需要爆炸，是否和英雄机相撞等
1 function paintEnemiesAndCheckHit(){ 2 for (var i=0; i<enemies.length; i++) 3 {//遍历敌机 4 // 5 var enemy = enemies[i];//敌机 6 //检测敌机和英雄机是否碰撞 7 if ((enemy.y > gameData.HEIGHT)||(enemy.canDelete)) 8 { 9 enemies.splice(i,1);//删除当前超出屏幕的飞机 10 continue; 11 } 12 enemy.paint();//绘制飞机 13 if (gameData.state == gameData.RUNNING) 14 {//游戏运行中时才移动飞机 15 enemy.step();//移动飞机 16 } 17 //判断是否和我方飞机碰撞 18 if (enemy&&enemy.hit(hero)) 19 {//敌机和我方飞机相撞 20 enemy.bang(); 21 hero.bang();//飞机销毁 22 } 23 //判断子弹 24 for (var j=0; j<bullets.length; j++) 25 {//子弹遍历 26 var bullet = bullets[j];//子弹 27 if (enemy.hit(bullet)) 28 {//子弹撞机敌方飞机 29 enemy.bang();//删除敌机 30 bullet.bang();//删除子弹 31 } 32 } 33 } 34 }
六、主体流程的控制
这里使用switch来控制在执行相应状态的操作，使用setTimeout来控制循环的进行，感觉setTimeout比setInterval更加的容易控制
1 //根据游戏状态执行相应操作 2 switch (gameData.state) 3 { 4 case gameData.START://游戏开始状态 5 context.drawImage(startLogo,30,0);//绘制开始logo 6 break; 7 case gameData.STARTING: //英雄机进场过渡状态 8 loading.paint();//绘制飞机入场动画 9 loading.step();//入场动画 10 break; 11 case gameData.RUNNING: //游戏进行状态 12 hero.paint(); 13 hero.step(); 14 hero.shoot();//飞机射击 15 paintBullets();//绘制所有子弹 16 clearStep();//清除超出的子弹 17 18 if (enemyTime%100 == 0) 19 { 20 createEnemies();//创建敌方飞机 21 } 22 paintEnemiesAndCheckHit();//绘制所有敌方飞机和碰撞检测 23 break; 24 case gameData.PAUSED: //游戏暂停状态 25 hero.paint(); 26 paintBullets();//绘制所有子弹 27 paintEnemiesAndCheckHit();//绘制所有敌方飞机和碰撞检测 28 paintPaused(); 29 break; 30 case gameData.GAMEOVER: //游戏结束状态 31 gameover(); 32 break; 33 } 34 painText();//绘制得分 35 36 //定时器,画布刷新 37 setTimeout(function(){ 38 gameExec(); 39 },10);
七、响应事件的绑定
1.开始界面单击鼠标，开始游戏
1 canvas.onclick = function(){ 2 if (gameData.state == gameData.START) 3 {//在游戏开始状态下单击，进入游戏过渡阶段 4 gameData.state = gameData.STARTING;//改变游戏状态 5 } 6 }
2.绑定鼠标的移动事件，英雄机是跟随鼠标移动的
1 canvas.onmousemove = function(event){ 2 //获取鼠标当前相对于canvas画布的坐标 3 var x = event.offsetX; 4 var y = event.offsetY; 5 //我方飞机坐标设置 6 hero.x=x-hero.width/2;// x坐标 7 hero.y=y-hero.height/2;//y坐标 8 if (gameData.state == gameData.PAUSED) 9 { 10 gameData.state = gameData.RUNNING; 11 } 12 }
3.鼠标离开画布事件，鼠标离开则游戏暂停
1 canvas.onmouseout = function(){ 2 if (gameData.state == gameData.RUNNING) 3 { 4 gameData.state = gameData.PAUSED; 5 } 6 }
八、后续的一些设想
现在的游戏不能重新开始，需要刷新才能重新开始，所以定义了 init() 函数用于游戏结束后重新开始(需要删除setTimeout事件):
function init(){ //设置游戏的初始状态 gameData.state = gameData.START; gameData.score = 0;//分数重置 gameData.heroLife = 3;//声明值重置 //游戏运行 gameExec(); }
还有关于子弹的类型的设想: 可以设置 双列子弹，散花弹等子弹的类型，子弹可升级，设置子弹的威力等；可以设置速度的变更等
有路过的大神可以看下下边的源码，指点下(源码不长就10kb多点)
九、源码链接
