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:
- 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
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
@@ -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.

47
web/game.js
View File

@@ -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() {
textAlign(CENTER);
function gameOver() {
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() {

19
web/js/basicbullet.js
View File

@@ -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 };
}
}