diff --git a/docs/documentatie/User Interface.md b/docs/documentatie/User Interface.md index fd14844..c8daa15 100644 --- a/docs/documentatie/User Interface.md +++ b/docs/documentatie/User Interface.md @@ -3,8 +3,9 @@ Voor de user interface hebben wij gekozen voor een arcade thema. Hiervoor maken we gebruik van rechte hoeken, neon kleuren en wat trademarks van arcade games zoals 3 letter namen en een highscore lijst. ## kleuren - - +De kleuren die we gebruiken zijn felle kleuren op een donkere achtergrond, dit heeft 2 redenen: het is makkelijker voor de ogen en het past bij het arcade thema. ## positionering -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 +Door gebruik te maken van rectMode(CENTER) en textAllign(CENTER, CENTER) kunnen we de positionering doen gebaseerd op de width en length van het scherm. Hierdoor is de UI semi-responsive en kan het op elke scherm grootte goed worden weergegeven. + +## \ No newline at end of file diff --git a/web/game.js b/web/game.js index acc3ffc..ddb87ee 100644 --- a/web/game.js +++ b/web/game.js @@ -631,16 +631,16 @@ function bouncing() { bossPosY += bossVelY; // Check for bounce if (bossPosX > width - 25) { - bossVelX = random([-4,-5,-6]); + bossVelX = random([-4, -5, -6]); } if (bossPosX < 25) { - bossVelX = random([4,5,6]); + bossVelX = random([4, 5, 6]); } if (bossPosY > height - 25) { - bossVelY = random([-4,-5,-6]); + bossVelY = random([-4, -5, -6]); } if (bossPosY < 25) { - bossVelY = random([4,5,6]); + bossVelY = random([4, 5, 6]); } // Draw the boss @@ -660,19 +660,19 @@ function game() { circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize); pop(); movementCheck(); + + + push(); + fill(0, 255, 0); if (phases[2] == false || phase[3] == false) { bouncing(); } else if (phases[2] = true) { bossPosX = x2; bossPosY = y2; - } else{ + } else { bossPosX = width / 2; bossPosY = height / 6; } - - push(); - fill(255, 165, 0) - pop(); if (hasMoved == true) { push(); @@ -712,7 +712,7 @@ 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); diff --git a/web/js/Menu.js b/web/js/Menu.js index 4a68313..1cb4b3e 100644 --- a/web/js/Menu.js +++ b/web/js/Menu.js @@ -15,7 +15,11 @@ function preload() { } function homescreen() { - textAlign(CENTER); + 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") @@ -58,8 +62,7 @@ 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) pop() }