Question

我正在制作一个物理引擎，该引擎利用JavaScript创建具有物理属性的盒子，这些盒子以窗口大小的比例应用于它们。但是，函数document.getElementByClassName("box")无法找到包含这些框的所有物理属性的类调用框。

我正在尝试分配变量boxelem以包含每个单独框的位置属性，以便将来可以将鼠标操作集成到我的程序中。我试过通过代码做到这一点：
var boxelem = document.getElementsByClassName("box"); 然后在事件监听器上添加一个鼠标到boxelem。

必要的代码：

var canvas;
var ctx;
var box = [];
var boxelem;

//Startup Code
window.onload = function(e) {
    canvas = document.getElementById("c");
    ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    box = [new box(10, 20, "cyan"), new box(299, 40, "red"), new box(90, 50,
      "black"), new box(29, 20, "turquoise")];
    boxelem = document.getElementsByClassName("box");
    noscroll();
    update();
  }

  //Physic Clock (For real-time physics)
var clock = {
    lasttick: 0,
    tick: function() {
      var td = performance.now() - this.lasttick;
      this.lasttick = performance.now();
      return td / 1000;
    },
    reset: function() {

    }
  }

  //Box objects be created here (Box Class)
var box = function(x, y, color) {
  var _this = this;
  //First Spawn Physics and Settings
  _this.x = Math.random() * (canvas.width - 50);
  _this.y = Math.random() * (canvas.height - 50);
  _this.vx = 0;
  _this.vy = Math.random() * 150;
  _this.ax = 0;
  _this.ay = 440;
  _this.color = color;

  _this.draw = function() {
      ctx.fillStyle = _this.color;
      ctx.fillRect(_this.x, _this.y, 50, 50);
    }

    //Normal Physics
  _this.update = function(t, mX, mY) {
    if (mX != 0) {
      _this.x += _this.vx * t;
      _this.vx += mX * t;
    } else {
      _this.x += _this.vx * t;
      _this.vx += _this.ax * t;
    }
    _this.y += _this.vy * t;
    _this.vy += _this.ay * t;

    //Boundary Creation
    if ((_this.y + 55) > canvas.height) {
      _this.vy -= _this.ay * t;
      _this.vy = 0;

    }
    if ((_this.x + 55) > canvas.width) {
      _this.vx -= _this.ax * t;
      _this.vx = 0;
    }
    if ((_this.y) < 0) {
      _this.vy -= _this.ay * t;
      _this.vy = 0;
      _this.y = (canvas.height + 20);
    }
    if ((_this.x) < 0) {
      _this.vx -= _this.ax * t;
      _this.vx = 0;
    }
  }
}

//Get mouse position if over a box
var pageX = 0;
var pageY = 0;
for (var z = 0; z < box.length; z++) {
  boxelem.addEventListener("mouse", mPos, false);
}

底部的事件监听器发出错误，因为boxelem未找到getElementsByClassName未找到的元素，因此未定义<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <script type=text/javascript src="Physics.js"></script> <meta charset="utf-8" /> <title>Physics Engine of Boxes</title> </head> <body> <canvas id="c"></canvas> </body> </html>。 HTML代码：

:text

我查看过（Unobtrusive Javascript-Basic Implementation: How do I bind all elements of a particular class to a function in Javascript?）和（Change an element's class with JavaScript），但我不确定如何将其应用到我的问题中。

Answer 1

循环的这个主体没有访问索引。此外，您使用的.length来自box函数，而不是boxelem集合。

此：

for (var z = 0; z < box.length; z++) 
{
  boxelem.addEventListener("mouse", mPos, false);
}

应该是这样的：

for (var z = 0; z < boxelem.length; z++) 
{
  boxelem[z].addEventListener("mouse", mPos, false);
}

正如D Simon在下面指出的那样，boxelem是undefined，因为在DOM加载之前你不会填充该变量。在尝试使用该变量之前，您应该确保获取这些项目。

如果您将所有代码移至window.onload，它应该可以正常运行。请注意，window.onload在加载所有资源之前不会运行。您可能希望使用更快触发的其他事件，但这是另一个主题。

//Startup Code
window.onload = function(e) {
    var canvas = document.getElementById("c");
    var ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var box = [new box(10, 20, "cyan"), new box(299, 40, "red"), new box(90, 50,
      "black"), new box(29, 20, "turquoise")];
    var boxelem = document.getElementsByClassName("box");
    noscroll();
    update();

    //Physic Clock (For real-time physics)
    var clock = {
        lasttick: 0,
        tick: function() {
          var td = performance.now() - this.lasttick;
          this.lasttick = performance.now();
          return td / 1000;
        },
        reset: function() {

        }
      }

    //Box objects be created here (Box Class)
    var box = function(x, y, color) {
      // ...implementation...
    }

    //Get mouse position if over a box
    var pageX = 0;
    var pageY = 0;
    for (var z = 0; z < boxelem.length; z++) {
      boxelem[z].addEventListener("mouse", mPos, false);
    }
}

Javascript document.getElementByClassName找不到内部类

1 个答案: