From be03b7e7cd85116e60d933a348e2db238aa2a483 Mon Sep 17 00:00:00 2001 From: Mees Roelofsz Date: Tue, 16 Jan 2024 14:46:00 +0100 Subject: [PATCH 1/5] added name input as seperate functions --- web/game.js | 203 ++++++++++++++++++++++++---------------------------- 1 file changed, 95 insertions(+), 108 deletions(-) diff --git a/web/game.js b/web/game.js index 261fe25..94a9640 100644 --- a/web/game.js +++ b/web/game.js @@ -2,9 +2,9 @@ // Game variables const width = 1260; const height = 620; -let requesteddata = []; -let buttonWidth = width/ 6 -let buttonHeight = buttonWidth/5 +let requesteddata = []; +let buttonWidth = width / 6 +let buttonHeight = buttonWidth / 5 // Menu variables let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); let currentIndex = [0, 0, 0]; @@ -81,11 +81,9 @@ function setup() { // disable the outline of shapes noStroke(); } - function score() { time += 3 / framerate; } - function reset() { lives = 1; time = 0; @@ -106,7 +104,6 @@ function reset() { submitted = false; escaped = false; } - function gameOver() { if (lives == 0) { //game over screen @@ -134,14 +131,12 @@ function gameOver() { pop(); } } - function movementCheck() { //check if the player has moved if (playerPosX != initialPlayerPosX || playerPosY != initialPlayerPosY) { hasMoved = true; } } - async function keyPressed() { if (!isDead && !homescreenOn && !pausescreenOn) { if (keyIsDown(LEFT_ARROW) && playerPosX > 0 + radius) { @@ -158,32 +153,7 @@ 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) { if (keyCode == UP_ARROW) { @@ -194,16 +164,6 @@ async function keyPressed() { buttonSelectDead += 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 (keyCode == ENTER) { //reset all the variables so the game can be played again @@ -284,7 +244,6 @@ async function keyPressed() { } } } - function submit() { if (entered == true) { sendData(nameHS, int(time)); @@ -293,11 +252,9 @@ function submit() { submitted = true; } } - function keyReleased() { keyReleasedFlag = true; // Set the flag to true when a key is released } - function wait(waitTime) { return new Promise(resolve => { setTimeout(() => { @@ -305,7 +262,93 @@ function wait(waitTime) { }, waitTime); }); } +function nameSubmit() { + 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; + if (isDead) { + submit(); + } else { + // do nothing + } + keyReleasedFlag = false; + } +} +function nameDraw() { + if (entered) { + if (buttonSelectDead == 0) { + push() + stroke(205, 205, 205) + strokeWeight(2) + fill(0, 0, 0, 0) + rect(width / 2, height / 2 - 15, 90, 40) + pop() + } + if (buttonSelectDead == 1) { + push() + stroke(205, 205, 205) + strokeWeight(2) + fill(0, 0, 0, 0) + rect(width / 2, height / 2 + 30, 110, 40) + pop() + } + if (buttonSelectDead == 2) { + push() + stroke(205, 205, 205) + strokeWeight(2) + fill(0, 0, 0, 0) + rect(width / 2, height / 2 + 75, 160, 40) + pop() + } + } + else { + if (iIndex == 0) { + push() + stroke(205, 205, 205) + strokeWeight(2) + fill(0, 0, 0, 0) + rect(width / 2 - 30, height / 2 - 15, 30, 40) + pop() + } + if (iIndex == 1) { + push() + stroke(205, 205, 205) + strokeWeight(2) + fill(0, 0, 0, 0) + rect(width / 2, height / 2 - 15, 30, 40) + pop() + } + if (iIndex == 2) { + push() + stroke(205, 205, 205) + strokeWeight(2) + fill(0, 0, 0, 0) + rect(width / 2 + 30, height / 2 - 15, 30, 40) + pop() + } + } +} // the function draw() is called every frame function draw() { keyPressed(); @@ -331,7 +374,7 @@ function draw() { stroke(205, 205, 205) strokeWeight(2) fill(0, 0, 0, 0) - rect(width / 2, height / 2 + height/12, buttonWidth, buttonHeight) + rect(width / 2, height / 2 + height / 12, buttonWidth, buttonHeight) pop() } } @@ -360,64 +403,12 @@ function draw() { strokeWeight(2) fill(0, 0, 0, 0) rectMode(CENTER); - rect(width / 2, height / 2 + height/12, buttonWidth, buttonHeight) + rect(width / 2, height / 2 + height / 12, buttonWidth, buttonHeight) pop() } } if (isDead) { - if (entered) { - if (buttonSelectDead == 0) { - push() - - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2, height / 2 - 15, 90, 40) - pop() - } - if (buttonSelectDead == 1) { - push() - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2, height / 2 + 30, 110, 40) - pop() - } - if (buttonSelectDead == 2) { - push() - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2, height / 2 + 75, 160, 40) - pop() - } - } - else { - if (iIndex == 0) { - push() - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2 - 30, height / 2 - 15, 30, 40) - pop() - } - if (iIndex == 1) { - push() - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2, height / 2 - 15, 30, 40) - pop() - } - if (iIndex == 2) { - push() - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2 + 30, height / 2 - 15, 30, 40) - pop() - } - } + nameDraw(); } } async function randPatern() { @@ -448,7 +439,6 @@ async function randPatern() { } } - function randomAttackPattern() { if (shot == false || hit == true) { for (i = 0; i < bulletAmount; i++) { @@ -456,12 +446,11 @@ function randomAttackPattern() { } } } - function phase() { switch (true) { case (time < 20): phases[0] = true; - paternArray = [5]; + paternArray = [1]; shotSpeedAdj = 2; push(); fill(255, 0, 255); @@ -518,7 +507,6 @@ function phase() { break; } } - function spawnRandomBullet() { if (chosen == false) { randPatern(); @@ -640,7 +628,6 @@ function spawnRandomBullet() { bulletAmount = 5; } } - function game() { if (!(lives == 0)) { // draw player @@ -720,4 +707,4 @@ function game() { } } -} +} \ No newline at end of file From 0faf974b843ac90961da382c1b2608ff7083b7ff Mon Sep 17 00:00:00 2001 From: Mees Roelofsz Date: Tue, 16 Jan 2024 14:46:26 +0100 Subject: [PATCH 2/5] deleted travel statement --- web/js/basicbullet.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/js/basicbullet.js b/web/js/basicbullet.js index 320cc5f..5cd6b9c 100644 --- a/web/js/basicbullet.js +++ b/web/js/basicbullet.js @@ -42,6 +42,7 @@ class bullet { 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) { hit = true; From b1e95f0c3d22e93e522602a244163654a945b368 Mon Sep 17 00:00:00 2001 From: Mees Roelofsz Date: Tue, 16 Jan 2024 14:46:43 +0100 Subject: [PATCH 3/5] added scoremenu and used name functions --- web/js/Menu.js | 48 +++++++++++++++++++++++++++++------------------- 1 file changed, 29 insertions(+), 19 deletions(-) diff --git a/web/js/Menu.js b/web/js/Menu.js index 3b74428..e947afc 100644 --- a/web/js/Menu.js +++ b/web/js/Menu.js @@ -1,12 +1,6 @@ let buttonSelectScore = 0; let searchName = ''; let scorescreenOn = false; -function scoremenu() { - - textSize(50) - fill(255, 255, 255) - text("Hi, dit is een scorescreen", width / 2, height / 2 - 100) -} function keyPressed() { // Check if the back button was selected and the Enter key was pressed @@ -18,19 +12,19 @@ function keyPressed() { function homescreen() { textAlign(CENTER); button(255, 255, 255, width / 2, height / 2, "Start Game") - button(255, 255, 255, width / 2, height / 2 + height/12, "Scores") - + button(255, 255, 255, width / 2, height / 2 + height / 12, "Scores") + push() - stroke(4,217,255) + stroke(4, 217, 255) strokeWeight(5) fill(0, 255, 0, 0) - rect(width/5*4, height/2, width/4, height/1.5) + rect(width / 5 * 4, height / 2, width / 4, height / 1.5) pop() //highscores rectangle push() textSize(50) fill(255, 255, 255) - text("Highscores", width/5, height/4) + text("Highscores", width / 5, height / 4) pop() push() @@ -38,21 +32,21 @@ function homescreen() { 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)) + text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, width / 5, height / 3 + (i * 30)) } pop() push() - stroke(4,217,255) + stroke(4, 217, 255) strokeWeight(5) fill(0, 255, 0, 0) - rect(width/5, height/2, width/4, height/1.5) + rect(width / 5, height / 2, width / 4, height / 1.5) pop() push() textSize(50) fill(255, 255, 255) - text("Controls", width/5*4, height/4) + text("Controls", width / 5 * 4, height / 4) pop() } @@ -64,16 +58,32 @@ function button(r, g, b, buttonX, buttonY, buttonText) { textSize(25) fill(r, g, b) textAlign(CENTER); - text(buttonText, buttonX, buttonY + buttonHeight/4) + text(buttonText, buttonX, buttonY + buttonHeight / 4) pop() } -function pauseMenu(){ +function pauseMenu() { textAlign(CENTER); textSize(50); fill(255, 255, 255); - text("Paused", width / 2, height / 2 - height/6); + 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"); + button(255, 255, 255, width / 2, height / 2 + height / 12, "Main Menu"); +} + +function scoremenu() { + textAlign(CENTER); + textSize(50); + fill(255, 255, 255); + text("Score", width / 2, height / 2 - height / 6); + 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); + + if (scorescreenOn && keyReleasedFlag) { + nameSubmit(); + } + nameDraw(); } \ No newline at end of file From d77bba94ce45e36828d377e1337188e6ecc1c1fe Mon Sep 17 00:00:00 2001 From: Mees Roelofsz Date: Tue, 16 Jan 2024 15:05:54 +0100 Subject: [PATCH 4/5] completed name ui --- web/game.js | 117 +++++++++++++++++++++++++------------------------ web/js/Menu.js | 23 +++++++--- 2 files changed, 76 insertions(+), 64 deletions(-) diff --git a/web/game.js b/web/game.js index 94a9640..6648261 100644 --- a/web/game.js +++ b/web/game.js @@ -113,21 +113,22 @@ function gameOver() { fill(255, 0, 0); textSize(40); textAlign(CENTER); - text("Game Over", width / 2, height / 2 - 80); + text("Game Over", width / 2, height / 2 - height/6); fill(255, 255, 255) textSize(18); textAlign(CENTER); - text("Score: " + int(time), width / 2, height / 2 - 55); + 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 + 45); + text("Restart", width / 2, height / 2 + height/12); - text("Main Menu", width / 2, height / 2 + 90); + text("Main Menu", width / 2, height / 2 + height/6); pop(); } } @@ -294,60 +295,32 @@ function nameSubmit() { keyReleasedFlag = false; } } -function nameDraw() { - if (entered) { - if (buttonSelectDead == 0) { - push() +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() + } - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2, height / 2 - 15, 90, 40) - pop() - } - if (buttonSelectDead == 1) { - push() - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2, height / 2 + 30, 110, 40) - pop() - } - if (buttonSelectDead == 2) { - push() - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2, height / 2 + 75, 160, 40) - pop() - } - } - else { - if (iIndex == 0) { - push() - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2 - 30, height / 2 - 15, 30, 40) - pop() - } - if (iIndex == 1) { - push() - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2, height / 2 - 15, 30, 40) - pop() - } - if (iIndex == 2) { - push() - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2 + 30, height / 2 - 15, 30, 40) - pop() - } - } } // the function draw() is called every frame function draw() { @@ -408,7 +381,35 @@ function draw() { } } if (isDead) { - nameDraw(); + if (entered) { + if (buttonSelectDead == 0) { + push() + stroke(205, 205, 205) + strokeWeight(2) + fill(0, 0, 0, 0) + rect(width / 2, height / 2, 90, 40) + pop() + } + if (buttonSelectDead == 1) { + push() + stroke(205, 205, 205) + strokeWeight(2) + fill(0, 0, 0, 0) + rect(width / 2, height / 2 + height/12, 110, 40) + pop() + } + if (buttonSelectDead == 2) { + push() + stroke(205, 205, 205) + strokeWeight(2) + fill(0, 0, 0, 0) + rect(width / 2, height / 2 + height/6, 160, 40) + pop() + } + } + else { + nameDraw(2); + } } } async function randPatern() { diff --git a/web/js/Menu.js b/web/js/Menu.js index e947afc..b70b8d2 100644 --- a/web/js/Menu.js +++ b/web/js/Menu.js @@ -73,17 +73,28 @@ function pauseMenu() { } function scoremenu() { - textAlign(CENTER); + textAlign(CENTER, CENTER); textSize(50); fill(255, 255, 255); - text("Score", width / 2, height / 2 - height / 6); + text("Score", width / 2, height / 4); 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(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 (scorescreenOn && keyReleasedFlag) { nameSubmit(); } - nameDraw(); + + if (entered) { + push() + stroke(205, 205, 205) + strokeWeight(2) + fill(0, 0, 0, 0) + rect(width / 2, height / 3, 90, 40) + pop() + } + else { + nameDraw(3); + } } \ No newline at end of file From 8aac951bf2bc189987f55556bffcd98f4e2c77d4 Mon Sep 17 00:00:00 2001 From: Mees Roelofsz Date: Tue, 16 Jan 2024 15:12:49 +0100 Subject: [PATCH 5/5] added rectangles to score tab --- web/js/Menu.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/web/js/Menu.js b/web/js/Menu.js index b70b8d2..1c8a452 100644 --- a/web/js/Menu.js +++ b/web/js/Menu.js @@ -76,7 +76,7 @@ function scoremenu() { textAlign(CENTER, CENTER); textSize(50); fill(255, 255, 255); - text("Score", width / 2, height / 4); + 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); @@ -97,4 +97,16 @@ function scoremenu() { else { nameDraw(3); } + + push() + stroke(4, 217, 255) + strokeWeight(5) + fill(0, 255, 0, 0) + rect(width / 4 * 3, height / 2, width / 4, height / 1.25) + rect(width / 4, height / 2, width / 4, height / 1.25) + pop() + push() + text("Your scores", width / 4, height / 6) + text("Your achievements", width / 4 * 3, height / 6) + pop() } \ No newline at end of file