373 Codepen

Космическая стрелялка, игра на js

Срелялка на jаvascript. Вы соревнуетесь с компьютером в то, кто кого быстрее подстрелит. Осложняют ситуацию летающие астеройды.


HTML

<div class="container">
  <div id="overlay" class="screen-overlay"></div>
  <div id="contenders">
    <svg xmlns="http://www.w3.org/2000/svg" version="1" viewbox="0 0 741 1255" width="67.7" height="67.7" id="player1" class="player-one">
        <path fill="#1560d6" d="M565 728c-6 68-15 130-29 186 88 38 156 106 187 188 12-32 18-65 18-100 0-116-70-217-176-274zM265 1020l8 25h194l9-25H265z"/>
        <path fill="#e83d37" d="M210 937c8 30 17 58 26 83h269c9-25 18-53 26-83H210z"/>
        <path fill="#1560d6" d="M0 1002c0 35 6 68 18 100 31-82 99-150 187-188-14-55-23-118-29-186A314 314 0 0 0 0 1002z"/>
        <path fill="#DFE3E5" d="M571 585c0-125-30-241-67-337a395 395 0 0 1-270 0c-36 94-64 209-64 337a1658 1658 0 0 0 34 329l6 23h321l5-23a1313 1313 0 0 0 35-329z"/>
        <circle fill="#B8BDBF" cx="370" cy="481" r="100"/>
        <path fill="#ead3b0" d="M455 481a85 85 0 1 1-170 0 85 85 0 0 1 170 0z"/>
        <path fill="#1560d6" d="M234 248a394 394 0 0 0 270 0C446 98 370 0 370 0c-9 10-81 104-136 248z"/>
      </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1" viewbox="0 0 741 1255" width="67.7" height="67.7" id="player2" class="player-two">
        <path fill="#ED1C24" d="M565 728c-6 68-15 130-29 186 88 38 156 106 187 188 12-32 18-65 18-100 0-116-70-217-176-274zM265 1020l8 25h194l9-25H265z"/>
        <path fill="#8074B5" d="M210 937c8 30 17 58 26 83h269c9-25 18-53 26-83H210z"/>
        <path fill="#ED1C24" d="M0 1002c0 35 6 68 18 100 31-82 99-150 187-188-14-55-23-118-29-186A314 314 0 0 0 0 1002z"/>
        <path fill="#DFE3E5" d="M571 585c0-125-30-241-67-337a395 395 0 0 1-270 0c-36 94-64 209-64 337a1658 1658 0 0 0 34 329l6 23h321l5-23a1313 1313 0 0 0 35-329z"/>
        <circle fill="#B8BDBF" cx="370" cy="481" r="100"/>
        <path fill="#B3E3F4" d="M455 481a85 85 0 1 1-170 0 85 85 0 0 1 170 0z"/>
        <path fill="#ED1C24" d="M234 248a394 394 0 0 0 270 0C446 98 370 0 370 0c-9 10-81 104-136 248z"/>
      </svg>
  </div>
  <div id="popup" class="popup-box">
    <div class='popup-text'>
      <div class="options">
        <button id="playerOne" class="toggle button option-blue">Computer</button>
        <h2 class="vs">VS</h2>
        <button id="playerTwo" class="toggle button option-red">Human</button>
      </div>
      <div class="options-lower">
        <button id="obstacles" class="toggle button option-obstacles">Asteroids: On</button>
        <br/>
        <button id="start" class="start-button">Start</button>
      </div>
    </div>
  </div>
  <!--POPUP END-->
  <div id="results" class="popup-results">
    <div class='popup-text'>
      <h3 class="result"></h3>
      <h3 class="message"></h3>
      <button id="restart" class="start-button">Play Again?</button>
    </div>
  </div>
  <!--RESULTS END-->
  <div class="scoreboard">
    <div>
      <p class="counter p1"><span class="shield_p1">0</span>%</p>
    </div>
    <div>
      <p class="counter p2"><span class="shield_p2">0</span>%</p>
    </div>
  </div>
  <canvas class="gameboard"></canvas>
  <canvas class="canvasPlanet"></canvas>
  <div class="crash">
    <svg class="explosion" version="1" width="512" height="512">
          <path d="M309 5l-77 156-29-31-7 58-170-49 112 114-32 16 50 26-40 88 73-17-7 141 69-129 61 55 6-75 140 50-103-101 131-47-143-35 20-39-50 8-4-189z" fill="#f24501" stroke="#9f0001" stroke-width="10" stroke-linejoin="miter"/>
          <path d="M275 126l-37 86-16-16-3 31-92-21 63 58-16 9 27 12-18 49 38-12v76l34-71 34 28 1-41 76 23-58-51 69-29-78-14 10-22-26 6-8-101z" fill="#fcdd09" stroke="#ff9702" stroke-width="3" stroke-linejoin="miter"/>
        </svg>
  </div>
  <!--CRASH END-->
  <svg xmlns="http://www.w3.org/2000/svg" version="1" id="planet" class="planet-one" viewbox="0 0 1402 1402" width="100%" height="100%">
        <circle class="p1bg" fill="#018FD5" cx="701" cy="701" r="701"/>
        <path class="p1c" fill="#75B84B" d="M232 900c-7-89-111-70-171-145s228-60 264-398c15-141-13-196-51-212A700 700 0 0 0 49 958c63 10 189 19 183-58zM997 312c-22 53-270 127-46 182 79 20 49 113 112 103s-23-106 56-181c19-18 102-81 149-128a705 705 0 0 0-167-163c-4 4-37 30-104 187zM549 239c29 152 441-57 482-157a698 698 0 0 0-696 21c98 41 192 20 214 136zM1355 450c-32 80-126 316-244 294-88-16-246 26-272 152-38 185-18 290 120 239 84-31 187 43 282-71 23-28 84-91 128-152a700 700 0 0 0-14-462zM557 450c-321 18-115 332-99 379 16 46 95 180 172 145s161-287 125-415c-39-134-134-112-198-109zM513 1175c30-241-234-60-304 25a699 699 0 0 0 805 128c72-161-534 109-501-153z"/>
        <path fill="#186DA0" opacity=".2" d="M959 1186A701 701 0 0 1 393 71a701 701 0 1 0 874 1044c-93 45-198 71-308 71z"/>
      </svg>
  <div class="planet-two">
    <svg version="1" viewbox="0 0 1443 1443">
          <circle class="p2bg" fill="#FCEE21" cx="721" cy="721" r="721"/>
          <circle class="p2c" fill="#E0C922" cx="303" cy="408" r="110"/>
          <circle class="p2c" fill="#E0C922" cx="219" cy="715" r="103"/>
          <circle class="p2c" fill="#E0C922" cx="522" cy="619" r="71"/>
          <circle class="p2c" fill="#E0C922" cx="536" cy="864" r="71"/>
          <circle class="p2c" fill="#E0C922" cx="324" cy="942" r="47"/>
          <circle class="p2c" fill="#E0C922" cx="577" cy="359" r="107"/>
          <circle class="p2c" fill="#E0C922" cx="771" cy="164" r="84"/>
          <circle class="p2c" fill="#E0C922" cx="462" cy="183" r="38"/>
          <circle class="p2c" fill="#E0C922" cx="921" cy="607" r="125"/>
          <circle class="p2c" fill="#E0C922" cx="846" cy="957" r="102"/>
          <circle class="p2c" fill="#E0C922" cx="641" cy="1213" r="145"/>
          <circle class="p2c" fill="#E0C922" cx="388" cy="1170" r="55"/>
          <circle class="p2c" fill="#E0C922" cx="715" cy="735" r="42"/>
          <circle class="p2c" fill="#E0C922" cx="1180" cy="916" r="121"/>
          <circle class="p2c" fill="#E0C922" cx="1038" cy="1188" r="57"/>
          <circle class="p2c" fill="#E0C922" cx="1059" cy="346" r="114"/>
          <circle class="p2c" fill="#E0C922" cx="1280" cy="646" r="99"/>
          <path fill="#000" opacity=".15" d="M1030 1209A721 721 0 0 1 457 50a722 722 0 1 0 838 1109c-82 32-171 50-265 50z"/>
        </svg>
  </div>
  <!--PLANET-TWO END-->
  <div class="star">
    <svg id="star" viewBox="0 0 513 513" version="1">
          <path fill="#f5ede7" class="star-body" d="M400 503c-3 0-7-1-10-3l-134-68-134 68a23 23 0 0 1-33-24l23-149L7 219a23 23 0 0 1 12-38l148-25 69-134a23 23 0 0 1 40 0l69 134 148 25a23 23 0 0 1 12 38L400 327l23 149a23 23 0 0 1-23 27z"/>
        </svg>
  </div>
  <!--STAR END-->
  <div class="space"></div>
