美文网首页
飞机小游戏总结

飞机小游戏总结

作者: singingT | 来源:发表于2018-09-29 13:01 被阅读0次

    万事开头难,一开始的时候真的毫无头绪,根本不知道怎么实现。后来静下心来,把整个项目分解成一小步一小步,最终实现了。说一下,整个分解实现的步骤吧。

    1. 抽取出飞机怪兽的共同属性,写出他们的父类,由于英文一般,只能想到单词Creature
    2. 单独写出飞机类Plane,并将其成功绘制出来
    3. 写出怪兽类Enemy,在画布上绘制出来,
    4. 使怪兽动起来,这个是第一个卡住我的地方,第一次使用requestAnimationFrame发现,怎么都是一片空白,在这里查找到相关的原因,(https://segmentfault.com/q/1010000011134452/a-1020000011136064),因为一开始显示怪兽图片是这么写的
    this.image.onload = function() {
      context.drawImage(self.image, self.left, self.top, self.width, self.height);
          };
    

    原来,Image类的onload函数只有在图片加载完成时候执行一次。因此,修改代码为

    // 当是第一加载时,
    this.image.onload = function() {
      context.drawImage(self.image, self.left, self.top, self.width, self.height);
    };
    // 已经加载好了
    context.drawImage(this.image, this.left, this.top, this.width, this.height);
    

    图片可以显示了,但是又有一个Bug出现了,说是属性错误,原来requestAnimationFrame的执行环境是window,所以需要将它的执行环境修改为GAMEthis.animation = requestAnimationFrame(this.move.bind(this));
    至此,动画可以成功完成

    1. 飞机的移动和射击
    • 一开始飞机的移动还挺容易实现的,但是发现移动得很突兀,不流畅,而项目的演示demo中却很流畅,而且怪兽的移动也很流畅。这个问题也困扰了我很久。最后,发现,一开始移动是在按下的时候马上使飞机坐标发生变化,而怪兽却是在每次动画里才发生坐标变化,因此,在keydown事件监听中只是把按下的方向键存放进keys数组中,在动画函数中,再把keys中的值取出来,改变飞机的坐标
    • 飞机移动、射击同时进行。原来keydown只能监听一个键的按下,如果有另一个键也按下了,将覆盖上一个键。因此,用一个数组keys来记录所有按下的键,配合keyup将松开的键的从数组中删除。因此,实现了移动和射击同时进行。而且,在多关卡的demo中发现了,如果是先按下空格键,再方向键,则飞机只能移动,不能发出子弹,如果是先方向键,再空格键,则可以边移动,边发出子弹。
    1. 子弹的实现。这个比较顺利,按下空格就新建一个Bullet实例,并绘制出来,使其移动就可以了

    2. 子弹射中怪兽。

    • 怪兽被打中之后,修改状态和图片,并且删除子弹即可
    // 修改怪兽图片
    enemy.image.src = './img/boom.png';
    // 设置状态为死亡
    enemy.alive = false;
    // 设置死亡时间为0
    enemy.deadTime = 0;
    // 删除该子弹
    bullets.splice(i, 1);
    
    • 怪兽的死亡过程保持3帧。怪兽被打中的时候,增加一个属性deadTime并设置为0,每次动画执行时加1,直到3,使其维持3帧
    1. 多关卡的实现
    • 每通过一关,CONFIG.level加1
    • 绘制怪兽时,怪兽的数量为CONFIG.level * CONFIG.numPerLine采用一个大数组来存放所有的数据,一行为6个,计算出每个怪兽的位置
     // 根据关卡数生成怪兽数组
      for (var i = 0; i < CONFIG.numPerLine * CONFIG.level; i++) {
        // 计算出怪兽的左坐标
        var enemyLeft = CONFIG.canvasPadding + (CONFIG.enemyGap + CONFIG.enemySize) * (i % CONFIG.numPerLine);
        // 计算出怪兽的上坐标
        var enemyTop = CONFIG.canvasPadding + CONFIG.enemySize * Math.floor(i / CONFIG.numPerLine);
        var enemy = new this.Enemy(self, enemyLeft, enemyTop, CONFIG.enemySize, CONFIG.enemySize, CONFIG.enemyIcon);
        this.elements.enemys.push(enemy);
      }
    
    • 怪兽越界的判断。比如,向右移动,则从函数getRightEnemy中遍历获取最右边怪兽的索引,判断它继续向右移动是否会越界,如果会越界,则需要所有怪兽向下移动一行。接着从函数getBottomEnemy中获取最后一个活怪兽,判断其向下移动是否越界,如果不越界,则集体下移一行,如果越界,说明游戏失败。
    
      // 获取最右边的怪兽
      getRightEnemy: function() {
        var length = this.enemys.length;
        var left = 0;
        var index = -1;
    
        for (var i = 0; i < length; i++) {
          var enemy = this.enemys[i];
          // 如果当前怪兽是活的,并且左坐标大,则取之
          if (enemy.alive && enemy.left > left) {
            left = enemy.left;
            index = i;
          }
        }
        return index;
      },
    
    // 获取最底下的活着怪兽
    getBottomEnemy: function() {
        var length = this.enemys.length;
        for (var i = length - 1; i > -1; i--) {
          if (this.enemys[i].alive) {
            return i;
          }
        }
    
      },
    

    总结:虽然整体功能实现了,但有几点还是有些疑惑

    1. 飞机移动不流畅的处理。本来,是想着在监听keydown时,一按下方向键就马上移动。为了使飞机可以流畅地移动,采用了将按下的键存进keys数组中,在动画函数中遍历keys数组,改变飞机的坐标实现移动。
    • 想知道实际上也是这么操作的吗?会不会在某些情况会有延迟?


      飞机移动.gif
    飞机移动_修改.gif
    1. 同时按下两个键的处理,用一个数组keys保存按下的键,而释放某个键时再从数组中删除,不知道是否有更好的方法?

    2. 多行怪兽的处理。我用的是一个大数组表示,再去计算每个怪兽的位置。也想过一个二维数组保存,不知道哪种会更好?

    3. 一开始的代码结构是这样的,怪兽、飞机、子弹类都是全局的

      image.png
      后来觉得不要有太多的全局变量,于是全部都写在了GAME里面,但是GAME的结构就复杂多了,不知道这样处理是否正确?

    相关文章

      网友评论

          本文标题:飞机小游戏总结

          本文链接:https://www.haomeiwen.com/subject/vpevoftx.html