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

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

整体分析飞机大战游戏

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

1. 定义游戏状态

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

2. 定义游戏得分 score = 0

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>飞机</title>
  6.     <style type="text/css">
  7.         body{ 
  8.             text-align: center;
  9.         }
  10.         canvas{ 
  11.             background-color: #ccc;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <canvas id="canvas" width="480" height="850"></canvas>
  17.     <script type="text/javascript">
  18.     //1. 定义游戏状态 第一阶段：游戏欢迎状态 0 START 第二阶段：游戏加载状态 1 LOADING 第三阶段：游戏运行状态 2 RUNNING 第四阶段：游戏暂停阶段 3 PAUSE 第五阶段：游戏结束阶段 4 GAMEOVER
  19.     const START = 0,
  20.           LOADING = 1,
  21.           RUNNING = 2,
  22.           PAUSE = 3,
  23.           GAMEOVER = 4;
  25.     //2. 定义游戏得分 score = 0
  26.       var  score = 0,
  27.      //3. 定义我方飞机的生命值 
  28.              life = 3,
  29.      //4. 定义游戏开关
  30.              State=0 ,
  31.       //当前画布的宽高
  32.              WIDTH = 480,
  33.              HEIGHT = 850;
  34. //1.第一阶段开始：游戏欢迎阶段
  35.     var canvas = document.getElementById('canvas');
  36.     var cxt = canvas.getContext('2d');
  37.     var myimg = new Image();
  38.     myimg.src ="images/background.png";
  40.  //定义背景的数据
  41.      var obj = { 
  42.          imgs : myimg,
  43.          width:480,
  44.          height:850 
  45.      }
  46. //定义背景对象的构造器
  47.     function BG(obj){ 
  48.         //定义绘制背景的坐标
  49.         this.x1 = 0;
  50.         this.y1 = 0;
  51.         this.x2 = 0;
  52.         this.y2 = -obj.height;
  54.         this.width = obj.width;
  55.         this.height = obj.height;
  56. //定义绘制背景图片的方法
  57.         this.draw = function(){ 
  58.             cxt.drawImage(obj.imgs,this.x1,this.y1);
  59.             cxt.drawImage(obj.imgs,this.x2,this.y2);
  60.         }
  61. //判断两张图片的临界值
  62.         this.bgrun =function(){ 
  63.             this.y1++;
  64.             this.y2++;
  65.             if(this.y1 == this.height){ 
  66.                 this.y1 = -this.height;
  67.             }else if(this.y2 == this.height){ 
  68.                 this.y2 = -this.height;
  69.             }
  70.         }
  71.     }
  72.     var bg = new BG(obj);
  73.     var logo = new Image();
  74.     logo.src ="images/start.png";
  76. //控制游戏状态从一个变为第二个
  77.     canvas.onclick = function(){ 
  78.         if(State == START){ 
  79.             State = LOADING;
  80.         }
  81.     }
  82.   //2.第二阶段开始
  83.     var loadings = [];
  84.     loadings[0] = new Image();
  85.     loadings[0].src="images/game_loading1.png";
  86.     loadings[1] = new Image();
  87.     loadings[1].src="images/game_loading2.png";
  88.     loadings[2] = new Image();
  89.     loadings[2].src="images/game_loading3.png";
  90.     loadings[3] = new Image();
  91.     loadings[3].src="images/game_loading4.png";
  92.   //初始化动态效果的数据
  93.     var loading={ 
  94.         imgs:loadings,
  95.         width : 186,
  96.         height : 38,
  97.         length : loadings.length
  98.     }
  99.     function Loading(obj){ 
  100.         this.startIndex = 0;
  101.         //定义绘制加载效果图片的方法
  102.         this.endloading = function(){ 
  103.             cxt.drawImage(obj.imgs[this.startIndex],(WIDTH-obj.width)/2,HEIGHT-obj.height)
  104.         }
  105.         this.time = 0;
  106.         //定义动画方法
  107.         this.speed = function(){ 
  108.             this.time++;
  109.             if(this.time % 5 == 0){ 
  110.                 this.startIndex++;
  111.             }
  112.             if(this.startIndex == obj.length){ 
  113.                     State = RUNNING;
  114.             }
  115.         }
  116.     }
  117.     var load = new Loading(loading);
  119. // 游戏运行阶段
  120. // 绘制我方灰机
  121.     var heros = [];
  122.     heros[0] = new Image();
  123.     heros[0].src = "images/hero1.png";
  124.     heros[1] = new Image();
  125.     heros[1].src = "images/hero2.png";
  126.     heros[2] = new Image();
  127.     heros[2].src = "images/hero_blowup_n1.png";
  128.     heros[3] = new Image();
  129.     heros[3].src = "images/hero_blowup_n2.png";
  130.     heros[4] = new Image();
  131.     heros[4].src = "images/hero_blowup_n3.png";
  132.     heros[5] = new Image();
  133.     heros[5].src = "images/hero_blowup_n4.png";
  135. //初始化我方飞机的数据
  136.     var HERO = { 
  137.         imgs:heros,
  138.         length:heros.length,
  139.         width:99,
  140.         height :124,
  141.         frame : 2
  142.     }
  144.     //我方飞机
  145.     function Hero(obj){ 
  146.         this.imgs = obj.imgs;
  147.         this.length = obj.length;
  148.         this.height=obj.height;
  149.         this.width = obj.width;
  150.         this.x =(WIDTH-this.width)/2;
  151.         this.y = HEIGHT-this.height;
  152.         this.frame = obj.frame;
  153.         this.startIndex = 0;
  155.         this.candel = false;
  156.         //新增一个标识--表示是否被撞击，当前没有被撞击
  157.         this.down = false;
  160.         //绘制图片
  161.         this.draw = function(){ 
  162.             cxt.drawImage(this.imgs[this.startIndex],this.x,this.y)
  163.         }
  164.         this.speed = function(){ 
  165.             if(!this.down){ 
  166.                 //没有被撞击：startIndex在0和1进行切换
  167.                 if(this.startIndex == 0){ 
  168.                     this.startIndex = 1
  169.                 }else{ 
  170.                     this.startIndex = 0;
  171.                 }
  172.             }else{ 
  173.                 //被撞击
  174.                 this.startIndex++;
  175.                 if(this.startIndex == obj.length){ 
  176.                     //生命减少1
  177.                     life--;
  178.                     if(life == 0){ 
  179.                         State = GAMEOVER;
  180.                         this.startIndex = this.length-1;
  181.                     }else{ 
  182.                         hero = new Hero(HERO)
  183.                     }
  184.                 }
  185.             }
  186.         }
  187.         this.time = 0;
  188.         //增加子弹射击的方法
  189.         //物体运动思想控制敌机和子弹的速度
  190.         this.shoot = function(){ 
  191.             this.time++;
  192.             if(this.time% 5 == 0){ 
  193.                 bullets.push(new Bullet(BULLET));
  194.             }
  195.             if(this.time% 13== 0){ 
  196.                 shootenemys.push(new Enemy(ENEMY));
  197.             }
  198.             if(this.time% 120== 0){ 
  199.                 shootenemys.push(new Enemy(ENEMYM));
  200.             }
  201.             if(this.time% 310== 0){ 
  202.                 shootenemys.push(new Enemy(ENEMYL));
  203.             }
  204.         }
  205.         this.bang = function(){ 
  206.             this.down = true;
  207.         }
  208.     }
  210.     var hero = new Hero(HERO);
  212.     canvas.onmousemove = function(event){ 
  213.         // var event = event || e || arguments[0];
  214.         if(State == RUNNING){ 
  215.             var x = event.offsetX;
  216.             var y = event.offsetY;
  217.             hero.x = x-hero.width/2; 
  218.             hero.y = y-hero.height/2;
  219.         }
  220.     }
  221.     //制造子弹
  222.     var bullet = new Image();
  223.     bullet.src = "images/bullet1.png";
  224.     //初始化子弹的构造器
  225.     var BULLET ={ 
  226.         imgs : bullet,
  227.         width : 9,
  228.         height : 21
  229.     }
  230.     function Bullet(obj){ 
  231.         this.imgs = obj.imgs;
  232.         this.width = obj.width;
  233.         this.height = obj.height;
  234.         //子弹绘制的坐标
  235.         this.x = hero.x + hero.width/2-this.width/2;
  236.         this.y = hero.y-this.height-10;
  237.         this.draw = function(){ 
  238.             cxt.drawImage(this.imgs,this.x,this.y);
  239.         }
  240.         this.speed = function(){ 
  241.             this.y -=4;
  242.         }
  243.         this.candel = false;
  244.         this.bang = function(){ 
  245.             this.candel = true;
  246.         }
  247.     }
  248.     //创建存储子弹的数组
  249.     var bullets = [];
  250.     //创建函数，用于绘制所有的子弹
  251.     // function bulletsPanit(){ 
  252.     // for(var i=0;i<bullets.length;i++){ 
  253.     // bullets[i].draw();
  254.     // bullets[i].speed();
  255.     // if(bullets[i].y < -bullets[i].height || bullets[i].candel){ 
  256.     // bullets.splice(i,1);
  257.     // }
  258.     // }
  259.     // }
  260.     // 绘制子弹
  261.     function drawBullets(){ 
  262.         for(var i=0;i<bullets.length;i++){ 
  263.             bullets[i].draw();
  264.         }
  265.     }
  266.     //子弹运动
  267.     function speedBullets(){ 
  268.         for(var i=0;i<bullets.length;i++){ 
  269.             bullets[i].speed();
  270.         }// 绘制子弹
  271. //子弹运动
  272. //删除击中和越界的子弹
  273.     }
  274.     //删除击中和越界的子弹
  275.     function delBullets(){ 
  276.         for(var i=0;i<bullets.length;i++){ 
  277.             if(bullets[i].y < -bullets[i].height || bullets[i].candel){ 
  278.                 bullets.splice(i,1);
  279.             }
  280.         }
  281.     }
  283.     //敌机小号
  284.     var enemys = [];
  285.     enemys[0] = new Image();
  286.     enemys[0].src="images/enemy1.png";
  287.     enemys[1] = new Image();
  288.     enemys[1].src="images/enemy1_down1.png";
  289.     enemys[2] = new Image();
  290.     enemys[2].src="images/enemy1_down2.png";
  291.     enemys[3] = new Image();
  292.     enemys[3].src="images/enemy1_down3.png";
  293.     enemys[4] = new Image();
  294.     enemys[4].src="images/enemy1_down4.png";
  296.     var ENEMY = { 
  297.         length : enemys.length,
  298.         imgs : enemys,
  299.         width : 57,
  300.         height : 51,
  301.         type : 1,
  302.         life : 1,
  303.         score : 1 ,
  304.         frame : 1
  305.     }
  306.     //敌机构造
  307.     function Enemy(obj){ 
  308.         this.type = obj.type;
  309.         this.imgs = obj.imgs;
  310.         this.life = obj.life;
  311.         this.width = obj.width;
  312.         this.height = obj.height;
  313.         this.length = obj.length;
  315.         this.x = Math.floor(Math.random()*(WIDTH-this.width));
  316.         this.y = -this.height;
  317.         //当前没被撞击
  318.         this.down = false;
  319.         this.startIndex = 0;
  320.         //确定动画是否播完
  321.         this.cancel = false;
  322.         //分数
  323.         this.score = obj.score;
  324.         //
  325.         this.frame = obj.frame;
  326.         this.draw = function(){ 
  327.             cxt.drawImage(this.imgs[this.startIndex],this.x,this.y);
  328.         }
  329.         this.speed =function(){ 
  330.             if(!this.down){ 
  331.                 this.y+=5;
  332.                 this.startIndex++;
  333.                 this.startIndex = this.startIndex%this.frame;
  335.             }else{ 
  336.                 this.startIndex++;
  337.                 if(this.startIndex == this.length){ 
  338.                     this.cancel = true;
  339.                     this.startindex = this.length-1;
  340.                 }
  341.             }
  342.         }
  343.         //碰撞
  344.         this.collision = function(obj){ 
  346.             return obj.y + obj.height > this.y
  347.             && obj.x + obj.width > this.x
  348.             && obj.y < this.y + this.height
  349.             && obj.x < this.x + this.width;
  350.         }
  351.         this.bang = function(){ 
  352.             this.life--;
  353.             if(this.life == 0){ 
  354.                 this.down = true;
  355.                 score += this.score;
  356.             }
  357.         }
  358.     }
  359.     var shootenemys = []; 
  360.     // function shootenemy(){ 
  361.     // for(var i=0;i<shootenemys.length;i++){ 
  362.     // shootenemys[i].draw();
  363.     // shootenemys[i].speed();
  364.     // if( shootenemys[i].cancel||shootenemys[i].y > (HEIGHT+shootenemys[i].height) ){ 
  365.     // shootenemys.splice(i,1);
  366.     // }
  367.     // }
  368.     // }
  369.     // 绘制敌机
  370.     function drawEnemies(){ 
  371.         for(var i=0;i<shootenemys.length;i++){ 
  372.             shootenemys[i].draw();
  373.         }
  374.     }
  375.     //敌机运动
  376.      function speedEnemies(){ 
  377.         for(var i=0;i<shootenemys.length;i++){ 
  378.             shootenemys[i].speed();
  379.         }
  380.     }
  381.     //删除击中和越界的敌机
  382.     function delEnemies(){ 
  383.         for(var i=0;i<shootenemys.length;i++){ 
  384.             if( shootenemys[i].cancel||shootenemys[i].y > (HEIGHT+shootenemys[i].height) ){ 
  385.                 shootenemys.splice(i,1);
  386.             }
  387.         }
  388.     }
  389.     function hit(){ 
  390.         for(var i=0;i<shootenemys.length;i++){ 
  391.             // 我方飞机撞击敌方飞机
  392.             if(shootenemys[i].collision(hero)){ 
  393.                 // 处理敌方飞机撞击后的逻辑
  394.                 shootenemys[i].bang();
  395.                 // 处理我方飞机撞击后的逻辑
  396.                 hero.bang();
  397.             }
  399.             // 子弹撞击敌方飞机bullets
  400.             for(var j=0;j<bullets.length;j++){ 
  401.                 if(shootenemys[i].collision(bullets[j])){ 
  402.                     // 处理敌方飞机撞击后的逻辑
  403.                     shootenemys[i].bang();
  404.                     // 处理子弹撞击后的逻辑
  405.                     bullets[j].bang();
  406.                 }
  407.             }
  408.         }
  409.     }
  412.     //敌机中号
  413.     var enemym = [];
  414.     enemym[0] = new Image();
  415.     enemym[0].src="images/enemy2.png";
  416.     enemym[1] = new Image();
  417.     enemym[1].src="images/enemy2_down1.png";
  418.     enemym[2] = new Image();
  419.     enemym[2].src="images/enemy2_down2.png";
  420.     enemym[3] = new Image();
  421.     enemym[3].src="images/enemy2_down3.png";
  422.     enemym[4] = new Image();
  423.     enemym[4].src="images/enemy2_down4.png";
  425.     var ENEMYM = { 
  426.         length : enemym.length,
  427.         imgs : enemym,
  428.         width : 69,
  429.         height : 95,
  430.         type : 1,
  431.         life : 3,
  432.         score : 4 ,
  433.         frame : 1
  434.     }
  436.       // 敌机大号
  437.     var enemyl = [];
  438.     enemyl[0] = new Image();
  439.     enemyl[0].src="images/enemy3_n2.png";
  440.     enemyl[1] = new Image();
  441.     enemyl[1].src="images/enemy3_n1.png";
  442.     enemyl[2] = new Image();
  443.     enemyl[2].src="images/enemy3_down1.png";
  444.     enemyl[3] = new Image();
  445.     enemyl[3].src="images/enemy3_down2.png";
  446.     enemyl[4] = new Image();
  447.     enemyl[4].src="images/enemy3_down3.png";
  448.     enemyl[5] = new Image();
  449.     enemyl[5].src="images/enemy3_down4.png";
  450.     enemyl[6] = new Image();
  451.     enemyl[6].src="images/enemy3_down5.png";
  452.     enemyl[7] = new Image();
  453.     enemyl[7].src="images/enemy3_down6.png";
  455.     var  ENEMYL = { 
  456.         length : enemyl.length,
  457.         imgs : enemyl,
  458.         width : 165,
  459.         height : 261,
  460.         type : 1,
  461.         life : 20,
  462.         score : 10 ,
  463.         frame : 2
  464.     }
  465.     //绘制分数和生命
  466.     function text(){ 
  467.             cxt.font = "bold 26px 宋体"
  468.             cxt.fillText(`score:${ score}`,10,30)
  469.             cxt.fillText("LIFE"+life,WIDTH-80,30);
  470.         }
  471.     //鼠标移入
  472.     canvas.onmouseover =function(){ 
  473.         if(State == PAUSE){ 
  474.             State = RUNNING;
  475.         }
  476.     }
  477.     //鼠标移出
  478.     canvas.onmouseout =function(){ 
  479.         if(State == RUNNING){ 
  480.             State = PAUSE;
  481.         }
  483.     }
  484.     //暂停
  485.     var pause = new Image();
  486.     pause.src = "images/game_pause_nor.png";
  488.     function over(){ 
  489.         cxt.font = "bold 48px 宋体";    
  490.         cxt.fillText("GAME OVER",150,400);
  491.     }
  492.     //游戏核心控制器
  493.     setInterval(function(){ 
  494.         bg.draw();
  495.         //控制背景运动
  496.         bg.bgrun();
  497.         if(State == START){ 
  498.             cxt.drawImage(logo,40,20);
  499.         }else if(State == LOADING){ 
  500.             load.endloading();
  501.             load.speed();
  502.         }else if(State == RUNNING){ 
  503.             //我方飞机
  504.             hero.draw();
  505.             //我方飞机运动
  506.             hero.speed();
  507.              //绘制分数和生命
  508.             text();
  509.             //我方飞机射击
  510.             hero.shoot();
  511.             // bulletsPanit();
  512.             // 检查碰撞
  513.             hit()
  514.             //绘制敌机
  515.             drawEnemies()
  516.             //绘制敌机运动
  517.             speedEnemies()
  518.             //判断删除敌机
  519.             delEnemies()
  520.             //绘制子弹
  521.             drawBullets()
  522.             //绘制子弹运动
  523.             speedBullets()
  524.             //判断删除子弹
  525.             delBullets()
  526.         }else if(State == PAUSE){ 
  527.             //暂停状态时保存画面除去运动
  528.             text()
  529.             //绘制暂停图标
  530.             cxt.drawImage(pause,200,400);
  531.             drawEnemies()
  532.             drawBullets()
  533.             hero.draw();
  534.         }else if(State == GAMEOVER){ 
  535.             //游戏结束
  536.             drawEnemies()
  537.             drawBullets()
  538.             delEnemies()
  539.             text()
  540.             over()
  541.             hero.draw();
  542.         }
  543.     },100);
  544. </script>
  545. </body>
  546. </html>

发表评论

表情：
评论列表 （有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

    相关 飞机大战（微信小游戏）

    依旧是熟悉的期末作业，是微信小游戏官网的Demo来着，然后我边百度边对它做了一些改动 说起来好久没更新博客了......最近在用unity做游戏准备参加计算机设计大赛，花了好

    Dear 丶Dear 丶/ 0 赞/ 437 阅读