119 lines
3.0 KiB
JavaScript
119 lines
3.0 KiB
JavaScript
const AfterMenu = {
|
|
Exit: 0,
|
|
Start: 1,
|
|
};
|
|
|
|
class Menu extends Screen {
|
|
constructor(canvas) {
|
|
super(canvas);
|
|
|
|
this.addEventListener('touchstart', (event) => {
|
|
this.onTouchStart(event);
|
|
});
|
|
}
|
|
|
|
render() {
|
|
this.clear();
|
|
this.drawBackground();
|
|
this.drawTitle();
|
|
this.drawMenu();
|
|
}
|
|
|
|
drawTitle() {
|
|
this.context.font = "50px Arial";
|
|
this.context.stokeStyle = 'rgb(0, 0, 0)';
|
|
this.context.fillStyle = 'rgb(255, 255, 255)';
|
|
|
|
let text = "Escalator";
|
|
let size = this.context.measureText(text).width;
|
|
let offset = (this.width() - size) / 2;
|
|
|
|
this.context.fillText(text, offset, 0.1 * this.width() + 50);
|
|
this.context.strokeText(text, offset, 0.1 * this.width() + 50);
|
|
}
|
|
|
|
drawMenu() {
|
|
this.context.font = "30px Arial";
|
|
this.context.fillStyle = 'rgb(255, 255, 255)';
|
|
|
|
let text = "New Game";
|
|
let box = this.newGameBox();
|
|
this.context.fillText(text, box.x, box.y + 30);
|
|
|
|
// this.context.beginPath();
|
|
// box = this.enlargeBox(box);
|
|
// this.context.rect(box.x, box.y, box.width, box.height);
|
|
// this.context.stroke();
|
|
|
|
text = "Exit";
|
|
box = this.exitBox();
|
|
this.context.fillText(text, box.x, box.y + 30);
|
|
|
|
// this.context.beginPath();
|
|
// box = this.enlargeBox(box);
|
|
// this.context.rect(box.x, box.y, box.width, box.height);
|
|
// this.context.stroke();
|
|
}
|
|
|
|
drawBackground() {
|
|
this.context.fillStyle = 'rgb(255, 0, 0)';
|
|
this.context.beginPath();
|
|
this.context.rect(0, 0, this.width(), this.height());
|
|
this.context.fill();
|
|
}
|
|
|
|
newGameBox() {
|
|
this.context.font = "30px Arial";
|
|
let text = "New Game";
|
|
let size = this.context.measureText(text);
|
|
let offset = (this.width() - size.width) / 2;
|
|
|
|
return {
|
|
x: offset,
|
|
y: 0.5 * this.height(),
|
|
width: size.width,
|
|
height: 30,
|
|
};
|
|
}
|
|
|
|
exitBox() {
|
|
this.context.font = "30px Arial";
|
|
let text = "Exit";
|
|
let size = this.context.measureText(text);
|
|
let offset = (this.width() - size.width) / 2;
|
|
|
|
return {
|
|
x: offset,
|
|
y: 0.7 * this.height(),
|
|
width: size.width,
|
|
height: 30,
|
|
};
|
|
|
|
}
|
|
|
|
onTouchStart(event) {
|
|
let e = event.changedTouches[0];
|
|
|
|
let box = this.enlargeBox(this.newGameBox());
|
|
if (isInBox(position(e), box)) {
|
|
this.status = Status.Finished;
|
|
this.after = AfterMenu.Start;
|
|
}
|
|
|
|
box = this.enlargeBox(this.exitBox());
|
|
if (isInBox(position(e), box)) {
|
|
this.status = Status.Finished;
|
|
this.after = AfterMenu.Exit;
|
|
}
|
|
}
|
|
|
|
enlargeBox(box) {
|
|
return {
|
|
x: box.x - box.width * 0.1,
|
|
y: box.y - box.height * 0.1,
|
|
width: box.width * 1.2,
|
|
height: box.height * 1.4,
|
|
}
|
|
}
|
|
}
|