1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
game.system.Menu = () => {
let state;
const menuElement = document.getElementById("menu");
const escapeEventListener = (e) => {
if (e.key == "Escape") {
setState('main');
}
};
const setState = (newState) => {
state = newState;
draw();
};
const bringUpMenu = () => {
game.running = false;
window.addEventListener("keydown", escapeEventListener);
setState("main");
};
const hide = () => {
menuElement.style.display = "none";
game.startLoop();
};
const 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;
}
game.controls[action] = event.key;
localStorage.setItem("controls", JSON.stringify(game.controls));
element.innerHTML = event.key;
};
window.addEventListener("keydown", handleKey);
};
const setLevel = (index) => {
game.loadLevelIndex(index);
hide();
};
const draw = () => {
menuElement.style.display = "block";
menuElement.innerHTML = `<h1><span style='color: blue'>Big Blue</span> Is <span style='color: green'>You</h1>`;
if (state == "main") {
menuElement.innerHTML += `
<div class='menu-button' onclick='game.systems.menu.setState("controls")'>Change Controls</div>
<div class='menu-button' onclick='game.systems.menu.setState("credits")'>Credits</div>
<div class='menu-button' onclick='game.systems.menu.setState("levelSelect")'>Select Level</div>
`;
}
else if (state == "controls") {
menuElement.innerHTML += `
<div>
<p>
Move left: <button id="moveLeft" onfocus='game.systems.menu.listenFor("left", "moveLeft")'>${game.controls.left}</button>
<br>
Move right: <button id="moveRight" onfocus='game.systems.menu.listenFor("right", "moveRight")'>${game.controls.right}</button>
<br>
Move up: <button id="moveUp" onfocus='game.systems.menu.listenFor("up", "moveUp")'>${game.controls.up}</button>
<br>
Move down: <button id="moveDown" onfocus='game.systems.menu.listenFor("down", "moveDown")'>${game.controls.down}</button>
<br>
Undo: <button id="undo" onfocus='game.systems.menu.listenFor("undo", "undo")'>${game.controls.undo}</button>
<br>
Reset: <button id="reset" onfocus='game.systems.menu.listenFor("reset", "reset")'>${game.controls.reset}</button>
</p>
</div>
`;
} else if (state == "credits") {
menuElement.innerHTML += `
<div>
<p>
Sprites from Baba Is You, as hosted <a href="https://www.spriters-resource.com/pc_computer/babaisyou/sheet/115231/">here</a>, and a few custom ones.
<br>
Background is from <a href="https://i.pinimg.com/originals/b2/2a/a2/b22aa22b2f3f55b6468361158d52e2e7.gif">PinImg</a>.
<br>
Developed by Logan Hunt, Ethan Payne
</p>
</div>
`;
} else if (state == "levelSelect") {
menuElement.innerHTML += `
<div>
<p> Select a level to play: </p>
${
game.levels.map((level, index) => {
return `<div class='menu-button' onclick='game.systems.menu.setLevel(${index});'>${level.levelName}</div>`;
}).join("")
}
`;
}
menuElement.innerHTML += "<div class='menu-button' onclick='game.systems.menu.hide()'>Resume Game</div>";
if (state !== "main") {
menuElement.innerHTML += "<div class='menu-button' onclick='game.systems.menu.setState(\"main\")'>Back</div>";
}
};
return { bringUpMenu, setState, listenFor, hide, setLevel, state };
};
|
