Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Menu design2 #5

Merged
merged 2 commits into from
Nov 8, 2021
Merged

Menu design2 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
534eba1
fix buttons
shadhoq26 Nov 8, 2021
2a1626e
Menu design and buttons
shadhoq26 Nov 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 22 additions & 7 deletions Public/js/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,26 @@ class Button {
this.width = width1;
this.height = height1;
this.text = t;
this.backgroundColor = "";
this.hoverColor = "";
this.backgroundColor = "White";
this.hoverColor = "red";
this.textColor = "black";
this.font = "20px Arial";
this.textAlign = "center";
}

draw(dt,mx,my) {

if (this.mouseOver(mx,my)) {
ctx.fillStyle = 'red';
ctx.fillStyle = this.hoverColor;
} else {
ctx.fillStyle = '#FFFFFF';
ctx.fillStyle = this.backgroundColor;
}

ctx.fillRect(this.x,this.y,this.width,this.height);

ctx.font = "20px Arial";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.font = this.font;
ctx.fillStyle = this.textColor;
ctx.textAlign = this.textAlign;
ctx.fillText(this.text, this.x + this.width/2, this.y + this.height / 2);

}
Expand All @@ -33,4 +36,16 @@ class Button {
return false;
}
}

setX (x1){this.x = x1;}
setY (y2){this.y = y2;}
setWidth (w1){this.width = w1;}
setHeight (h1){this.height = h1;}
setText (t1){this.text = t1;}
setBackgroundColor (bc1){this.backgroundColor = bc1;}
setHoverColor (hc1){this.hoverColor = hc1;}
setTextColor (tc1){this.textColor = tc1;}
setFont (f1){this.font = f1;}
setTextAlign (ta1){this.textAlign = ta1;}

}
98 changes: 76 additions & 22 deletions Public/js/SceneManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@ class SceneManager {
this.matchmaking = false;

this.playButton = new Button(c.width/2-150,c.height/2-75,300,150, "Play");
this.settingsButton = new Button(c.width/2-150,c.height/2+100,300,150, "Settings");
this.matchmakeButton = new Button(c.width/2-150,c.height/2+300,300,150, "Matchmake");

this.settingsButton = new Button(c.width/2+300,c.height/2-100,300,150, "Settings");
this.matchmakeButton = new Button(c.width/2-600,c.height/2-100,300,150, "Matchmake");
this.actionButtons = {
wait: new Button(20,600,200,100,"Wait +2p + 10hp"),
heal: new Button(200+80,600,200,100,"Heal -6p + 30hp"),
Expand All @@ -23,8 +22,16 @@ class SceneManager {
earth: new Button(600+20,c.height/2-300,300,600,"Earth"),
air: new Button(900+20,c.height/2-300,300,600,"Air"),
};

this.settingBackButton = new Button(c.width/2-150,c.height/2+300,300,150, "Back");
this.settingCreditButton = new Button(c.width/2-150,c.height/2+100,300,150, "Credits");
this.creditBackButton = new Button(c.width/2-150,c.height/2+300,300,150, "Back");
this.perkScreenButton = new Button(c.width/2-150,c.height/2-100,300,150, "Perk Screen");
this.perkBackButton = new Button(c.width/2-150,c.height/2+300,300,150, "Back");
this.menuBackButton = new Button(c.width/2-300,c.height/2+300,600,100, "Back");
}


run(dt) {
//switch scenes
switch(this.scene) {
Expand Down Expand Up @@ -79,21 +86,14 @@ class SceneManager {
//draw title text
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.font = "100px Arial white";
ctx.font = "100px Arial";
ctx.fillText("Elemental 4", c.width/2, c.height/2-200);

// play button
this.playButton.draw(dt,mouseX,mouseY);

// settings button
this.settingsButton.draw(dt,mouseX,mouseY);


//placeholder
ctx.font = "50px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Play", c.width/2, c.height/2);
ctx.fillStyle = 'blue';
ctx.fillText("Settings", c.width/2, c.height/2+200);

}
drawSettings() {
Expand All @@ -105,17 +105,48 @@ class SceneManager {
ctx.font = "100px Arial";
ctx.textAlign = "center";
ctx.fillText("Settings",c.width/2, 200);

//button section for settings
this.settingBackButton.draw (dt,mouseX, mouseY);
this.settingCreditButton.draw(dt,mouseX, mouseY);
}


drawCredits(){
ctx.fillStyle = "black";
ctx.fillRect (0,0,c.width, c.height);

//this will draw the credit title screen.
ctx.fillStyle= "white";
ctx.fillStyle= "Blue";
ctx.font = "100px Arial";
ctx.textAlign = "center";
ctx.fillText("Game Credits",c.width/2, 200);
ctx.fillText("CyberCloud Studios",c.width/2, 200);

//button section for credits
this.creditBackButton.draw (dt,mouseX, mouseY);

//This will be the actual credits

ctx.fillStyle= "white";
ctx.font = "30px Arial";
ctx.textAlign = "center";

ctx.fillText("Ice, Lava and Air Background",c.width/2, 275);

ctx.font = "15px Arial";
ctx.fillText("Glacial Mountains: Parallax Background by Vicente Nitti (www.vnitti.itch.io)",c.width/2, 340);
ctx.fillText("Licensed under Creative Commons: By Attribution 4.0 License",c.width/2, 380);
ctx.fillText("http://creativecommons.org/licenses/by/4.0/",c.width/2, 420);
ctx.fillText("Parts of this work was remixed.",c.width/2, 460);

ctx.font = "30px Arial";
ctx.fillText("Earth Background",c.width/2, 595);

ctx.font = "15px Arial";
ctx.fillText("Grassy Mountains: Parallax Background by Vicente Nitti (www.vnitti.itch.io)",c.width/2, 660);
ctx.fillText("Licensed under Creative Commons: By Attribution 4.0 License",c.width/2, 700);
ctx.fillText("http://creativecommons.org/licenses/by/4.0/",c.width/2, 740);
ctx.fillText("Parts of this work was remixed.",c.width/2, 780);
}

drawMenu() {
Expand All @@ -129,11 +160,17 @@ class SceneManager {
ctx.fillText("Menu",c.width/2, 200);

if (this.matchmaking) {
ctx.fillStyle = "white";
ctx.fillText("Matchmaking...", c.width/2, c.height/2);
ctx.font = "50px Arial";
ctx.fillStyle = "Red";
ctx.fillText("Matchmaking...", c.width/2, c.height/2-200);
} else {
this.matchmakeButton.draw(dt, mouseX, mouseY);
}

this.perkScreenButton.draw(dt,mouseX,mouseY);
this.settingsButton.draw(dt,mouseX,mouseY);
this.menuBackButton.draw(dt,mouseX,mouseY);

}

drawPerkScreen() {
Expand All @@ -145,6 +182,9 @@ class SceneManager {
ctx.font = "100px Arial";
ctx.textAlign = "center";
ctx.fillText("Perk Screen",c.width/2, 200);

this.perkBackButton.draw(dt,mouseX,mouseY);

}

pickCharacter() {
Expand Down Expand Up @@ -177,7 +217,7 @@ class SceneManager {
break;
}

//which player am i
//which player am I ?
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.font = "50px Arial";
Expand Down Expand Up @@ -214,22 +254,36 @@ class SceneManager {
case 1: //title screen
if (this.playButton.mouseOver(mouseX,mouseY)) {
this.scene = 4;
} else if (this.settingsButton.mouseOver(mouseX,mouseY)) {
this.scene = 2;
}
break;
case 2: //settings screen

if(this.settingBackButton.mouseOver(mouseX,mouseY)) {
this.scene = 4;
} else if (this.settingCreditButton.mouseOver(mouseX,mouseY)){
this.scene = 3;
}
break;
case 3: //credits screen

if(this.creditBackButton.mouseOver(mouseX,mouseY)) {
this.scene = 2;
}
break;
case 4: //menu screen
if (this.matchmakeButton.mouseOver(mouseX, mouseY)) {
matchmake();
} else if (this.perkScreenButton.mouseOver(mouseX,mouseY)){
this.scene = 5;
} else if (this.settingsButton.mouseOver(mouseX,mouseY)) {
this.scene = 2;
} else if (this.menuBackButton.mouseOver(mouseX,mouseY)) {
this.scene = 1;
}

break;
case 5:
case 5: //perk screen
if(this.perkBackButton.mouseOver(mouseX,mouseY)) {
this.scene = 4;
}

break;
case 6: //character select
Expand Down
15 changes: 0 additions & 15 deletions Public/menu.html
View file
Open in desktop

This file was deleted.