Dart key press' to change the direction of a sprite in a 2D game

Question

I have recently been making a game in dart. In the game, the user controls a space ship sprite with the W, A, S and D keys. These will make the sprite move UP. Left, Right and Down respectively. Space will make a square that represents a projectile, missile bullet etc. move at great speed in the direction the ship is facing.

I have a very bad system that works:

(FOR HANDLING KEY PRESS)

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

And the draw function itself:

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

}

As you can see, this is a long untidy and tedious method. However, despite all my brain racking I can't think of a system that avoids these many if/switch statements and the idea of writing out the draw image and shooting code for each one.

My actual game will be heavily object orientated of course, so perhaps an object-orientated solution would be helpful.

The code answer given to this question was quite nice, although doesn't fit my needs exactly. So perhaps an adoption of a class like that would work well How to listen to key press repetitively in Dart for games?

Thank you very much for your help!

-Tom W.

Answer 1

Instead of storing directions as strings, you could store the Velocity and/or Rotation of items, and use that for rendering.

You could then store a map of the key vs the velocity change:

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

Ultimately, you probably want to actually store a Velocity for the sprite, and use input to increase the velocity; and then "decay" that velocity each frame (to represent gravity/friction, etc.).

If your sprite needs to be rendered at a particular direction, you should store a rotation as well as position and velocity. There's a simple set of slides here that could be useful; and there are also lots of good XNA tutorials out there that will cover building a "GameObject" class to wrap up this state (although XNA is dead, the tutorials are great, and the C# is not a million miles from Dart).

When your ship shoots, you can copy the position and rotation from the ship to the bullet and calculate it's velocity by applying the ships rotation to the starting velocity of your bullet.

There's also a great website by Bob Nystrom at gameprogrammingpatterns.com that I'd recommend reading as you get more into it.