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

docs/documentatie/User Interface.md

@@ -3,8 +3,9 @@
 Voor de user interface hebben wij gekozen voor een arcade thema. Hiervoor maken we gebruik van rechte hoeken, neon kleuren en wat trademarks van arcade games zoals 3 letter namen en een highscore lijst.
 
 ## kleuren
-
-
+De kleuren die we gebruiken zijn felle kleuren op een donkere achtergrond, dit heeft 2 redenen: het is makkelijker voor de ogen en het past bij het arcade thema.
 
 ## positionering
-door gebruik te maken van rectMode center kunnen we gebruik maken van dingen als width/4 zodat het op alle schermgroottes mogelijk is.
+Door gebruik te maken van rectMode(CENTER) en textAllign(CENTER, CENTER) kunnen we de positionering doen gebaseerd op de width en length van het scherm. Hierdoor is de UI semi-responsive en kan het op elke scherm grootte goed worden weergegeven. 
+
+## 

web/game.js

@@ -631,16 +631,16 @@ function bouncing() {
     bossPosY += bossVelY;
     // Check for bounce
     if (bossPosX > width - 25) {
-        bossVelX = random([-4,-5,-6]);
+        bossVelX = random([-4, -5, -6]);
     }
     if (bossPosX < 25) {
-        bossVelX = random([4,5,6]);
+        bossVelX = random([4, 5, 6]);
     }
     if (bossPosY > height - 25) {
-        bossVelY = random([-4,-5,-6]);
+        bossVelY = random([-4, -5, -6]);
     }
     if (bossPosY < 25) {
-        bossVelY = random([4,5,6]);
+        bossVelY = random([4, 5, 6]);
     }
 
     // Draw the boss
@@ -660,19 +660,19 @@ function game() {
         circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
         pop();
         movementCheck();
+
+
+        push();
+        fill(0, 255, 0);
         if (phases[2] == false || phase[3] == false) {
             bouncing();
         } else if (phases[2] = true) {
             bossPosX = x2;
             bossPosY = y2;
-        } else{
+        } else {
             bossPosX = width / 2;
             bossPosY = height / 6;
         }
-
-        push();
-        fill(255, 165, 0)
-
         pop();
         if (hasMoved == true) {
             push();
@@ -712,7 +712,7 @@ 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);

web/js/Menu.js

@@ -15,7 +15,11 @@ function preload() {
 }
 
 function homescreen() {
-    textAlign(CENTER);
+    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")
 
@@ -58,8 +62,7 @@ function button(r, g, b, buttonX, buttonY, buttonText) {
     textSize(25)
     fill(r, g, b)
     textAlign(CENTER);
-    text(buttonText, buttonX, buttonY + buttonHeight / 4)
-
+    text(buttonText, buttonX, buttonY)
     pop()
 }