Merge branch 'main' of ssh://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-2/cuujooceevii61

webdev/basicbullet.js

@@ -1,70 +1,66 @@
 class bullet {
-  //Een constructor voert eerst de code uit die er in staat voordat de rest van de class wordt uitgevoerd.
+  constructor(targetx, targety, radius, speed, shotPosX, shotPosY, hasMoved, angle) {  // Add hasMoved parameter
-  constructor(targetx, targety, radius, speed, angle) {
+      // add all incoming variables to the class
-    //"This" moet gebruikt worden om de variabelen aan te maken in de class en het zorgt er voor dat de variabelen niet alleen in de constructor gebruikt kunnen worden, 
+      this.angle = radians(angle);
-    //maar ook in de rest van de class
+      this.targetx = targetx;
-    this.angle = radians(angle);
+      this.targety = targety;
-    this.targetx = targetx;
+      this.x = shotPosX;
-    this.targety = targety;
+      this.y = shotPosY;
-    this.x = 500;
+      this.radius = radius;
-    this.y = 100;
+      this.speed = speed;
-    this.radius = 10;
+      this.bulletHit = false;
-    this.speed = 5;
+      this.directionX = null;
-
+      this.directionY = null;
-
+      this.hasMoved = hasMoved;
-    this.directionX = null;
+      // Set a variable that cant be changed
-    this.directionY = null;
+      if ((this.directionX === null) || (this.directionY === null)) {
-    if ((this.directionX === null) || (this.directionY === null)) {
+          this.directionX = this.targetx;
-      this.directionX = this.targetx;
+          this.directionY = this.targety;
-      this.directionY = this.targety;
+      }
-    }
+      // create a vector for the projectile and the direction
-
+      this.projectile = createVector(this.x, this.y);
-    this.projectile = createVector(600, 100);
+      this.direction = createVector(this.targetx - this.projectile.x, this.targety - this.projectile.y);
-    // Calculate the initial direction
+      this.direction.normalize();
-    this.direction = createVector(this.targetx - this.projectile.x, this.targety - this.projectile.y);
+      // rotate the direction towards the player
-    this.direction.normalize();
+      this.direction.rotate(this.angle);
-
-    this.direction.rotate(this.angle);
-
   }
 
-
-
-
   draw() {
-    //push en pop zorgen er voor dat de code tussen push en pop een eigen canvas heeft. Dus dat er meerdere projectielen tegelijk kunnen zijn.
+      //draw the bullet
-    push();
+      push();
-    fill(0, 255, 0);
+      fill(0, 255, 0);
-    circle(this.projectile.x, this.projectile.y, this.radius);
+      circle(this.projectile.x, this.projectile.y, this.radius);
-    pop();
+      pop();
-
-    // Set the initial position of the projectile to the player's position
-
-
-
-
-
   }
 
-  //   // Move the projectile towards the movable circle
   update(targetx, targety) {
-    this.targetx = targetx;
+      // keeps the projetile updated so hit collision can be checked
-    this.targety = targety;
+      this.targetx = targetx;
-    this.projectile.add(p5.Vector.mult(this.direction, this.speed));
+      this.targety = targety;
+      // update the projectile
+      this.projectile.add(p5.Vector.mult(this.direction, this.speed));
 
-    let hit = false;
+      let hit = false;
-    let shot = true;
+      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;
 
-    if (dist(this.projectile.x, this.projectile.y, this.targetx, this.targety) <= this.radius) {
+      // return all the variables
-      hit = true;
+      return { hit, shot, isOffScreen, originalPos };
-    }
-    else if (this.projectile.x < 0 - 10 || this.projectile.x > width + 10 || this.projectile.y < 0 - 10 || this.projectile.y > height + 10) {
-      bounceX = this.projectile.x;
-      bounceY = this.projectile.y;
-      shot = false;
-    }
-    return { hit, shot };
   }
-
-  
 }

webdev/game.js

@@ -1,137 +1,708 @@
-let port;
+//--------------------Game--------------------
-let reader;
+// Game variables
-const decoder = new TextDecoder("utf-8");
+const width = 1260;
-let readibleoutput = 0;
+const height = 620;
-let booleanArray = [];
+let requesteddata = [];	
-// Request a port and open a connection.
+// Menu variables
-async function connect() {
+let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
-    //vraag aan de browser om een serial port te selecteren
+let currentIndex = [0, 0, 0];
-    port = await navigator.serial.requestPort();
+let nameHS = '';
-    await port.open({ baudRate: 9600 });
+let pressed = false;
-    reader = port.readable.getReader();
+
-    console.log("Port is open!");
+// Player variables
-    readLoop()
+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 = 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 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()
+    createCanvas(width, height);
+    frameRate(framerate);
+    angleMode(DEGREES);
+    // disable the outline of shapes
+    Movementloop()
+    noStroke();
+    // bg = loadImage('background.webp');
 }
 
-// Read data from serial port
+function score() {
-async function readLoop() {
+    time += 3 / framerate;
-    let buffer = [];
+}
 
-    // loop until reader.cancel() is called
+function reset() {
-    while (true) {
+    lives = 1;
-        // Wait for data
+    time = 0;
-        const { value, done } = await reader.read();
+    bounceX = bossPosX;
+    bounceY = bossPosY;
+    initialPlayerPosX = playerPosX;
+    initialPlayerPosY = playerPosY;
+    hasMoved = false;
+    bullets = [];
+    shot = false;
+    chosen = false;
+    finalPhase = false;
+    isDead = false;
+    entered = false;
+    buttonSelectDead = 0;
+    submitted = false;
+    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);
 
-        for (let iByte = 0; iByte < value.length; iByte++) {
+        fill(255, 255, 255)
-            let singleByte = value[iByte];
+        textSize(18);
-            //functie maken er van met boolean!!!
+        textAlign(CENTER);
-            if (singleByte != 10) {
+        text("Score: " + int(time), width / 2, height / 2 - 55);
-                buffer.push(singleByte);
+
+        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() {
+    //check if the player has moved
+    if (playerPosX != initialPlayerPosX || playerPosY != initialPlayerPosY) {
+        hasMoved = true;
+    }
+}
+
+async function keyPressed() {
+    if (!isDead) {
+        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;
+        }
+    }
+    if (isDead && keyReleasedFlag && !entered) {
+        if ((!(iIndex > 2)) || (!(iIndex < 0))) {
+            if (keyCode == LEFT_ARROW) {
+                iIndex -= 1;
+                keyReleasedFlag = false;
             }
-            else {
+            if (keyCode == RIGHT_ARROW) {
-                let sensorString = decoder.decode(new Uint8Array(buffer));
+                iIndex += 1;
-                //Put all data in a json Array and parse it to a boolean array
+                keyReleasedFlag = false;
-                try {
-                    // Parse the incoming data as JSON
-                    // "replace(/'/g, '\"')" replaces all single quotes with double quotes with use of regular expressions. So we can use Jsonparse to parse it into a booleanArray
-                    let SerialArray = JSON.parse(sensorString.replace(/'/g, '"'));
-                    // Ensure SerialArray is an array
-                    if (Array.isArray(SerialArray)) {
-                        //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
-                        booleanArray = SerialArray.map(bit => bit == '1');
-                        console.log(booleanArray);
-                    } else {
-                        console.error("Dit is geen Array");
-                    }
-                } catch (e) {
-                    console.log("json niet geparserd");
-                }
-                Movementloop()
-                buffer = [];
             }
-            if (done) {
+        }
-                console.log('[readLoop] DONE', done);
+        if (keyCode == UP_ARROW) {
-                reader.releaseLock();
+            currentIndex[iIndex] = (currentIndex[iIndex] + 1) % letters.length;
-                break;
+            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) {
+        if (keyCode == UP_ARROW) {
+            buttonSelectDead -= 1;
+            keyReleasedFlag = false;
+        }
+        if (keyCode == DOWN_ARROW) {
+            buttonSelectDead += 1;
+            keyReleasedFlag = false;
+        }
+        if (buttonSelectDead == 0) {
+            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 (keyCode == ENTER) {
+                homescreenOn = true;
+                reset();
             }
         }
     }
-    
 }
-// Sluit de poort
-async function disconnect() {
-    await reader.cancel();
-    await port.close();
-    console.log("Port is closed!");
-}
-//--------------------Game--------------------
 
-let playerPosX = 500;
+function submit() {
-let playerPosY = 300;
+    if (entered == true) {
-let bullets = [];
+        sendData(nameHS, int(time));
-let playerSpeed = 5;
+        console.log(nameHS + ": " + int(time));
-let radius = 40;
+        nameHS = '';
-let hit = false;
+        submitted = true;
-let shot = true;
+    }
+}
+
+function keyReleased() {
+    keyReleasedFlag = true; // Set the flag to true when a key is released
+}
+
+function wait(waitTime) {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            resolve(true);
+        }, waitTime);
+    });
+}
+
 async function Movementloop() {
-if (booleanArray[1]) {
+    //get info from controller and use it to move the player
-    playerPosX += 2;}
+    window.addEventListener('booleanArrayUpdated', function (event) {
-if (booleanArray[3]) {
+        let booleanArray = event.detail;
-    playerPosX -= 2;}
-if (booleanArray[2]) {
-    playerPosY += 2;}
-if (booleanArray[0]) {
-    playerPosY -= 2;}
-}
-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;
-    }
-}
 
-
+        if (booleanArray[1]) {
-// the function setup() is called once when the page is loaded
+            playerPosX += playerSpeed;
-function setup(){
+        }
-    // create a canvas element and append it to the body
+        if (booleanArray[3]) {
-    createCanvas(1250, 600);    
+            playerPosX -= playerSpeed;
-    frameRate(244);
+        }
-    // disable the outline of shapes
+        if (booleanArray[2]) {
-    //declare the bullet with its variables
+            playerPosY += playerSpeed;
-    myBullet = new bullet(playerPosX, playerPosY, 10, 20);  
+        }
-
+        if (booleanArray[0]) {
-    noStroke();
+            playerPosY -= playerSpeed;
+        }
+    });
 }
 
 // the function draw() is called every frame
-function draw(){
+function draw() {
-    keyPressed()
+    keyPressed();
-    // clear the background with a transparent black color
+    gameOver();
-    background(0,0,0,100);
+    // draw background
-    //draw the bullet
+    background(0, 0, 0, 100);
-    myBullet.draw();
+
-    //update de variabel playerPosX en playerPosY en de terugkomende variabelen hit en shot
+    if (homescreenOn == true) {
-    let { hit, shot } = myBullet.update(playerPosX, playerPosY);
+        homescreen();
-    // draw a circle at the mouse position
-    circle(playerPosX, playerPosY, radius);
-    if (hit) {
-        console.log("player hit");
     }
-    if (!shot) {
+    if (homescreenOn == false) {
-        console.log("player shot");
+        game();
+    }
+    if (isDead == true) {
+        if (entered == true) {
+            if (buttonSelectDead == 0) {
+                push()
+                stroke(205, 205, 205)
+                strokeWeight(2)
+                fill(0, 0, 0, 0)
+                rect(width / 2 - 45, height / 2 - 30, 90, 40)
+                pop()
+            }
+            if (buttonSelectDead == 1) {
+                push()
+                stroke(205, 205, 205)
+                strokeWeight(2)
+                fill(0, 0, 0, 0)
+                rect(width / 2 - 55, height / 2 + 15, 110, 40)
+                pop()
+            }
+            if (buttonSelectDead == 2) {
+                push()
+                stroke(205, 205, 205)
+                strokeWeight(2)
+                fill(0, 0, 0, 0)
+                rect(width / 2 - 80, height / 2 + 60, 160, 40)
+                pop()
+            }
+        }
+        else {
+            if (iIndex == 0) {
+                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()
+            }
+        }
+    }
+}
+async function randPatern() {
+    patern = random(paternArray);
+    chosen = true;
+    if (patern == 1) {
+        await wait(3000);
+        chosen = false;
+    }
+    if (patern == 2) {
+        await wait(10000);
+        chosen = false;
+    }
+    if (patern == 3) {
+        await wait(1000);
+        chosen = false;
+    }
+    if (patern == 4) {
+        await wait(1000);
+        chosen = false;
+    }
+    if (patern == 5) {
+        if (phases[0] == true) {
+            nextWave = random([1, 2, 3, 4]);
+        }
+        await wait(3000);
+        chosen = false;
     }
 
-    
 }
-//test
+
-//test2
+function randomAttackPattern() {
+    if (shot == false || hit == true) {
+        for (i = 0; i < bulletAmount; i++) {
+            spawnRandomBullet()
+        }
+    }
+}
+
+function phase() {
+    switch (true) {
+        case (time < 20):
+            phases[0] = true;
+            paternArray = [1,2,3,4,5];
+            shotSpeedAdj = 2;
+            push();
+            fill(255, 0, 255);
+            textSize(10);
+            textAlign(LEFT);
+            text("phase 1", 10, 50);
+            pop();
+            break;
+        case (time < 60):
+            shotSpeedAdj = 5;
+            paternArray = [5];
+            phases[0] = false;
+            phases[1] = true;
+            push();
+            fill(255, 0, 255);
+            textSize(10);
+            textAlign(LEFT);
+            text("phase 2", 10, 50);
+            pop();
+            break;
+        case (time < 90):
+            phases[1] = false;
+            phases[2] = true;
+            paternArray = [2];
+            push();
+            fill(255, 0, 255);
+            textSize(10);
+            textAlign(LEFT);
+            text("phase 3", 10, 50);
+            pop();
+            break;
+        case (time < 120):
+            phases[2] = false;
+            phases[3] = true;
+            paternArray = [3, 4];
+            push();
+            fill(255, 0, 255);
+            textSize(10);
+            textAlign(LEFT);
+            text("phase 4", 10, 50);
+            pop();
+            break;
+        case (time >= 120):
+            phases[3] = false;
+            phases[4] = false;
+            finalPhase = true;
+            paternArray = [1, 2, 3, 4, 5];
+            push();
+            fill(255, 0, 255);
+            textSize(10);
+            textAlign(LEFT);
+            text("phase 5", 10, 50);
+            pop();
+            break;
+    }
+}
+
+function spawnRandomBullet() {
+    if (chosen == false) {
+        randPatern();
+    }
+
+    if (patern == 1) {
+        let nextAttack = random([1, 2, 3, 4, 5]);
+        //text(nextAttack, 30, 50);
+        if (nextAttack == 1) {
+            shotPosX = bossPosX;
+            shotPosY = bossPosY;
+            bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
+        }
+        if (nextAttack == 2) {
+            shotPosX = random(0, width);
+            shotPosY = height;
+            bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
+        }
+        if (nextAttack == 3) {
+            shotPosX = 0;
+            shotPosY = random(0, height);
+            bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
+        }
+        if (nextAttack == 4) {
+            shotPosX = width;
+            shotPosY = random(0, height);
+            bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
+        }
+        if (nextAttack == 5) {
+            shotPosX = random(0, width);
+            shotPosY = 0;
+            bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
+        }
+    }
+    if (patern == 2) {
+        let suroundChoice = random([1, 2, 3, 4]);
+        if (suroundChoice == 1) {
+            shotPosX = x2;
+            shotPosY = y2;
+        } if (suroundChoice == 2) {
+            shotPosX = x3;
+            shotPosY = y3;
+        } if (suroundChoice == 3) {
+            shotPosX = x4;
+            shotPosY = y4;
+        } if (suroundChoice == 4) {
+            shotPosX = x5;
+            shotPosY = y5;
+        }
+        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;
+        angle = 0;
+        // changing the angle of the bullets
+        for (let i = 0; i < 86; i++) {
+            setTimeout(function () {
+                bullets.push(new bullet(0, 100, radius, shotSpeed / 4, shotPosX, shotPosY, hasMoved, angle));
+                angle -= 360 / 1;
+            }, i * 100);
+        }
+        angle = 0;
+    }
+    if (patern == 4) {
+        shotPosX = bossPosX;
+        shotPosY = bossPosY;
+        angle = 0;
+        // changing the angle of the bullets
+        for (let i = 0; i < 86; i++) {
+            bullets.push(new bullet(0, 100, radius, shotSpeed / 4, shotPosX, shotPosY, hasMoved, angle));
+            angle -= 360 / 3;
+        }
+        angle = 0;
+    }
+    if (patern == 5) {
+        if (phases[0] == false) {
+            nextWave = random([1, 2, 3, 4]);
+            bulletAmount = 10;
+        }
+        if (nextWave == 1) {
+            for (let i = 0; i < random(8, 15); i++) {
+                let shotWidth = random(0, width);
+                shotPosX = shotWidth;
+                shotPosY = height;
+                bullets.push(new bullet(shotWidth, 0, radius, shotSpeed / shotSpeedAdj, shotPosX, shotPosY, hasMoved, angle));
+            }
+        }
+        if (nextWave == 2) {
+            for (let i = 0; i < random(8, 10); i++) {
+                let shotWidth = random(0, width);
+                shotPosX = shotWidth;
+                shotPosY = 0;
+                bullets.push(new bullet(shotWidth, height, radius, shotSpeed / shotSpeedAdj, shotPosX, shotPosY, hasMoved, angle));
+            }
+        }
+        if (nextWave == 3) {
+            for (let i = 0; i < random(8, 10); i++) {
+                let shotHeight = random(0, width);
+                shotPosX = 0;
+                shotPosY = shotHeight;
+                bullets.push(new bullet(width, shotHeight, radius, shotSpeed / shotSpeedAdj, shotPosX, shotPosY, hasMoved, angle));
+            }
+        }
+        if (nextWave == 4) {
+            for (let i = 0; i < random(8, 10); i++) {
+                let shotHeight = random(0, width);
+                shotPosX = width;
+                shotPosY = shotHeight;
+                bullets.push(new bullet(0, shotHeight, radius, shotSpeed / shotSpeedAdj, shotPosX, shotPosY, hasMoved, angle));
+            }
+        }
+
+    } else {
+        bulletAmount = 5;
+    }
+}
+
+
+function homescreen() {
+    textAlign(CENTER);
+    button(255, 255, 255, width / 2 - 90, height / 2, 200, 40, "Start Game")
+    button(255, 255, 255, width / 2 - 90, height / 2 + 50, 200, 40, "Scores")
+    
+    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()
+
+    push()
+    stroke(255, 255, 255)
+    strokeWeight(5)
+    fill(0, 255, 0, 0)
+    rect(860, 150, 300, 400)
+    pop()
+
+    push()
+    textSize(50)
+    fill(255, 255, 255)
+    text("Controls", 1000, 200)
+    pop()
+}
+
+
+
+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();
+        push();
+        fill(0, 255, 255)
+        circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
+        pop();
+        movementCheck()
+        // draw boss
+        push();
+        fill(255, 165, 0)
+        circle(x2, y2, 50);
+        pop();
+        if (hasMoved == true) {
+            push();
+            score();
+            textSize(10);
+            textAlign(LEFT);
+            fill(255, 0, 255)
+            text(int(time), 10, 20);
+            pop();
+        }
+        if (hasMoved == false) {
+            time = 0;
+            push();
+            score();
+            textSize(10);
+            textAlign(LEFT);
+            fill(255, 0, 255)
+            text(0, 10, 20);
+            pop();
+        }
+
+
+        randomAttackPattern()
+        if (patern == 2) {
+            suroundX += 2;
+            suroundY += 2;
+            let sinX = sin(suroundX);
+            let cosY = cos(suroundY);
+            x2 = map(sinX, -1, 1, playerPosX - 200, playerPosX + 200);
+            y2 = map(cosY, -1, 1, playerPosY - 200, playerPosY + 200);
+            x3 = map(-sinX, -1, 1, playerPosX - 200, playerPosX + 200);
+            y3 = map(-cosY, -1, 1, playerPosY - 200, playerPosY + 200);
+            x4 = map(-sinX, -1, 1, playerPosX - 100, playerPosX + 100);
+            y4 = map(cosY, -1, 1, playerPosY - 100, playerPosY + 100);
+            x5 = map(sinX, -1, 1, playerPosX - 100, playerPosX + 100);
+            y5 = map(-cosY, -1, 1, playerPosY - 100, playerPosY + 100);
+            push();
+            fill(255, 165, 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

@@ -8,10 +8,8 @@
     <!-- 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="Serial.js"></script>
     <script src="basicbullet.js"></script>
     <script src="game.js"></script>
-    <script src="sqltest.js"></script>
 </head>
 <body>