html - Dart key press' 改变 2D 游戏中 Sprite 的方向

Question

我最近一直在做一个 Dart 游戏。在游戏中，用户使用 W、A、S 和 D 键控制宇宙飞船 Sprite 。这些将使 Sprite 向上移动。分别为左、右和下。空间将使一个代表射弹、导弹子弹等的正方形在船所面对的方向上以极快的速度移动。

我有一个非常糟糕的系统可以工作:

(用于处理按键)

bool drawBull = false;
void handleKeyboard(KeyboardEvent event) {
   kevent = event.keyCode;
   if (kevent == KeyCode.W || kevent == KeyCode.UP){
      direction = 'up';
      window.console.log('w / up');
   } 
   else if (kevent == KeyCode.A || kevent == KeyCode.LEFT){
      direction = 'left';
      window.console.log('a / left');
   }
   else if (kevent == KeyCode.S || kevent == KeyCode.DOWN){
      direction = 'down';
      window.console.log('s / down');
   }
   else if (kevent == KeyCode.D || kevent == KeyCode.RIGHT){
      direction = 'right';
      window.console.log('d / right');
   }
   else if (kevent == KeyCode.SPACE) {
      shotX = lastX; shotY = lastY;
      if (direction == 'right') { shotX = shotX + 400; }
      if (direction == 'down') { shotY = shotY + 400; }
      drawBull = true;
      window.console.log('space');
  } else {
      return null;
  }
}

和绘图功能本身:

void draw() {
   canvas.width = canvas.width;
   switch (direction) {
   case 'up':
    lastY = lastY - 3;
    context.drawImage(shipU, lastX, lastY);
    if (drawBull) { shotY = shotY - 30; context.fillRect(lastX + 240, shotY, 20, 20); }
  break;
  case 'left':
    lastX = lastX - 3;
    context.drawImage(shipL, lastX, lastY);
    if (drawBull) { shotX = shotX - 30; context.fillRect(shotX, lastY + 240, 20, 20); }
    break;
  case 'down':
    lastY = lastY + 3;
    context.drawImage(shipD, lastX, lastY);
    if (drawBull) { shotY = shotY + 30; context.fillRect(lastX + 240, shotY, 20, 20); }
    break;
  case 'right':
    lastX = lastX + 3;
    context.drawImage(shipR, lastX, lastY);
    if (drawBull) { shotX = shotX + 30; context.fillRect(shotX, lastY + 240, 20, 20); }
  break;
  default:
    return null;
}

}

如您所见，这是一种冗长而繁琐的方法。然而，尽管我绞尽脑汁，我还是想不出一个系统可以避免这么多 if/switch 语句以及为每个语句写出绘制图像和拍摄代码的想法。

当然，我的实际游戏将大量面向对象，因此面向对象的解决方案可能会有所帮助。

给这个问题的代码答案非常好，虽然不完全符合我的需要。所以也许采用这样的类(class)会很好 How to listen to key press repetitively in Dart for games?

非常感谢您的帮助!

——汤姆·W。

Answer 1

您可以存储项目的速度和/或旋转，并将其用于渲染，而不是将方向存储为字符串。

然后，您可以存储键与速度变化的映射:

var keyHandlers = {
    KeyCode.W: new Point(0, 1),
    KeyCode.S: new Point(0, -1),
    KeyCode.A: new Point(-1, 0),
    KeyCode.D: new Point(1, 0),
}

var spritePosition = new Point(0, 0);

void handleKeyboard(KeyboardEvent event) {
  if (keyHandlers[event.keyCode])
    spritePosition += keyHandlers[event.keyCode];
}

最终，您可能希望实际存储 Sprite 的速度，并使用输入来增加速度；然后“衰减”每个帧的速度(以表示重力/摩擦力等)。

如果您的 Sprite 需要在特定方向上渲染，您应该存储旋转以及位置和速度。有一组简单的 slides here这可能有用；还有很多不错的 XNA tutorials那里将涵盖构建一个“GameObject”类来结束这个状态(虽然 XNA 已经死了，但教程很棒，而且 C# 距离 Dart 还不到一百万英里)。

当你的船射击时，你可以将船的位置和旋转复制到子弹上，并通过将船的旋转应用于子弹的起始速度来计算它的速度。

Bob Nystrom 也有一个很棒的网站 gameprogrammingpatterns.com当您深入了解它时，我建议您阅读。