飞机大战使用js canvas编写的过程是怎样

本文实例为大家分享了js canvas实现飞机大战的具体代码，供大家参考，具体内容如下

首先我们绘制一个canvas区域，确实其宽高为480px*852px; 水平居中

!doctype html>
    
html lang="en">
    

head>
    
  meta charset="utf-8">
    
  meta http-equiv="x-ua-compatible" content="ie=edge">
    
  meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  title>
    document/title>
    
  style>

    canvas {
    
      position: absolute;
    
      left: 0;
    
      right: 0;
    
      margin: auto;
    
      border: #000 solid 1px;

    }
    
  /style>
    
/head>
    

body>
    
  canvas width="480" height="852">
    /canvas>
    
/body>
    

/html>
    

然后我们再用js查询相应的canvas，再确定画笔cex；然后定一个全局变量state代表游戏状态。

其中state=0表示游戏初始化，state=1代表我方飞机入场，state=2代表战斗过程，state=3代表暂停过程，state=4代表游戏结束过程。

var canvas = document.getelementsbytagname("canvas")[0];
    
var cex = canvas.getcontext('2d');
    
var state = 0;
 //状态

再确实背景图片，根据图片大小确实背景的的宽高等数据，再编写相应的函数，最终使用函数声明出一个背景图片对象出来。

//背景图片
var bg = new image()
    bg.src = 'img/background.png'
    // 背景数据对象
    var bakgobj = {

      img: bg,
      width: 480,
      height: 852,
    }

    // 背景函数
    function by(params) {
    
      this.width = params.width;
    
      this.height = params.height;
    
      this.img = params.img;
    
      this.x = 0;
    
      this.y = 0;
    
      this.y1 = -this.height;

      // 背景绘制
      this.paint = function () {
    
        cex.drawimage(this.img, this.x, this.y);

        cex.drawimage(this.img, this.x, this.y1)
      }

      // 背景运动
      this.sprot = function () {
    
        this.y += 3;
    
        this.y1 += 3;
    
        if (this.y >
= this.height) {
    
          this.y = -this.height;

        }
    
        if (this.y1 >
= this.height) {
    
          this.y1 = -this.height;

        }

      }

    }
    
// 背景对象
var bakg = new by(bakgobj);
    

声明出相应的logo图片与暂停图片

// logo图片
var logo = new image();
    
    logo.src = 'img/start.png'
// 暂停图片
var pause = new image();
    
    pause.src = 'img/game_pause_nor.png';
    

使用相同的思路声明入场时的飞机对象

// 入场阶段
var gamearr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png',
      'img/game_loading4.png'
    ];
    
    // 入场图片对象
    var gamearr = [];
    
    for (var i = 0;
     i  gamearr.length;
 i++) {
    
      gamearr[i] = new image();
    
      gamearr[i].src = gamearr[i];

    }

    // 入场飞机数据
    var gameobj = {

      img: gamearr,
      width: 186,
      height: 38,
      length: gamearr.length
    }

    // 入场飞机函数
    function game(params) {
    
      this.imgs = params.img;
    
      this.width = params.width;
    
      this.height = params.height;
    
      this.length = params.length;
    
      this.index = 0;
     //入场顺序图片下标
      this.thim = 0;

      this.paint = function () {
    
        cex.drawimage(this.imgs[this.index], 0, bakg.height - this.height);

      }

      this.sprot = function () {
    
        this.thim++;

        if (this.thim % 3 == 0) {
    
          this.index++;

        }

        if (this.index == this.length) {
    
          state = 2;

        }


      }

    }
    
    // 入场飞机对象
    var game = new game(gameobj);
    

再声明飞机对象

// 飞机图片
    var heroarr = ['img/hero1.png', 'img/hero2.png']
    // 飞机图片对象
    var heroarr = [];
    
    for (var i = 0;
     i  heroarr.length;
 i++) {
    
      heroarr[i] = new image();
    
      heroarr[i].src = heroarr[i];

    }

    // 飞机数据
    var heroobj = {

      img: heroarr,
      width: 99,
      height: 124,
      length: heroarr.length,
      full:4, //生命
      invinc_:50,   //无敌时间
      maga:500,  //子弹数量
    }

    // 飞机函数
    function hero(params) {
    
      this.imgs = params.img;
    
      this.width = params.width;
    
      this.height = params.height;
    
      this.length = params.length;
    
      this.x = (bakgobj.width - this.width) / 2;
    
      this.y = bakgobj.height - this.height;
    
      this.index = 0;
    
      this.maga=params.maga;
    
      this.full=params.full;
      //飞机生命
      this.invinc=0;
     //初始无敌时间
      this.invinc_=params.invinc_;
    
      this.frac=0;
      //飞机分数;
    
      this.cou = 0;
     //控制子弹发射速度
      this.ene = 0;
 //控制敌机出现频率
      this.paint = function () {
    
        if((this.invinc>
    0 &
    &
 this.invinc%2==0)||this.invinc=0){

          cex.drawimage(this.imgs[this.index], this.x, this.y)
        }

       
      }

      this.sprot = function () {
    
        this.index++;

        if (this.index == 2) {
    
          this.index = 0;

        }

      }

      // 增加射出子弹
      this.bullk = function () {
    
        this.cou++;

        // 子弹发射速度
        // if (this.cou % 5 == 0) {

          bullsec.push(new bull(bullobj))
        // }

      }

      // 增加敌机
      this.enemysos = function () {

        if (this.ene % 20 == 0) {
    
          var rand = math.random();

          if (rand  0.5) {

            enemy.push(new enemy(enemy1obj))
          }
 else if (rand  0.8) {

            enemy.push(new enemy(enemy2obj))
          }
 else {

            enemy.push(new enemy3(enemy3obj))
          }

        }
    
        this.ene++;

      }

    }
    
