made game ready for presentation and cloned a version with changed phase durations for presentation

webdev/js/Button.js

@@ -0,0 +1,14 @@
+class Button{
+    button(r, g, b, buttonX, buttonY, buttonText) {
+        push()
+        noFill()
+        rectMode(CENTER);
+        rect(buttonX, buttonY, buttonWidth, buttonHeight)
+        textSize(25)
+        fill(r, g, b)
+        textAlign(CENTER);
+        text(buttonText, buttonX, buttonY)
+        pop()
+        
+    }
+}

webdev/js/Database.js

@@ -0,0 +1,19 @@
+class database{
+    sendData(naam, score) {
+        fetch(`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`)
+    }
+
+    getData(naam) {
+        // Fetch data from the database, put it in an array, and log it to the console
+        //met backticks als " " kan je variabelen in een string zetten
+        return fetch(`https://oege.ie.hva.nl/~hossan/getData.php?name=${naam}`) // Add return here
+            .then(response => response.json())
+            .then(data => {
+                requesteddata = data;
+                console.log(data);
+            });
+    }
+}
+
+
+

webdev/js/Menu.js

@@ -0,0 +1,164 @@
+class Menu {
+    constructor() {
+    }
+
+    homescreen() {
+        textAlign(CENTER, CENTER);
+        textSize(70);
+        fill(100, 255, 100);
+        text("Slime\nSymphony", width / 2, height / 4);
+
+        button.button(255, 255, 255, width / 2, height / 2, "Start Game")
+        button.button(255, 255, 255, width / 2, height / 2 + height / 12, "Scores")
+
+        push()
+        fill(255, 255, 255)
+        textSize(25)
+        textAlign(CENTER, CENTER)
+        for (let i = 0; i < requesteddata.length; i++) {
+            text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, width / 5, height / 3 + (i * 30))
+        }
+        pop()
+
+        //Scores rectangle
+        push()
+        stroke(4, 217, 255)
+        strokeWeight(5)
+        fill(0, 255, 0, 0)
+        rect(width / 5, height / 2, width / 4, height / 1.5)
+        rect(width / 5 * 4, height / 2, width / 4, height / 1.5)
+        imageMode(CENTER)
+        image(controlsImage, width / 5 * 4, height / 2, width / 4, height / 1.5)
+        pop()
+
+        push()
+        textSize(50)
+        fill(255, 255, 255)
+        text("Highscores", width / 5, height / 4)
+        fill(255, 255, 255)
+        stroke('black');
+        strokeWeight(4);
+        text("Controls", width / 5 * 4, height / 4)
+        pop()
+    }
+
+    pauseMenu() {
+        textAlign(CENTER);
+        textSize(50);
+        fill(255, 255, 255);
+        text("Paused", width / 2, height / 2 - height / 6);
+        button(255, 255, 255, width / 2, height / 2, "Resume");
+        button(255, 255, 255, width / 2, height / 2 + height / 12, "Main Menu");
+    }
+
+    scoreMenu() {
+        textAlign(CENTER, CENTER);
+        textSize(50);
+        fill(255, 255, 255);
+        text("Score", width / 2, height / 5);
+        textSize(32);
+        text(letters[currentIndex[0]], width / 2 - 30, height / 3);
+        text(letters[currentIndex[1]], width / 2, height / 3);
+        text(letters[currentIndex[2]], width / 2 + 30, height / 3);
+        if (!clearDataOnce) {
+            requesteddata = [];
+            clearDataOnce = true;
+        }
+
+        if (scorescreenOn && keyReleasedFlag) {
+            nameSubmit();
+        }
+
+        if (entered) {
+            push()
+            stroke(205, 205, 205)
+            strokeWeight(2)
+            fill(0, 0, 0, 0)
+            rect(width / 2, height / 3, 90, 40)
+            pop()
+            if (!dataIsCalled) {
+                DB.getData(nameHS);
+                dataIsCalled = true;
+            }
+        }
+        else {
+            nameDraw(3);
+        }
+
+        push()
+        fill(255, 255, 255)
+        textSize(25)
+        textAlign(CENTER, CENTER)
+        //text for name, score, achievements
+        for (let i = 0; i < requesteddata.length; i++) {
+            text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score + " " + requesteddata[i].Datum, width / 4, height / 3 + (i * 30))
+        }
+        pop()
+
+        push()
+        fill(255, 255, 255)
+        textSize(16)
+        textAlign(CENTER, CENTER)
+        for (let i = 0; i < requesteddata.length; i++) {
+            text(i + 1 + ". " + requesteddata[i].Achievements, width / 4 * 3, height / 3 + (i * 30))
+        }
+        pop()
+
+        push()
+        stroke(4, 217, 255)
+        strokeWeight(5)
+        fill(0, 255, 0, 0)
+        //box left
+        rect(width / 4 * 3, height / 2, width / 3.5, height / 1.25)
+        //box right
+        rect(width / 4, height / 2, width / 3.5, height / 1.25)
+        pop()
+        push()
+        text("Your scores", width / 4, height / 6)
+        text("Your achievements", width / 4 * 3, height / 6)
+        pop()
+
+        push()
+        button.button(255, 255, 255, width / 2, height / 2, "Main Menu")
+        pop()
+    }
+
+    gameOver() {
+        if (lives <= 0) {
+            //game over screen
+            iIndex = constrain(iIndex, 0, 2);
+            isDead = true;
+            push();
+            fill(255, 0, 0);
+            textSize(60);
+            textAlign(CENTER, CENTER);
+            text("Game Over", width / 2, height / 2 - height / 5);
+
+            fill(255, 255, 255)
+            textSize(18);
+            text("Score: " + int(time), width / 2, height / 2 - height / 8);
+
+            textSize(32);
+            textAlign(CENTER, CENTER);
+            text(letters[currentIndex[0]], width / 2 - 30, height / 2);
+            text(letters[currentIndex[1]], width / 2, height / 2);
+            text(letters[currentIndex[2]], width / 2 + 30, height / 2);
+
+
+            text("Restart", width / 2, height / 2 + height / 12);
+
+            text("Main Menu", width / 2, height / 2 + height / 6);
+            pop();
+        }
+    }
+
+
+    dodgeBanner() {
+        push()
+        fill(255, 0, 0)
+        textSize(100)
+        textAlign(CENTER, CENTER)
+        text("Dodge!", width / 2, height / 2)
+        pop()
+    }
+}

