Moving Around Like a Top Down

Prev: Moving around like a platformer

Suppose we wanted to create a space shooter or a tank shooter, like the first video game programmers ever. Or Pacman, or DigDug or, as we'll see tons of other first-person shooter games that let you walk up down and strafe left and right. It's a movement system as old and good as games themselves. We'll also see that thhese kinds of simplified game boards with circles and grids are perfect for the collision layer of the game, or the map layer and the real game graphics will come later.

Let's add some additional data to our Player to make them capable of this kind of top down movement. First we want to set a turn and walk direction. This

let HERO = {
  vx: 0,
  vy: 0,
  accel: 2,
  radius: 50
  rotationSpeed: .2 * (Math.PI / 180),
  turnDirection: 0,
  walkDirection: 0,
  rotationAngle: (Math.PI / 2),
  x: CANVAS.width / 2,
  y: CANVAS.height / 2
}

We must also update the move function.

const move = () => {
    if (KEYS_PRESSED["ArrowUp"]) {
      HERO.walkDirection += 0.2;
    } else if (KEYS_PRESSED["ArrowDown"]) {
      HERO.walkDirection -= 0.2;
    } else {
      HERO.walkDirection *= 0.99;
    }
    if (KEYS_PRESSED["ArrowLeft"]) {
      HERO.turnDirection += -0.01;
    } else if (KEYS_PRESSED["ArrowRight"]) {
      HERO.turnDirection += 0.01;
    } else {
      HERO.turnDirection *= 0.93;
    }
    HERO.rotationAngle += HERO.turnDirection * HERO.rotationSpeed;
    const moveStep = HERO.walkDirection * HERO.moveSpeed;

    HERO.vx = Math.cos(HERO.rotationAngle) * moveStep;
    HERO.vy = Math.sin(HERO.rotationAngle) * moveStep;
}

In Sum

We've got a Hero circle and he can now turn like a tank shooter. This could function as the game's map if we added a 3D first person camera. But we want a little more to play with than just an empty screen. We need some walls to collide off of. So let's look at what level data is and how we load different levels for the same hero in the next article.

Next: Multiple Entities