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

.gitlab-ci.yml

@@ -1,4 +1,4 @@
-image: python:3.9-slim
+image: python:slim
 
 before_script:
   - time apt update

docs/brainstorm/task flow.md

@@ -9,12 +9,7 @@ De manier dat je naar een andere pagina gaat.
 ### Taskflow
 Een flow van hoe je pagina werkt in woorden.
 
-
+### Taskflow game spelen
-
-#### Taskflow
-Bekijk top highscores -> pas settings aan -> druk start -> speel spel -> ga dood -> voer naam in voor highscores -> repeat
-
-Taskflow game spelen
 ```mermaid 
 flowchart TD
     A(Main menu) --> B(Scores)
@@ -29,9 +24,7 @@ flowchart TD
     I --> |Terug naar main menu|A
 ```
 
-Taskflow studiekiezer
+### Taskflow studiekiezer
-
-komt binnen --> kijkt rond --> loop naar wat opvalt en wat het persoon intereseert --> stelt mischien vragen --> kijkt en interacteerd met de demonstratie --> vormt een mening over de studie --> bepaalt of hij de studie wat vind en het wilt kiezen
 
 ```mermaid
 flowchart TD
@@ -47,9 +40,11 @@ flowchart TD
     H --> |Ja| I(Studie gekozen)
     H --> |Nee| J
 ```
+### Hoe hebben we feedback gevraagd?
+We hebben feedback gevraagd door middel van een wireframe en een taskflow. We hebben dit aan 3 personen gevraagd. We hebben de feedback gevraagd door middel van een interview. We hebben de feedback verwerkt in de wireframe en taskflow.
 
 ### Wireframe feedback
-Vraag: Wat denk je dat je moet doen en welke functies verwacht je in het spel?
+Vraag: Wat denk je dat je moet doen en welke functies verwacht je van de website.
 
 #### Persoon 1:
 * De boss schiet en de speler moet ontwijken 
@@ -68,4 +63,7 @@ Vraag: Wat denk je dat je moet doen en welke functies verwacht je in het spel?
 #### Persoon: 3
 * Boss schiet terug
 * Boss killen
-* Inloggen met eigen account 
+* Inloggen met eigen account op de website
+
+### Wat heeft dit onderzoek bijgedragen aan het project?
+We hebben nieuwe ideeën en inzichten over hoe we het spel kunnen maken. Nieuwe functies en potentiele onduidelijkheden zijn er naar boven gehaald waar we aan kunnen werken om het spel beter te maken. We hebben ook een beter inzicht over hoe de speler het spel ziet en wat die denkt dat ie moet doen. We gaan beivoorbeeld teksten laten zien in het spel waardoor het duidelijker word wat je moet doen. Ook hebben we bedacht dat de boss langzaam doodgaat zodat er een sorot van progression is.

web/game.js

@@ -3,6 +3,12 @@
 const width = 1260;
 const height = 620;
 
+// Menu variables
+let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+let currentIndex = 0;
+let name = '';
+let pressed = false;
+
 // Player variables
 const playerSize = 10;
 let radius = playerSize / 2;
@@ -11,7 +17,7 @@ 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;
@@ -69,16 +75,24 @@ function score() {
     time += 3 / framerate;
 }
 
-function life() {
+function gameOver() {
-    textAlign(CENTER);
     if (lives == 0) {
+        //game over screen
+        isDead = true;
         push();
         fill(255, 0, 0);
         textSize(40);
         textAlign(CENTER);
-        text("Game Over", width / 2, height / 2);
+        text("Game Over", width / 2, height / 2 - 80);
         pop();
+        push();
+        fill(255,255,255)
+        textSize(32);
+        text(letters[currentIndex], width / 2, height / 2);
+        pop();
+
         if (key == ' ') {
+            //reset all the variables so the game can be played again
             lives = 1;
             time = 0;
             bounceX = bossPosX;
@@ -90,18 +104,20 @@ function life() {
             shot = false;
             chosen = false;
             finalPhase = false;
+            isDead = false;
         }
     }
-
 }
 
 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;
     }
@@ -115,6 +131,21 @@ async function keyPressed() {
         playerPosY += playerSpeed;
     }
 }
+    if (isDead) {
+        if (keyCode === UP_ARROW) {
+            currentIndex = (currentIndex + 1) % letters.length;
+        } 
+        if (keyCode === DOWN_ARROW) {
+            currentIndex = (currentIndex - 1 + letters.length) % letters.length;
+        }  
+        if (keyCode === ENTER) {
+            name += letters[currentIndex];
+            console.log(name);
+        }
+
+}
+}
+
 function wait(waitTime) {
     return new Promise(resolve => {
         setTimeout(() => {
@@ -124,10 +155,9 @@ function wait(waitTime) {
 }
 
 async function Movementloop() {
+    //get info from controller and use it to move the player
     window.addEventListener('booleanArrayUpdated', function (event) {
-        // event.detail contains the booleanArray
         let booleanArray = event.detail;
-        // Use booleanArray here...
 
         if (booleanArray[1]) {
             playerPosX += playerSpeed;
@@ -147,7 +177,7 @@ async function Movementloop() {
 // the function draw() is called every frame
 function draw() {
     keyPressed();
-    life();
+    gameOver();
     phase();
     // draw background
     //myBullet.draw();
@@ -159,6 +189,7 @@ function draw() {
     if (homescreenOn == false) {
         game();
     }
+    keyDown();
 }
 
 async function randPatern() {

web/js/basicbullet.js

@@ -1,5 +1,6 @@
 class bullet {
     constructor(targetx, targety, radius, speed, shotPosX, shotPosY, hasMoved, angle) {  // Add hasMoved parameter
+        // add all incoming variables to the class
         this.angle = radians(angle);
         this.targetx = targetx;
         this.targety = targety;
@@ -10,20 +11,22 @@ class bullet {
         this.bulletHit = false;
         this.directionX = null;
         this.directionY = null;
+        this.hasMoved = hasMoved;
+        // Set a variable that cant be changed
         if ((this.directionX === null) || (this.directionY === null)) {
             this.directionX = this.targetx;
             this.directionY = this.targety;
         }
-      this.hasMoved = hasMoved;  // Set this.hasMoved to the value of hasMoved
+        // create a vector for the projectile and the direction
-
         this.projectile = createVector(this.x, this.y);
         this.direction = createVector(this.targetx - this.projectile.x, this.targety - this.projectile.y);
         this.direction.normalize();
-
+        // rotate the direction towards the player
         this.direction.rotate(this.angle);
     }
 
     draw() {
+        //draw the bullet
         push();
         fill(0, 255, 0);
         circle(this.projectile.x, this.projectile.y, this.radius);
@@ -31,27 +34,33 @@ class bullet {
     }
 
     update(targetx, targety) {
+        // keeps the projetile updated so hit collision can be checked
         this.targetx = targetx;
         this.targety = targety;
+        // update the projectile
         this.projectile.add(p5.Vector.mult(this.direction, this.speed));
 
         let hit = false;
         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;
 
-
+        // return all the variables
-      return { hit, shot, isOffScreen, originalPos};
+        return { hit, shot, isOffScreen, originalPos };
     }
 }