Question

我9岁的儿子正在学习Javascript。我无法轻易地帮助他。他正在做一个小项目，似乎无法克服错误：

未捕获的ReferenceError：mainLoop未定义。

对他来说，这是一个很好的学习机会。我们感谢有关他的代码中导致错误的所有线索。谢谢！

这就是他所拥有的：

var CANVAS_WIDTH = 800;
var CANVAS_HEIGHT = 400;
var LEFT_ARROW_KEYCODE = 37;
var RIGHT_ARROW_KEYCODE = 39;
//SETUP
var canvas = document.createElement('canvas');
var c = canvas.getContext('2d');

canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;

document.body.appendChild(canvas);
window.requestAnimationFrame(mainLoop);
var shapeInfo = {
  squares: {

    square1: {
      x: 10,
      y: 10,
      w: 30,
      h: 30,
      color: 'orange'
    }

  }
};
window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp);

var leftArrowKeyIsPressed = false;
var rightArrowKeyIsPressed = false;
var touchingRightEdge = false;
// SENSORS
function sense() {
  if (shapeInfo.squares.square1.x <= CANVAS_WIDTH - 30) {
    touchingRightEdge = true;
  }
  // PLAYER CONTROLS

  function onKeyDown(event) {

    if (event.keyCode === RIGHT_ARROW_KEYCODE) {
      rightArrowKeyIsPressed = true;
    }

  }

  function onKeyUp(event) {
    if (event.keyCode === RIGHT_ARROW_KEYCODE) {
      rightArrowKeyIsPressed = false;
    }

  }


  //MAIN LOOP
  function mainLoop() {
    window.requestAnimationFrame(mainLoop);
    draw();
  }
  //DRAW
  function draw() {
    c.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    // Draw the frame
    c.strokeStyle = 'black';
    c.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    // Draw square1
    c.fillStyle = shapeInfo.squares.square1.color;
    c.fillRect(shapeInfo.squares.square1.x, shapeInfo.squares.square1.y, shapeInfo.squares.square1.w, shapeInfo.squares.square1.h);
    if (rightArrowKeyIsPressed) {
      if (!touchingRightEdge) {
        shapeInfo.squares.square1.x++;
      }
    }
    if (leftArrowKeyIsPressed) {

      shapeInfo.squares.square1.x--;

    }
    // end
  }
}

Answer 1

很高兴得知您的儿子正在学习像JavaScript这样酷的东西。现在，正如@Pointy指出的（没有双关语），您正在window.requestAnimationFrame(mainLoop);函数外部调用sense，这会导致错误。 mainLoop函数在sense外部不存在。

解决方案是全局定义函数，在这种情况下，含义是：
不在其他函数中。

所以不要这样做：

function foo() {
  // Do something

  function bar() {
    // Do something else
  }

}

foo() // Do someting
bar() // Uncaught ReferenceError: bar is not defined.

现在bar仅存在于foo中。而是这样做：

function foo() {
  // Do something
}

function bar() {
  // Do something else
}

foo() // Do something
bar() // Do something else

这两个函数现在都可以从同一 scope 调用（记住这个词）。

此外，在您的mainLoop函数中，您还需要进行一些切换。在再次启动draw之前，请先尝试调用mainLoop函数。 JavaScript从上到下工作。因此，在下面的示例中，它将首先draw，然后再次开始循环。

function mainLoop() {
  draw();
  window.requestAnimationFrame(mainLoop);
}

孩子，你做得很好！保持它，并在需要时再回来。我们会帮助您！

收到此错误：Uncaught ReferenceError：未定义mainLoop

1 个答案: