Merge pull request Sulagna-Dutta-Roy#898 from akshbansal61203/akshban…

…sal61203-patch-1 Added Alien Buster Extension
akshbansal61203 · Jun 5, 2024 · 2e37a83 · 2e37a83
2 parents 50ae2f8 + 5f21f74
commit 2e37a83
Show file tree

Hide file tree

Showing 9 changed files with 243 additions and 0 deletions.
diff --git a/Alien Buster/alien-cyan.png b/Alien Buster/alien-cyan.png
diff --git a/Alien Buster/alien-magenta.png b/Alien Buster/alien-magenta.png
diff --git a/Alien Buster/alien-yellow.png b/Alien Buster/alien-yellow.png
diff --git a/Alien Buster/alien.png b/Alien Buster/alien.png
diff --git a/Alien Buster/index.html b/Alien Buster/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport", content="width=device-width, initial-scale=1.0">
+        <title>Space Invaders</title>
+        <link rel="stylesheet" href="space.css">
+        <script src="space.js"></script>
+    </head>
+
+    <body>
+        <h1>Space Invaders</h1>
+        <canvas id="board"></canvas>
+    </body>
+</html>
diff --git a/Alien Buster/manifest.json 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": []
+  }
+
diff --git a/Alien Buster/ship.png b/Alien Buster/ship.png
diff --git a/Alien Buster/space.css b/Alien Buster/space.css
@@ -0,0 +1,8 @@
+body {
+    font-family:'Courier New', Courier, monospace;
+    text-align: center;
+}
+
+#board {
+    background-color: black;
+}
diff --git a/Alien Buster/space.js 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
+}