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

web/js/Menu.js

@@ -1,23 +1,15 @@
-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() {
+    homescreen() {
-    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.button(255, 255, 255, width / 2, height / 2, "Start Game")
-    button(255, 255, 255, width / 2, height / 2 + height / 12, "Scores")
+        button.button(255, 255, 255, width / 2, height / 2 + height / 12, "Scores")
 
         push()
         fill(255, 255, 255)
@@ -50,19 +42,7 @@ function homescreen() {
         pop()
     }
 
-function button(r, g, b, buttonX, buttonY, buttonText) {
+    pauseMenu() {
-    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);
@@ -71,7 +51,7 @@ function pauseMenu() {
         button(255, 255, 255, width / 2, height / 2 + height / 12, "Main Menu");
     }
 
-function scoremenu() {
+    scoreMenu() {
         textAlign(CENTER, CENTER);
         textSize(50);
         fill(255, 255, 255);
@@ -97,7 +77,7 @@ function scoremenu() {
             rect(width / 2, height / 3, 90, 40)
             pop()
             if (!dataIsCalled) {
-            getData(nameHS);
+                DB.getData(nameHS);
                 dataIsCalled = true;
             }
         }
@@ -139,11 +119,11 @@ function scoremenu() {
         pop()
 
         push()
-    button(255, 255, 255, width / 2, height / 2, "Main Menu")
+        button.button(255, 255, 255, width / 2, height / 2, "Main Menu")
         pop()
     }
 
-function gameOver() {
+    gameOver() {
         if (lives <= 0) {
             //game over screen
             iIndex = constrain(iIndex, 0, 2);
@@ -173,7 +153,7 @@ function gameOver() {
     }
 
 
-function dodgeBanner(){
+    dodgeBanner() {
         push()
         fill(255, 0, 0)
         textSize(100)
@@ -181,3 +161,4 @@ function dodgeBanner(){
         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;