Smikkelbakje/J1B2-Game-controller
1
0
Fork 0
Code Issues 29 Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mees Roelofsz
2023-12-13 12:51:52 +01:00
parent 0a586aa9b0 a0c916cafe
commit dbfad644a0
4 changed files with 109 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitlab-ci.yml
View File

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

20
docs/brainstorm/task flow.md
View File

@@ -9,12 +9,7 @@ De manier dat je naar een andere pagina gaat.
### Taskflow ### Taskflow
Een flow van hoe je pagina werkt in woorden. 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 ```mermaid
flowchart TD flowchart TD
A(Main menu) --> B(Scores) A(Main menu) --> B(Scores)
@@ -29,9 +24,7 @@ flowchart TD
I --> |Terug naar main menu|A 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 ```mermaid
flowchart TD flowchart TD
@@ -47,9 +40,11 @@ flowchart TD
H --> |Ja| I(Studie gekozen) H --> |Ja| I(Studie gekozen)
H --> |Nee| J 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 ### 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: #### Persoon 1:
* De boss schiet en de speler moet ontwijken * 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 #### Persoon: 3
* Boss schiet terug * Boss schiet terug
* Boss killen * 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.

47
web/game.js
View File

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

111
web/js/basicbullet.js
View File

@@ -1,57 +1,66 @@
class bullet { class bullet {
constructor(targetx, targety, radius, speed, shotPosX, shotPosY, hasMoved, angle) { // Add hasMoved parameter constructor(targetx, targety, radius, speed, shotPosX, shotPosY, hasMoved, angle) { // Add hasMoved parameter
this.angle = radians(angle); // add all incoming variables to the class
this.targetx = targetx; this.angle = radians(angle);
this.targety = targety; this.targetx = targetx;
this.x = shotPosX; this.targety = targety;
this.y = shotPosY; this.x = shotPosX;
this.radius = radius; this.y = shotPosY;
this.speed = speed; this.radius = radius;
this.bulletHit = false; this.speed = speed;
this.directionX = null; this.bulletHit = false;
this.directionY = null; this.directionX = null;
if ((this.directionX === null) || (this.directionY === null)) { this.directionY = null;
this.directionX = this.targetx; this.hasMoved = hasMoved;
this.directionY = this.targety; // Set a variable that cant be changed
} if ((this.directionX === null) || (this.directionY === null)) {
this.hasMoved = hasMoved; // Set this.hasMoved to the value of hasMoved 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); draw() {
this.direction = createVector(this.targetx - this.projectile.x, this.targety - this.projectile.y); //draw the bullet
this.direction.normalize(); 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() { let hit = false;
push(); let shot = true;
fill(0, 255, 0); // check if the projectile has hit the player
circle(this.projectile.x, this.projectile.y, this.radius); if (dist(this.projectile.x, this.projectile.y, this.targetx, this.targety) <= this.radius) {
pop(); 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) { // return all the variables
this.targetx = targetx; return { hit, shot, isOffScreen, originalPos };
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};
}
} }