From df4ae6f1af20809724051bc3e8ee5a5968527738 Mon Sep 17 00:00:00 2001 From: sam Date: Tue, 12 Dec 2023 15:42:09 +0100 Subject: [PATCH 1/7] Added letter selector thats still broken --- web/game.js | 44 +++++++++++++++++++++++++++++++++++++++----- 1 file changed, 39 insertions(+), 5 deletions(-) diff --git a/web/game.js b/web/game.js index 6ae021b..3f169cb 100644 --- a/web/game.js +++ b/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; @@ -67,15 +73,22 @@ function score() { time += 3 / framerate; } -function life() { - textAlign(CENTER); +function gameOver() { + if (lives == 0) { + 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 == ' ') { lives = 1; time = 0; @@ -98,7 +111,12 @@ function movementCheck() { } } +function keyDown() { + +} + async function keyPressed() { + if (!isDead) { if (keyIsDown(LEFT_ARROW) && playerPosX > 0 + radius) { playerPosX -= playerSpeed; } @@ -112,6 +130,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(() => { @@ -144,7 +177,7 @@ async function Movementloop() { // the function draw() is called every frame function draw() { keyPressed(); - life(); + gameOver(); phase(); // draw background //myBullet.draw(); @@ -156,6 +189,7 @@ function draw() { if (homescreenOn == false) { game(); } + keyDown(); } async function randPatern() { From bd303476b318914ac7c8f2ddb31ab150282f3aa5 Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 12 Dec 2023 21:12:36 +0100 Subject: [PATCH 2/7] Fixed respawn bug not able to move --- web/game.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/game.js b/web/game.js index ffd1756..708f7d4 100644 --- a/web/game.js +++ b/web/game.js @@ -102,6 +102,7 @@ function gameOver() { shot = false; chosen = false; finalPhase = false; + isDead = false; } } From a4419f8e2f33aab965bfd1c4df35f575e66c0ae9 Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 12 Dec 2023 21:20:37 +0100 Subject: [PATCH 3/7] Added documentation about feedback --- docs/brainstorm/task flow.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/brainstorm/task flow.md b/docs/brainstorm/task flow.md index 1c3839e..d1b8942 100644 --- a/docs/brainstorm/task flow.md +++ b/docs/brainstorm/task flow.md @@ -47,9 +47,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 +70,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. \ No newline at end of file From 05312dc49028158a37d3558a877354c99f005851 Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 12 Dec 2023 21:25:57 +0100 Subject: [PATCH 4/7] changed image --- .gitlab-ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index d46467f..62130e0 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -1,4 +1,4 @@ -image: python:3.9-slim +image: python:slim before_script: - time apt update From 7c0e90886ce821f7121b8139a3522c4ff6af4ceb Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 12 Dec 2023 21:29:56 +0100 Subject: [PATCH 5/7] cleanup documentation --- docs/brainstorm/task flow.md | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/docs/brainstorm/task flow.md b/docs/brainstorm/task flow.md index d1b8942..c30d2f2 100644 --- a/docs/brainstorm/task flow.md +++ b/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 -Bekijk top highscores -> pas settings aan -> druk start -> speel spel -> ga dood -> voer naam in voor highscores -> repeat - -Taskflow game spelen +### 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 - -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 +### Taskflow studiekiezer ```mermaid flowchart TD From fbe19ba35e77cfd498fc7424615701d0164a555f Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 12 Dec 2023 21:41:18 +0100 Subject: [PATCH 6/7] Added documentation and cleaned up code --- web/js/basicbullet.js | 111 +++++++++++++++++++++++------------------- 1 file changed, 60 insertions(+), 51 deletions(-) diff --git a/web/js/basicbullet.js b/web/js/basicbullet.js index 1ba2506..320cc5f 100644 --- a/web/js/basicbullet.js +++ b/web/js/basicbullet.js @@ -1,57 +1,66 @@ class bullet { - constructor(targetx, targety, radius, speed, shotPosX, shotPosY, hasMoved, angle) { // Add hasMoved parameter - this.angle = radians(angle); - this.targetx = targetx; - this.targety = targety; - this.x = shotPosX; - this.y = shotPosY; - this.radius = radius; - this.speed = speed; - this.bulletHit = false; - this.directionX = null; - this.directionY = null; - 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 + 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; + this.x = shotPosX; + this.y = shotPosY; + this.radius = radius; + this.speed = speed; + 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; + } + // 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); + } - this.projectile = createVector(this.x, this.y); - this.direction = createVector(this.targetx - this.projectile.x, this.targety - this.projectile.y); - this.direction.normalize(); + draw() { + //draw the bullet + push(); + fill(0, 255, 0); + circle(this.projectile.x, this.projectile.y, this.radius); + pop(); + } - this.direction.rotate(this.angle); - } + 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)); - draw() { - push(); - fill(0, 255, 0); - circle(this.projectile.x, this.projectile.y, this.radius); - pop(); - } + 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; - update(targetx, targety) { - this.targetx = targetx; - this.targety = targety; - this.projectile.add(p5.Vector.mult(this.direction, this.speed)); - - let hit = false; - let shot = true; - - if (dist(this.projectile.x, this.projectile.y, this.targetx, this.targety) <= this.radius) { - hit = true; - shot = false; - if (this.hasMoved && lives != 0 && this.bulletHit == false) { - this.bulletHit = true; - lives -= 1; - } - } else if (this.projectile.x < 0 - 10 || this.projectile.x > width + 10 || this.projectile.y < 0 - 10 || this.projectile.y > height + 10) { - shot = false; - } - let isOffScreen = this.projectile.x < 0 || this.projectile.x > width || this.projectile.y < 0 || this.projectile.y > height; - let originalPos = this.projectile.x == this.targetx || this.projectile.y == this.targety; - - - return { hit, shot, isOffScreen, originalPos}; - } + // return all the variables + return { hit, shot, isOffScreen, originalPos }; + } } \ No newline at end of file From a0c916cafecad074cfd12cd744005cbfd3a8e3da Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 12 Dec 2023 21:45:19 +0100 Subject: [PATCH 7/7] cleaned up code and added documentation --- web/game.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/web/game.js b/web/game.js index 708f7d4..6267eea 100644 --- a/web/game.js +++ b/web/game.js @@ -75,8 +75,8 @@ function score() { } function gameOver() { - if (lives == 0) { + //game over screen isDead = true; push(); fill(255, 0, 0); @@ -91,6 +91,7 @@ function gameOver() { pop(); if (key == ' ') { + //reset all the variables so the game can be played again lives = 1; time = 0; bounceX = bossPosX; @@ -105,19 +106,15 @@ function gameOver() { isDead = false; } } - } function movementCheck() { + //check if the player has moved if (playerPosX != initialPlayerPosX || playerPosY != initialPlayerPosY) { hasMoved = true; } } -function keyDown() { - -} - async function keyPressed() { if (!isDead) { if (keyIsDown(LEFT_ARROW) && playerPosX > 0 + radius) { @@ -157,10 +154,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;