var hero = new hero(heroobj);
    

子弹对象与数组

// 子弹图像
    var bullimg = new image();
    
    bullimg.src = 'img/bullet1.png';

    // 子弹数据
    var bullobj = {

      img: bullimg,
      width: 9,
      height: 21,
    }

    // 子弹函数
    function bull(params) {
    
      this.img = params.img;
    
      this.width = params.width;
    
      this.height = params.height;
    
      this.x = hero.x + hero.width / 2 - this.width / 2;
    
      this.y = hero.y - this.height;

      this.paint = function () {

        cex.drawimage(this.img, this.x, this.y)
      }

      this.sprot = function () {
    
        this.y -= 20;
 //子弹飞行速度
      }

    }
    
    var bull = new bull(bullobj);
    
    // 界面上的子弹数组;
    
    var bullsec = [];


    function bull_paint() {
    
      for (var i = 0;
     i  bullsec.length;
 i++) {
    
        bullsec[i].paint();

      }

    }


    function bull_sprot() {
    
      for (var i = 0;
     i  bullsec.length;
 i++) {
    
        bullsec[i].sprot();

      }

    }
    

敌机小、中、大对象与数组、方法

// 敌机--小
var enemy1arr = ['img/enemy1.png', 'img/enemy1_down1.png', 'img/enemy1_down2.png', 'img/enemy1_down3.png',
      'img/enemy1_down4.png'
    ]
    var enemy1arr = [];
    
    for (var i = 0;
     i  enemy1arr.length;
 i++) {
    
      enemy1arr[i] = new image();
    
      enemy1arr[i].src = enemy1arr[i];

    }

    //敌机—-小  数据
    var enemy1obj = {

      img: enemy1arr,
      width: 57,
      height: 51,
      length: enemy1arr.length,
      frac:3,
      full:1,
    }
    

    // 敌机--中
    var enemy2arr = ['img/enemy2.png', 'img/enemy2_down1.png', 'img/enemy2_down2.png', 'img/enemy2_down3.png',
      'img/enemy2_down4.png'
    ]
    var enemy2arr = [];
    
    for (var i = 0;
     i  enemy2arr.length;
 i++) {
    
      enemy2arr[i] = new image();
    
      enemy2arr[i].src = enemy2arr[i];

    }

    //敌机--中  数据
    var enemy2obj = {

      img: enemy2arr,
      width: 69,
      height: 95,
      length: enemy2arr.length,
      frac:5,
      full:2,
    }


    // 敌机--小、中 函数
    function enemy(params) {
    
      this.imgs = params.img;
    
      this.width = params.width;
    
      this.height = params.height;
    
      this.length = params.length;
    
      this.frac=params.frac;
    
      this.index = 0;
    
      this.buff=math.random0.05?true:false;
      //随机带buff
      this.ext=false;
    //敌机是否被击落
      this.full = params.full;
     //敌机生命值
      this.x = math.random() * (bakg.width - this.width);
    
      this.y = -this.height;

      this.paint = function () {
    
        cex.drawimage(this.imgs[this.index], this.x, this.y);

      }

      this.sprot = function () {
    
        this.y += 5;

        if (this.full = 0) {
    
          this.index++;

        }

      }

    }
    

    // 敌机--大 
    var enemy3arr = ['img/enemy3_n1.png', 'img/enemy3_n2.png', 'img/enemy3_hit.png', 'img/enemy3_down1.png',
      'img/enemy3_down2.png', 'img/enemy3_down3.png', 'img/enemy3_down4.png', 'img/enemy3_down5.png',
      'img/enemy3_down6.png'
    ]
    var enemy3arr = [];
    
    for (var i = 0;
     i  enemy3arr.length;
 i++) {
    
      enemy3arr[i] = new image();
    
      enemy3arr[i].src = enemy3arr[i];

    }

    //敌机--大  数据
    var enemy3obj = {

      img: enemy3arr,
      width: 169,
      height: 258,
      length: enemy3arr.length,
      frac:10,
      full:4,
    }

    // 敌机--大  函数
    function enemy3(params) {
    
      this.imgs = params.img;
    
      this.width = params.width;
    
      this.height = params.height;
    
      this.length = params.length;
    
      this.frac=params.frac;
    
      this.index = 0;
    
      this.thim = 0;
    
      this.buff=math.random0.2?true:false;
      //随机带buff
      this.ext=false;
    //敌机是否被击落
      this.full = params.full;
    
      this.full_=math.floor(this.full/2);
    //战损
      this.x = math.random() * (bakg.width - this.width);
    
      this.y = -this.height;

      this.paint = function () {
    
        cex.drawimage(this.imgs[this.index], this.x, this.y);

      }

      this.sprot = function () {
    
        this.y += 5;

        if (this.full = 0) {
    
          this.index++;

        }
    else if(this.full>
    0&
    &
this.full=this.full_){
    
          this.index=2;

        }
else if (this.thim % 5 == 0) {
    
          this.index++;

          if (this.index == 2) {
    
            this.index = 0;

          }

        }
    
        this.thim++;

      }

    }
    
    //敌机数组
    var enemy = [];

    // 敌机绘制
    function enemy_paint() {
    
      for (var i = 0;
     i  enemy.length;
 i++) {
    
        enemy[i].paint();

      }

    }

    // 敌机移动
    function enemy_sprot() {
    
      for (var i = 0;
     i  enemy.length;
 i++) {
    
        enemy[i].sprot();

      }

    }

    // 敌机爆炸后删除
    function enemy_del(){
    
      for(var i=0;
    ienemy.length;
i++){

        if(enemy[i].index==enemy[i].length){
    
          hero.frac+=enemy[i].frac;
    
          enemy.splice(i,1);
    
          i--;

        }

      }

    }

