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(选定(函数被调用。

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

Answer 1

因为selected是一个字符串，例如"gridLevel1"，但您希望它是一个变量gridLevel1。这可以很容易地通过在窗口对象中查找来完成：

window["gridLevel1"] // gridLevel1

或者在您的一般情况下：

createMaze(window[selected]);

但是，尽管这是有效的，你应该考虑将级别放入一个对象中：

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

所以你可以做：

createMaze(levels[selected])