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

made game ready for presentation and cloned a version with changed phase durations for presentation

Browse Source
This commit is contained in:
Sam
2024-01-23 22:25:48 +01:00
parent b606b2a0d6
commit 09530eac15
14 changed files with 880 additions and 394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/game.js
View File

@@ -113,7 +113,7 @@ async function keyPressed() {
if (keyCode == ENTER) {
homescreenOn = false;
scorescreenOn = true;
reset();
requesteddata = [];
keyReleasedFlag = false;
}
}

4
web/js/Database.js
View File

@@ -3,10 +3,10 @@ class database{
fetch(`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`)
}
getData(name) {
getData(naam) {
// Fetch data from the database, put it in an array, and log it to the console
//met backticks als " " kan je variabelen in een string zetten
return fetch(`https://oege.ie.hva.nl/~hossan/getData.php?name=${name}`) // Add return here
return fetch(`https://oege.ie.hva.nl/~hossan/getData.php?name=${naam}`) // Add return here
.then(response => response.json())
.then(data => {
requesteddata = data;

6
webdev/Serial.js.old → webdev/Serial.js
View File

@@ -29,6 +29,7 @@ async function readLoop() {
if (singleByte != 10) {
buffer.push(singleByte);
}
else {
let sensorString = decoder.decode(new Uint8Array(buffer));
//Put all data in a json Array and parse it to a boolean array
@@ -41,6 +42,9 @@ async function readLoop() {
//Convert the array of strings to a boolean array
//When a bit is 1 it becomes true, when a bit is 0 it becomes false
let booleanArray = SerialArray.map(bit => bit == '1');
// Dispatch an event with booleanArray as detail
let event = new CustomEvent('booleanArrayUpdated', { detail: booleanArray });
window.dispatchEvent(event);
console.log(booleanArray);
} else {
console.error("Dit is geen Array");
@@ -60,6 +64,8 @@ async function readLoop() {
}
}
// Sluit de poort
async function disconnect() {
await reader.cancel();

BIN
webdev/background.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 478 B

66
webdev/basicbullet.js
View File

@@ -1,66 +0,0 @@
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;
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);
}
draw() {
//draw the bullet
push();
fill(0, 255, 0);
circle(this.projectile.x, this.projectile.y, this.radius);
pop();
}
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 };
}
}

BIN
webdev/contols.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

632
webdev/game.js
View File

@@ -1,94 +1,24 @@
//--------------------Game--------------------
// Game variables
const width = 1260;
const height = 620;
let requesteddata = [];
// Menu variables
let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
let currentIndex = [0, 0, 0];
let nameHS = '';
let pressed = false;
function preload() {
controlsImage = loadImage('./contols.png');
}
// Player variables
const playerSize = 10;
let radius = playerSize / 2;
let playerPosX = 500
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 = 16;
let shotSpeedAdj;
let projectile;
let projSize = 5;
let shot = false;
let hit = false;
let shotPosX;
let shotPosY;
let initialPlayerPosX = playerPosX;
let initialPlayerPosY = playerPosY;
let bullets = [];
let direction;
let framerate = 60;
let hasMoved = false;
let time = 0;
let shotPoint = 0;
let angle = 0;
let patern;
let paternArray = [];
let suroundX = 300;
let suroundY = 300;
let x2;
let y2;
let x3;
let y3;
let x4;
let y4;
let x5;
let y5;
let homescreenOn = true;
let chosen = false;
let finalPhase = false;
let nextWave = [];
let iIndex = 0;
let buttonSelectDead = 0;
let buttonSelectHome = 0;
let buttonSelectPause = 0;
let entered = false;
let submitted = false;
let bulletAmount = 5;
let phases = [false, false, false, false, false];
//let myBullet = new bullet();
// the function setup() is called once when the page is loaded
function setup() {
// create a canvas element and append it to the body
getData()
DB.getData()
createCanvas(width, height);
frameRate(framerate);
angleMode(DEGREES);
rectMode(CENTER);
// disable the outline of shapes
Movementloop()
noStroke();
// bg = loadImage('background.webp');
}
function score() {
time += 3 / framerate;
}
function reset() {
lives = 1;
time = 0;
bounceX = bossPosX;
bounceY = bossPosY;
initialPlayerPosX = playerPosX;
initialPlayerPosY = playerPosY;
hasMoved = false;
@@ -98,38 +28,17 @@ function reset() {
finalPhase = false;
isDead = false;
entered = false;
buttonSelectDead = 0;
buttonSelect = 0;
nameHS = '';
submitted = false;
getData()
}
escaped = false;
bossPosX = width / 2;
bossPosY = height / 6;
bossVelX = 5;
bossVelY = 5;
dataIsCalled = false;
DB.getData();
function gameOver() {
if (lives == 0) {
//game over screen
iIndex = constrain(iIndex, 0, 2);
buttonSelectDead = constrain(buttonSelectDead, 0, 2);
isDead = true;
push();
fill(255, 0, 0);
textSize(40);
textAlign(CENTER);
text("Game Over", width / 2, height / 2 - 80);
fill(255, 255, 255)
textSize(18);
textAlign(CENTER);
text("Score: " + int(time), width / 2, height / 2 - 55);
textSize(32);
text(letters[currentIndex[0]], width / 2 - 30, height / 2);
text(letters[currentIndex[1]], width / 2, height / 2);
text(letters[currentIndex[2]], width / 2 + 30, height / 2);
text("Restart", width / 2, height / 2 + 45);
text("Main Menu", width / 2, height / 2 + 90);
pop();
}
}
function movementCheck() {
@@ -138,9 +47,8 @@ function movementCheck() {
hasMoved = true;
}
}
async function keyPressed() {
if (!isDead) {
if (!isDead && !homescreenOn && !pausescreenOn) {
if (keyIsDown(LEFT_ARROW) && playerPosX > 0 + radius) {
playerPosX -= playerSpeed;
}
@@ -155,80 +63,132 @@ async function keyPressed() {
}
}
if (isDead && keyReleasedFlag && !entered) {
if ((!(iIndex > 2)) || (!(iIndex < 0))) {
if (keyCode == LEFT_ARROW) {
iIndex -= 1;
keyReleasedFlag = false;
}
if (keyCode == RIGHT_ARROW) {
iIndex += 1;
keyReleasedFlag = false;
}
}
if (keyCode == UP_ARROW) {
currentIndex[iIndex] = (currentIndex[iIndex] + 1) % letters.length;
keyReleasedFlag = false;
}
if (keyCode == DOWN_ARROW) {
currentIndex[iIndex] = (currentIndex[iIndex] - 1 + letters.length) % letters.length;
keyReleasedFlag = false;
}
if (keyCode == ENTER) {
nameHS += letters[currentIndex[0]];
nameHS += letters[currentIndex[1]];
nameHS += letters[currentIndex[2]];
entered = true;
submit();
keyReleasedFlag = false;
}
nameSubmit();
}
if (isDead && keyReleasedFlag && entered) {
buttonSelect = constrain(buttonSelect, 0, 2);
if (keyCode == UP_ARROW) {
buttonSelectDead -= 1;
buttonSelect -= 1;
keyReleasedFlag = false;
}
if (keyCode == DOWN_ARROW) {
buttonSelectDead += 1;
buttonSelect += 1;
keyReleasedFlag = false;
}
if (buttonSelectDead == 0) {
if (keyCode == RIGHT_ARROW && !submitted) {
entered = false;
nameHS = '';
keyReleasedFlag = false;
}
if (keyCode == ENTER) {
keyReleasedFlag = false;
}
}
if (buttonSelectDead == 1) {
if (buttonSelect == 1) {
if (keyCode == ENTER) {
//reset all the variables so the game can be played again
reset();
}
}
if (buttonSelectDead == 2) {
if (buttonSelect == 2) {
if (keyCode == ENTER) {
homescreenOn = true;
reset();
keyReleasedFlag = false;
DB.getData()
return;
}
}
}
if (homescreenOn && keyReleasedFlag) {
buttonSelect = constrain(buttonSelect, 0, 1);
if (keyCode == UP_ARROW) {
buttonSelect -= 1;
keyReleasedFlag = false;
}
if (keyCode == DOWN_ARROW) {
buttonSelect += 1;
keyReleasedFlag = false;
}
if (buttonSelect == 0) {
if (keyCode == ENTER) {
console.log("start game");
homescreenOn = false;
gamescreenOn = true;
reset();
}
}
if (buttonSelect == 1) {
if (keyCode == ENTER) {
homescreenOn = false;
scorescreenOn = true;
keyReleasedFlag = false;
requesteddata = [];
}
}
}
if (scorescreenOn && keyReleasedFlag && entered) {
buttonSelect = constrain(buttonSelect, 0, 1);
if (keyCode == UP_ARROW) {
buttonSelect -= 1;
keyReleasedFlag = false;
}
if (keyCode == DOWN_ARROW) {
buttonSelect += 1;
keyReleasedFlag = false;
}
if (buttonSelect == 1 && entered) {
if (keyCode == ENTER) {
homescreenOn = true;
scorescreenOn = false;
reset();
keyReleasedFlag = false;
}
}
}
if (!homescreenOn && !isDead && !scorescreenOn && keyReleasedFlag) {
buttonSelect = constrain(buttonSelect, 0, 1);
if (keyCode == 27 && !escaped) {
escaped = true;
console.log("pause");
pausescreenOn = true;
keyReleasedFlag = false;
}
if (escaped) {
if (keyCode == UP_ARROW) {
buttonSelect -= 1;
keyReleasedFlag = false;
console.log(buttonSelect)
}
if (keyCode == DOWN_ARROW) {
buttonSelect += 1;
keyReleasedFlag = false;
console.log(buttonSelect)
}
if (buttonSelect == 0) {
if (keyCode == ENTER) {
console.log("resume");
pausescreenOn = false;
keyReleasedFlag = false;
escaped = false;
}
}
if (buttonSelect == 1) {
if (keyCode == ENTER) {
console.log("main menu");
homescreenOn = true;
pausescreenOn = false;
escaped = false;
reset();
keyReleasedFlag = false;
}
}
}
}
}
}
function submit() {
if (entered == true) {
sendData(nameHS, int(time));
DB.sendData(nameHS, int(time));
console.log(nameHS + ": " + int(time));
nameHS = '';
submitted = true;
}
}
function keyReleased() {
keyReleasedFlag = true; // Set the flag to true when a key is released
}
function wait(waitTime) {
return new Promise(resolve => {
setTimeout(() => {
@@ -236,94 +196,173 @@ function wait(waitTime) {
}, waitTime);
});
}
async function Movementloop() {
//get info from controller and use it to move the player
window.addEventListener('booleanArrayUpdated', function (event) {
let booleanArray = event.detail;
if (booleanArray[1]) {
playerPosX += playerSpeed;
function nameSubmit() {
iIndex = constrain(iIndex, 0, 2);
if ((!(iIndex > 2)) || (!(iIndex < 0))) {
if (keyCode == LEFT_ARROW) {
console.log(iIndex);
iIndex -= 1;
keyReleasedFlag = false;
}
if (booleanArray[3]) {
playerPosX -= playerSpeed;
if (keyCode == RIGHT_ARROW) {
console.log(iIndex);
iIndex += 1;
keyReleasedFlag = false;
}
if (booleanArray[2]) {
playerPosY += playerSpeed;
}
if (keyCode == UP_ARROW) {
currentIndex[iIndex] = (currentIndex[iIndex] + 1) % letters.length;
console.log(currentIndex[iIndex])
keyReleasedFlag = false;
}
if (keyCode == DOWN_ARROW) {
currentIndex[iIndex] = (currentIndex[iIndex] - 1 + letters.length) % letters.length;
console.log(currentIndex[iIndex])
keyReleasedFlag = false;
}
if (keyCode == ENTER) {
nameHS += letters[currentIndex[0]];
nameHS += letters[currentIndex[1]];
nameHS += letters[currentIndex[2]];
entered = true;
if (isDead) {
submit();
} else {
// do nothing
}
if (booleanArray[0]) {
playerPosY -= playerSpeed;
}
});
keyReleasedFlag = false;
}
}
function nameDraw(positiony) {
if (iIndex == 0) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 30, height / positiony, 30, 40)
pop()
}
if (iIndex == 1) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / positiony, 30, 40)
pop()
}
if (iIndex == 2) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 + 30, height / positiony, 30, 40)
pop()
}
}
// the function draw() is called every frame
function draw() {
keyPressed();
gameOver();
Menus.gameOver();
// draw background
background(0, 0, 0, 100);
ffps = frameRate();
shotSpeed = 1000 / ffps;
playerSpeed = 300 / ffps;
if (homescreenOn == true) {
homescreen();
if (homescreenOn) {
Menus.homescreen();
buttonSelect = constrain(buttonSelect, 0, 1);
if (buttonSelect == 0) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / 2, buttonWidth, buttonHeight)
pop()
}
if (buttonSelect == 1) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / 2 + height / 12, buttonWidth, buttonHeight)
pop()
}
}
if (homescreenOn == false) {
if (!homescreenOn && !scorescreenOn && !isDead) {
game();
}
if (isDead == true) {
if (entered == true) {
if (buttonSelectDead == 0) {
if (scorescreenOn) {
Menus.scoreMenu();
buttonSelect = constrain(buttonSelect, 0, 1);
if (buttonSelect == 1 && entered) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / 2, buttonWidth, buttonHeight)
pop()
}
}
if (pausescreenOn) {
Menus.pauseMenu();
buttonSelect = constrain(buttonSelect, 0, 1);
if (buttonSelect == 0) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rectMode(CENTER);
rect(width / 2, height / 2, buttonWidth, buttonHeight)
pop()
}
if (buttonSelect == 1) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rectMode(CENTER);
rect(width / 2, height / 2 + height / 12, buttonWidth, buttonHeight)
pop()
}
}
if (isDead) {
buttonSelect = constrain(buttonSelect, 0, 2);
if (entered) {
if (buttonSelect == 0) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 45, height / 2 - 30, 90, 40)
rect(width / 2, height / 2, 90, 40)
pop()
}
if (buttonSelectDead == 1) {
if (buttonSelect == 1) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 55, height / 2 + 15, 110, 40)
rect(width / 2, height / 2 + height / 12, 110, 40)
pop()
}
if (buttonSelectDead == 2) {
if (buttonSelect == 2) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 80, height / 2 + 60, 160, 40)
rect(width / 2, height / 2 + height / 6, 160, 40)
pop()
}
}
else {
if (iIndex == 0) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 45, height / 2 - 30, 30, 40)
pop()
}
if (iIndex == 1) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 - 15, height / 2 - 30, 30, 40)
pop()
}
if (iIndex == 2) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2 + 15, height / 2 - 30, 30, 40)
pop()
}
nameDraw(2);
}
}
if (!hasMoved && !isDead && !homescreenOn && !pausescreenOn && !scorescreenOn) {
Menus.dodgeBanner();
}
}
async function randPatern() {
patern = random(paternArray);
@@ -353,7 +392,6 @@ async function randPatern() {
}
}
function randomAttackPattern() {
if (shot == false || hit == true) {
for (i = 0; i < bulletAmount; i++) {
@@ -361,12 +399,11 @@ function randomAttackPattern() {
}
}
}
function phase() {
switch (true) {
case (time < 20):
case (time < 10):
phases[0] = true;
paternArray = [1,2,3,4,5];
paternArray = [5];
shotSpeedAdj = 2;
push();
fill(255, 0, 255);
@@ -375,8 +412,8 @@ function phase() {
text("phase 1", 10, 50);
pop();
break;
case (time < 60):
shotSpeedAdj = 5;
case (time < 20):
shotSpeedAdj = 3;
paternArray = [5];
phases[0] = false;
phases[1] = true;
@@ -387,7 +424,7 @@ function phase() {
text("phase 2", 10, 50);
pop();
break;
case (time < 90):
case (time < 40):
phases[1] = false;
phases[2] = true;
paternArray = [2];
@@ -398,7 +435,7 @@ function phase() {
text("phase 3", 10, 50);
pop();
break;
case (time < 120):
case (time < 70):
phases[2] = false;
phases[3] = true;
paternArray = [3, 4];
@@ -409,7 +446,7 @@ function phase() {
text("phase 4", 10, 50);
pop();
break;
case (time >= 120):
case (time >= 90):
phases[3] = false;
phases[4] = false;
finalPhase = true;
@@ -423,7 +460,6 @@ function phase() {
break;
}
}
function spawnRandomBullet() {
if (chosen == false) {
randPatern();
@@ -475,10 +511,6 @@ function spawnRandomBullet() {
}
bullets.push(new bullet(playerPosX, playerPosY, radius, shotSpeed, shotPosX, shotPosY, hasMoved, 0));
}
if (!(patern == 2)) {
bossPosX = width / 2;
bossPosY = 100;
}
if (patern == 3) {
shotPosX = bossPosX;
shotPosY = bossPosY;
@@ -545,87 +577,78 @@ function spawnRandomBullet() {
bulletAmount = 5;
}
}
function homescreen() {
textAlign(CENTER);
button(255, 255, 255, width / 2 - 90, height / 2, 200, 40, "Start Game")
button(255, 255, 255, width / 2 - 90, height / 2 + 50, 200, 40, "Scores")
push()
stroke(255, 255, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
rect(100, 150, 300, 400)
pop()
//highscores rectangle
push()
textSize(50)
fill(255, 255, 255)
text("Highscores", 250, 200)
pop()
push()
fill(255, 255, 255)
textSize(25)
textAlign(CENTER)
// if (requesteddata.length > 0) {
// text("1. " + requesteddata[0].Naam + ": " + requesteddata[0].Score, 250, 250)
// }
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, 250, 250 + (i * 30))
function bouncing() {
// Update position
bossPosX += bossVelX;
bossPosY += bossVelY;
// Check for bounce
if (bossPosX > width - 25) {
bossVelX = random([-4, -5, -6, -7]);
}
pop()
push()
stroke(255, 255, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
rect(860, 150, 300, 400)
pop()
push()
textSize(50)
fill(255, 255, 255)
text("Controls", 1000, 200)
pop()
}
function button(r, g, b, buttonX, buttonY, buttonWidth, buttonHeight, buttonText) {
push()
fill(0, 0, 50)
rect(buttonX, buttonY, buttonWidth, buttonHeight)
textSize(25)
fill(r, g, b)
text(buttonText, buttonX + 100, buttonY + 30)
textAlign(CENTER);
if (mouseX > buttonX - 90 && mouseX < width / 2 + 110 && mouseY > height / 2 && mouseY < buttonY + 40) {
if (mouseIsPressed) {
homescreenOn = false;
}
if (bossPosX < 25) {
bossVelX = random([4, 5, 6, 7]);
}
if (bossPosY > height - 25) {
bossVelY = random([-4, -5, -6, -7]);
}
if (bossPosY < 25) {
bossVelY = random([4, 5, 6, 7]);
}
// Draw the boss
circle(bossPosX, bossPosY, 50);
if ((dist(bossPosX, bossPosY, playerPosX, playerPosY) <= 25 + radius) && hasMoved) {
lives -= 1;
}
pop()
}
function game() {
if (!(lives == 0)) {
// draw player
phase();
movementCheck();
push();
fill(0, 255, 255)
circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
pop();
movementCheck()
// draw boss
push();
fill(255, 165, 0)
circle(x2, y2, 50);
fill(0, 255, 0);
if (!pausescreenOn) {
push();
fill(0, 255, 255);
circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
stroke('yellow');
strokeWeight(1);
noFill();
circle (playerPosX, playerPosY, playerSize*2);
pop();
if (phases[2] == false || phase[3] == false) {
bouncing();
} else if (phases[2] = true) {
bossPosX = x2;
bossPosY = y2;
} else {
bossPosX = width / 2;
bossPosY = height / 6;
}
bullets.forEach(myBullet => {
//zolang mybullet bestaat blijft hij drawen en updaten
({ hit, shot, isOffScreen, originalPos } = myBullet.update(playerPosX, playerPosY, hasMoved, radius));
myBullet.draw();
if (isOffScreen == true) {
myBullet.hit = true;
shot = false;
}
});
//blijf de bullet tekenen zolang hit false is
bullets = bullets.filter(bullet => !bullet.hit);
}
pop();
if (hasMoved == true) {
push();
score();
if (!pausescreenOn) {
score();
}
textSize(10);
textAlign(LEFT);
fill(255, 0, 255)
@@ -659,50 +682,15 @@ 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);
pop();
} else {
x2 = width / 2;
y2 = 100;
}
bullets.forEach(myBullet => {
//zolang mybullet bestaat blijft hij drawen en updaten
({ hit, shot, isOffScreen, originalPos } = myBullet.update(playerPosX, playerPosY));
myBullet.draw();
if (isOffScreen == true) {
myBullet.hit = true;
shot = false;
}
});
//blijf de bullet tekenen zolang hit false is
bullets = bullets.filter(bullet => !bullet.hit);
}
}
function sendData(naam, score) {
const request = ( url, params = {}) => {
url += '?' + ( new URLSearchParams( params ) ).toString();
fetch( url );
};
const get = ( url, params ) => request( url, params);
get('https://oege.ie.hva.nl/~hossan/postData.php', { name: naam, score: score } );
}
function getData(){
// Fetch data from the database, put it in an array, and log it to the console
return fetch ('https://oege.ie.hva.nl/~hossan/getData.php') // Add return here
.then(response => response.json())
.then(data => {
requesteddata = data;
});
}

15
webdev/index.html
View File

@@ -1,17 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
overflow: hidden;
margin: 0%;
}
</style>
<title>Open Dag Game</title>
<!-- support p5-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
<script src="basicbullet.js"></script>
<script src="js/basicbullet.js"></script>
<script src="js/Button.js"></script>
<script src="js/Menu.js"></script>
<script src="js/Database.js"></script>
<script src="js/variables.js"></script>
<script src="game.js"></script>
</head>
<body>
</body>
</html>

14
webdev/js/Button.js Normal file
View File

@@ -0,0 +1,14 @@
class Button{
button(r, g, b, buttonX, buttonY, buttonText) {
push()
noFill()
rectMode(CENTER);
rect(buttonX, buttonY, buttonWidth, buttonHeight)
textSize(25)
fill(r, g, b)
textAlign(CENTER);
text(buttonText, buttonX, buttonY)
pop()
}
}

19
webdev/js/Database.js Normal file
View File

@@ -0,0 +1,19 @@
class database{
sendData(naam, score) {
fetch(`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`)
}
getData(naam) {
// Fetch data from the database, put it in an array, and log it to the console
//met backticks als " " kan je variabelen in een string zetten
return fetch(`https://oege.ie.hva.nl/~hossan/getData.php?name=${naam}`) // Add return here
.then(response => response.json())
.then(data => {
requesteddata = data;
console.log(data);
});
}
}

164
webdev/js/Menu.js Normal file
View File

@@ -0,0 +1,164 @@
class Menu {
constructor() {
}
homescreen() {
textAlign(CENTER, CENTER);
textSize(70);
fill(100, 255, 100);
text("Slime\nSymphony", width / 2, height / 4);
button.button(255, 255, 255, width / 2, height / 2, "Start Game")
button.button(255, 255, 255, width / 2, height / 2 + height / 12, "Scores")
push()
fill(255, 255, 255)
textSize(25)
textAlign(CENTER, CENTER)
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, width / 5, height / 3 + (i * 30))
}
pop()
//Scores rectangle
push()
stroke(4, 217, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
rect(width / 5, height / 2, width / 4, height / 1.5)
rect(width / 5 * 4, height / 2, width / 4, height / 1.5)
imageMode(CENTER)
image(controlsImage, width / 5 * 4, height / 2, width / 4, height / 1.5)
pop()
push()
textSize(50)
fill(255, 255, 255)
text("Highscores", width / 5, height / 4)
fill(255, 255, 255)
stroke('black');
strokeWeight(4);
text("Controls", width / 5 * 4, height / 4)
pop()
}
pauseMenu() {
textAlign(CENTER);
textSize(50);
fill(255, 255, 255);
text("Paused", width / 2, height / 2 - height / 6);
button(255, 255, 255, width / 2, height / 2, "Resume");
button(255, 255, 255, width / 2, height / 2 + height / 12, "Main Menu");
}
scoreMenu() {
textAlign(CENTER, CENTER);
textSize(50);
fill(255, 255, 255);
text("Score", width / 2, height / 5);
textSize(32);
text(letters[currentIndex[0]], width / 2 - 30, height / 3);
text(letters[currentIndex[1]], width / 2, height / 3);
text(letters[currentIndex[2]], width / 2 + 30, height / 3);
if (!clearDataOnce) {
requesteddata = [];
clearDataOnce = true;
}
if (scorescreenOn && keyReleasedFlag) {
nameSubmit();
}
if (entered) {
push()
stroke(205, 205, 205)
strokeWeight(2)
fill(0, 0, 0, 0)
rect(width / 2, height / 3, 90, 40)
pop()
if (!dataIsCalled) {
DB.getData(nameHS);
dataIsCalled = true;
}
}
else {
nameDraw(3);
}
push()
fill(255, 255, 255)
textSize(25)
textAlign(CENTER, CENTER)
//text for name, score, achievements
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score + " " + requesteddata[i].Datum, width / 4, height / 3 + (i * 30))
}
pop()
push()
fill(255, 255, 255)
textSize(16)
textAlign(CENTER, CENTER)
for (let i = 0; i < requesteddata.length; i++) {
text(i + 1 + ". " + requesteddata[i].Achievements, width / 4 * 3, height / 3 + (i * 30))
}
pop()
push()
stroke(4, 217, 255)
strokeWeight(5)
fill(0, 255, 0, 0)
//box left
rect(width / 4 * 3, height / 2, width / 3.5, height / 1.25)
//box right
rect(width / 4, height / 2, width / 3.5, height / 1.25)
pop()
push()
text("Your scores", width / 4, height / 6)
text("Your achievements", width / 4 * 3, height / 6)
pop()
push()
button.button(255, 255, 255, width / 2, height / 2, "Main Menu")
pop()
}
gameOver() {
if (lives <= 0) {
//game over screen
iIndex = constrain(iIndex, 0, 2);
isDead = true;
push();
fill(255, 0, 0);
textSize(60);
textAlign(CENTER, CENTER);
text("Game Over", width / 2, height / 2 - height / 5);
fill(255, 255, 255)
textSize(18);
text("Score: " + int(time), width / 2, height / 2 - height / 8);
textSize(32);
textAlign(CENTER, CENTER);
text(letters[currentIndex[0]], width / 2 - 30, height / 2);
text(letters[currentIndex[1]], width / 2, height / 2);
text(letters[currentIndex[2]], width / 2 + 30, height / 2);
text("Restart", width / 2, height / 2 + height / 12);
text("Main Menu", width / 2, height / 2 + height / 6);
pop();
}
}
dodgeBanner() {
push()
fill(255, 0, 0)
textSize(100)
textAlign(CENTER, CENTER)
text("Dodge!", width / 2, height / 2)
pop()
}
}

66
webdev/js/basicbullet.js Normal file
View File

@@ -0,0 +1,66 @@
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;
this.x = shotPosX;
this.y = shotPosY;
this.radius = radius;
this.speed = speed;
this.bulletHit = false;
this.directionX = null;
this.directionY = null;
// 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);
}
draw() {
//draw the bullet
push();
fill(0, 255, 0);
circle(this.projectile.x, this.projectile.y, this.radius);
pop();
}
update(targetx, targety, hasMoved, radius) {
// 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;
let travelled = false;
// check if the projectile has hit the player
if (dist(this.projectile.x, this.projectile.y, this.targetx, this.targety) <= this.radius + radius) {
hit = true;
shot = false;
// if the projectile has hit the player and the player has lives left, remove a life
if (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 };
}
}

80
webdev/js/variables.js Normal file
View File

@@ -0,0 +1,80 @@
//--------------------Game--------------------
// Classes
const Menus = new Menu();
const button = new Button();
const DB = new database();
// Game variables
const width = window.innerWidth;
const height = window.innerHeight;
let requesteddata = [];
let buttonWidth = width / 6
let buttonHeight = buttonWidth / 5
// Menu variables
let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
let currentIndex = [0, 0, 0];
let nameHS = '';
let pressed = false;
let searchName = '';
let dataIsCalled = false;
let clearDataOnce = false;
// Player variables
const playerSize = 10;
let radius = playerSize / 2;
let playerPosX = 500
let playerPosY = 300;
let playerSpeed = 4;
let lives = 1;
let isDead = false;
let bossPosX = width / 2;
let bossPosY = height / 6;
let bossVelX = 5;
let bossVelY = 5;
let shotSpeed = 12;
let shotSpeedAdj;
let projectile;
let projSize = 5;
let shot = false;
let hit = false;
let shotPosX;
let shotPosY;
let initialPlayerPosX = playerPosX;
let initialPlayerPosY = playerPosY;
let bullets = [];
let direction;
let framerate = 120;
let hasMoved = false;
let time = 0;
let shotPoint = 0;
let angle = 0;
let patern;
let paternArray = [];
let suroundX = 300;
let suroundY = 300;
let x2;
let y2;
let x3;
let y3;
let x4;
let y4;
let x5;
let y5;
let homescreenOn = true;
let pausescreenOn = false;
let scorescreenOn = false;
let gamescreenOn = false;
let chosen = false;
let finalPhase = false;
let nextWave = [];
let iIndex = 0;
let buttonSelect = 0;
let entered = false;
let submitted = false;
let keyReleasedFlag = true;
let escaped = false;
let buttonSelectScore = 0;
let bulletAmount = 5;
let phases = [false, false, false, false, false];

202
webdev/reference.js Normal file
View File

@@ -0,0 +1,202 @@
//--------------------Game--------------------
// Game variables
const width = 1000;
const height = 600;
// Player variables
const playerSize = 10;
let radius = playerSize / 2;
let playerPosX = 500
let playerPosY = 300;
let playerSpeed = 3;
let booleanArray = window.booleanArray;
let lives = 2;
let bossPosX = 500;
let bossPosY = 100;
let shotSpeed = 15;
let projectile;
let projSize = 5;
let shot;
let hit;
let shotPosX;
let shotPosY;
let nextAttack;
let bounceX = bossPosX;
let bounceY = bossPosY;
let predictiveBounceX;
let predictiveBounceY;
let time = 0;
let myBullet = new bullet();
// the function setup() is called once when the page is loaded
function setup() {
// create a canvas element and append it to the body
createCanvas(width, height);
frameRate(120);
// disable the outline of shapes
Movementloop()
noStroke();
}
async function score() {
while (true) {
time += 1;
await sleep(1000);
}
}
function life() {
textAlign(CENTER);
text(lives, 500, 20);
if (hit == true) {
hit = false;
lives -= 1;
}
if (lives == 0) {
fill(255, 0, 0);
textSize(40);
textAlign(CENTER);
text("Game Over", 500, 300);
}
if (key == ' ') {
lives = 2;
time = 0;
bounceX = bossPosX;
bounceY = bossPosY;
}
}
function keyPressed() {
if (keyIsDown(LEFT_ARROW) && playerPosX > 0 + radius) {
playerPosX -= playerSpeed;
}
if (keyIsDown(RIGHT_ARROW) && playerPosX < width - radius) {
playerPosX += playerSpeed;
}
if (keyIsDown(UP_ARROW) && playerPosY > 0 + radius) {
playerPosY -= playerSpeed;
}
if (keyIsDown(DOWN_ARROW) && playerPosY < height - radius) {
playerPosY += playerSpeed;
}
}
async function Movementloop() {
window.addEventListener('booleanArrayUpdated', function (event) {
// event.detail contains the booleanArray
let booleanArray = event.detail;
// Use booleanArray here...
if (booleanArray[1]) {
playerPosX += playerSpeed;
}
if (booleanArray[3]) {
playerPosX -= playerSpeed;
}
if (booleanArray[2]) {
playerPosY += playerSpeed;
}
if (booleanArray[0]) {
playerPosY -= playerSpeed;
}
});
}
function shoot(directionX, directionY) {
shot = true;
hit = false;
if (!projectile) {
// Set the initial position of the projectile to the player's position
projectile = createVector(shotPosX, shotPosY);
targetX = directionX;
targetY = directionY;
// Calculate the initial direction
direction = createVector(targetX - projectile.x, targetY - projectile.y);
direction.normalize();
}
// Draw the small circle (projectile)
fill(255, 0, 0);
circle(projectile.x, projectile.y, projSize);
// Move the projectile towards the movable circle
projectile.add(p5.Vector.mult(direction, shotSpeed));
if (dist(projectile.x, projectile.y, directionX, directionY) <= radius+(projSize/2)) {
projectile = null;
hit = true;
}
else if (projectile.x < 0 - 10 || projectile.x > width + 10 || projectile.y < 0 - 10 || projectile.y > height + 10) {
bounceX = projectile.x;
bounceY = projectile.y;
projectile = null;
shot = false;
}
}
// the function draw() is called every frame
function draw() {
shot = false;
textSize(10);
keyPressed();
life();
// draw background
myBullet.draw();
background(0, 0, 0, 100);
if (!(lives == 0)) {
// draw player
fill(0, 255, 255)
circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
// draw boss
fill(255, 165, 0)
circle(500, 100, 50);
score();
textAlign(LEFT);
text(time, 10, 20);
if (shot == false || hit == true) {
let patern = random([1]);
if (patern == 1) {
nextAttack = random([1, 2, 3, 4, 5]);
text(nextAttack, 30, 50);
if (nextAttack == 1) {
shotPosX = 500;
shotPosY = 100;
shoot(playerPosX, playerPosY);
}
if (nextAttack == 2) {
shotPosX = random(0, 1000);
shotPosY = 600;
shoot(playerPosX, playerPosY);
}
if (nextAttack == 3) {
shotPosX = 0;
shotPosY = random(0, 600);
shoot(playerPosX, playerPosY);
}
if (nextAttack == 4) {
shotPosX = 1000;
shotPosY = random(0, 600);
shoot(playerPosX, playerPosY);
}
if (nextAttack == 5) {
shotPosX = bounceX;
shotPosY = bounceY;
shoot(playerPosX, playerPosY);
}
}
// if (patern == 2) {
// shotPosX = bounceX;
// shotPosY = bounceY;
// shoot(playerPosX, playerPosY);
// }
}
}
}