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

web/game.js

@@ -113,7 +113,7 @@ async function keyPressed() {
             if (keyCode == ENTER) {
                 homescreenOn = false;
                 scorescreenOn = true;
-                reset();
+                requesteddata = [];
                 keyReleasedFlag = false;
             }
         }

web/js/Database.js

@@ -3,10 +3,10 @@ class database{
         fetch(`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`)
     }
 
-    getData(name) {
+    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=${name}`) // Add return here
+        return fetch(`https://oege.ie.hva.nl/~hossan/getData.php?name=${naam}`) // Add return here
             .then(response => response.json())
             .then(data => {
                 requesteddata = data;

webdev/Serial.js

@@ -29,6 +29,7 @@ async function readLoop() {
             if (singleByte != 10) {
                 buffer.push(singleByte);
             }
+
             else {
                 let sensorString = decoder.decode(new Uint8Array(buffer));
                 //Put all data in a json Array and parse it to a boolean array
@@ -41,6 +42,9 @@ async function readLoop() {
                         //Convert the array of strings to a boolean array
                         //When a bit is 1 it becomes true, when a bit is 0 it becomes false
                         let booleanArray = SerialArray.map(bit => bit == '1');
+                     // Dispatch an event with booleanArray as detail
+                        let event = new CustomEvent('booleanArrayUpdated', { detail: booleanArray });
+                        window.dispatchEvent(event);
                         console.log(booleanArray);
                     } else {
                         console.error("Dit is geen Array");
@@ -60,6 +64,8 @@ async function readLoop() {
     }
     
 }
+
+
 // Sluit de poort
 async function disconnect() {
     await reader.cancel();

webdev/basicbullet.js

@@ -1,66 +0,0 @@
-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;
-      this.hasMoved = hasMoved;
-      // 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) {
-      // 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;
-      // check if the projectile has hit the player
-      if (dist(this.projectile.x, this.projectile.y, this.targetx, this.targety) <= this.radius) {
-          hit = true;
-          shot = false;
-          // if the projectile has hit the player and the player has lives left, remove a life
-          if (this.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/game.js

@@ -1,94 +1,24 @@
-//--------------------Game--------------------
+function preload() {
-// Game variables
+    controlsImage = loadImage('./contols.png');
-const width = 1260;
+}
-const height = 620;
-let requesteddata = [];	
-// Menu variables
-let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
-let currentIndex = [0, 0, 0];
-let nameHS = '';
-let pressed = false;
 
-// Player variables
-const playerSize = 10;
-let radius = playerSize / 2;
-let playerPosX = 500
-let playerPosY = 300;
-let playerSpeed = 4;
-let booleanArray = window.booleanArray;
-let lives = 1;
-let isDead = false;
-let bossPosX = width / 2;
-let bossPosY = 100;
-let shotSpeed = 16;
-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 = 60;
-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 chosen = false;
-let finalPhase = false;
-let nextWave = [];
-let iIndex = 0;
-let buttonSelectDead = 0;
-let buttonSelectHome = 0;
-let buttonSelectPause = 0;
-let entered = false;
-let submitted = false;
-
-let bulletAmount = 5;
-
-let phases = [false, false, false, false, false];
-
-//let myBullet = new bullet();
 // the function setup() is called once when the page is loaded
 function setup() {
     // create a canvas element and append it to the body
-    getData()
+    DB.getData()
     createCanvas(width, height);
     frameRate(framerate);
     angleMode(DEGREES);
+    rectMode(CENTER);
     // disable the outline of shapes
-    Movementloop()
     noStroke();
-    // bg = loadImage('background.webp');
 }
-
 function score() {
     time += 3 / framerate;
 }
-
 function reset() {
     lives = 1;
     time = 0;
-    bounceX = bossPosX;
-    bounceY = bossPosY;
     initialPlayerPosX = playerPosX;
     initialPlayerPosY = playerPosY;
     hasMoved = false;
@@ -98,38 +28,17 @@ function reset() {
     finalPhase = false;
     isDead = false;
     entered = false;
-    buttonSelectDead = 0;
+    buttonSelect = 0;
+    nameHS = '';
     submitted = false;
-    getData()
+    escaped = false;
-}
+    bossPosX = width / 2;
+    bossPosY = height / 6;
+    bossVelX = 5;
+    bossVelY = 5;
+    dataIsCalled = false;
+    DB.getData();
 
-function gameOver() {
-    if (lives == 0) {
-        //game over screen
-        iIndex = constrain(iIndex, 0, 2);
-        buttonSelectDead = constrain(buttonSelectDead, 0, 2);
-        isDead = true;
-        push();
-        fill(255, 0, 0);
-        textSize(40);
-        textAlign(CENTER);
-        text("Game Over", width / 2, height / 2 - 80);
-
-        fill(255, 255, 255)
-        textSize(18);
-        textAlign(CENTER);
-        text("Score: " + int(time), width / 2, height / 2 - 55);
-
-        textSize(32);
-        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 + 45);
-
-        text("Main Menu", width / 2, height / 2 + 90);
-        pop();
-    }
 }
 
 function movementCheck() {
@@ -138,9 +47,8 @@ function movementCheck() {
         hasMoved = true;
     }
 }
-
 async function keyPressed() {
-    if (!isDead) {
+    if (!isDead && !homescreenOn && !pausescreenOn) {
         if (keyIsDown(LEFT_ARROW) && playerPosX > 0 + radius) {
             playerPosX -= playerSpeed;
         }
@@ -155,80 +63,132 @@ async function keyPressed() {
         }
     }
     if (isDead && keyReleasedFlag && !entered) {
-        if ((!(iIndex > 2)) || (!(iIndex < 0))) {
+        nameSubmit();
-            if (keyCode == LEFT_ARROW) {
-                iIndex -= 1;
-                keyReleasedFlag = false;
-            }
-            if (keyCode == RIGHT_ARROW) {
-                iIndex += 1;
-                keyReleasedFlag = false;
-            }
-        }
-        if (keyCode == UP_ARROW) {
-            currentIndex[iIndex] = (currentIndex[iIndex] + 1) % letters.length;
-            keyReleasedFlag = false;
-        }
-        if (keyCode == DOWN_ARROW) {
-            currentIndex[iIndex] = (currentIndex[iIndex] - 1 + letters.length) % letters.length;
-            keyReleasedFlag = false;
-        }
-        if (keyCode == ENTER) {
-            nameHS += letters[currentIndex[0]];
-            nameHS += letters[currentIndex[1]];
-            nameHS += letters[currentIndex[2]];
-            entered = true;
-            submit();
-            keyReleasedFlag = false;
-        }
     }
     if (isDead && keyReleasedFlag && entered) {
+        buttonSelect = constrain(buttonSelect, 0, 2);
         if (keyCode == UP_ARROW) {
-            buttonSelectDead -= 1;
+            buttonSelect -= 1;
             keyReleasedFlag = false;
         }
         if (keyCode == DOWN_ARROW) {
-            buttonSelectDead += 1;
+            buttonSelect += 1;
             keyReleasedFlag = false;
         }
-        if (buttonSelectDead == 0) {
+        if (buttonSelect == 1) {
-            if (keyCode == RIGHT_ARROW && !submitted) {
-                entered = false;
-                nameHS = '';
-                keyReleasedFlag = false;
-            }
-            if (keyCode == ENTER) {
-                keyReleasedFlag = false;   
-            }
-        }
-        if (buttonSelectDead == 1) {
             if (keyCode == ENTER) {
                 //reset all the variables so the game can be played again
                 reset();
             }
         }
-        if (buttonSelectDead == 2) {
+        if (buttonSelect == 2) {
             if (keyCode == ENTER) {
                 homescreenOn = true;
                 reset();
+                keyReleasedFlag = false;
+                DB.getData()
+                return;
+            }
+        }
+    }
+    if (homescreenOn && keyReleasedFlag) {
+        buttonSelect = constrain(buttonSelect, 0, 1);
+        if (keyCode == UP_ARROW) {
+            buttonSelect -= 1;
+            keyReleasedFlag = false;
+        }
+        if (keyCode == DOWN_ARROW) {
+            buttonSelect += 1;
+            keyReleasedFlag = false;
+        }
+        if (buttonSelect == 0) {
+            if (keyCode == ENTER) {
+                console.log("start game");
+                homescreenOn = false;
+                gamescreenOn = true;
+                reset();
+            }
+        }
+        if (buttonSelect == 1) {
+            if (keyCode == ENTER) {
+                homescreenOn = false;
+                scorescreenOn = true;
+                keyReleasedFlag = false;
+                requesteddata = [];
+            }
+        }
+    }
+    if (scorescreenOn && keyReleasedFlag && entered) {
+        buttonSelect = constrain(buttonSelect, 0, 1);
+        if (keyCode == UP_ARROW) {
+            buttonSelect -= 1;
+            keyReleasedFlag = false;
+        }
+        if (keyCode == DOWN_ARROW) {
+            buttonSelect += 1;
+            keyReleasedFlag = false;
+        }
+        if (buttonSelect == 1 && entered) {
+            if (keyCode == ENTER) {
+                homescreenOn = true;
+                scorescreenOn = false;
+                reset();
+                keyReleasedFlag = false;
+            }
+        }
+    }
+    if (!homescreenOn && !isDead && !scorescreenOn && keyReleasedFlag) {
+        buttonSelect = constrain(buttonSelect, 0, 1);
+        if (keyCode == 27 && !escaped) {
+            escaped = true;
+            console.log("pause");
+            pausescreenOn = true;
+            keyReleasedFlag = false;
+        }
+        if (escaped) {
+            if (keyCode == UP_ARROW) {
+                buttonSelect -= 1;
+                keyReleasedFlag = false;
+                console.log(buttonSelect)
+            }
+            if (keyCode == DOWN_ARROW) {
+                buttonSelect += 1;
+                keyReleasedFlag = false;
+                console.log(buttonSelect)
+            }
+            if (buttonSelect == 0) {
+                if (keyCode == ENTER) {
+                    console.log("resume");
+                    pausescreenOn = false;
+                    keyReleasedFlag = false;
+                    escaped = false;
+                }
+            }
+            if (buttonSelect == 1) {
+                if (keyCode == ENTER) {
+                    console.log("main menu");
+                    homescreenOn = true;
+                    pausescreenOn = false;
+                    escaped = false;
+                    reset();
+                    keyReleasedFlag = false;
+                }
             }
         }
     }
-}
 
+}
 function submit() {
     if (entered == true) {
-        sendData(nameHS, int(time));
+        DB.sendData(nameHS, int(time));
         console.log(nameHS + ": " + int(time));
         nameHS = '';
         submitted = true;
     }
 }
-
 function keyReleased() {
     keyReleasedFlag = true; // Set the flag to true when a key is released
 }
-
 function wait(waitTime) {
     return new Promise(resolve => {
         setTimeout(() => {
@@ -236,94 +196,173 @@ function wait(waitTime) {
         }, waitTime);
     });
 }
-
+function nameSubmit() {
-async function Movementloop() {
+    iIndex = constrain(iIndex, 0, 2);
-    //get info from controller and use it to move the player
+    if ((!(iIndex > 2)) || (!(iIndex < 0))) {
-    window.addEventListener('booleanArrayUpdated', function (event) {
+        if (keyCode == LEFT_ARROW) {
-        let booleanArray = event.detail;
+            console.log(iIndex);
-
+            iIndex -= 1;
-        if (booleanArray[1]) {
+            keyReleasedFlag = false;
-            playerPosX += playerSpeed;
         }
-        if (booleanArray[3]) {
+        if (keyCode == RIGHT_ARROW) {
-            playerPosX -= playerSpeed;
+            console.log(iIndex);
+            iIndex += 1;
+            keyReleasedFlag = false;
         }
-        if (booleanArray[2]) {
+    }
-            playerPosY += playerSpeed;
+    if (keyCode == UP_ARROW) {
+        currentIndex[iIndex] = (currentIndex[iIndex] + 1) % letters.length;
+        console.log(currentIndex[iIndex])
+        keyReleasedFlag = false;
+    }
+    if (keyCode == DOWN_ARROW) {
+        currentIndex[iIndex] = (currentIndex[iIndex] - 1 + letters.length) % letters.length;
+        console.log(currentIndex[iIndex])
+        keyReleasedFlag = false;
+    }
+    if (keyCode == ENTER) {
+        nameHS += letters[currentIndex[0]];
+        nameHS += letters[currentIndex[1]];
+        nameHS += letters[currentIndex[2]];
+        entered = true;
+        if (isDead) {
+            submit();
+        } else {
+            // do nothing
         }
-        if (booleanArray[0]) {
+        keyReleasedFlag = false;
-            playerPosY -= playerSpeed;
+    }
-        }
-    });
 }
+function nameDraw(positiony) {
+    if (iIndex == 0) {
+        push()
+        stroke(205, 205, 205)
+        strokeWeight(2)
+        fill(0, 0, 0, 0)
+        rect(width / 2 - 30, height / positiony, 30, 40)
+        pop()
+    }
+    if (iIndex == 1) {
+        push()
+        stroke(205, 205, 205)
+        strokeWeight(2)
+        fill(0, 0, 0, 0)
+        rect(width / 2, height / positiony, 30, 40)
+        pop()
+    }
+    if (iIndex == 2) {
+        push()
+        stroke(205, 205, 205)
+        strokeWeight(2)
+        fill(0, 0, 0, 0)
+        rect(width / 2 + 30, height / positiony, 30, 40)
+        pop()
+    }
 
+}
 // the function draw() is called every frame
 function draw() {
     keyPressed();
-    gameOver();
+    Menus.gameOver();
     // draw background
     background(0, 0, 0, 100);
+    ffps = frameRate();
+    shotSpeed = 1000 / ffps;
+    playerSpeed = 300 / ffps;
 
-    if (homescreenOn == true) {
+    if (homescreenOn) {
-        homescreen();
+        Menus.homescreen();
+        buttonSelect = constrain(buttonSelect, 0, 1);
+        if (buttonSelect == 0) {
+            push()
+            stroke(205, 205, 205)
+            strokeWeight(2)
+            fill(0, 0, 0, 0)
+            rect(width / 2, height / 2, buttonWidth, buttonHeight)
+            pop()
+        }
+        if (buttonSelect == 1) {
+            push()
+            stroke(205, 205, 205)
+            strokeWeight(2)
+            fill(0, 0, 0, 0)
+            rect(width / 2, height / 2 + height / 12, buttonWidth, buttonHeight)
+            pop()
+        }
     }
-    if (homescreenOn == false) {
+    if (!homescreenOn && !scorescreenOn && !isDead) {
         game();
     }
-    if (isDead == true) {
+    if (scorescreenOn) {
-        if (entered == true) {
+        Menus.scoreMenu();
-            if (buttonSelectDead == 0) {
+        buttonSelect = constrain(buttonSelect, 0, 1);
+        if (buttonSelect == 1 && entered) {
+            push()
+            stroke(205, 205, 205)
+            strokeWeight(2)
+            fill(0, 0, 0, 0)
+            rect(width / 2, height / 2, buttonWidth, buttonHeight)
+            pop()
+        }
+    }
+    if (pausescreenOn) {
+        Menus.pauseMenu();
+        buttonSelect = constrain(buttonSelect, 0, 1);
+        if (buttonSelect == 0) {
+            push()
+            stroke(205, 205, 205)
+            strokeWeight(2)
+            fill(0, 0, 0, 0)
+            rectMode(CENTER);
+            rect(width / 2, height / 2, buttonWidth, buttonHeight)
+            pop()
+        }
+        if (buttonSelect == 1) {
+            push()
+            stroke(205, 205, 205)
+            strokeWeight(2)
+            fill(0, 0, 0, 0)
+            rectMode(CENTER);
+            rect(width / 2, height / 2 + height / 12, buttonWidth, buttonHeight)
+            pop()
+        }
+    }
+    if (isDead) {
+        buttonSelect = constrain(buttonSelect, 0, 2);
+        if (entered) {
+            if (buttonSelect == 0) {
                 push()
                 stroke(205, 205, 205)
                 strokeWeight(2)
                 fill(0, 0, 0, 0)
-                rect(width / 2 - 45, height / 2 - 30, 90, 40)
+                rect(width / 2, height / 2, 90, 40)
                 pop()
             }
-            if (buttonSelectDead == 1) {
+            if (buttonSelect == 1) {
                 push()
                 stroke(205, 205, 205)
                 strokeWeight(2)
                 fill(0, 0, 0, 0)
-                rect(width / 2 - 55, height / 2 + 15, 110, 40)
+                rect(width / 2, height / 2 + height / 12, 110, 40)
                 pop()
             }
-            if (buttonSelectDead == 2) {
+            if (buttonSelect == 2) {
                 push()
                 stroke(205, 205, 205)
                 strokeWeight(2)
                 fill(0, 0, 0, 0)
-                rect(width / 2 - 80, height / 2 + 60, 160, 40)
+                rect(width / 2, height / 2 + height / 6, 160, 40)
                 pop()
             }
         }
         else {
-            if (iIndex == 0) {
+            nameDraw(2);
-                push()
-                stroke(205, 205, 205)
-                strokeWeight(2)
-                fill(0, 0, 0, 0)
-                rect(width / 2 - 45, height / 2 - 30, 30, 40)
-                pop()
-            }
-            if (iIndex == 1) {
-                push()
-                stroke(205, 205, 205)
-                strokeWeight(2)
-                fill(0, 0, 0, 0)
-                rect(width / 2 - 15, height / 2 - 30, 30, 40)
-                pop()
-            }
-            if (iIndex == 2) {
-                push()
-                stroke(205, 205, 205)
-                strokeWeight(2)
-                fill(0, 0, 0, 0)
-                rect(width / 2 + 15, height / 2 - 30, 30, 40)
-                pop()
-            }
         }
     }
+
+    if (!hasMoved && !isDead && !homescreenOn && !pausescreenOn && !scorescreenOn) {
+        Menus.dodgeBanner();
+    }
 }
 async function randPatern() {
     patern = random(paternArray);
@@ -353,7 +392,6 @@ async function randPatern() {
     }
 
 }
-
 function randomAttackPattern() {
     if (shot == false || hit == true) {
         for (i = 0; i < bulletAmount; i++) {
@@ -361,12 +399,11 @@ function randomAttackPattern() {
         }
     }
 }
-
 function phase() {
     switch (true) {
-        case (time < 20):
+        case (time < 10):
             phases[0] = true;
-            paternArray = [1,2,3,4,5];
+            paternArray = [5];
             shotSpeedAdj = 2;
             push();
             fill(255, 0, 255);
@@ -375,8 +412,8 @@ function phase() {
             text("phase 1", 10, 50);
             pop();
             break;
-        case (time < 60):
+        case (time < 20):
-            shotSpeedAdj = 5;
+            shotSpeedAdj = 3;
             paternArray = [5];
             phases[0] = false;
             phases[1] = true;
@@ -387,7 +424,7 @@ function phase() {
             text("phase 2", 10, 50);
             pop();
             break;
-        case (time < 90):
+        case (time < 40):
             phases[1] = false;
             phases[2] = true;
             paternArray = [2];
@@ -398,7 +435,7 @@ function phase() {
             text("phase 3", 10, 50);
             pop();
             break;
-        case (time < 120):
+        case (time < 70):
             phases[2] = false;
             phases[3] = true;
             paternArray = [3, 4];
@@ -409,7 +446,7 @@ function phase() {
             text("phase 4", 10, 50);
             pop();
             break;
-        case (time >= 120):
+        case (time >= 90):
             phases[3] = false;
             phases[4] = false;
             finalPhase = true;
@@ -423,7 +460,6 @@ function phase() {
             break;
     }
 }
-
 function spawnRandomBullet() {
     if (chosen == false) {
         randPatern();
@@ -475,10 +511,6 @@ function spawnRandomBullet() {
         }
         bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
     }
-    if (!(patern == 2)) {
-        bossPosX = width / 2;
-        bossPosY = 100;
-    }
     if (patern == 3) {
         shotPosX = bossPosX;
         shotPosY = bossPosY;
@@ -545,87 +577,78 @@ function spawnRandomBullet() {
         bulletAmount = 5;
     }
 }
-
+function bouncing() {
-
+    // Update position
-function homescreen() {
+    bossPosX += bossVelX;
-    textAlign(CENTER);
+    bossPosY += bossVelY;
-    button(255, 255, 255, width / 2 - 90, height / 2, 200, 40, "Start Game")
+    // Check for bounce
-    button(255, 255, 255, width / 2 - 90, height / 2 + 50, 200, 40, "Scores")
+    if (bossPosX > width - 25) {
-    
+        bossVelX = random([-4, -5, -6, -7]);
-    push()
-    stroke(255, 255, 255)
-    strokeWeight(5)
-    fill(0, 255, 0, 0)
-    rect(100, 150, 300, 400)
-    pop()
-    //highscores rectangle
-    push()
-    textSize(50)
-    fill(255, 255, 255)
-    text("Highscores", 250, 200)
-    pop()
-
-    push()
-    fill(255, 255, 255)
-    textSize(25)
-    textAlign(CENTER)
-    // if (requesteddata.length > 0) {
-    //     text("1. " + requesteddata[0].Naam + ": " + requesteddata[0].Score, 250, 250)
-    //     }    
-    for (let i = 0; i < requesteddata.length; i++) {
-        text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, 250, 250 + (i * 30))
     }
-    pop()
+    if (bossPosX < 25) {
-
+        bossVelX = random([4, 5, 6, 7]);
-    push()
+    }
-    stroke(255, 255, 255)
+    if (bossPosY > height - 25) {
-    strokeWeight(5)
+        bossVelY = random([-4, -5, -6, -7]);
-    fill(0, 255, 0, 0)
+    }
-    rect(860, 150, 300, 400)
+    if (bossPosY < 25) {
-    pop()
+        bossVelY = random([4, 5, 6, 7]);
-
+    }
-    push()
+
-    textSize(50)
+    // Draw the boss
-    fill(255, 255, 255)
+    circle(bossPosX, bossPosY, 50);
-    text("Controls", 1000, 200)
+
-    pop()
+    if ((dist(bossPosX, bossPosY, playerPosX, playerPosY) <= 25 + radius) && hasMoved) {
-}
+        lives -= 1;
-
-
-
-function button(r, g, b, buttonX, buttonY, buttonWidth, buttonHeight, buttonText) {
-    push()
-    fill(0, 0, 50)
-    rect(buttonX, buttonY, buttonWidth, buttonHeight)
-    textSize(25)
-    fill(r, g, b)
-    text(buttonText, buttonX + 100, buttonY + 30)
-    textAlign(CENTER);
-    if (mouseX > buttonX - 90 && mouseX < width / 2 + 110 && mouseY > height / 2 && mouseY < buttonY + 40) {
-        if (mouseIsPressed) {
-            homescreenOn = false;
-        }
     }
-    pop()
 }
 
 function game() {
     if (!(lives == 0)) {
         // draw player
         phase();
+        movementCheck();
+
         push();
-        fill(0, 255, 255)
+        fill(0, 255, 0);
-        circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
+        if (!pausescreenOn) {
-        pop();
+            push();
-        movementCheck()
+            fill(0, 255, 255);
-        // draw boss
+            circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
-        push();
+            stroke('yellow');
-        fill(255, 165, 0)
+            strokeWeight(1);
-        circle(x2, y2, 50);
+            noFill();
+            circle (playerPosX, playerPosY, playerSize*2);
+            pop();
+            if (phases[2] == false || phase[3] == false) {
+                bouncing();
+            } else if (phases[2] = true) {
+                bossPosX = x2;
+                bossPosY = y2;
+            } else {
+                bossPosX = width / 2;
+                bossPosY = height / 6;
+            }
+
+            bullets.forEach(myBullet => {
+                //zolang mybullet bestaat blijft hij drawen en updaten
+                ({ hit, shot, isOffScreen, originalPos } = myBullet.update(playerPosX, playerPosY, hasMoved, radius));
+                myBullet.draw();
+
+                if (isOffScreen == true) {
+                    myBullet.hit = true;
+                    shot = false;
+                }
+            });
+            //blijf de bullet tekenen zolang hit false is
+            bullets = bullets.filter(bullet => !bullet.hit);
+        }
         pop();
         if (hasMoved == true) {
             push();
-            score();
+            if (!pausescreenOn) {
+                score();
+            }
             textSize(10);
             textAlign(LEFT);
             fill(255, 0, 255)
@@ -659,50 +682,15 @@ function game() {
             x5 = map(sinX, -1, 1, playerPosX - 100, playerPosX + 100);
             y5 = map(-cosY, -1, 1, playerPosY - 100, playerPosY + 100);
             push();
-            fill(255, 165, 0)
+            fill(0, 255, 0);
             circle(x3, y3, 50);
             circle(x4, y4, 50);
             circle(x5, y5, 50);
             pop();
-
-
         } else {
             x2 = width / 2;
             y2 = 100;
         }
-
-        bullets.forEach(myBullet => {
-            //zolang mybullet bestaat blijft hij drawen en updaten
-            ({ hit, shot, isOffScreen, originalPos } = myBullet.update(playerPosX, playerPosY));
-            myBullet.draw();
-
-            if (isOffScreen == true) {
-                myBullet.hit = true;
-                shot = false;
-            }
-        });
-        //blijf de bullet tekenen zolang hit false is
-        bullets = bullets.filter(bullet => !bullet.hit);
     }
 
-}
+}
-
-function sendData(naam, score) {
-    const request = ( url, params = {}) => {
-    url += '?' + ( new URLSearchParams( params ) ).toString();
-    fetch( url );
-};
-    const get = ( url, params ) => request( url, params);
-
-    get('https://oege.ie.hva.nl/~hossan/postData.php', { name: naam, score: score } );
-
-}
-
-function getData(){
-    // Fetch data from the database, put it in an array, and log it to the console
-    return fetch ('https://oege.ie.hva.nl/~hossan/getData.php') // Add return here
-    .then(response => response.json())
-    .then(data => {
-        requesteddata = data;
-    });
-}

webdev/index.html

@@ -1,17 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            overflow: hidden;
+            margin: 0%;
+        }
+    </style>
     <title>Open Dag Game</title>
 
     <!-- support p5-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
-    <script src="basicbullet.js"></script>
+    <script src="js/basicbullet.js"></script>
+    <script src="js/Button.js"></script>
+    <script src="js/Menu.js"></script>
+    <script src="js/Database.js"></script>
+    <script src="js/variables.js"></script>
     <script src="game.js"></script>
 </head>
+
 <body>
-    
+
 </body>
+
 </html>

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];

webdev/reference.js

@@ -0,0 +1,202 @@
+//--------------------Game--------------------
+// Game variables
+const width = 1000;
+const height = 600;
+
+// Player variables
+const playerSize = 10;
+let radius = playerSize / 2;
+let playerPosX = 500
+let playerPosY = 300;
+let playerSpeed = 3;
+let booleanArray = window.booleanArray;
+let lives = 2;
+
+let bossPosX = 500;
+let bossPosY = 100;
+let shotSpeed = 15;
+let projectile;
+let projSize = 5;
+let shot;
+let hit;
+let shotPosX;
+let shotPosY;
+
+let nextAttack;
+let bounceX = bossPosX;
+let bounceY = bossPosY;
+let predictiveBounceX;
+let predictiveBounceY;
+
+let time = 0;
+
+let myBullet = new bullet();
+// the function setup() is called once when the page is loaded
+function setup() {
+    // create a canvas element and append it to the body
+    createCanvas(width, height);
+    frameRate(120);
+    // disable the outline of shapes
+    Movementloop()
+    noStroke();
+}
+
+async function score() {
+    while (true) {
+        time += 1;
+        await sleep(1000);
+    }
+}
+
+function life() {
+    textAlign(CENTER);
+    text(lives, 500, 20);
+    if (hit == true) {
+        hit = false;
+        lives -= 1;
+    }
+    if (lives == 0) {
+        fill(255, 0, 0);
+        textSize(40);
+        textAlign(CENTER);
+        text("Game Over", 500, 300);
+    }
+    if (key == ' ') {
+        lives = 2;
+        time = 0;
+        bounceX = bossPosX;
+        bounceY = bossPosY;
+    }
+}
+
+function keyPressed() {
+    if (keyIsDown(LEFT_ARROW) && playerPosX > 0 + radius) {
+        playerPosX -= playerSpeed;
+    }
+    if (keyIsDown(RIGHT_ARROW) && playerPosX < width - radius) {
+        playerPosX += playerSpeed;
+    }
+    if (keyIsDown(UP_ARROW) && playerPosY > 0 + radius) {
+        playerPosY -= playerSpeed;
+    }
+    if (keyIsDown(DOWN_ARROW) && playerPosY < height - radius) {
+        playerPosY += playerSpeed;
+    }
+}
+
+async function Movementloop() {
+    window.addEventListener('booleanArrayUpdated', function (event) {
+        // event.detail contains the booleanArray
+        let booleanArray = event.detail;
+        // Use booleanArray here...
+
+        if (booleanArray[1]) {
+            playerPosX += playerSpeed;
+        }
+        if (booleanArray[3]) {
+            playerPosX -= playerSpeed;
+        }
+        if (booleanArray[2]) {
+            playerPosY += playerSpeed;
+        }
+        if (booleanArray[0]) {
+            playerPosY -= playerSpeed;
+        }
+    });
+}
+
+function shoot(directionX, directionY) {
+    shot = true;
+    hit = false;
+
+    if (!projectile) {
+        // Set the initial position of the projectile to the player's position
+        projectile = createVector(shotPosX, shotPosY);
+        targetX = directionX;
+        targetY = directionY;
+
+        // Calculate the initial direction
+        direction = createVector(targetX - projectile.x, targetY - projectile.y);
+        direction.normalize();
+    }
+
+    // Draw the small circle (projectile)
+    fill(255, 0, 0);
+    circle(projectile.x, projectile.y, projSize);
+
+    // Move the projectile towards the movable circle
+    projectile.add(p5.Vector.mult(direction, shotSpeed));
+
+    if (dist(projectile.x, projectile.y, directionX, directionY) <= radius+(projSize/2)) {
+        projectile = null;
+        hit = true;
+    }
+    else if (projectile.x < 0 - 10 || projectile.x > width + 10 || projectile.y < 0 - 10 || projectile.y > height + 10) {
+        bounceX = projectile.x;
+        bounceY = projectile.y;
+        projectile = null;
+        shot = false;
+    }
+}
+
+// the function draw() is called every frame
+function draw() {
+    shot = false;
+    textSize(10);
+    keyPressed();
+    life();
+    // draw background
+    myBullet.draw();
+    background(0, 0, 0, 100);
+    if (!(lives == 0)) {
+        // draw player
+        fill(0, 255, 255)
+        circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
+
+        // draw boss
+        fill(255, 165, 0)
+        circle(500, 100, 50);
+
+        score();
+        textAlign(LEFT);
+        text(time, 10, 20);
+
+        if (shot == false || hit == true) {
+            let patern = random([1]);
+            if (patern == 1) {
+                nextAttack = random([1, 2, 3, 4, 5]);
+                text(nextAttack, 30, 50);
+                if (nextAttack == 1) {
+                    shotPosX = 500;
+                    shotPosY = 100;
+                    shoot(playerPosX, playerPosY);
+                }
+                if (nextAttack == 2) {
+                    shotPosX = random(0, 1000);
+                    shotPosY = 600;
+                    shoot(playerPosX, playerPosY);
+                }
+                if (nextAttack == 3) {
+                    shotPosX = 0;
+                    shotPosY = random(0, 600);
+                    shoot(playerPosX, playerPosY);
+                }
+                if (nextAttack == 4) {
+                    shotPosX = 1000;
+                    shotPosY = random(0, 600);
+                    shoot(playerPosX, playerPosY);
+                }
+                if (nextAttack == 5) {
+                    shotPosX = bounceX;
+                    shotPosY = bounceY;
+                    shoot(playerPosX, playerPosY);
+                }
+            }
+            // if (patern == 2) {
+            //     shotPosX = bounceX;
+            //     shotPosY = bounceY;
+            //     shoot(playerPosX, playerPosY);
+            // }
+        }
+    }
+}