Javascript:调用函数onsubmit不拦截参数

Question

我正在尝试在 Vanilla JS 中制作一个蛇游戏，其中有可能改变级别。每个级别都由一个函数生成的不同迷宫表示:

function createMaze(selected) {
  for (let y = 0; y < selected.length; y++) {
    for (let x = 0; x < selected[y].length; x++) {
      if (selected[y][x] === 1) {
        ctx.fillStyle = "black";
        ctx.fillRect(x*10, y*10, 10, 10);
      }
    }
  }
}

通过表单来改变级别:

<form id="levelSelect">
  <select id="levels">
    <option value="gridLevel1">One</option>
    <option value="gridLevel2">Two</option>
    <option value="gridLevel3">Three</option>
    <option value="gridLevel4">Four</option>
    <option value="gridLevel5">Five</option>
  </select>
  <input type="submit">
</form>

定义如下:

const levelSelection = document.querySelector("#levelSelect");
const levelDropdown = document.querySelector("#levels");

然后在事件监听器中被调用:

levelSelection.addEventListener("submit", (event) => {
  event.preventDefault();
  selected = levelDropdown.options[levelDropdown.selectedIndex].value;
  createMaze(selected);
  console.log(selected);
});

由于一开始 createMaze 函数没有特定参数，因为没有执行选择，所以我添加了一个子句:

if (!selected) selected = gridLevel1;

当游戏开始时，createMaze(selected) 函数将被调用。

但是，即使在事件监听器中，当我调用函数 createMaze(selected) 时，我也能够注销作为级别名称的值(这也是代表每个级别的数组的名称)它似乎不起作用。如果我在 creatMaze 中记录所选内容，它只会打印出数组的名称，而不是数组本身。

Answer 1

因为selected是一个字符串，例如"gridLevel1"，但你希望它是一个变量gridLevel1。这可以通过在窗口对象中查找来轻松完成:

 window["gridLevel1"] // gridLevel1

或者在您的一般情况下:

createMaze(window[selected]);

但是，尽管这有效，但您应该考虑将级别放入对象中:

const levels = {
  gridLevel1: [ /*..*/ ],
  //...
 };

所以你可以这样做:

createMaze(levels[selected])