diff --git a/web/game.js b/web/game.js index 5aa9eca..0586c69 100644 --- a/web/game.js +++ b/web/game.js @@ -1,7 +1,11 @@ +function preload() { + controlsImage = loadImage('./contols.png'); +} + // 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); @@ -25,13 +29,16 @@ function reset() { isDead = false; entered = false; buttonSelect = 0; - + nameHS = ''; submitted = false; escaped = false; bossPosX = width / 2; bossPosY = height / 6; bossVelX = 5; bossVelY = 5; + dataIsCalled = false; + DB.getData(); + } function movementCheck() { @@ -79,7 +86,7 @@ async function keyPressed() { homescreenOn = true; reset(); keyReleasedFlag = false; - getData() + DB.getData() return; } } @@ -169,10 +176,11 @@ async function keyPressed() { } } } + } function submit() { if (entered == true) { - sendData(nameHS, int(time)); + DB.sendData(nameHS, int(time)); console.log(nameHS + ": " + int(time)); nameHS = ''; submitted = true; @@ -255,7 +263,7 @@ function nameDraw(positiony) { // the function draw() is called every frame function draw() { keyPressed(); - gameOver(); + Menus.gameOver(); // draw background background(0, 0, 0, 100); ffps = frameRate(); @@ -263,7 +271,7 @@ function draw() { playerSpeed = 300 / ffps; if (homescreenOn) { - homescreen(); + Menus.homescreen(); buttonSelect = constrain(buttonSelect, 0, 1); if (buttonSelect == 0) { push() @@ -286,7 +294,7 @@ function draw() { game(); } if (scorescreenOn) { - scoremenu(); + Menus.scoreMenu(); buttonSelect = constrain(buttonSelect, 0, 1); if (buttonSelect == 1 && entered) { push() @@ -298,7 +306,7 @@ function draw() { } } if (pausescreenOn) { - pauseMenu(); + Menus.pauseMenu(); buttonSelect = constrain(buttonSelect, 0, 1); if (buttonSelect == 0) { push() @@ -353,7 +361,7 @@ function draw() { } if (!hasMoved && !isDead && !homescreenOn && !pausescreenOn && !scorescreenOn) { - dodgeBanner(); + Menus.dodgeBanner(); } } async function randPatern() { diff --git a/web/index.html b/web/index.html index da84d87..475f558 100644 --- a/web/index.html +++ b/web/index.html @@ -15,10 +15,11 @@ - - + + + diff --git a/web/js/Button.js b/web/js/Button.js new file mode 100644 index 0000000..2237b27 --- /dev/null +++ b/web/js/Button.js @@ -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() + + } +} \ No newline at end of file diff --git a/web/js/Database.js b/web/js/Database.js index 612388c..7b7c36a 100644 --- a/web/js/Database.js +++ b/web/js/Database.js @@ -1,15 +1,19 @@ +class database{ + sendData(naam, score) { + fetch(`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`) + } -function sendData(naam, score) { - fetch (`https://oege.ie.hva.nl/~hossan/postData.php?name=${naam}&score=${score}`) + getData(name) { + // 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 + .then(response => response.json()) + .then(data => { + requesteddata = data; + console.log(data); + }); + } } -function getData(name){ - // 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 - .then(response => response.json()) - .then(data => { - requesteddata = data; - console.log(data); - }); -} + + diff --git a/web/js/Menu.js b/web/js/Menu.js index 638d5bd..35ecbd9 100644 --- a/web/js/Menu.js +++ b/web/js/Menu.js @@ -1,183 +1,164 @@ -let searchName = ''; -let dataIsCalled = false; -let clearDataOnce = false; -function keyPressed() { - // Check if the back button was selected and the Enter key was pressed - -} - -function preload() { - controlsImage = loadImage('./contols.png'); -} - -function homescreen() { - textAlign(CENTER, CENTER); - textSize(70); - fill(100, 255, 100); - text("Slime\nSymphony", width / 2, height / 4); - - button(255, 255, 255, width / 2, height / 2, "Start Game") - 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() -} - -function 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() -} - -function 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"); -} - -function 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; +class Menu { + constructor() { } - if (scorescreenOn && keyReleasedFlag) { - nameSubmit(); - } + 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") - if (entered) { push() - stroke(205, 205, 205) - strokeWeight(2) - fill(0, 0, 0, 0) - rect(width / 2, height / 3, 90, 40) + 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() - if (!dataIsCalled) { - getData(nameHS); - dataIsCalled = true; + + //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(); } } - else { - nameDraw(3); + + + dodgeBanner() { + push() + fill(255, 0, 0) + textSize(100) + textAlign(CENTER, CENTER) + text("Dodge!", width / 2, height / 2) + pop() } - - 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(255, 255, 255, width / 2, height / 2, "Main Menu") - pop() -} - -function 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(); - } -} - - -function dodgeBanner(){ - push() - fill(255, 0, 0) - textSize(100) - textAlign(CENTER, CENTER) - text("Dodge!", width / 2, height / 2) - pop() } \ No newline at end of file diff --git a/web/js/variables.js b/web/js/variables.js index deaddb6..f04cb26 100644 --- a/web/js/variables.js +++ b/web/js/variables.js @@ -1,4 +1,8 @@ //--------------------Game-------------------- +// Classes +const Menus = new Menu(); +const button = new Button(); +const DB = new database(); // Game variables const width = window.innerWidth; const height = window.innerHeight; @@ -10,7 +14,9 @@ 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;