是否有原因更改此数组索引的错误?

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.

任何帮助,将不胜感激。