</div>
<div class="hidden-assets">
  <svg xmlns="http://www.w3.org/2000/svg" version="1" viewbox="0 0 741 1255" width="67.7" height="67.7" id="flicker">
      <g>
        <path fill="#F7931E" d="M370 1255c31 0 60-79 83-210H288c23 131 51 210 82 210z"/>
        <path fill="#EDBB0B" d="M370 1145c26 0 50-38 69-100H302c19 62 43 100 68 100z"/>
      </g>
    </svg>
</div>

SCSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  font-size: calc(1vw + 1vh + 0.5vmin);
}

body {
  background: #475471;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  height: 100%;
  margin: 0px;
}

.container {
  background-image: -webkit-radial-gradient(
    50% 50%,
    ellipse cover,
    rgba(0, 0, 0, 0.3) 5%,
    rgba(0, 0, 0, 0.7) 100%
  );
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.scoreboard {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.scoreboard div {
  display: inline-block;
  width: 49%;
}
// A lighter shade of blue
p.p1 {
  color: #6a99e4;
}

// A lighter shade of red
p.p2 {
  color: #f1595f;
}

.counter {
  position: relative;
  opacity: 0.8;
  font-size: 2em;
  letter-spacing: 0.25em;
  padding: 0.5em 0 0 1em; // Offset padding to compensate for letter spacing
  text-align: center;
  z-index: 15;
}

.gameboard,
.canvasPlanet {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
}

.gameboard {
  z-index: 10;
}

.canvasPlanet {
  z-index: 5;
}

.planet-one,
.planet-two {
  filter: blur(0.05vmax);
  height: 10vmin;
  opacity: 0;
  width: 10vmin;
  z-index: 3;
}

.star {
  position: absolute;
  width: 1vmax;
  height: 1vmax;
  filter: blur(0.05vmax);
  left: 50%;
  top: 50%;
  z-index: 1;
}

// Popup Box
.screen-overlay {
  background: linear-gradient(
    110deg,
    #0c4094 0%,
    #0c4094 50%,
    #a51419 50.1%,
    #a51419 100%
  );
  display: none;
  height: 100%;
  left: 0%;
  opacity: 0;
  position: absolute;
  top: 0%;
  width: 100%;
  z-index: 9000;
}

.player-one {
  height: 80vh;
  left: -20%;
  position: absolute;
  top: 0%;
  transform: rotate(200deg);
  width: 80vw;
  z-index: 9200;
}

.player-two {
  height: 80vh;
  left: 40%;
  position: absolute;
  top: 20%;
  transform: rotate(20deg);
  width: 80vw;
  z-index: 9200;
}

.popup-box {
  display: none;
  height: 100%;
  opacity: 1;
  overflow: auto;
  position: absolute;
  width: 100%;
  z-index: 9500;
}

.vs {
  font-size: 5em;
  letter-spacing: 0.1em;
  padding: 0 0 0 0.2em;
}

.toggle {
  width: 10em;
  z-index: 9999;
}

.options {
  align-items: flex-start;
  display: flex;
  justify-content: space-around;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 9999;
}

.options button {
  position: relative;
}

.options-lower {
  left: 50%;
  position: absolute;
  top: 60%;
  transform: translateX(-50%);
  z-index: 9999;
}

.option-blue {
  background: #1560d6;
}

.option-red {
  background: #ed1c24;
}

.start-button {
  background: #22b857;
  margin-top: 1em;
  z-index: 9999;
}

.popup-results {
  display: none;
  left: 50%;
  opacity: 1;
  overflow: auto;
  padding: 1em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  z-index: 9999;
}

.popup-text {
  color: white;
  font-size: 1.2em;
  text-align: center;
}

.popup-text p {
  padding: 18px;
}

.popup-text h3 {
  font-size: 4em;
  line-height: 1.2;
  padding: 0.5em;
  text-shadow: 2px 2px 2px #333;
}

.hidden-assets {
  display: none;
}

button {
  background: #f7931e;
  border: 3px solid white;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
  margin: 20px 15px 10px;
  outline: none;
  padding: 15px 32px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  top: 10px;
  z-index: 9999;
}

button:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

button:active {
  transform: translateY(1px);
}

.crash {
  display: inline-block;
  transform-origin: 50% 50%;
  opacity: 0;
  position: absolute;
  z-index: 15;
}

.explode {
  animation-name: boom;
  animation-duration: 1s;
  animation-iteration-count: 1; // Play the animation once
  animation-fill-mode: both; // Lock the end position of the animation
  animation-timing-function: ease;
  transform-origin: 50% 50%;
  z-index: 50;
}

@keyframes boom {
  0% {
    transform: scale(0.01);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(10);
  }
}

JS

// Game parameters
let canvas, centerPoint, ctx, game_mode, playing, player1, player2, start;
// The scoreboard is used to keep track of the health of the players at the top of the screen
const scoreboard = document.querySelector(".scoreboard");
// Each player has a shield score in percent
const shield_p1 = document.querySelector(".shield_p1");
const shield_p2 = document.querySelector(".shield_p2");
// The game over screen has an explosion controlled and sized with two variables
const crash = document.querySelector(".crash");
const explosion = document.querySelector(".explosion");
// The result screen has a customised message and result of the game
const message = document.querySelector(".message");
const result = document.querySelector(".result");
// Each of the planet graphics is dynamically styled and positioned
const planet1 = document.querySelector(".planet-one");
const planet2 = document.querySelector(".planet-two");
// The space variable is where the stars are drawn
const space = document.querySelector(".space");
// On the start screen there are buttons to toggle whether the player is a computer or human
const playerOneToggle = document.querySelector("#playerOne");
const playerTwoToggle = document.querySelector("#playerTwo");
// There is also a toggle button for the asteroids to create variety in the game
const asteroidsToggle = document.querySelector("#obstacles");
// The gutter hides the new asteroids being added to the game so it is best to keep the rocket on screen to avoid being hit
const gutter = 150;
// For the popup boxes there is a background overlay
const overlay = document.getElementById("overlay");
// The popup messages has its own selector so that they can be toggled from the start screen to the end game screen
let popup = document.getElementById("popup");
const contenders = document.getElementById("contenders");
const p1_graphic = document.getElementById("player1");
const p2_graphic = document.getElementById("player2");
// Asteroid parameters group
let asteroids;
let asteroidColor;
// How often new asteroids appear on screen
const asteroidRate = 200;
// The maximum number of asteroids that can be in the game at any given time
let asteroidMax = 5;
// Start the timeout at zero
let asteroidTimeout = 0;
// Define subtle colour differences between the size of the asteroids
const asteroidColors = ["#9F96BC", "#666078", "#494556"];
// The maximum size of the asteroids
const asteroidSizeMax = 30;
// The maximum speed of the asteroids
const asteroidSpeed = 2;
// How big the asteroids should split when they are broken
const splitSize = 10;

// Rocket parameters
const rocketSize = 33;
const rocketWidth = 40;
const rocketArea = 1236.22;
const acceleration = 0.15;
const turnRate = 5;

// Shooting parameters
const shootingRate = 10;
const shootingSpeed = 12;

// Function to handle SVG files
function importSVG(name) {
  const svg = document.getElementById(name);
  let object_svg = new Image();
  const data = new XMLSerializer().serializeToString(svg);
  object_svg.src = "dаta:image/svg+xml;base64," + window.btoa(data); // The btoa() method encodes a string in base-64
  return object_svg;
}

// Import the inline SVG elements
let player1_svg = importSVG("player1");
let player2_svg = importSVG("player2");
let flicker_svg = importSVG("flicker");

// Set the size of the explosion early on because the size changes with the animation cause a bug
const explosionSize = {
  width: (explosion.getBoundingClientRect().width / 2).toFixed(),
  height: (explosion.getBoundingClientRect().height / 2).toFixed()
};

// Popup UI handling
function openPopup() {
  start = popup.querySelector(".start-button");
  start.addEventListener("click", startGame);
  contenders.style.display = "block";
  popup.style.display = "block";
  overlay.style.display = "block";
  contenders.style.opacity = "1";
  popup.style.opacity = "1";
  overlay.style.opacity = "0.6";
}

function closePopup() {
  start.removeEventListener("click", startGame);
  overlay.style.opacity = "0";
  popup.style.opacity = "0";
  contenders.style.opacity = "0";
  popup.style.display = "none";
  overlay.style.display = "none";
  contenders.style.display = "none";
}

// The following function creates a tesseract effect to keep the game objects roughly on screen
function tesseractMove() {
  // If on the right side of the screen then come back on the left side
  if (this.x > canvas.width + gutter) {
    this.x = 0 - gutter / 2 + this.vx;
  } else if (this.x < 0 - gutter) {
    // Or if they go off the left side then they come back on the right
    this.x = canvas.width + gutter / 2 + this.vx;
  } else {
    // Otherwise just update the x position with the velocity
    this.x += this.vx;
  }
  // If on the bottom side of the screen then come back on the top side
  if (this.y > canvas.height + gutter) {
    this.y = 0 - gutter / 2 + this.vy;
  } else if (this.y < 0 - gutter) {
    // Or if they go off the top side then they come back on the bottom
    this.y = canvas.height + gutter / 2 + this.vy;
  } else {
    // Otherwise just update the y position with the velocity
    this.y += this.vy;
  }
}

// Function to check whether two positions intersect other by returning a distance
function checkBoundary(dot1, dot2) {
  const x1 = dot1[0],
    y1 = dot1[1],
    x2 = dot2[0],
    y2 = dot2[1];
  return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}

// Math functions
function rad(angle) {
  return angle * Math.PI / 180;
}

// Define a new rocket with a token and a role
function Rocket(token, role) {
  // Give the rocket an ID based on the token of its creation
  this.id = token;
  // Starting position for player one is on the left of the screen
  if (token == "one") {
    this.x = canvas.width / 4;
  } else {
    // The other player starts on the right hand side of the screen
    this.x = canvas.width / 4 * 3;
  }
  // Both players start in the middle of the y axis
  this.y = centerPoint.y;

  // Starting velocity is 0 on both axis
  this.vx = 0;
  this.vy = 0;

  // Rocket controls
  this.thruster = false;
  this.rotateLeft = false;
  this.rotateRight = false;
  this.fire = false;
  // Set the SVG to use
  if (token == "one") {
    this.svg = player1_svg;
    this.score = shield_p1;
  } else {
    this.svg = player2_svg;
    this.score = shield_p2;
  }

  // Set rocket dependent timeouts
  this.shotTimeout = shootingRate;
  this.flameTimeout = 0;
  // Starting health for the rockets is 100% and the game ends when one rocket reaches zero
  this.health = 100;
  // Set the direction for the rocket to be facing this needs to match the SVG direction to avoid a display bug on Safari (90 is towards the top of the screen)
  if (token == "one") {
    // Player one faces the bottom of the screen to match the start screen graphic
    this.direction = 270;
  } else {
    this.direction = 90;
  }

  // Store all rocket's shots in an array
  this.shots = [];

  // Rocket methods
  this.getPoints = getRocketPoints;
  this.update = updateRocket;
  this.move = tesseractMove;
  this.render = renderRocket;
}

// Define the Enemy object which is a computer controlled Rocket
function Enemy(token, role) {
  // The enemy takes all the parameters of the Rocket
  Rocket.call(this, token, role);
  // The enemy also has a "sworn enemy" which is the oposing player and is defined in the start game function
  this.swornEnemy = "";
  // New direction to calculate how much the Enemy should turn
  this.newDirection = 0;
  // Result of the difference between the direction and the new direction
  this.angleDiff = 0;
  // New position to define where the Enemy should aim at
  this.newPosition = {
    x: 0,
    y: 0
  };
  // Set an interval for how often the Enemy should be searching
  this.searchInterval = 0;
  // Check if the Enemy has found its target
  this.targetFound = false;
  // Set an interval for how often the Enemy moves
  this.moveInterval = 0;
  // Set an interval for how often the Enemy should panic
  this.panicInterval = 50;
  // Set the proximity for how close the Enemy is to its target
  this.proximity = 0;
  // Check if the Enemy is "safe" and out of the proximity of other game objects
  this.safe = true;
  // Store the closest target to the Enemy
  this.closestTarget = "";
  // Track the distance of the closest target
  this.closestDistance = 0;
  // Create a random reaction if the target is too close
  this.fightOrFlight = 0;
}

// Setup the Enemy prototype
Enemy.prototype = Object.create(Rocket.prototype);
Object.defineProperty(Enemy.prototype, "constructor", {
  value: Enemy,
  enumerable: false,
  writable: true
});

// Give the enemy player a set of functions which creates a behaviour
Enemy.prototype.behaviour = function() {
  // Keep the direction within 360 degrees
  if (this.direction > 360) {
    this.direction -= 360;
  } else if (this.direction < 0) {
    this.direction += 360;
  }
  // If the enemy is "safe" then give it a fight or flight instinct
  if (this.safe) {
    this.fightOrFlight = randomise(2);
  }
  // Set a function to create random numbers to make less predictable behaviour
  function randomise(max) {
    return Math.floor(Math.random() * max);
  }
  // Function to set a new position for the enemy to target and move to
  const randomPosition = function() {
    this.newPosition.x = randomise(canvas.width);
    this.newPosition.y = randomise(canvas.height);
  }.bind(this);

  // Set function to find the angle of the target from the enemy's rocket's position
  const findAngle = function(target) {
    const dx = this.x - target.x;
    const dy = this.y - target.y;
    let angle = Math.atan2(dy, dx);
    if (this.safe) {
      this.newPosition.x = this.x - dx;
      this.newPosition.y = this.y - dy;
    }
    // Set the newDirection based on the calculated angle of the given target
    this.newDirection = 180 - angle * (180 / Math.PI);
    // The enemy needs to work out the quickest way to turn to face the target
    this.angleDiff = this.newDirection - this.direction;
    if (this.angleDiff < -180) {
      this.angleDiff = this.angleDiff + 360;
    } else if (this.angleDiff > 180) {
      this.angleDiff = this.angleDiff - 360;
    }
    this.angleDiff = this.angleDiff.toFixed();
  }.bind(this);
  // Set a function to turn the rocket to face the target
  const turnToFace = function(target) {
    if (this.targetFound) {
      return;
    } else if (this.angleDiff > 5) {
      this.rotateLeft = true;
      this.rotateRight = false;
      return;
    } else if (this.angleDiff < 5) {
      this.rotateLeft = false;
      this.rotateRight = true;
      return;
    } else {
      this.targetFound = true;
      this.rotateLeft = false;
      this.rotateRight = false;
      return;
    }
  }.bind(this);
  // Try to mimic human behaviour so only shoot if the target is in range
  const shootIfInRange = function() {
    if (this.angleDiff < 7 && this.angleDiff > -7) {
      this.fire = true;
    } else {
      this.fire = false;
    }
  }.bind(this);
  // Vary the thruster usage
  const move = function() {
    if (this.moveInterval <= 0) {
      if (this.thruster == false) {
        this.thruster = true;
        this.moveInterval = randomise(12) + 6;
      } else {
        this.thruster = false;
        this.moveInterval = randomise(30) + 80;
      }
    } else {
      this.moveInterval--;
    }
  }.bind(this);
  // Set the attack function in bursts
  const attack = function(target) {
    if (this.searchInterval <= 0) {
      this.targetFound = false;
      this.fire = false;
      this.searchInterval = randomise(30) + 35;
    } else {
      this.searchInterval--;
    }
    // First find the angle
    findAngle(target);
    // Then shoot if in range
    if (this.targetFound) {
      shootIfInRange();
      // Don't move towards the target
      this.thruster = false;
    } else {
      // Otherwise move towards the target
      turnToFace(target);
      this.thruster = true;
    }
    move();
  }.bind(this);

  // Find a new direction
  const changeDirection = function() {
    randomPosition();
    this.safe = false;
  }.bind(this);

  // Define a flee function
  const flee = function() {
    // If the enemy was "safe" then it should change direction!
    if (this.safe) {
      // To help change direction there should be a new position
      changeDirection();
      // The enemy needs to use the thruster to flee
      this.thruster = true;
    }
    // The enemy should then find out what the new angle is
    findAngle(this.newPosition);
    // The enemy turns to face the new direction and moves towards it
    turnToFace(this.newPosition);
    move();
    // The panic interval gives the chance to find a new position if the enemy doesn't feel like it can find a "safe" position
    if (this.panicInterval <= 0) {
      // Setting safe to true will cause the algoritm to find a new position on the next iteration
      this.safe = true;
      // Then the panic interval should be reset to a new randomised value
      this.panicInterval = randomise(60) + 30;
    } else {
      // Otherwise the panic interval is just counting down to zero
      this.panicInterval--;
    }
  }.bind(this);
  // Define an ability for the Enemy to find the closest target
  const findClosest = function(target) {
    // The following calculates the distance between the target and the Enemy
    let dist_x = this.x - target.x;
    let dist_y = this.y - target.y;
    this.proximity = Math.sqrt(dist_x * dist_x + dist_y * dist_y);
  }.bind(this);
  // While checking for the closest distance we need to set the distance which is the closest
  const setClosest = function() {
    this.closestDistance = this.proximity;
  }.bind(this);
  // First option should always be the sworn enemy
  findClosest(this.swornEnemy);
  // Set this as a default value
  this.closestTarget = this.swornEnemy;
  // Set the distance
  setClosest();
  // Make similar checks on the other objects in the game
  if (obstacles) {
    for (let i = 0; i < asteroids.length; i++) {
      findClosest(asteroids[i]);
      if (this.proximity < this.closestDistance) {
        this.closestTarget = asteroids[i];
        setClosest();
      }
    }
  }
  // Define what the Enemy should do with the variables it has calculated
  if (this.closestDistance < 150) {
    this.fire = true;
    // If too close to the target then it should consider to attack or flee
    if (this.fightOrFlight === 0) {
      attack(this.closestTarget);
    } else {
      flee();
    }
    // From a bit further away the more likely option could be to flee
  } else if (this.closestDistance < 300 || !this.safe) {
    flee();
    // Fire in case things get in the way
    this.fire = true;
    // If the Enemy feels safe then it will attack
  } else if (this.safe) {
    // Switch off the fire option
    this.fire = false;
    attack(this.closestTarget);
    // If there is some distance between the Enemy and the target then it can consider itself "safe" and attack from a distance
  } else if (this.closestDistance > 500) {
    this.safe = true;
    this.fire = false;
    this.thruster = false;
    attack(this.closestTarget);
  }
};

// Calculate the position of the rocket
function getRocketPoints() {
  // Store the points in an array to loop over later
  let points = [];
  // Define the left and right sides based on the direction
  let leftSide = rad(this.direction - rocketWidth);
  let rightSide = rad(this.direction + rocketWidth);
  // Simplify the rocket's shape to a triangle
  // Rocket top point
  points.push([
    this.x + rocketSize * Math.cos(rad(this.direction)),
    this.y - rocketSize * Math.sin(rad(this.direction))
  ]);
  // Rocket left point
  points.push([
    this.x - rocketSize * Math.cos(leftSide),
    this.y + rocketSize * Math.sin(leftSide)
  ]);
  // Rocket right point
  points.push([
    this.x - rocketSize * Math.cos(rightSide),
    this.y + rocketSize * Math.sin(rightSide)
  ]);
  // Return the array of points
  return points;
}

// Update the effects on the rocket
function updateRocket() {
  // If pushing the up key then apply the thruster
  if (this.thruster) {
    this.vx += acceleration * Math.cos(rad(this.direction));
    this.vy -= acceleration * Math.sin(rad(this.direction));
  }
  // Left rotates the rocket anti-clockwise
  if (this.rotateLeft) {
    this.direction += turnRate;
  }
  // Right rotates the rocket clockwise
  if (this.rotateRight) {
    this.direction -= turnRate;
  }
  // If the rocket is firing with the spacebar
  if (this.fire) {
    // Limit the shots being fired with a timeout
    if (this.shotTimeout >= shootingRate) {
      // Get the points for the rocket to work out where the rocket is firing from
      let position = this.getPoints();
      // Add a new shot taking into account the direction the shot is being fired and who fired the shot
      this.shots.push(
        new Shot(position[0][0], position[0][1], this.direction, this.id)
      );
      // Reset the timeout
      this.shotTimeout = 0;
    } else {
      // Otherwise increase the timeout
      this.shotTimeout++;
    }
    // If not firing
  } else {
    // Reset shot timeout directly
    this.shotTimeout = shootingRate;
  }
  // Loop through all the shots and update them all
  for (let i = 0; i < this.shots.length; i++) {
    this.shots[i].update(i);
    if (this.shots[i].hit == true) {
      // Remove shots that have hit a game object
      this.shots.splice(i, 1);
    }
  }

  // If the rocket is moving then slow this motion slightly
  if (this.vx != 0) {
    // Reduce X velocity
    this.vx -= 0.01 * this.vx;
  }
  if (this.vy != 0) {
    // Reduce Y velocity
    this.vy -= 0.01 * this.vy;
  }
  // Move the rocket
  this.move();
}
// Try to prevent collisions by using the rockets' shields to repel each other
function collisionPrevention() {
  // Calculate the distance between the plater and enemy
  let dist_x = player1.x - player2.x;
  let dist_y = player1.y - player2.y;
  // Get the repel distance
  let repel = Math.sqrt(dist_x * dist_x + dist_y * dist_y);
  // If the rockets are too close to each other
  if (repel < 40) {
    // Set new repel variables for x and y
    let repelX = dist_x / repel;
    let repelY = dist_y / repel;
    // Apply this to both rockets
    player1.vx += repelX * 5;
    player1.vy += repelY * 5;
    player2.vx -= repelX * 5;
    player2.vy -= repelY * 5;
    // Reduce the health of both rockets as a consequence of the impact on the shield
    player1.health -= 5;
    player2.health -= 5;
  }
}

// Function to render the appearence of the rocket
function renderRocket() {
  // Get the points of the rocket
  let points = this.getPoints();
  // Calculate the angle it is facing
  let angle = rad((this.direction + 270) * -1);
  // The following between "save" and "restore" is used to position the SVG image in the right place and angle
  ctx.save();
  ctx.translate(points[0][0], points[0][1]);
  ctx.rotate(angle);
  ctx.translate(-33.85, 0);
  ctx.drawImage(this.svg, 0, 0);
  // Adding in the addition of the rocket's thruster if it is active
  if (this.thruster) {
    // First reset the timeout if the thruster key is pushed
    this.flameTimeout = 12;
  }
  // If the timeout is above zero then add the flicker svg
  if (this.flameTimeout > 0) {
    ctx.drawImage(flicker_svg, 0, 0);
    this.flameTimeout--;
  }
  ctx.restore();
  // Loop through all the shots
  for (let i = 0; i < this.shots.length; i++) {
    // And display the shot on the screen
    this.shots[i].render();
  }
}

// For a little variation let the asteroid color depend on the size
function sizeColor(size) {
  if (size > 30) {
    return 2;
  } else if (size > 20) {
    return 1;
  } else {
    return 0;
  }
}

// Define a new Asteroid
function Asteroid(x, y, size, vx, vy) {
  // Position on the x and y axis
  this.x = x;
  this.y = y;
  this.size = size;
  this.radius = size * 2 + 5;
  this.vx = vx;
  this.vy = vy;

  // Store the position of the points on the asteroid
  this.points = [];
  for (let i = 0; i < size; i++) {
    // Calculate random sizes to create an asteroid-like jagged edge
    let dist = Math.random() * 15 - 5 + this.radius;
    // Distrubute the points around the whole circumference of the asteroid
    let angle = i * 360 / size;
    // Add the randomly calculated point to the array
    this.points.push([
      dist * Math.cos(rad(angle)),
      dist * Math.sin(rad(angle))
    ]);
  }

  //Define the color of the asteroid based on the size
  this.color = sizeColor(this.size);

  // Define the methods of the asteroid
  this.explode = explodeAsteroid;
  this.update = updateAsteroid;
  this.move = tesseractMove;
  this.render = renderAsteroid;
}

// Define what happens when the asteroid is blasted by a shot from the rocket
function explodeAsteroid() {
  // Reduce the size by the predefined split size variable
  if (this.size - splitSize >= splitSize - 1) {
    // This leaves two new asteroids, the first being the reduced size of the original
    asteroids.push(
      new Asteroid(this.x, this.y, this.size - splitSize, this.vx, this.vy)
    );
    // The second asteroid is the broken off piece
    asteroids.push(
      new Asteroid(
        this.x,
        this.y,
        splitSize,
        Math.random() * 4 - 2,
        Math.random() * 4 - 2
      )
    );
  }
}

// Update the affects of the asteroid
function updateAsteroid(num) {
  // Set the asteroid's position in an array to check for collisions
  const asteroid_xy = [this.x, this.y];
  // Define a function to check the proximity of the game's active rockets
  function checkProximity(target) {
    // Avoid checking asteroids that have already been removed
    if (asteroids[num] === undefined) {
      return;
    }
    // Need to load in the rocket points to check for collisions
    let rocketPoints = target.getPoints();
    // Check all the rocket's points for collisions
    for (let i = 0; i < rocketPoints.length; i++) {
      // Check whether the rocket has crashed into the asteroid
      let proximityToRocket = checkBoundary(asteroid_xy, [
        rocketPoints[i][0],
        rocketPoints[i][1]
      ]);
      // If the proximity is less than the radius then there has been a collision and reduce the health based on the radius of the asteroid
      if (proximityToRocket < asteroids[num].radius) {
        target.health -= (asteroids[num].radius / 4).toFixed();
        asteroids[num].explode();
        asteroids.splice(num, 1);
        return;
      }
    }
  }

  // Need to check the proximity of both of the players with the asteroids
  checkProximity(player1);
  checkProximity(player2);
  // Don't check an asteroid if it was removed
  if (asteroids[num] === undefined) {
    return;
  } else {
    // Move the asteroids
    asteroids[num].move();
  }
}

// Define the appearance of the asteroids
function renderAsteroid() {
  ctx.beginPath();
  ctx.moveTo(this.x + this.points[0][0], this.y + this.points[0][1]);
  for (let i = this.size - 1; i >= 0; i -= 1) {
    ctx.lineTo(this.x + this.points[i][0], this.y + this.points[i][1]);
  }
  ctx.fillStyle = asteroidColor;
  ctx.fill();
}

// Define a new shot being made in the game
function Shot(x, y, direction, owner) {
  this.x = x;
  this.y = y;
  this.vx = shootingSpeed * Math.cos(rad(direction));
  this.vy = -shootingSpeed * Math.sin(rad(direction));
  this.hit = false;
  this.owner = owner;
  // Define player based shot colours
  if (owner == "one") {
    this.color = "#5ecb84";
  } else {
    this.color = "#EDBB0B";
  }
  // Shot methods
  this.update = updateShot;
  this.render = renderShot;
}

// Update the game affects on the shot
function updateShot(slug) {
  // If the shot goes off screen then just count it as a hit for it to be easily removed from the game
  if (
    this.x > canvas.width + gutter ||
    this.x < 0 - gutter ||
    this.y > canvas.height + gutter ||
    this.y < 0 - gutter
  ) {
    this.hit = true;
  }
  // If the shot hasn't hit anything so far
  if (!this.hit) {
    function checkProximity(target, slug) {
      // Need the rocket to check for collisions
      const points = target.getPoints();
      // Rocket co-ordinates for calculating the areas
      const aX = points[0][0];
      const aY = points[0][1];
      const bX = points[2][0];
      const bY = points[2][1];
      const cX = points[1][0];
      const cY = points[1][1];
      // Shot co-ordinates
      const sX = slug.x;
      const sY = slug.y;
      // Calculate the combined areas of the shot and the target
      const area1 = Math.abs(
        (sX * (bY - cY) + bX * (cY - sY) + cX * (sY - bY)) / 2
      ); // SBC
      const area2 = Math.abs(
        (aX * (sY - cY) + sX * (cY - aY) + cX * (aY - sY)) / 2
      ); // ASC
      const area3 = Math.abs(
        (aX * (bY - sY) + bX * (sY - aY) + sX * (aY - bY)) / 2
      ); // ABS
      const area = (area1 + area2 + area3).toFixed(2);
      // If the rocket area is the same as the area calculated above then the shot has hit the target
      if (rocketArea == area) {
        slug.hit = true;
        target.health--;
      }
    }
    // Only check for collisions with the oposing player
    if (this.owner == "one") {
      checkProximity(player2, this);
    } else {
      checkProximity(player1, this);
    }
  }
  // If the shot still hasn't hit anything and obstacles were enabled
  if (!this.hit && obstacles) {
    // Check all the asteroids for collisions
    for (let i = 0; i < asteroids.length; i++) {
      let proximityToAsteroid = checkBoundary(
        [asteroids[i].x, asteroids[i].y],
        [this.x, this.y]
      );
      // Check whether the proximity is less than the asteroid's radius
      if (proximityToAsteroid <= asteroids[i].radius) {
        // Explode the asteroid which was hit, this creates two smaller asteroids
        asteroids[i].explode();
        // Remove the asteroid from the game
        asteroids.splice(i, 1);
        // The shot has hit something and will be removed from the game
        this.hit = true;
      }
    }
  }
  // Now remove the shot from the game if it has hit something
  if (this.hit == true) {
    return;
  } else {
    // Otherwise move the shot according to the velocity
    this.x += this.vx;
    this.y += this.vy;
  }
}

// Define how the shot looks on screen
function renderShot() {
  ctx.strokeStyle = this.color;
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.moveTo(this.x, this.y);
  ctx.lineTo(this.x + this.vx, this.y + this.vy);
  ctx.stroke();
}

// Show the shield health of both players but only update it if there has been a change
function renderScore(target) {
  let count = target.score.innerHTML;
  if (playing && target.health < count) {
    target.score.innerHTML = target.health;
  }
}

// Define a function which is checking for the end of the game
function checkGameStatus() {
  // First check if both players have been destroyed
  if (player1.health <= 0 && player2.health <= 0) {
    gameOver("tie");
    // Check player 1's health
  } else if (player1.health <= 0) {
    gameOver(player1);
    // Check player 2's health
  } else if (player2.health <= 0) {
    gameOver(player2);
  }
}

// Handling the random position of the background planet
function placePlanet(planet) {
  let x = Math.floor(Math.random() * canvas.width);
  let y = Math.floor(Math.random() * canvas.height);
  // Vary the scale to keep the background interesting
  let scale = 0.5 + Math.random() * 2;
  let transform = "translate(" + x + "px, " + y + "px) scale(" + scale + ")";
  planet.style.transform = transform;
}

// Deciding where things should go
function placeElements() {
  // Changing the opacity is to prevent a visual bug
  planet1.style.opacity = 0;
  planet2.style.opacity = 0;
  space.style.opacity = 0;
  // Calculate the new solar system layout
  placePlanet(planet1);
  placePlanet(planet2);
  createStars();
  // Make the elements visible again
  planet1.style.opacity = 1;
  planet2.style.opacity = 1;
  space.style.opacity = 1;
}

// Fill the background with randomly positioned stars
function createStars() {
  let heightMax = window.innerHeight - 4,
    widthMax = window.innerWidth - 4;
  space.innerHTML = "";

  for (let i = 0; i < 50; i++) {
    const star =
      '\n <div style="left:' +
      Math.floor(Math.random() * widthMax) +
      "px; top:" +
      Math.floor(Math.random() * heightMax) +
      "px; height:" +
      Math.ceil(Math.random() * 100) / 100 +
      "vmax; width:" +
      Math.ceil(Math.random() * 100) / 100 +
      'vmax;" class="star star' +
      i +
      '"><svg viewBox="0 0 513 513"><use xlink:href="#star"/></svg></div>';
    space.insertAdjacentHTML("beforeend", star);
  }
}

// Calculate the sizes for the game which are dependent on the window size
function calculateSizes() {
  canvas = document.querySelector("canvas");
  ctx = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  centerPoint = {
    x: canvas.width / 2,
    y: canvas.height / 2
  };
  // Hide the score counter for the start of the game
  scoreboard.style.opacity = 0;
}

// Variables relating to the start screen toggles
let playerOne = true;
let playerTwo = false;
let obstacles = true;

// Inverse the option
function toggleOption(option) {
  return !option;
}

// Switch the player from computer to human
function switchPlayer(target) {
  if (target) {
    return "Computer";
  } else {
    return "Human";
  }
}

// Switch the obstacles on or off
function switchObstacles() {
  if (obstacles) {
    return "Asteroids: On";
  } else {
    return "Asteroids: Off";
  }
}

// Button event listeners
playerOneToggle.addEventListener("click", function() {
  playerOne = toggleOption(playerOne);
  this.textContent = switchPlayer(playerOne);
});

playerTwoToggle.addEventListener("click", function() {
  playerTwo = toggleOption(playerTwo);
  this.textContent = switchPlayer(playerTwo);
});
asteroidsToggle.addEventListener("click", function() {
  obstacles = toggleOption(obstacles);
  this.textContent = switchObstacles();
});

// Define if the player takes the Rocket or Enemy object
function setPlayer(toggle, number) {
  // Checking if the toggle is true which means that it is computer controlled and takes the Enemy class
  if (toggle == true) {
    return new Enemy(number, "computer");
  } else {
    // If not true then the player is human
    return new Rocket(number, "human");
  }
}
// Define the changes to be made at the start of the game
function startGame() {
  // Setup the background
  placeElements();
  // Empty the arrays of asteroids
  asteroids = [];
  // Create the players for the new game
  player1 = setPlayer(playerOne, "one");
  player2 = setPlayer(playerTwo, "two");
  // Define the sworn enemy of the players if they are controlled by the computer
  if (playerOne == true) {
    player1.swornEnemy = player2;
  }
  if (playerTwo == true) {
    player2.swornEnemy = player1;
  }
  // Reset the scoreboard
  shield_p1.innerHTML = player1.health;
  shield_p2.innerHTML = player2.health;
  scoreboard.style.opacity = 1;
  // Hide the explosion
  crash.style.opacity = 0;
  explosion.classList.remove("explode");
  // Close the popup UI
  closePopup();
  // Reset the result and message
  result.innerHTML = "";
  message.innerHTML = "";
  // Set playing to true to start the game!
  playing = true;
  // Set the interval to make the game work
  game_mode = setInterval(function() {
    if (playing) {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // Add new asteroids based on a timeout and if toggled on at the start screen
      if (obstacles) {
        if (
          asteroidTimeout >= asteroidRate &&
          asteroids.length <= asteroidMax
        ) {
          // Choose a side at random
          let side = Math.floor(Math.random() * 2);
          if (side == 0) {
            // Place the asteroid at the left side
            asteroids.push(
              new Asteroid(
                -gutter,
                Math.random() * canvas.height,
                Math.floor(Math.random() * asteroidSizeMax) + 10,
                Math.random() * asteroidSpeed,
                Math.random() * (asteroidSpeed * 2) - asteroidSpeed
              )
            );
          } else if (side == 1) {
            // Place the asteroid at the right side
            asteroids.push(
              new Asteroid(
                canvas.width + gutter,
                Math.random() * canvas.height,
                Math.floor(Math.random() * asteroidSizeMax) + 10,
                Math.random() * -asteroidSpeed,
                Math.random() * (asteroidSpeed * 2) - asteroidSpeed
              )
            );
          }
          // Reset the timeout
          asteroidTimeout = 0;
        } else {
          // If a new asteroid isn't being made then increase the timeout
          asteroidTimeout++;
        }
      }
      // Check for computer controlled players and apply the behaviour algorithm
      if (playerOne == true) {
        player1.behaviour();
      }
      if (playerTwo == true) {
        player2.behaviour();
      }
      // Calculate the player position
      player1.update();
      // Calculate the enemy's position
      player2.update();
      // Check for potential collisions
      collisionPrevention();
      // Loop over the asteroids array and update them all if the obstacles are toggled on
      if (obstacles) {
        for (let i = 0; i < asteroids.length; i++) {
          // Calculate the asteroids' positions
          asteroids[i].update(i);
        }
      }
      // Render the player's position
      player1.render();
      // Render the enemy's position
      player2.render();
      // Loop through and render the asteroids in order of colour to optimize canvas capabilities
      if (obstacles) {
        for (let i = 0; i < asteroidColors.length; i++) {
          asteroidColor = asteroidColors[i];
          for (let j = 0; j < asteroids.length; j++) {
            if (asteroids[j].color == i) {
              // Render the asteroids if the colour matches
              asteroids[j].render();
            }
          }
        }
      }
      // Render the score for both players
      renderScore(player1);
      renderScore(player2);
      // Check for potential game over condition
      checkGameStatus();
    }
    // If the game ends during the updates then make sure that everything gets rendered first before clearing the interval
    if (!playing) {
      clearInterval(game_mode);
    }
  }, 1000 / 60);
}

// Define what happens at the end of the game
function gameOver(target) {
  p1_graphic.style.opacity = 0;
  p2_graphic.style.opacity = 0;
  // Stop the game from being played
  playing = false;
  // If the window was resized
  if (target == "resized") {
    result.innerHTML = "The game is using your screen size.";
    message.innerHTML = "Don't resize the screen during the game.";
  } else if (target == "tie") {
    // If the game was a tie.
    result.innerHTML = "TIE!";
    message.innerHTML = "Both rockets exploded, try again?";
  } else if (target == player1) {
    // If player1 caused the game to end
    p2_graphic.style.opacity = 1;
    result.innerHTML = "Red Rocket Is Victorious!";
  } else if (target == player2) {
    // If player2 caused the game to end
    p1_graphic.style.opacity = 1;
    result.innerHTML = "Blue Rocket Is Victorious!";
  }
  // Set the explosion for the middle of the screen it it was a tie
  if (target == "tie") {
    target = centerPoint;
  }
  // Define the place for the end game graphic to be displayed using the target that caused the game to end
  const x = target.x - explosionSize.width;
  const y = target.y - explosionSize.height;
  // For variation add some rotation to the graphic
  degrees = Math.floor(Math.random() * 360);
  // Compile the transform properties
  const transform =
    "translate(" + x + "px, " + y + "px) rotate(" + degrees + "deg)";
  // Sednd the transform to the container for the graphic
  crash.style.transform = transform;
  // Make the graphic visible
  crash.style.opacity = 1;
  // Add the class that triggers the end game animation
  explosion.classList.add("explode");
  // Make sure that the results popup screen is selected
  popup = document.getElementById("results");
  // Show the popup UI to the player
  openPopup();
}

// Define what to do when the page loads
document.addEventListener("DOMContentLoaded", function(event) {
  // Define the sizes based on the user's window
  calculateSizes();
  // Place the background elements
  placeElements();
  // Open the popup UI for the player
  openPopup();
  // Define keyboard functions
  window.addEventListener(
    "keydown",
    function(event) {
      // If player two is not a computer
      if (playerTwo == false) {
        switch (event.code) {
          case "ArrowUp":
            // Apply Thruster
            player2.thruster = true;
            break;
          case "ArrowLeft":
            // Rotate Left
            player2.rotateLeft = true;
            break;
          case "ArrowRight":
            // Rotate Right
            player2.rotateRight = true;
            break;
          case "Space":
            // Start firing
            player2.fire = true;
            break;
        }
      }
      // If player one is not a computer
      if (playerOne == false) {
        switch (event.code) {
          case "KeyW":
            player1.thruster = true;
            break;
          case "KeyA":
            // Stop rotating Left
            player1.rotateLeft = true;
            break;
          case "KeyD":
            // Stop rotating Right
            player1.rotateRight = true;
            break;
          case "KeyZ":
            // Stop firing
            player1.fire = true;
            break;
        }
      }
    },
    true
  );

  window.addEventListener(
    "keyup",
    function(event) {
      // If player two is not a computer
      if (playerTwo == false) {
        switch (event.code) {
          case "ArrowUp":
            // Apply Thruster
            player2.thruster = false;
            break;
          case "ArrowLeft":
            // Rotate Left
            player2.rotateLeft = false;
            break;
          case "ArrowRight":
            // Rotate Right
            player2.rotateRight = false;
            break;
          case "Space":
            // Start firing
            player2.fire = false;
            break;
        }
      }
      //if player one is not a computer
      if (playerOne == false) {
        switch (event.code) {
          case "KeyW":
            player1.thruster = false;
            break;
          case "KeyA":
            // Stop rotating Left
            player1.rotateLeft = false;
            break;
          case "KeyD":
            // Stop rotating Right
            player1.rotateRight = false;
            break;
          case "KeyZ":
            // Stop firing
            player1.fire = false;
            break;
        }
      }
    },
    true
  );

  // If the window is resized
  window.addEventListener("resize", function(event) {
    // Calculate the new sizes
    calculateSizes();
    // If the game is being played then it should be reset
    if (playing) {
      gameOver("resized");
    }
  });
});

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи