diff --git a/Alien Buster/alien-cyan.png b/Alien Buster/alien-cyan.png new file mode 100644 index 00000000..342ee4ed Binary files /dev/null and b/Alien Buster/alien-cyan.png differ diff --git a/Alien Buster/alien-magenta.png b/Alien Buster/alien-magenta.png new file mode 100644 index 00000000..b09e0d78 Binary files /dev/null and b/Alien Buster/alien-magenta.png differ diff --git a/Alien Buster/alien-yellow.png b/Alien Buster/alien-yellow.png new file mode 100644 index 00000000..54ca7b70 Binary files /dev/null and b/Alien Buster/alien-yellow.png differ diff --git a/Alien Buster/alien.png b/Alien Buster/alien.png new file mode 100644 index 00000000..344b64f8 Binary files /dev/null and b/Alien Buster/alien.png differ diff --git a/Alien Buster/index.html b/Alien Buster/index.html new file mode 100644 index 00000000..0d41da9a --- /dev/null +++ b/Alien Buster/index.html @@ -0,0 +1,15 @@ + + + + + + Space Invaders + + + + + +

Space Invaders

+ + + \ No newline at end of file diff --git a/Alien Buster/manifest.json b/Alien Buster/manifest.json new file mode 100644 index 00000000..905d93e8 --- /dev/null +++ b/Alien Buster/manifest.json @@ -0,0 +1,11 @@ +{ + "manifest_version": 3, + "name": "Alien Buster", + "version": "1.0", + "description": "A Alien Buster as a Chrome extension.", + "action": { + "default_popup": "index.html" + }, + "permissions": [] + } + \ No newline at end of file diff --git a/Alien Buster/ship.png b/Alien Buster/ship.png new file mode 100644 index 00000000..2abdd9d7 Binary files /dev/null and b/Alien Buster/ship.png differ diff --git a/Alien Buster/space.css b/Alien Buster/space.css new file mode 100644 index 00000000..17e62304 --- /dev/null +++ b/Alien Buster/space.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/Alien Buster/space.js b/Alien Buster/space.js new file mode 100644 index 00000000..aa7de32e --- /dev/null +++ b/Alien Buster/space.js @@ -0,0 +1,209 @@ +//board +let tileSize = 32; +let rows = 16; +let columns = 16; + +let board; +let boardWidth = tileSize * columns; // 32 * 16 +let boardHeight = tileSize * rows; // 32 * 16 +let context; + +//ship +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; //ship moving speed + +//aliens +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; //number of aliens to defeat +let alienVelocityX = 1; //alien moving speed + +//bullets +let bulletArray = []; +let bulletVelocityY = -10; //bullet moving speed + +let score = 0; +let gameOver = false; + +window.onload = function() { + board = document.getElementById("board"); + board.width = boardWidth; + board.height = boardHeight; + context = board.getContext("2d"); //used for drawing on the board + + //draw initial ship + // context.fillStyle="green"; + // context.fillRect(ship.x, ship.y, ship.width, ship.height); + + //load images + shipImg = new Image(); + shipImg.src = "./ship.png"; + shipImg.onload = function() { + context.drawImage(shipImg, ship.x, ship.y, ship.width, ship.height); + } + + alienImg = new Image(); + alienImg.src = "./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); + + //ship + context.drawImage(shipImg, ship.x, ship.y, ship.width, ship.height); + + //alien + for (let i = 0; i < alienArray.length; i++) { + let alien = alienArray[i]; + if (alien.alive) { + alien.x += alienVelocityX; + + //if alien touches the borders + if (alien.x + alien.width >= board.width || alien.x <= 0) { + alienVelocityX *= -1; + alien.x += alienVelocityX*2; + + //move all aliens up by one row + 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; + } + } + } + + //bullets + 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); + + //bullet collision with aliens + 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; + } + } + } + + //clear bullets + while (bulletArray.length > 0 && (bulletArray[0].used || bulletArray[0].y < 0)) { + bulletArray.shift(); //removes the first element of the array + } + + //next level + if (alienCount == 0) { + //increase the number of aliens in columns and rows by 1 + score += alienColumns * alienRows * 100; //bonus points :) + alienColumns = Math.min(alienColumns + 1, columns/2 -2); //cap at 16/2 -2 = 6 + alienRows = Math.min(alienRows + 1, rows-4); //cap at 16-4 = 12 + if (alienVelocityX > 0) { + alienVelocityX += 0.2; //increase the alien movement speed towards the right + } + else { + alienVelocityX -= 0.2; //increase the alien movement speed towards the left + } + alienArray = []; + bulletArray = []; + createAliens(); + } + + //score + 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; //move left one tile + } + else if (e.code == "ArrowRight" && ship.x + shipVelocityX + ship.width <= board.width) { + ship.x += shipVelocityX; //move right one tile + } +} + +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") { + //shoot + let bullet = { + x : ship.x + shipWidth*15/32, + y : ship.y, + width : tileSize/8, + height : tileSize/2, + used : false + } + bulletArray.push(bullet); + } +} + +function detectCollision(a, b) { + return a.x < b.x + b.width && //a's top left corner doesn't reach b's top right corner + a.x + a.width > b.x && //a's top right corner passes b's top left corner + a.y < b.y + b.height && //a's top left corner doesn't reach b's bottom left corner + a.y + a.height > b.y; //a's bottom left corner passes b's top left corner +} \ No newline at end of file