HTML5游戏开发(五)：给每一个元素赋予生命

在HTML5游戏开发系列文章中，我们的目标有四个：一、以最小的成本入门egret小项目开发，官方的教程一直都是面向中重型；二、egret可以非常轻量；三、egret相比PIXI.js和spritejs文档更成熟、友好；四、学习从0打造高效的开发工作流。

在本文中，我们将继续egret游戏开发之旅，让游戏的所有元素动起来。我们先看看游戏的需求，在开发飞机大战游戏时，需要使飞机、敌机和子弹等元素动起来。我们需要让飞机在屏幕上上下左右移动，敌机从屏幕外飞入飞出，子弹从飞机中射出并飞向敌机。

现在，我们将探讨如何让这些元素动起来：

1. 飞机移动： 飞机的移动可以使用键盘事件来控制，当用户按下键盘上的方向键时，飞机会相应地移动。
2. 敌机飞入飞出： 敌机可以从屏幕外飞入，然后向屏幕下方移动，到达屏幕底部后，消失在屏幕外。我们可以使用egret的Tween类来控制敌机的移动。
3. 子弹射出： 当玩家按下空格键时，子弹从飞机中射出。我们可以使用egret的Bitmap类来创建子弹，然后使用egret的Tween类来控制子弹的移动。

以下是详细的步骤和示例代码：

1. 飞机移动：

// 监听键盘事件
document.addEventListener("keydown", function(event) {
  // 获取飞机对象
  var plane = document.getElementById("plane");

  // 根据按下的键盘键，移动飞机
  if (event.keyCode == 37) {
    // 左移
    plane.style.left = parseInt(plane.style.left) - 10 + "px";
  } else if (event.keyCode == 38) {
    // 上移
    plane.style.top = parseInt(plane.style.top) - 10 + "px";
  } else if (event.keyCode == 39) {
    // 右移
    plane.style.left = parseInt(plane.style.left) + 10 + "px";
  } else if (event.keyCode == 40) {
    // 下移
    plane.style.top = parseInt(plane.style.top) + 10 + "px";
  }
});

2. 敌机飞入飞出：

// 创建一个敌机对象
var enemyPlane = new egret.Bitmap();
enemyPlane.texture = RES.getRes("enemyPlane_png");

// 设置敌机的位置和速度
enemyPlane.x = Math.random() * 400;
enemyPlane.y = -100;
enemyPlane.speedY = 10;

// 添加敌机到舞台
stage.addChild(enemyPlane);

// 使用Tween类控制敌机的移动
egret.Tween.get(enemyPlane).to({y: 600}, 1000).call(function() {
  // 敌机到达屏幕底部后，从舞台中移除
  stage.removeChild(enemyPlane);
});

3. 子弹射出：

// 创建一个子弹对象
var bullet = new egret.Bitmap();
bullet.texture = RES.getRes("bullet_png");

// 设置子弹的位置和速度
bullet.x = plane.x + plane.width / 2;
bullet.y = plane.y;
bullet.speedY = -10;

// 添加子弹到舞台
stage.addChild(bullet);

// 使用Tween类控制子弹的移动
egret.Tween.get(bullet).to({y: -100}, 500).call(function() {
  // 子弹飞出屏幕后，从舞台中移除
  stage.removeChild(bullet);
});

我希望这篇文章对你有帮助。如果你有任何问题或建议，请随时与我联系。