coverted database interactions and menu to classes

web/game.js

@@ -1,7 +1,11 @@
+function preload() {
+    controlsImage = loadImage('./contols.png');
+}
+
 // 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);
@@ -25,13 +29,16 @@ function reset() {
     isDead = false;
     entered = false;
     buttonSelect = 0;
-
+    nameHS = '';
     submitted = false;
     escaped = false;
     bossPosX = width / 2;
     bossPosY = height / 6;
     bossVelX = 5;
     bossVelY = 5;
+    dataIsCalled = false;
+    DB.getData();
+
 }
 
 function movementCheck() {
@@ -79,7 +86,7 @@ async function keyPressed() {
                 homescreenOn = true;
                 reset();
                 keyReleasedFlag = false;
-                getData()
+                DB.getData()
                 return;
             }
         }
@@ -169,10 +176,11 @@ async function keyPressed() {
             }
         }
     }
+
 }
 function submit() {
     if (entered == true) {
-        sendData(nameHS, int(time));
+        DB.sendData(nameHS, int(time));
         console.log(nameHS + ": " + int(time));
         nameHS = '';
         submitted = true;
@@ -255,7 +263,7 @@ function nameDraw(positiony) {
 // the function draw() is called every frame
 function draw() {
     keyPressed();
-    gameOver();
+    Menus.gameOver();
     // draw background
     background(0, 0, 0, 100);
     ffps = frameRate();
@@ -263,7 +271,7 @@ function draw() {
     playerSpeed = 300 / ffps;
 
     if (homescreenOn) {
-        homescreen();
+        Menus.homescreen();
         buttonSelect = constrain(buttonSelect, 0, 1);
         if (buttonSelect == 0) {
             push()
@@ -286,7 +294,7 @@ function draw() {
         game();
     }
     if (scorescreenOn) {
-        scoremenu();
+        Menus.scoreMenu();
         buttonSelect = constrain(buttonSelect, 0, 1);
         if (buttonSelect == 1 && entered) {
             push()
@@ -298,7 +306,7 @@ function draw() {
         }
     }
     if (pausescreenOn) {
-        pauseMenu();
+        Menus.pauseMenu();
         buttonSelect = constrain(buttonSelect, 0, 1);
         if (buttonSelect == 0) {
             push()
@@ -353,7 +361,7 @@ function draw() {
     }
 
     if (!hasMoved && !isDead && !homescreenOn && !pausescreenOn && !scorescreenOn) {
-        dodgeBanner();
+        Menus.dodgeBanner();
     }
 }
 async function randPatern() {

web/index.html

@@ -15,10 +15,11 @@
     <!-- 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="js/variables.js"></script>
     <script src="js/basicbullet.js"></script>
-    <script src="js/Database.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>
 

web/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()
+        
+    }
+}

web/js/Database.js

@@ -1,15 +1,19 @@
+class database{
+    sendData(naam, score) {
+        fetch(`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`)
+    }
 
-function sendData(naam, score) {
+    getData(name) {
-    fetch (`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`)
+        // 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
+            .then(response => response.json())
+            .then(data => {
+                requesteddata = data;
+                console.log(data);
+            });
+    }
 }
 
-function getData(name){
+
-    // 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
-    .then(response => response.json())
-    .then(data => {
-        requesteddata = data;
-        console.log(data);
-    });
-}

web/js/Menu.js

@@ -1,183 +1,164 @@
-let searchName = '';
+class Menu {
-let dataIsCalled = false;
+    constructor() {
-let clearDataOnce = false;
-function keyPressed() {
-    // Check if the back button was selected and the Enter key was pressed
-
-}
-
-function preload() {
-    controlsImage = loadImage('./contols.png');
-}
-
-function homescreen() {
-    textAlign(CENTER, CENTER);
-    textSize(70);
-    fill(100, 255, 100);
-    text("Slime\nSymphony", width / 2, height / 4);
-
-    button(255, 255, 255, width / 2, height / 2, "Start Game")
-    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()
-}
-
-function 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()
-}
-
-function 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");
-}
-
-function 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) {
+    homescreen() {
-        nameSubmit();
+        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")
 
-    if (entered) {
         push()
-        stroke(205, 205, 205)
+        fill(255, 255, 255)
-        strokeWeight(2)
+        textSize(25)
-        fill(0, 0, 0, 0)
+        textAlign(CENTER, CENTER)
-        rect(width / 2, height / 3, 90, 40)
+        for (let i = 0; i < requesteddata.length; i++) {
+            text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, width / 5, height / 3 + (i * 30))
+        }
         pop()
-        if (!dataIsCalled) {
+
-            getData(nameHS);
+        //Scores rectangle
-            dataIsCalled = true;
+        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();
         }
     }
-    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(255, 255, 255, width / 2, height / 2, "Main Menu")
-    pop()
-}
-
-function 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);
+    dodgeBanner() {
-
+        push()
-        text("Main Menu", width / 2, height / 2 + height / 6);
+        fill(255, 0, 0)
-        pop();
+        textSize(100)
+        textAlign(CENTER, CENTER)
+        text("Dodge!", width / 2, height / 2)
+        pop()
     }
 }
-
-
-function dodgeBanner(){
-    push()
-    fill(255, 0, 0)
-    textSize(100)
-    textAlign(CENTER, CENTER)
-    text("Dodge!", width / 2, height / 2)
-    pop()
-}

web/js/variables.js

@@ -1,4 +1,8 @@
 //--------------------Game--------------------
+// Classes
+const Menus = new Menu();
+const button = new Button();
+const DB = new database();
 // Game variables
 const width = window.innerWidth;
 const height = window.innerHeight;
@@ -10,7 +14,9 @@ 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;