再创建一个函数判断碰撞

// 检测敌机是否产生碰撞
function enemy_bull_hero() {
    
      hero.invinc--;
    
      for (var i = 0;
     i  enemy.length;
 i++) {
    
        if (hero.invinc=0&
    &
    hero.y = enemy[i].y + enemy[i].height&
    &
    hero.y>
enemy[i].y-hero.height) {
    
          if (hero.x >
     enemy[i].x - hero.width &
    &
 hero.x  enemy[i].x + enemy[i].width) {
    
          // 飞机与敌机碰撞;
    
            hero.full--;
    
            hero.invinc=hero.invinc_;

            if(hero.full==0){
    
              state = 4;

            }

          }

        }
    
        for (var n = 0;
     n  bullsec.length;
 n++) {
    
          if (!enemy[i].ext&
    &
    bullsec[n].y = enemy[i].y + enemy[i].height&
    &
    bullsec[n].y>
enemy[i].y-bullsec[n].height) {
    
            if (bullsec[n].x >
     enemy[i].x - bullsec[n].width &
    &
 bullsec[n].x  enemy[i].x + enemy[i]
              .width) {
    
              // 敌机与子弹碰撞;
    
              bullsec.splice(n, 1);
    
              n--;
    
              enemy[i].full--;

              if(enemy[i].full=0){
    
                enemy[i].ext=true;

              }

            }

          }

        }

      }

    }
    

再分别绑定相应的事件

//点击画布从状态0切换到状态1;

    canvas.onclick = function () {

      if (state == 0) {
    
        state = 1;

      }

    }

    // 飞机跟随鼠标移动
    canvas.onmousemove = function (e) {

      if (state == 3) {
    
        state = 2;

      }

      if (state == 2) {
    
        var x = e.offsetx;
    
        var y = e.offsety;
    
        hero.x = x - hero.width / 2;
    
        hero.y = y - hero.height / 2;

      }

    }

    // 鼠标移出暂停
    canvas.onmouseout = function () {

      if (state == 2) {
    
        state = 3;

      }

    }

    // 弹夹子弹发射
    document.onkeydown =function(event){

      if(state==2){
    
        if(event.keycode==32&
    &
    hero.maga>
0){
    
          hero.bullk() //增加界面射出子弹
          hero.maga--;

        }

      }

     
    }
    ;

最终在定时器中实时更新相应的画面

setinterval(function () {
    
      bakg.paint()
      bakg.sprot()
      cex.font='40px 微软雅黑';
    
      cex.filltext('生命：'+hero.full,330,40);
    
      cex.filltext('分数:'+hero.frac,0,40);
    
      cex.filltext('子弹:'+hero.maga,0,80);

      if (state == 0) {
     //初始化
        cex.drawimage(logo, 40, 0);

      }

      if (state == 1) {
     //出场动画
        game.paint();
    
        game.sprot();

      }

      if (state == 2) {
     //战斗状态
        hero.paint()
        hero.sprot()
        bull_paint()
        bull_sprot()
        hero.enemysos() //增加敌机数量
        enemy_paint()
        enemy_sprot()
        enemy_bull_hero() //碰撞检测
        enemy_del();

      }

      if (state == 3) {
 //暂停状态
        cex.drawimage(pause, 210, 375)
        hero.paint()
        bull_paint()
        enemy_paint()
      }

      if (state == 4) {
     //游戏结束状态
        cex.filltext('菜',bakg.width/2-30,bakg.height/2-90);

      }

    }
    , 30)

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！