diff --git a/Space-invaders/.DS_Store b/Space-invaders/.DS_Store new file mode 100644 index 0000000..fcf4ba7 Binary files /dev/null and b/Space-invaders/.DS_Store differ diff --git a/Space-invaders/Images/.DS_Store b/Space-invaders/Images/.DS_Store new file mode 100644 index 0000000..0de00a4 Binary files /dev/null and b/Space-invaders/Images/.DS_Store differ diff --git a/Space-invaders/Images/alien.png b/Space-invaders/Images/alien.png new file mode 100644 index 0000000..344b64f Binary files /dev/null and b/Space-invaders/Images/alien.png differ diff --git a/Space-invaders/Images/ship.png b/Space-invaders/Images/ship.png new file mode 100644 index 0000000..2abdd9d Binary files /dev/null and b/Space-invaders/Images/ship.png differ diff --git a/Space-invaders/README.md b/Space-invaders/README.md new file mode 100644 index 0000000..3162327 --- /dev/null +++ b/Space-invaders/README.md @@ -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. \ No newline at end of file diff --git a/Space-invaders/index.html b/Space-invaders/index.html new file mode 100644 index 0000000..8f9f6c6 --- /dev/null +++ b/Space-invaders/index.html @@ -0,0 +1,14 @@ + + + + + + Space invader + + + + +

Space invaders

+ + + \ No newline at end of file diff --git a/Space-invaders/script.js b/Space-invaders/script.js new file mode 100644 index 0000000..7f3f35c --- /dev/null +++ b/Space-invaders/script.js @@ -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= ship.y){ + gameOver = true; + } + } + } + for(let i=0; i0 && 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; +} \ No newline at end of file diff --git a/Space-invaders/style.css b/Space-invaders/style.css new file mode 100644 index 0000000..0d287c2 --- /dev/null +++ b/Space-invaders/style.css @@ -0,0 +1,8 @@ +body{ + font-family: 'Courier New', Courier, monospace; + text-align: center; +} + +#board{ + background-color: black; +} \ No newline at end of file diff --git a/script.js b/script.js index e250b69..deed98a 100644 --- a/script.js +++ b/script.js @@ -387,7 +387,12 @@ const projects = [ discription: "Simple minesweeper game made using HTML, CSS and JS.", link: "Minesweeper/index.html", image: "data:image/jpeg;base64,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a1TTZXRyrKQVcEqysNirDUHzkHRDrqP+xleOHicNx9LqqpWX1pumf/43k8GTH4umauLwrqANMUUCeJ2FanpmFr/xFA21zG0vJh2VnouCPGSpTPn4isgIPqR8x3l3Rqns5NNeKYPxUVlZyoDC4WoVbw2A7h8tvXvPpO0+T8DizRqUqy/FSdKi/qRgw/cT6uo1A6K6m6sAQe4IuP8AWRVVpNpVEgptFpVECm0i0qtFoFNotKrRaBTaJVaIExEQEREBERAREQEREBMfxHACuEBOWxbUAE2ZHRgCdj729j173GQiBwnXKl98iX9covMAMDW4ljEwmHFzrdj8NNBbO7flGg8zYDUzYeP06i1qlCihas9V6VJFtdmzMB5AAAkk6ADWdM5G5Up8Mw+T4sRVsa1T8bdFBOuRbm3zPWatRpnEPZh9mRDh+I10RnValwLKXGUPlQr9/IDfYG9/d15tzBhK2Gr1KFSs7lDuS3vA7GxY2n0/XorUR6bC6OCrA9VYWI+hnDfarw1kelVbVxek7fjZQGRz0uysG02uR0kGrcn8F+347D4Y38N2zVCNCKSDM+vS4GW/dhPoLg/KHD8GQ1DCU1cbOQXqD0d7sPkZoPsO4Rpicaw3IoofIWeoR5ElB/SZ1yRSa5xfllKovTAUjULsoYbFD907aWKnXQElpscQPmXmjlavw9yHUtSJ918uWxOyuoJCt21Kn7pOtu5ezjH/AGjheDfqieG1970iUufUKD85neIcPpYmm1OtTV0YEEEA6HeYnlHl3/w1K1BHzUGqF6YN81NWChkJ6gFbg/mMDYYiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiBgeG8u06OKr4tverVWbIbfyabEFgvmx1J7ADob56IgJontX4T42Aq1FW70grG2pshJB+hdf6vKb3KWUEEEXB3B1BEDD8ocJ+w4HDYe3vogL+dVrs5/uYzNREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBEiLwJiReLwJiReLwJiReLwJiReLwJiReLwJiReLwJiReLwJiReLwJiREBERA//9k=" - } + }, + { title: "Space Invaders", + discription: "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.", + link: "Space-invaders/index.html", + image: "https://gamerhub.co.uk/wp-content/uploads/2020/11/what.jpg" + }, ]; const cards = document.getElementsByClassName('cards');