webdev/js/basicbullet.js

@@ -0,0 +1,66 @@
+class bullet {
+    constructor(targetx, targety, radius, speed, shotPosX, shotPosY, hasMoved, angle) {  // Add hasMoved parameter
+        // add all incoming variables to the class
+        this.angle = radians(angle);
+        this.targetx = targetx;
+        this.targety = targety;
+        this.x = shotPosX;
+        this.y = shotPosY;
+        this.radius = radius;
+        this.speed = speed;
+        this.bulletHit = false;
+        this.directionX = null;
+        this.directionY = null;
+        // Set a variable that cant be changed
+        if ((this.directionX === null) || (this.directionY === null)) {
+            this.directionX = this.targetx;
+            this.directionY = this.targety;
+        }
+        // create a vector for the projectile and the direction
+        this.projectile = createVector(this.x, this.y);
+        this.direction = createVector(this.targetx - this.projectile.x, this.targety - this.projectile.y);
+        this.direction.normalize();
+        // rotate the direction towards the player
+        this.direction.rotate(this.angle);
+    }
+
+    draw() {
+        //draw the bullet
+        push();
+        fill(0, 255, 0);
+        circle(this.projectile.x, this.projectile.y, this.radius);
+        pop();
+    }
+
+    update(targetx, targety, hasMoved, radius) {
+        // keeps the projetile updated so hit collision can be checked
+        this.targetx = targetx;
+        this.targety = targety;
+        // update the projectile
+        this.projectile.add(p5.Vector.mult(this.direction, this.speed));
+
+        let hit = false;
+        let shot = true;
+        let travelled = false;
+        // check if the projectile has hit the player
+        if (dist(this.projectile.x, this.projectile.y, this.targetx, this.targety) <= this.radius + radius) {
+            hit = true;
+            shot = false;
+            // if the projectile has hit the player and the player has lives left, remove a life
+            if (hasMoved && lives != 0 && this.bulletHit == false) {
+                this.bulletHit = true;
+                lives -= 1;
+            }
+            //if the bullet hits one of the wall reset the shot variable so a new wave of bullets can be fired
+        } else if (this.projectile.x < 0 - 10 || this.projectile.x > width + 10 || this.projectile.y < 0 - 10 || this.projectile.y > height + 10) {
+            shot = false;
+        }
+        // check if the projectile is off screen so it can be removed
+        let isOffScreen = this.projectile.x < 0 || this.projectile.x > width || this.projectile.y < 0 || this.projectile.y > height;
+        //unused variable to check if the projetile passsed the original player position when it was fired
+        let originalPos = this.projectile.x == this.targetx || this.projectile.y == this.targety;
+
+        // return all the variables
+        return { hit, shot, isOffScreen, originalPos };
+    }
+}

webdev/js/variables.js

@@ -0,0 +1,80 @@
+//--------------------Game--------------------
+// Classes
+const Menus = new Menu();
+const button = new Button();
+const DB = new database();
+// Game variables
+const width = window.innerWidth;
+const height = window.innerHeight;
+let requesteddata = [];
+let buttonWidth = width / 6
+let buttonHeight = buttonWidth / 5
+// Menu variables
+let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+let currentIndex = [0, 0, 0];
+let nameHS = '';
+let pressed = false;
+let searchName = '';
+let dataIsCalled = false;
+let clearDataOnce = false;
+// Player variables
+const playerSize = 10;
+let radius = playerSize / 2;
+let playerPosX = 500
+let playerPosY = 300;
+let playerSpeed = 4;
+let lives = 1;
+let isDead = false;
+let bossPosX = width / 2;
+let bossPosY = height / 6;
+let bossVelX = 5;
+let bossVelY = 5;
+let shotSpeed = 12;
+let shotSpeedAdj;
+let projectile;
+let projSize = 5;
+let shot = false;
+let hit = false;
+let shotPosX;
+let shotPosY;
+
+let initialPlayerPosX = playerPosX;
+let initialPlayerPosY = playerPosY;
+let bullets = [];
+let direction;
+let framerate = 120;
+let hasMoved = false;
+let time = 0;
+let shotPoint = 0;
+let angle = 0;
+
+let patern;
+let paternArray = [];
+let suroundX = 300;
+let suroundY = 300;
+let x2;
+let y2;
+let x3;
+let y3;
+let x4;
+let y4;
+let x5;
+let y5;
+let homescreenOn = true;
+let pausescreenOn = false;
+let scorescreenOn = false;
+let gamescreenOn = false;
+let chosen = false;
+let finalPhase = false;
+let nextWave = [];
+let iIndex = 0;
+let buttonSelect = 0;
+let entered = false;
+let submitted = false;
+let keyReleasedFlag = true;
+let escaped = false;
+let buttonSelectScore = 0;
+
+let bulletAmount = 5;
+
+let phases = [false, false, false, false, false];