[附源码]H5+js游戏:跳跃旋转塔游戏

前端的朋友们，福利来了，今天小编给大家带来了一款经典的H5实现的飞机射击游戏源码，请看图：

测试视频

https://githubs.xyz/show/166.mp4

游戏运行

找到index.html直接运行，但是会报错误。因为游戏js加载了一个levels/demo.json文件：

原因就是XMLHttpRequest 加载本地文件会跨域，于是我们在chrome浏览器启动前加上参数：

 --disable-web-security --user-data-dir=E:\chrome_cache

具体操作见演示视频， 后面的路径为已经存在的路径就行，放缓存的地方。

部分js代码：

  function run() {
    Game.Load.images(IMAGES, function(images) {
      Game.Load.json("levels/demo", function(level) {
        setup(images, level);
        Game.run({
          fps:    FPS,
          update: update,
          render: render
        });
        Dom.on(document, 'keydown', function(ev) { return onkey(ev, ev.keyCode, true);  }, false);
        Dom.on(document, 'keyup',   function(ev) { return onkey(ev, ev.keyCode, false); }, false);
      });
    });
  }

  function setup(images, level) {
    tower    = new Tower(level);
    monsters = new Monsters(level);
    player   = new Player();
    camera   = new Camera();
    renderer = new Renderer(images);
  }

  function update(dt) {
    player.update(dt);
    monsters.update(dt);
    camera.update(dt);
  }

  function render(dt) {
    renderer.render(dt);
  }

  function onkey(ev, key, pressed) {
    switch(key) {
      case KEY.LEFT:  player.input.left  = pressed; ev.preventDefault(); return false;
      case KEY.RIGHT: player.input.right = pressed; ev.preventDefault(); return false;
      case KEY.UP:    player.input.up    = pressed; ev.preventDefault(); return false;
      case KEY.DOWN:  player.input.down  = pressed; ev.preventDefault(); return false;

      case KEY.SPACE:
        player.input.jump          = pressed && player.input.jumpAvailable;
        player.input.jumpAvailable = !pressed;
        break;
    }
  }

  //===========================================================================
  // TOWER
  //===========================================================================

  var Tower = Class.create({

    //-------------------------------------------------------------------------

    initialize: function(level) {

      var row, col;

      level.map.reverse(); // make 0 index the ground, increasing towards the sky

      this.name     = level.name;
      this.color    = level.color;
      this.rows     = level.map.length;
      this.cols     = level.map[0].length;
      this.ir       = WIDTH/4;                 // inner radius (walls)
      this.or       = this.ir * 1.2;           // outer radius (walls plus platforms)
      this.w        = this.cols * COL_WIDTH;
      this.h        = this.rows * ROW_HEIGHT;
      this.map      = this.createMap(level.map);
      this.ground   = { platform: true  };
      this.air      = { platform: false };

    },

    //-------------------------------------------------------------------------

    getCell: function(row, col) {
      if (row < 0)
        return this.ground;
      else if (row >= this.rows)
        return this.air;
      else
        return this.map[row][normalizeColumn(col)];
    },

全部源码获取：

https://www.githubs.xyz/y166.html

结尾语

我是分享好物教程源码的老罗，欢迎关注！