From c51c868c69144b3e30321889b36a4e5eb9d55119 Mon Sep 17 00:00:00 2001 From: Himanshu Bhardwaj Date: Sat, 16 Mar 2024 11:47:17 +0530 Subject: [PATCH] Space Invaders added, logic to fill every box after 3 seconds added as well! --- index.html | 3 +++ jsSpaceInvaders/SpaceInvaders.css | 22 ++++++++++++++++++ jsSpaceInvaders/SpaceInvaders.html | 14 +++++++++++ jsSpaceInvaders/Spaceinvaders.js | 37 ++++++++++++++++++++++++++++++ 4 files changed, 76 insertions(+) create mode 100644 jsSpaceInvaders/SpaceInvaders.css create mode 100644 jsSpaceInvaders/SpaceInvaders.html create mode 100644 jsSpaceInvaders/Spaceinvaders.js diff --git a/index.html b/index.html index 4b95994..ea9902e 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,9 @@

Vanilla JS Projects

+ + +
diff --git a/jsSpaceInvaders/SpaceInvaders.css b/jsSpaceInvaders/SpaceInvaders.css new file mode 100644 index 0000000..e1a38a6 --- /dev/null +++ b/jsSpaceInvaders/SpaceInvaders.css @@ -0,0 +1,22 @@ +body { + background-color: pink; + display: flex; + flex-direction: column; + row-gap: 7rem; + align-items: center; + justify-content: end; +} + +.grid { + display: flex; + flex-wrap: wrap; + background-color: white; + border: 3px solid black; + width: 300px; + height: 300px; +} + +.grid div { + width: 20px; + height: 20px; +} diff --git a/jsSpaceInvaders/SpaceInvaders.html b/jsSpaceInvaders/SpaceInvaders.html new file mode 100644 index 0000000..a9b8c1e --- /dev/null +++ b/jsSpaceInvaders/SpaceInvaders.html @@ -0,0 +1,14 @@ + + + + + + Space Invaders + + + +

0

+
+ + + diff --git a/jsSpaceInvaders/Spaceinvaders.js b/jsSpaceInvaders/Spaceinvaders.js new file mode 100644 index 0000000..3bd2a45 --- /dev/null +++ b/jsSpaceInvaders/Spaceinvaders.js @@ -0,0 +1,37 @@ +const grid = document.querySelector('.grid'); +const resultDisplay = document.querySelector('.result'); +const width = 15; +// A grid_array that contains all the created squares numbered 0-224 +let grid_array = []; + +// An alien Invaders array, which contains random numbers, but they get incremeneted +const alienInvaders = [ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 15, 16, 17, 18, 19, 20, 21, 22, 28, 29, 30, 31, + 32, 33, 34, 35, +]; + +// So we are essentially looking for a 15x15 matrix or grid +for (let i = 0; i < width * width; i++) { + // creating a new sqaure div everytime + const square = document.createElement('div'); + // setting it's inner text to be no. of square + square.textContent = i; + // appending it to the DOM + grid.appendChild(square); + // appending it to the grid_array + grid_array.push(square); +} + +setInterval(() => { + for (let i = 0; i < alienInvaders.length; i++) { + // We get the element number we need to change + const alienIndex = alienInvaders[i]; + // Then we get the
cell from grid_array using element as element index for grid_array + const gridCell = grid_array[alienIndex]; + // change the style to red + gridCell.style.backgroundColor = 'red'; + // increment the alienInvaders + alienInvaders[i]++; + } + console.log(alienInvaders); +}, 3000);