Asteroids

In this example below you will see how to do a Asteroids with some HTML / CSS and Javascript

This is a work in progress.

Thumbnail
This awesome code was written by davedehaan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright davedehaan ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Asteroids</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="myCanvas" width="1000" height="1000"></canvas>
<pre>
  Up = Forward
  Down = Backward
  Right = Turn Right
  Left = Turn Left
  Space = Shoot
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/davedehaan/asteroids-aAqvL */
body {
  margin: 0px;
}
#myCanvas {
  background: #333;
}


/*Downloaded from https://www.codeseek.co/davedehaan/asteroids-aAqvL */
var game = {
  ship: {
    x: 50,
    y: 50,
    angle: 0,
    inertia: 0,
    xRatio: 1,
    yRatio: 0
  },
  dimensions: {
    width: 0,
    height: 0
  },
  lasers: [],
  meteors: [],
  score: 0,
  gameLoop: null,
  init: function() {
    var gameObj = this;
    this.canvas = document.getElementById('myCanvas');
    this.context = this.canvas.getContext('2d');
    this.context.strokeStyle = '#FFF';
    this.context.fillStyle = '#FFF';
    this.initKeyboard();
    meteorCount = 5;
    i = 0;
    while (i < meteorCount) {
      this.createMeteor();
      i++;
    }
    this.ship.x = this.canvas.width / 2;
    this.ship.y = this.canvas.height / 2;
    this.gameLoop = setInterval(function() {
      gameObj.loop();
    }, 1000/60);
  },
  createMeteor: function() {
      this.meteors.push({
        x: this.canvas.width,
        y: this.canvas.height,
        angle: Math.floor(Math.random() * 360),
        speed: Math.floor(Math.random() * 2) + 2
      });
  },
  loop: function() {   
   this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
    this.calculateMovement();
    this.drawShip();
    this.drawLasers();
    this.drawMeteors();
    this.detectCollisions();
    this.context.fillText('Score: '+this.score, 2, this.canvas.height - 2);
  },
  detectCollisions: function() {
    for (key in this.meteors) {
      meteor = this.meteors[key];
      if (Math.abs(meteor.x - this.ship.x) < 6 && Math.abs(meteor.y - this.ship.y) < 6) {
        this.endGame();
      }
      for (laserKey in this.lasers) {
        laser = this.lasers[laserKey];
        if (Math.abs(meteor.x - laser.x) < 5 && Math.abs(meteor.y - laser.y) < 5) {
          this.lasers.splice(laserKey, 1);
          this.meteors.splice(key, 1);
          this.score++;
          this.createMeteor();
          this.createMeteor();
        }
      }
    }
  },
  endGame: function() {
    clearInterval(this.gameLoop);
  },
  calculateMovement: function() {
    if (this.ship.inertia > 0) { this.ship.inertia -= .05; }
    if (this.ship.inertia < 0) { this.ship.inertia += .05; }

    if (this.ship.y > this.canvas.height) { this.ship.y = 0; }
    if (this.ship.y < 0) { this.ship.y = this.canvas.height; }
    if (this.ship.x > this.canvas.width) { this.ship.x = 0; }
    if (this.ship.x < 0) { this.ship.x = this.canvas.width; }

    if (this.ship.angle > 360) { this.ship.angle = 0; }
    if (this.ship.angle < 0) { this.ship.angle = 360; }

    this.ship.xRatio = Math.sin(Math.PI * this.ship.angle / 180);
    this.ship.yRatio = Math.cos(Math.PI * this.ship.angle / 180);

    this.ship.x += Math.round(this.ship.inertia * this.ship.xRatio);
    this.ship.y += Math.round(this.ship.inertia * this.ship.yRatio);

  },
  drawMeteors: function() {
    for (key in this.meteors) {
      meteor = this.meteors[key];
      this.context.beginPath();
      this.context.arc(meteor.x,meteor.y,5,0,2*Math.PI);
      this.context.fill();
      this.meteors[key].x += Math.sin(Math.PI * meteor.angle / 180) * meteor.speed;
      this.meteors[key].y += Math.cos(Math.PI * meteor.angle / 180) * meteor.speed;
      if (this.meteors[key].y > this.canvas.height) { this.meteors[key].y = 0; }
      if (this.meteors[key].y < 0) { this.meteors[key].y = this.canvas.height; }
      if (this.meteors[key].x > this.canvas.width) { this.meteors[key].x = 0; }
      if (this.meteors[key].x < 0) { this.meteors[key].x = this.canvas.width; }
    }  
  },
  drawShip: function() {
    this.context.beginPath();
    this.context.moveTo(this.ship.x - this.ship.xRatio * 5, this.ship.y - this.ship.yRatio * 5);
    this.context.lineTo(this.ship.x + this.ship.xRatio * 5, this.ship.y + this.ship.yRatio * 5);
    this.context.stroke();
  },
  createLaser: function() {
    this.lasers.push({
      x: this.ship.x,
      y: this.ship.y,
      inertia: this.ship.inertia,
      xRatio: this.ship.xRatio,
      yRatio: this.ship.yRatio,
    });
  },
  drawLasers: function() {
    for (key in this.lasers) {
      laser = this.lasers[key];
      this.context.beginPath();
      this.context.moveTo(laser.x - laser.xRatio * 3, laser.y - laser.yRatio * 3);
      this.context.lineTo(laser.x + laser.xRatio * 3, laser.y + laser.yRatio * 3);
      this.context.stroke();
      this.lasers[key].x += laser.xRatio * (laser.inertia + 2);
      this.lasers[key].y += laser.yRatio * (laser.inertia + 2);
      if (laser.x > this.canvas.width || laser.y > this.canvas.height || laser.x < 0 || laser.y < 0)
        this.lasers.splice(key, 1);
    }
  },
  initKeyboard: function() {
    var gameObj = this;
    window.addEventListener('keydown', function(e) {
      if (e.keyCode == 38 || e.keyCode == 87) {
        if (gameObj.ship.inertia < 10)
          gameObj.ship.inertia++;
      }
      if (e.keyCode == 40 || e.keyCode == 83) {
        if (gameObj.ship.inertia > -10)
          gameObj.ship.inertia--;
      }
      if (e.keyCode == 37 || e.keyCode == 65) {
        gameObj.ship.angle += 10;
      }
      if (e.keyCode == 39 || e.keyCode == 68) {
        gameObj.ship.angle -= 10;
      }
      if (e.keyCode == 32 || e.keyCode == 13) {
        gameObj.createLaser();
      }
    });
  }
};
game.init();

Comments