-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #212 from Gaurav0203Shetty/space
Space invaders
- Loading branch information
Showing
9 changed files
with
244 additions
and
1 deletion.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| Space Invaders Game: | ||
| Welcome to the Space Invaders game! This classic arcade game has been brought to life using HTML, CSS, and JavaScript. Defend the Earth from the invading alien forces by maneuvering your spaceship and shooting down the relentless invaders. | ||
|
|
||
| Table of Contents: | ||
| 1)Getting Started | ||
| 2)Gameplay | ||
| 3)Controls | ||
| 4)Scoring | ||
| 5)Game Over | ||
| 6)Development | ||
|
|
||
| Getting Started: | ||
| To play the game, simply open the index.html file in your web browser. The game will load, and you can start playing immediately. | ||
|
|
||
| Gameplay: | ||
| Defend Earth by controlling your spaceship and shooting down the invading aliens. The game features multiple levels, and the difficulty increases as you progress. Can you survive the relentless alien onslaught? | ||
|
|
||
| Controls: | ||
| 1)Left Arrow- Move the spaceship to the left. | ||
| 2)Right Arrow- Move the spaceship to the right. | ||
| 3)Spacebar- Shoot bullets to destroy aliens. | ||
|
|
||
| Scoring: | ||
| 1)Score points by successfully shooting down aliens. | ||
| 2)The score is displayed at the top-left corner of the game board. | ||
|
|
||
| Game Over: | ||
| The game ends under the following conditions- | ||
| 1)An alien reaches the same level as your spaceship. | ||
| 2)You successfully shoot down all the invading aliens. | ||
| 3)When the game ends, you can restart by refreshing the page. | ||
|
|
||
| Development: | ||
| The game was developed using HTML, CSS, and JavaScript. The code is well-structured and easy to understand. Feel free to explore the script.js file for insights into the game mechanics. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Space invader</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <script src="script.js"></script> | ||
| </head> | ||
| <body> | ||
| <h1>Space invaders</h1> | ||
| <canvas id="board"></canvas> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| let tileSize = 32; | ||
| let rows = 16; | ||
| let columns = 16; | ||
|
|
||
| let board; | ||
| let boardWidth = tileSize * columns; | ||
| let boardHeight = tileSize * rows; | ||
| let context; | ||
|
|
||
| let shipWidth = tileSize*2; | ||
| let shipHeight = tileSize; | ||
| let shipX = tileSize * columns/2 - tileSize; | ||
| let shipY = tileSize * rows - tileSize*2; | ||
|
|
||
| let ship = { | ||
| x : shipX, | ||
| y : shipY, | ||
| width : shipWidth, | ||
| height : shipHeight | ||
| } | ||
|
|
||
| let shipImg; | ||
| let shipVelocityX = tileSize; | ||
|
|
||
| let alienArray = []; | ||
| let alienWidth = tileSize*2; | ||
| let alienHeight = tileSize; | ||
| let alienX = tileSize; | ||
| let alienY = tileSize; | ||
| let alienImg; | ||
|
|
||
| let alienRows = 2; | ||
| let alienColumns = 3; | ||
| let alienCount = 0; | ||
| let alienVelocityX = 1; | ||
|
|
||
| let bulletArray = []; | ||
| let bulletVelocityY = -10; | ||
|
|
||
| let score = 0; | ||
| let gameOver = false; | ||
|
|
||
| window.onload = function(){ | ||
| board = document.getElementById("board"); | ||
| board.width = boardWidth; | ||
| board.height = boardHeight; | ||
| context = board.getContext("2d"); | ||
|
|
||
| shipImg = new Image(); | ||
| shipImg.src = "./Images/ship.png"; | ||
| shipImg.onload = function(){ | ||
| context.drawImage(shipImg, ship.x, ship.y, ship.width, ship.height); | ||
| } | ||
|
|
||
| alienImg = new Image(); | ||
| alienImg.src = "./Images/alien.png" | ||
|
|
||
| createAliens() | ||
|
|
||
| requestAnimationFrame(update); | ||
| document.addEventListener("keydown", moveShip); | ||
|
|
||
| document.addEventListener("keyup", shoot); | ||
| } | ||
|
|
||
| function update(){ | ||
| requestAnimationFrame(update); | ||
|
|
||
| if(gameOver){ | ||
| return; | ||
| } | ||
|
|
||
| context.clearRect(0, 0, board.width, board.height) | ||
| context.drawImage(shipImg, ship.x, ship.y, ship.width, ship.height) | ||
|
|
||
| for(let i=0; i < alienArray.length; i++){ | ||
| let alien = alienArray[i]; | ||
| if(alien.alive){ | ||
| alien.x += alienVelocityX | ||
| if(alien.x + alien.width >= board.width || alien.x <= 0){ | ||
| alienVelocityX *= -1; | ||
| alien.x += alienVelocityX*2; | ||
|
|
||
| for(let j=0; j<alienArray.length; j++) | ||
| { | ||
| alienArray[j].y += alienHeight; | ||
| } | ||
| } | ||
| context.drawImage(alienImg, alien.x, alien.y, alien.width, alien.height); | ||
|
|
||
| if(alien.y >= ship.y){ | ||
| gameOver = true; | ||
| } | ||
| } | ||
| } | ||
| for(let i=0; i<bulletArray.length; i++){ | ||
| let bullet = bulletArray[i]; | ||
| bullet.y += bulletVelocityY; | ||
| context.fillStyle = "white"; | ||
| context.fillRect(bullet.x, bullet.y, bullet.width, bullet.height); | ||
|
|
||
| for(let j=0; j < alienArray.length; j++){ | ||
| let alien = alienArray[j]; | ||
| if(!bullet.used && alien.alive && detectCollision(bullet, alien)){ | ||
| bullet.used = true; | ||
| alien.alive = false; | ||
| alienCount--; | ||
| score += 100; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| while(bulletArray.length>0 && bulletArray[0].used || bulletArray[0].y < 0){ | ||
| bulletArray.shift(); | ||
| } | ||
|
|
||
| if(alienCount == 0){ | ||
| alienColumns = Math.min(alienColumns + 1, columns/2 -2); | ||
| alienRows = Math.min(alienRows + 1, rows-4); | ||
| alienVelocityX += 0.2; | ||
| alienArray = []; | ||
| bulletArray = []; | ||
| createAliens(); | ||
| } | ||
| context.fillStyle = "white"; | ||
| context.font = "16px courier"; | ||
| context.fillText(score, 5, 20); | ||
| } | ||
|
|
||
| function moveShip(e){ | ||
| if(gameOver){ | ||
| return; | ||
| } | ||
|
|
||
| if(e.code == "ArrowLeft" && ship.x - shipVelocityX >=0){ | ||
| ship.x -= shipVelocityX; | ||
| } | ||
| else if(e.code == "ArrowRight" && ship.x + shipVelocityX + ship.width <= board.width){ | ||
| ship.x += shipVelocityX; | ||
| } | ||
| } | ||
|
|
||
| function createAliens(){ | ||
| for(let c = 0; c < alienColumns; c++){ | ||
| for(let r = 0; r < alienRows; r++){ | ||
| let alien = { | ||
| img : alienImg, | ||
| x : alienX + c*alienWidth, | ||
| y : alienY + r*alienHeight, | ||
| width : alienWidth, | ||
| height : alienHeight, | ||
| alive : true | ||
| } | ||
| alienArray.push(alien); | ||
| } | ||
| } | ||
| alienCount = alienArray.length; | ||
| } | ||
|
|
||
| function shoot(e){ | ||
| if(gameOver){ | ||
| return; | ||
| } | ||
|
|
||
| if(e.code == "Space"){ | ||
| let bullet = { | ||
| x : ship.x + shipWidth*15/32, | ||
| y : shipY, | ||
| width : tileSize/8, | ||
| height : tileSize/2, | ||
| used : false | ||
| } | ||
| bulletArray.push(bullet); | ||
| } | ||
| } | ||
|
|
||
| function detectCollision(a, b){ | ||
| return a.x < b.x + b.width && | ||
| a.x + a.width > b.x && | ||
| a.y < b.y + b.height && | ||
| a.y + a.height > b.y; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| body{ | ||
| font-family: 'Courier New', Courier, monospace; | ||
| text-align: center; | ||
| } | ||
|
|
||
| #board{ | ||
| background-color: black; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters