码迷,mamicode.com
首页 > Web开发 > 详细

web版canvas做飞机大战游戏 总结

时间:2015-11-17 00:06:55      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:

  唠唠:两天的时间跟着做了个飞机大战的游戏,感觉做游戏挺好的。说是用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 }
View Code

二、对图片资源的加载及初始化相关数据

技术分享
 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             ...
View Code
技术分享
 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 .......
View Code

 

三、公用构造器及对象实例化

  定义一个公用的构造器函数,这是我写这个游戏认最大的收获了,在这里体会到了面向对象的思想;相当于定义一个基础类,所有的构造器都用公用构造器函数进行初始化,提高代码的复用,然而在我的优化过程中仅仅只是节省了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             }
View Code

 

   继承实例化:

技术分享
 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);
View Code

  利用这种方式将所有的对象都进行实例化,并添加相应的方法

四、英雄机的子弹发射

  英雄机的子弹发射是自动,就是说只要控制好装弹的频率就可以了;英雄机发射子弹就是向子弹数组中添加子弹

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             }
View Code

 

六、主体流程的控制

  这里使用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);
View Code

 

七、响应事件的绑定

  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             }
View Code

 

   3.鼠标离开画布事件,鼠标离开则游戏暂停

技术分享
1             canvas.onmouseout = function(){
2                 if (gameData.state == gameData.RUNNING)
3                 {
4                     gameData.state = gameData.PAUSED;
5                 }
6             }    
View Code

 

八、后续的一些设想

  现在的游戏不能重新开始,需要刷新才能重新开始,所以定义了 init() 函数用于游戏结束后重新开始(需要删除setTimeout事件):

            function init(){
                //设置游戏的初始状态
                gameData.state = gameData.START;
                gameData.score = 0;//分数重置
                gameData.heroLife = 3;//声明值重置
                //游戏运行
                gameExec();
            }

 

   还有关于子弹的类型的设想: 可以设置 双列子弹,散花弹等子弹的类型,子弹可升级,设置子弹的威力等;可以设置速度的变更等

  有路过的大神可以看下下边的源码,指点下(源码不长就10kb多点)

九、源码链接

  完整源码下载

 

web版canvas做飞机大战游戏 总结

标签:

原文地址:http://www.cnblogs.com/Medeor/p/4970353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!