I am making a text-based game in javascript
and have the following code:
!(function () {
let iterator = 0;
let cbs = [];
class Room {
get side() {
const self = this;
return new Proxy([], {
get(t, p) {
return self.sides[p].description;
}
})
}
constructor(sides) {
this.sides = sides;
}
}
class Character {}
function start(roomMap) {
function showRoom(room) {
let finalArray = [
['in this room, there are four doors', '[ ok ]']
];
for (let i in room.sides) {
finalArray.push(['#' + (parseInt(i) + 1) + ': ' + room.side[i], '[ next ]']);
}
follow(...finalArray);
}
showRoom(roomMap);
}
function write(text, subtext = "") {
document.querySelector("#title").innerText = text;
document.querySelector("#subtitle").innerText = subtext;
}
function step(callback) {
cbs.push(callback);
}
function follow(...steps) {
function call(i) {
return function() {
const toCall = call(i + 1);
const st = steps[i];
let shouldContinue = true;
function callIt() {
step(toCall);
}
if (typeof st !== "undefined") {
if (typeof st === "object") {
write(...st);
} else if (typeof st === "function") {
const called = st();
if (called instanceof Promise) {
shouldContinue = false;
write(null, '[ loading... ]');
called.then(callIt);
} else if (typeof called === "object") {
write(...called);
}
}
if (shouldContinue) {
callIt();
}
} else {
write('the end', '[ ok ]');
}
}
}
call(0)();
}
window.onload = function () {
function next() {
const callback = cbs[iterator];
if (typeof callback === "function") {
callback();
iterator++;
}
}
document.querySelector("#subtitle").onclick = next;
document.onkeypress = function(e) {
if (e.key.trim().length === 0 || e.key === 'Enter' || e.key === 'Return') {
next();
}
}
};
follow(
["a game by ezra", "[ ok ]"],
["follow on-screen instructions", "[ ok ]"],
[null, "[ start ]"],
function() {
start(new Room([
{
description: 'creepy description'
},
{
description: 'another creepy description'
},
{
description: 'less creepy description'
},
{
description: 'boring description'
}
]));
}
);
})();
body {
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
font-family: monospace;
color: #ffffff;
height: 100vh;
flex-direction: column;
user-select: none;
}
#title {
font-size: 25px;
font-weight: 700;
}
#subtitle {
font-size: 18px;
}
#title:not(:empty) + #subtitle:not(:empty) {
margin-top: 10px;
}
#subtitle:hover {
cursor: pointer;
}
<div id="title"></div>
<div id="subtitle"></div>
但是,如您所见,它在第一次按下后卡住,并认为游戏结束了。我尝试调试并记录iterator变量,但是它遵循正确的顺序, 这意味着在回调数组的迭代上没有任何麻烦。
So I'm just wondering what I'm doing wrong during the follow
function that is referencing an undefined index on the cbs
(callbacks) array.
任何帮助,将不胜感激。