Html 省道键按下'；在2D游戏中更改精灵方向的步骤

我最近一直在用飞镖做游戏。在游戏中，用户用W、a、S和D键控制太空船精灵。这些将使精灵向上移动。左，右，下。太空将形成一个正方形，代表一枚射弹、导弹子弹等，以高速朝着飞船所面对的方向移动

我有一个非常糟糕的系统：

（用于处理按键）

以及draw函数本身：

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语句，以及为每个语句编写绘图图像和拍摄代码的想法

当然，我的实际游戏将非常面向对象，因此，也许面向对象的解决方案会有所帮助

这个问题的代码答案很好，虽然不完全符合我的需要。因此，采用这样的类可能会很好

非常感谢你的帮助

---

-Tom W.

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

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

var键处理程序={
W：新点（0,1），
KeyCode.S：新点（0，-1），
KeyCode.A：新点（-1,0），
KeyCode.D：新点（1,0），
}
var spritePosition=新点（0,0）；
无效handleKeyboard（键盘事件）{
if（keyHandlers[event.keyCode]）
spritePosition+=keyHandlers[event.keyCode]；
}

最终，您可能希望实际存储精灵的速度，并使用输入来提高速度；然后“衰减”每帧的速度（表示重力/摩擦力等）

如果需要在特定方向渲染精灵，则应存储旋转以及位置和速度。有一套简单的方法可能很有用；还有很多好的东西，包括构建一个“GameObject”类来结束这个状态（虽然XNA已经死了，但教程很棒，C#离Dart也不远）

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

还有一个由鲍勃·尼斯特罗姆（Bob Nystrom）创建的很棒的网站，我建议你在深入了解它的同时阅读

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;
}