Asteroids-style motion by joyrexus

Use the left and right arrow keys to rotate the ship. Press the up arrow key to turn on the engine.

Notes

This is an example of Asteroids-style motion. The ship moves in straight lines until the engine is turned on and accelerates. When the ship reaches any of the stage boundaries it is repositioned to the opposite side. The ship rotates at ROTATION_SPEED degrees/second.

All code here is taken straight from the Game Mechanic Explorer, a collection of concrete examples for various game mechanics, algorithms, and effects. The examples are all implemented in JavaScript using the Phaser game framework, but the concepts and methods are general and can be adapted to any engine.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.0.3/phaser.min.js"></script>
<body>
  <div id="game" style="overflow: hidden;"></div>
<script>
  /* 
   A GAME MECHANIC EXPLORER DEMO
   //gamemechanicexplorer.com/#thrust-1
   */
  var GameState = function(game) {};

  // Load images and sounds
  GameState.prototype.preload = function() {
      this.game.load.spritesheet('ship', 'ship.png', 32, 32);
  };

  // Setup the example
  GameState.prototype.create = function() {
      // Set stage background color
      this.game.stage.backgroundColor = 0x333333;

      // Define motion constants
      this.ROTATION_SPEED = 180; // degrees/second
      this.ACCELERATION = 200; // pixels/second/second
      this.MAX_SPEED = 250; // pixels/second

      // Add the ship to the stage
      this.ship = this.game.add.sprite(this.game.width/2, this.game.height/2, 'ship');
      this.ship.anchor.setTo(0.5, 0.5);
      this.ship.angle = -90; // Point the ship up

      // Enable physics on the ship
      this.game.physics.enable(this.ship, Phaser.Physics.ARCADE);

      // Set maximum velocity
      this.ship.body.maxVelocity.setTo(this.MAX_SPEED, this.MAX_SPEED); // x, y

      // Capture certain keys to prevent their default actions in the browser.
      // This is only necessary because this is an HTML5 game. Games on other
      // platforms may not need code like this.
      this.game.input.keyboard.addKeyCapture([
          Phaser.Keyboard.LEFT,
          Phaser.Keyboard.RIGHT,
          Phaser.Keyboard.UP,
          Phaser.Keyboard.DOWN
      ]);

      // Show FPS
      this.game.time.advancedTiming = true;
      this.fpsText = this.game.add.text(
          20, 20, '', { font: '16px Arial', fill: '#ffffff' }
      );
  };

  // The update() method is called every frame
  GameState.prototype.update = function() {
      if (this.game.time.fps !== 0) {
          this.fpsText.setText(this.game.time.fps + ' FPS');
      }

      // Keep the ship on the screen
      if (this.ship.x > this.game.width) this.ship.x = 0;
      if (this.ship.x < 0) this.ship.x = this.game.width;
      if (this.ship.y > this.game.height) this.ship.y = 0;
      if (this.ship.y < 0) this.ship.y = this.game.height;

      if (this.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
          // If the LEFT key is down, rotate left
          this.ship.body.angularVelocity = -this.ROTATION_SPEED;
      } else if (this.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
          // If the RIGHT key is down, rotate right
          this.ship.body.angularVelocity = this.ROTATION_SPEED;
      } else {
          // Stop rotating
          this.ship.body.angularVelocity = 0;
      }

      if (this.input.keyboard.isDown(Phaser.Keyboard.UP)) {
          // If the UP key is down, thrust
          // Calculate acceleration vector based on this.angle and this.ACCELERATION
          this.ship.body.acceleration.x = Math.cos(this.ship.rotation) * this.ACCELERATION;
          this.ship.body.acceleration.y = Math.sin(this.ship.rotation) * this.ACCELERATION;

          // Show the frame from the spritesheet with the engine on
          this.ship.frame = 1;
      } else {
          // Otherwise, stop thrusting
          this.ship.body.acceleration.setTo(0, 0);

          // Show the frame from the spritesheet with the engine off
          this.ship.frame = 0;
      }
  };

  var game = new Phaser.Game(960, 500, Phaser.AUTO, 'game');
  game.state.add('game', GameState, true);

  window.focus();
</script>