made game into a function and updated homescreen

web/game.js

@@ -44,7 +44,7 @@ let x4;
 let y4;
 let x5;
 let y5;
-let homescreenOn = false;
+let homescreenOn = true;
 let chosen = false;
 
 let bulletAmount = 20;
@@ -147,84 +147,13 @@ function draw() {
     // draw background
     //myBullet.draw();
     background(0, 0, 0, 100);
-    if (!(lives == 0)) {
-        // draw player
-        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);
-    }
-
 
     if (homescreenOn == true) {
         homescreen();
     }
+    if (homescreenOn == false) {
+        game();
+    }
 }
 
 async function randPatern () {
@@ -391,9 +320,20 @@ function homescreen() {
     // }
     // pop()
     button(0,0,0 ,width/2-90, height/2, 200, 40, "Start Game")
+    button(0,0,0 ,width/2-90, height/2+50, 200, 40, "Scores")
+
+    push()
+    stroke(255,0,0)
+    strokeWeight(5)
+    fill(0, 255, 0, 0)
+    rect(100, 150, 300, 400 , 20, 20, 20, 20)
+    pop()
+    
 
 }  
 
+
+
 function button(r, g, b, buttonX, buttonY, buttonWidth, buttonHeight, buttonText) {
     push()
     fill(255, 0, 0)
@@ -401,6 +341,7 @@ function button(r, g, b, buttonX, buttonY, buttonWidth, buttonHeight, buttonText
     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;
@@ -408,3 +349,80 @@ function button(r, g, b, buttonX, buttonY, buttonWidth, buttonHeight, buttonText
     }
     pop()
 }
+
+function game(){
+    if (!(lives == 0)) {
+        // draw player
+        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);
+    }
+
+}