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;