200 lines
3.2 KiB
JavaScript
200 lines
3.2 KiB
JavaScript
class GameSelectButton extends ElementsGroup {
|
|
name;
|
|
|
|
x;
|
|
y;
|
|
width;
|
|
height;
|
|
|
|
constructor(x,y,w,h,name) {
|
|
super();
|
|
this.x = x;
|
|
this.y = y;
|
|
this.width = w;
|
|
this.height = h;
|
|
this.name = name;
|
|
}
|
|
|
|
load() {
|
|
var logo = new Rectangle(this.x + 10, this.y + 5, 40, this.height - 5, "rgba(245, 245, 245, 1)");
|
|
|
|
var text_name = new Text(this.name ,logo.startX + 50,this.y + 30, "16px serif" , "rgba(190, 32, 32, 1)");
|
|
|
|
var background = new Rectangle(this.x,this.y, this.width, this.height, "rgba(26, 32, 29, 1)");
|
|
|
|
|
|
this.addElement(background);
|
|
|
|
this.addElement(logo);
|
|
|
|
this.addElement(text_name);
|
|
|
|
console.log(this.elements);
|
|
|
|
|
|
this.draw_selection = (ctx) => {
|
|
//background.color = "rgba(214, 0, 221, 1)";
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const canvas = document.getElementById("main_window");
|
|
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
const windowSize = canvas.getBoundingClientRect();
|
|
|
|
var currentScene;
|
|
|
|
|
|
|
|
menu = new MainMenu(ctx);
|
|
|
|
currentScene = menu;
|
|
|
|
|
|
var logo = new Rectangle(10,10,100,100, "rgb(100,200,200)");
|
|
|
|
var separator = new Line(0, 150, windowSize.width, 150 );
|
|
separator.width = 2;
|
|
|
|
|
|
var game1 = new GameSelectButton(20,200,200,50, "Test 1");
|
|
|
|
|
|
console.log(game1);
|
|
|
|
|
|
|
|
menu.load = () => {
|
|
document.addEventListener("keypress" , e => { menu.keypress(e)});
|
|
menu.user_can_select = true;
|
|
|
|
|
|
|
|
|
|
menu.addElement(logo);
|
|
|
|
menu.addElement(separator);
|
|
|
|
menu.addElement(game1);
|
|
menu.makeSelectable(game1);
|
|
menu.addToSelectable(game1, {x:0, y:0});
|
|
|
|
menu.select(game1);
|
|
|
|
menu.loadAll();
|
|
/* //rect1 = new Rectangle(70,20,100,100, "green");
|
|
rect2 = new Rectangle(10,10,50,50, "red");
|
|
|
|
rect3 = new Rectangle(10,200,50,50, "red");
|
|
rect4 = new Rectangle(70,200,50,50, "red");
|
|
|
|
menu.addElement(rect1);
|
|
menu.addElement(rect2);
|
|
menu.addElement(rect3);
|
|
menu.addElement(rect4);
|
|
|
|
menu.makeSelectable(rect1);
|
|
menu.makeSelectable(rect2);
|
|
menu.makeSelectable(rect3);
|
|
menu.makeSelectable(rect4);
|
|
|
|
menu.addToSelectable(rect1, {x:0, y:0});
|
|
menu.addToSelectable(rect2, {x:1, y:0});
|
|
menu.addToSelectable(rect3, {x:0, y:1});
|
|
menu.addToSelectable(rect4, {x:1, y:1});
|
|
|
|
//rect1.setCenterOrigin();
|
|
|
|
rect1.draw_selection = rect1.drawStroke;
|
|
rect2.draw_selection = rect2.drawStroke;
|
|
rect3.draw_selection = rect3.drawStroke;
|
|
rect4.draw_selection = rect4.drawStroke;
|
|
|
|
|
|
|
|
text = new Text("Tessst" ,10,400, "16px serif" , "rgb(100,100,100)");
|
|
menu.addElement(text);
|
|
let center = text.getCenterXFrom(menu.ctx, rect1.x, rect1.width);
|
|
text.x = center;
|
|
text.y = rect1.y + 150;
|
|
*/
|
|
|
|
//img = new Sprite(400,400,400,400,"../../img/test2.jpg");
|
|
//img.img = new Image();
|
|
//img.img.src = "../../img/test2.jpg";
|
|
// menu.ctx.drawImage(img2, 200,200);
|
|
//menu.addElement(img);
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
currentScene.load();
|
|
function onFrame() {
|
|
|
|
currentScene.drawAll();
|
|
currentScene.updateAll();
|
|
|
|
requestAnimationFrame(onFrame);
|
|
}
|
|
|
|
requestAnimationFrame(onFrame); |