Some changes in style

app.js

@@ -1,133 +1,133 @@
-const grid = document.querySelector('.grid')
-const resultsDisplay = document.querySelector('.results')
-let currentShooterIndex = 202
-let width = 15
-let direction = 1
-let invadersId
-let goingRight = true
-let aliensRemoved = []
-let results = 0
+const grid = document.querySelector(".grid");
+const resultsDisplay = document.querySelector(".results");
+let currentShooterIndex = 202;
+let width = 15;
+let direction = 1;
+let invadersId;
+let goingRight = true;
+let aliensRemoved = [];
+let results = 0;
 
 for (let i = 0; i < 225; i++) {
-  const square = document.createElement('div')
-  grid.appendChild(square)
+  const square = document.createElement("div");
+  grid.appendChild(square);
 }
 
-const squares = Array.from(document.querySelectorAll('.grid div'))
+const squares = Array.from(document.querySelectorAll(".grid div"));
 
 const alienInvaders = [
-  0,1,2,3,4,5,6,7,8,9,
-  15,16,17,18,19,20,21,22,23,24,
-  30,31,32,33,34,35,36,37,38,39
-]
+  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 30, 31,
+  32, 33, 34, 35, 36, 37, 38, 39,
+];
 
 function draw() {
   for (let i = 0; i < alienInvaders.length; i++) {
-    if(!aliensRemoved.includes(i)) {
-      squares[alienInvaders[i]].classList.add('invader')
+    if (!aliensRemoved.includes(i)) {
+      squares[alienInvaders[i]].classList.add("invader");
     }
   }
 }
 
-draw()
+draw();
 
 function remove() {
   for (let i = 0; i < alienInvaders.length; i++) {
-    squares[alienInvaders[i]].classList.remove('invader')
+    squares[alienInvaders[i]].classList.remove("invader");
   }
 }
 
-squares[currentShooterIndex].classList.add('shooter')
-
+squares[currentShooterIndex].classList.add("shooter");
 
 function moveShooter(e) {
-  squares[currentShooterIndex].classList.remove('shooter')
-  switch(e.key) {
-    case 'ArrowLeft':
-      if (currentShooterIndex % width !== 0) currentShooterIndex -=1
-      break
-    case 'ArrowRight' :
-      if (currentShooterIndex % width < width -1) currentShooterIndex +=1
-      break
+  squares[currentShooterIndex].classList.remove("shooter");
+  switch (e.key) {
+    case "ArrowLeft":
+      if (currentShooterIndex % width !== 0) currentShooterIndex -= 1;
+      break;
+    case "ArrowRight":
+      if (currentShooterIndex % width < width - 1) currentShooterIndex += 1;
+      break;
   }
-  squares[currentShooterIndex].classList.add('shooter')
+  squares[currentShooterIndex].classList.add("shooter");
 }
-document.addEventListener('keydown', moveShooter)
+document.addEventListener("keydown", moveShooter);
 
 function moveInvaders() {
-  const leftEdge = alienInvaders[0] % width === 0
-  const rightEdge = alienInvaders[alienInvaders.length - 1] % width === width -1
-  remove()
+  const leftEdge = alienInvaders[0] % width === 0;
+  const rightEdge =
+    alienInvaders[alienInvaders.length - 1] % width === width - 1;
+  remove();
 
   if (rightEdge && goingRight) {
     for (let i = 0; i < alienInvaders.length; i++) {
-      alienInvaders[i] += width +1
-      direction = -1
-      goingRight = false
+      alienInvaders[i] += width + 1;
+      direction = -1;
+      goingRight = false;
     }
   }
 
-  if(leftEdge && !goingRight) {
+  if (leftEdge && !goingRight) {
     for (let i = 0; i < alienInvaders.length; i++) {
-      alienInvaders[i] += width -1
-      direction = 1
-      goingRight = true
+      alienInvaders[i] += width - 1;
+      direction = 1;
+      goingRight = true;
     }
   }
 
   for (let i = 0; i < alienInvaders.length; i++) {
-    alienInvaders[i] += direction
+    alienInvaders[i] += direction;
   }
 
-  draw()
+  draw();
 
-  if (squares[currentShooterIndex].classList.contains('invader', 'shooter')) {
-    resultsDisplay.innerHTML = 'GAME OVER'
-    clearInterval(invadersId)
+  if (squares[currentShooterIndex].classList.contains("invader", "shooter")) {
+    resultsDisplay.innerHTML = "GAME OVER";
+    clearInterval(invadersId);
   }
 
   for (let i = 0; i < alienInvaders.length; i++) {
-    if(alienInvaders[i] > (squares.length)) {
-      resultsDisplay.innerHTML = 'GAME OVER'
-      clearInterval(invadersId)
+    if (alienInvaders[i] > squares.length) {
+      resultsDisplay.innerHTML = "GAME OVER";
+      clearInterval(invadersId);
     }
   }
   if (aliensRemoved.length === alienInvaders.length) {
-    resultsDisplay.innerHTML = 'YOU WIN'
-    clearInterval(invadersId)
+    resultsDisplay.innerHTML = "YOU WIN";
+    clearInterval(invadersId);
   }
 }
-invadersId = setInterval(moveInvaders, 600)
+invadersId = setInterval(moveInvaders, 600);
 
 function shoot(e) {
-  let laserId
-  let currentLaserIndex = currentShooterIndex
+  let laserId;
+  let currentLaserIndex = currentShooterIndex;
   function moveLaser() {
-    squares[currentLaserIndex].classList.remove('laser')
-    currentLaserIndex -= width
-    squares[currentLaserIndex].classList.add('laser')
-
-    if (squares[currentLaserIndex].classList.contains('invader')) {
-      squares[currentLaserIndex].classList.remove('laser')
-      squares[currentLaserIndex].classList.remove('invader')
-      squares[currentLaserIndex].classList.add('boom')
-
-      setTimeout(()=> squares[currentLaserIndex].classList.remove('boom'), 300)
-      clearInterval(laserId)
-
-      const alienRemoved = alienInvaders.indexOf(currentLaserIndex)
-      aliensRemoved.push(alienRemoved)
-      results++
-      resultsDisplay.innerHTML = results
-      console.log(aliensRemoved)
-
+    squares[currentLaserIndex].classList.remove("laser");
+    currentLaserIndex -= width;
+    squares[currentLaserIndex].classList.add("laser");
+
+    if (squares[currentLaserIndex].classList.contains("invader")) {
+      squares[currentLaserIndex].classList.remove("laser");
+      squares[currentLaserIndex].classList.remove("invader");
+      squares[currentLaserIndex].classList.add("boom");
+
+      setTimeout(
+        () => squares[currentLaserIndex].classList.remove("boom"),
+        300
+      );
+      clearInterval(laserId);
+
+      const alienRemoved = alienInvaders.indexOf(currentLaserIndex);
+      aliensRemoved.push(alienRemoved);
+      results++;
+      resultsDisplay.innerHTML = results;
+      console.log(aliensRemoved);
     }
-
   }
-  switch(e.key) {
-    case 'ArrowUp':
-      laserId = setInterval(moveLaser, 100)
+  switch (e.key) {
+    case "ArrowUp":
+      laserId = setInterval(moveLaser, 100);
   }
 }
 
-document.addEventListener('keydown', shoot)
+document.addEventListener("keydown", shoot);

index.html

@@ -1,16 +1,16 @@
-<!doctype html>
+<!DOCTYPE html>
 
 <html lang="en">
-<head>
-  <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
 
-  <title>Space Invaders</title>
-  <link rel="stylesheet" href="style.css">
-
-</head>
-<body>
-  <h1 class="results">0</h1>
-  <div class="grid"></div>
-  <script src="app.js"></script>
-</body>
+    <title>Space Invaders</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1 class="h1">Play Station</h1>
+    <h2 class="results">0</h2>
+    <div class="grid"></div>
+    <script src="app.js"></script>
+  </body>
 </html>

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "space-invaders": "^0.0.1"
+  }
+}

style.css

@@ -1,29 +1,37 @@
 .grid {
-	width: 300px;
-	height: 300px;
-	border: solid black 1px;
-	display: flex;
-	flex-wrap: wrap;
+  width: 300px;
+  height: 300px;
+  border: solid black 1px;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .grid div {
-	width: 20px;
-	height: 20px;
+  width: 20px;
+  height: 20px;
 }
 
 .invader {
-	background-color: purple;
-	border-radius: 10px;
+  background-color: purple;
+  border-radius: 10px;
 }
 
 .shooter {
-	background-color: green;
+  background-color: green;
 }
 
 .laser {
-	background-color: orange;
+  background-color: orange;
 }
 
 .boom {
-	background-color: red;
+  background-color: red;
+}
+body {
+  background-color: chocolate;
+}
+.h1 {
+  text-align: center;
+  text-transform: uppercase;
+  background-color: chartreuse;
 }