diff --git a/Space Invaders Game/README.md b/Space Invaders Game/README.md new file mode 100644 index 0000000..96cba35 --- /dev/null +++ b/Space Invaders Game/README.md @@ -0,0 +1,22 @@ + +# Space Invader Game + +Space Invader game implemented using javascript. + +### About +Space Invaders is a 1978 shoot 'em up arcade game developed by Tomohiro Nishikado. It was manufactured and sold by Taito in Japan, and licensed to the Midway division of Bally for overseas distribution. Space Invaders was the first fixed shooter and set the template for the shoot 'em up genre. The goal is to defeat wave after wave of descending aliens with a horizontally moving laser to earn as many points as possible. + +### Tools Used in Building this application + +Javascript syntax, basic DOM manipulation, HTML 5 and CSS 3 was used in building this application. + + +### How to Run the Application + +open the index file after cloning this repo. + +### Sample Pics of the application + +![image](https://user-images.githubusercontent.com/70085321/194710774-c67e13f7-33ef-4024-9942-3c543293c7cd.png) + +![image](https://user-images.githubusercontent.com/70085321/194710757-b2de774e-aca4-4899-81c5-63d4ea2c7412.png) diff --git a/Space Invaders Game/index.html b/Space Invaders Game/index.html new file mode 100644 index 0000000..a06b2e6 --- /dev/null +++ b/Space Invaders Game/index.html @@ -0,0 +1,15 @@ + + + + + + + Space Invaders + + + +

0

+
+ + + diff --git a/Space Invaders Game/script.js b/Space Invaders Game/script.js new file mode 100644 index 0000000..c26a3df --- /dev/null +++ b/Space Invaders Game/script.js @@ -0,0 +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; + +for (let i = 0; i < 225; i++) { + const square = document.createElement('div'); + grid.appendChild(square); +} + +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, +]; + +function draw() { + for (let i = 0; i < alienInvaders.length; i++) { + if (!aliensRemoved.includes(i)) { + squares[alienInvaders[i]].classList.add('invader'); + } + } +} + +draw(); + +function remove() { + for (let i = 0; i < alienInvaders.length; i++) { + squares[alienInvaders[i]].classList.remove('invader'); + } +} + +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.add('shooter'); +} +document.addEventListener('keydown', moveShooter); + +function moveInvaders() { + 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; + } + } + + if (leftEdge && !goingRight) { + for (let i = 0; i < alienInvaders.length; i++) { + alienInvaders[i] += width - 1; + direction = 1; + goingRight = true; + } + } + + for (let i = 0; i < alienInvaders.length; i++) { + alienInvaders[i] += direction; + } + + draw(); + + 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 (aliensRemoved.length === alienInvaders.length) { + resultsDisplay.innerHTML = 'YOU WIN'; + clearInterval(invadersId); + } +} +invadersId = setInterval(moveInvaders, 600); + +function shoot(e) { + 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); + } + } + switch (e.key) { + case 'ArrowUp': + laserId = setInterval(moveLaser, 100); + } +} + +document.addEventListener('keydown', shoot); diff --git a/Space Invaders Game/style.css b/Space Invaders Game/style.css new file mode 100644 index 0000000..47b5f7b --- /dev/null +++ b/Space Invaders Game/style.css @@ -0,0 +1,38 @@ +body{ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + width: 100vw; + flex-direction: column; +} + +.grid { + width: 300px; + height: 300px; + border: solid black 1px; + display: flex; + flex-wrap: wrap; +} + +.grid div { + width: 20px; + height: 20px; +} + +.invader { + background-color: purple; + border-radius: 10px; +} + +.shooter { + background-color: green; +} + +.laser { + background-color: orange; +} + +.boom { + background-color: red; +}