diff --git a/docs/.pages b/docs/.pages index ace0428..0a2f42c 100644 --- a/docs/.pages +++ b/docs/.pages @@ -20,4 +20,5 @@ nav: - SQL : documentatie/sql - P5.md : documentatie/p5 - Feedback : documentatie/Feedback - - Documentatie : "documentatie/Documentatie game" \ No newline at end of file + - Positioning : documentatie/positioning + - Documentatie game : "documentatie/Documentatie game" \ No newline at end of file diff --git a/docs/documentatie/positioning.md b/docs/documentatie/positioning.md new file mode 100644 index 0000000..254dcb5 --- /dev/null +++ b/docs/documentatie/positioning.md @@ -0,0 +1,2 @@ +## fuck +door gebruik te maken van rectMode center kunnen we gebruik maken van dingen als width/4 zodat het op alle schermgroottes mogelijk is. \ No newline at end of file diff --git a/web/game.js b/web/game.js index bfe90af..5616dd5 100644 --- a/web/game.js +++ b/web/game.js @@ -75,6 +75,7 @@ function setup() { createCanvas(width, height); frameRate(framerate); angleMode(DEGREES); + rectMode(CENTER); // disable the outline of shapes noStroke(); } @@ -320,7 +321,7 @@ function draw() { stroke(205, 205, 205) strokeWeight(2) fill(0, 0, 0, 0) - rect(width / 2 - 90, height / 2, 200, 40) + rect(width / 2, height / 2, 200, 40) pop() } if (buttonSelectHome == 1) { @@ -328,7 +329,7 @@ function draw() { stroke(205, 205, 205) strokeWeight(2) fill(0, 0, 0, 0) - rect(width / 2 - 90, height / 2 + 50, 200, 40) + rect(width / 2, height / 2 + 50, 200, 40) pop() } } @@ -347,7 +348,8 @@ function draw() { stroke(205, 205, 205) strokeWeight(2) fill(0, 0, 0, 0) - rect(width / 2 - 100, height / 2, 200, 40) + rectMode(CENTER); + rect(width / 2, height / 2, 200, 40) pop() } if (buttonSelectPause == 1) { @@ -355,7 +357,8 @@ function draw() { stroke(205, 205, 205) strokeWeight(2) fill(0, 0, 0, 0) - rect(width / 2 - 100, height / 2 + 50, 200, 40) + rectMode(CENTER); + rect(width / 2, height / 2 + 50, 200, 40) pop() } } @@ -363,10 +366,11 @@ function draw() { if (entered) { if (buttonSelectDead == 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 - 15, 90, 40) pop() } if (buttonSelectDead == 1) { @@ -374,7 +378,7 @@ function draw() { 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 + 30, 110, 40) pop() } if (buttonSelectDead == 2) { @@ -382,7 +386,7 @@ function draw() { 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 + 75, 160, 40) pop() } } @@ -392,7 +396,7 @@ function draw() { stroke(205, 205, 205) strokeWeight(2) fill(0, 0, 0, 0) - rect(width / 2 - 45, height / 2 - 30, 30, 40) + rect(width / 2 - 30, height / 2 - 15, 30, 40) pop() } if (iIndex == 1) { @@ -400,7 +404,7 @@ function draw() { stroke(205, 205, 205) strokeWeight(2) fill(0, 0, 0, 0) - rect(width / 2 - 15, height / 2 - 30, 30, 40) + rect(width / 2, height / 2 - 15, 30, 40) pop() } if (iIndex == 2) { @@ -408,7 +412,7 @@ function draw() { stroke(205, 205, 205) strokeWeight(2) fill(0, 0, 0, 0) - rect(width / 2 + 15, height / 2 - 30, 30, 40) + rect(width / 2 + 30, height / 2 - 15, 30, 40) pop() } } diff --git a/web/js/Menu.js b/web/js/Menu.js index baadc61..1ade35d 100644 --- a/web/js/Menu.js +++ b/web/js/Menu.js @@ -17,31 +17,28 @@ function keyPressed() { 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") + button(255, 255, 255, width / 2, height / 2, 200, 40, "Start Game") + button(255, 255, 255, width / 2, height / 2 + 50, 200, 40, "Scores") push() stroke(255, 255, 255) strokeWeight(5) fill(0, 255, 0, 0) - rect(100, 150, 300, 400) + rect(width/4*3, height/2, 300, 400) pop() //highscores rectangle push() textSize(50) fill(255, 255, 255) - text("Highscores", 250, 200) + text("Highscores", width/4, 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)) + text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, width/4, 250 + (i * 30)) } pop() @@ -49,29 +46,26 @@ function homescreen() { stroke(255, 255, 255) strokeWeight(5) fill(0, 255, 0, 0) - rect(860, 150, 300, 400) + rect(width/4, height/2, 300, 400) pop() push() textSize(50) fill(255, 255, 255) - text("Controls", 1000, 200) + text("Controls", width/4*3, 200) pop() } function button(r, g, b, buttonX, buttonY, buttonWidth, buttonHeight, buttonText) { push() fill(0, 0, 50) + rectMode(CENTER); 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; - // } - // } + text(buttonText, buttonX, buttonY + buttonHeight/4) + pop() } @@ -80,6 +74,6 @@ function pauseMenu(){ textSize(50); fill(255, 255, 255); text("Paused", width / 2, height / 2 - 100); - button(255, 255, 255, width / 2 - 100, height / 2, 200, 40, "Resume"); - button(255, 255, 255, width / 2 - 100, height / 2 + 50, 200, 40, "Main Menu"); + button(255, 255, 255, width / 2, height / 2, 200, 40, "Resume"); + button(255, 255, 255, width / 2, height / 2 + 50, 200, 40, "Main Menu"); } \ No newline at end of file