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

因为<template> <div class="data row"> <section class="col-md-6"> <h5>Consumption</h5> <line-chart :data="chartData" :options="chartOptions"></line-chart> </section> <section class="data col-md-6"> <h5>Line Observation</h5> <bubble-chart ></bubble-chart> </section> </div> </template> <script> import LineChart from '../components/LineChart.js' import BubbleChart from '../components/BubbleChart.js' export default { components: { LineChart, BubbleChart }, name: 'Monitor', mounted () { this.getLiveReadings() }, data () { return { msg: 'Live Monitor', chartData: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'Meter 1', borderColor: '#649EB9', pointBackgroundColor: 'white', borderWidth: 1, pointBorderColor: '#649EB9', backgroundColor: 'transparent', data: [0, 0, 0, 0, 0, 0, 0] }, { label: 'Meter 2', borderColor: '#249EBF', pointBackgroundColor: 'white', borderWidth: 1, pointBorderColor: '#249EBF', backgroundColor: 'transparent', data: [0, 0, 0, 0, 0, 0, 0] }, { label: 'Meter 3', borderColor: '#FF0E00', pointBackgroundColor: 'white', borderWidth: 1, pointBorderColor: '#FF0E00', backgroundColor: 'transparent', data: [0, 0, 0, 0, 0, 0, 0] } ] }, chartOptions: {responsive: true, maintainAspectRatio: false, minUnit: 10} } }, methods: { getLiveReadings: function () { setInterval(() => { pushData(this.chartData.datasets[0].data) pushData(this.chartData.datasets[1].data) pushData(this.chartData.datasets[2].data) }, 5000) } } } function pushData (data) { data.push(Math.floor(Math.random() * 100) + 1) data.shift() } </script>  <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } </style>是一个字符串，例如selected，但是您希望它是一个变量"gridLevel1"。在窗口对象中查找即可轻松完成此操作：

gridLevel1

或者在一般情况下：

 window["gridLevel1"] // gridLevel1

但是，尽管这行得通，但您应该考虑将关卡放入对象中

createMaze(window[selected]);

因此您可以这样做：

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

JavaScript：调用函数onsubmit不会拦截参数

1 个答案: