Asteroids

This is a work in progress. What is a asteroids How do you make a asteroids? This script and codes were developed by Dave DeHaan on 10 March 2022, Thursday.

How do I make an asteroids?
  1. Asteroids Previews
  2. Asteroids HTML Codes
  3. Asteroids CSS Codes
  4. Asteroids JS Codes
Asteroids Previews

Asteroids HTML Codes

<!DOCTYPE html>
<html >
<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>

Asteroids CSS Codes

body {
  margin: 0px;
}
#myCanvas {
  background: #333;
}

Asteroids JS Codes

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();
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.