const menu = {};
menu.initialize = () => {
menu.scores = localStorage.getItem("scores") ? JSON.parse(localStorage.getItem("scores")) : [];
menu.state = "main";
menu.controls = localStorage.getItem("controls") ? JSON.parse(localStorage.getItem("controls")) : {
"moveUp": "ArrowUp",
"moveDown": "ArrowDown",
"moveLeft": "ArrowLeft",
"moveRight": "ArrowRight",
"shoot": " ",
};
}
menu.setState = (state) => {
menu.state = state;
menu.draw();
}
menu.escapeEventListener = (e) => {
if (e.key == "Escape") {
menu.setState('main');
menu.draw();
}
}
menu.showMenu = () => {
menu.draw();
game.stopped = true;
window.addEventListener("keydown", menu.escapeEventListener);
}
menu.reRegisterKeys = () => {
Object.keys(game.keyboard.handlers).map(key => game.keyboard.unregisterCommand(key));
game.keyboard.registerCommand(menu.controls.moveUp, game.player.moveUp);
game.keyboard.registerCommand(menu.controls.moveDown, game.player.moveDown);
game.keyboard.registerCommand(menu.controls.moveLeft, game.player.moveLeft);
game.keyboard.registerCommand(menu.controls.moveRight, game.player.moveRight);
game.keyboard.registerCommand(menu.controls.shoot, game.player.shoot);
game.keyboard.registerCommand("Escape", menu.showMenu);
localStorage.setItem("controls", JSON.stringify(menu.controls));
}
menu.addScore = (score) => {
menu.scores.push(score);
menu.scores.sort((a, b) => b - a);
localStorage.setItem("scores", JSON.stringify(menu.scores));
}
menu.hide = () => {
const menuElement = document.getElementById("menu");
menuElement.style.display = "none";
menu.reRegisterKeys();
window.removeEventListener("keydown", menu.escapeEventListener);
if (menu.onHide) {
menu.onHide();
menu.onHide = null;
}
game.resume();
}
menu.listenFor = (action, elementId) => {
const element = document.getElementById(elementId);
element.innerHTML = "Listening...";
const handleKey = (event) => {
window.removeEventListener("keydown", handleKey);
if (event.key == "Escape") {
element.innerHTML = menu.controls[action];
return;
}
menu.controls[action] = event.key;
element.innerHTML = event.key;
}
window.addEventListener("keydown", handleKey);
}
menu.draw = () => {
const menuElement = document.getElementById("menu");
menuElement.style.display = "block";
menuElement.innerHTML = `Centipede
`;
if (menu.state == "main") {
menuElement.innerHTML += `
`;
}
else if (menu.state == "controls") {
menuElement.innerHTML += `
Move left:
Move right:
Move up:
Move down:
Shoot:
`
} else if (menu.state == "credits") {
menuElement.innerHTML += `
`
} else if (menu.state == "scores") {
menuElement.innerHTML += `
${menu.scores.map((score, index) => `${index + 1}: ${score}
`).join("")}
`
} else if (menu.state == "game-over") {
menuElement.innerHTML += `
Game Over
Your final score was: ${game.score}
`
}
menuElement.innerHTML += ""
if (menu.state !== "main") {
menuElement.innerHTML += ""
}
}
menu.initialize();