为什么在定义它们时它会不断抛出读取未定义变量错误？

Question

所以.....我得到一个错误：

"<a class='gotoLine' href='#101:18'>101:18</a> Uncaught TypeError: Cannot read properties of undefined (reading 'x')"

当我运行这个：

var Canvas = document.getElementById('ViewPort');
var Context = Canvas.getContext("2d");

Canvas.width = 250;
Canvas.height = 250;
Canvas.style.border = "1px solid black";

var Objects = [];

//Testing

Objects.push({

  x: 50,
  y: 50,
  width: 50,
  height: 50,
  style: "black",

})

Objects.push({

  x: 55,
  y: 55,
  width: 50,
  height: 50,
  style: "blue",

})

//End Testing

function RenderObjects() {

  for (var i = 0; i < Objects.length; i++) {

    for (var j = 0; j < Objects.length; j++) {

      if (Hitting(Object[i], Object[j])) {

        console.log("Hitting object " + j);
        console.log(Object[j])

      } else {

        Context.fillStyle = Objects[i].fillstyle;
        Context.fillRect(Objects[i].x, Objects[i].y, Objects[i].width, Objects[i].height);

      }

    }


  }

}

function Hitting(rectA, rectB) {

  return !(rectA.x + rectA.width < rectB.x ||
    rectB.x + rectB.width < rectA.x ||
    rectA.y + rectA.height < rectB.y ||
    rectB.y + rectB.height < rectA.y);

}

RenderObjects();

<canvas id = "ViewPort"></canvas>

这是什么问题？我已经通读了我的代码，但找不到任何问题。它应该在 HTML canvas 上渲染两个对象；前提是不相撞。

Answer 1

你只需要修正一些错字。

var Canvas = document.getElementById('ViewPort');
var Context = Canvas.getContext("2d");

Canvas.width = 250;
Canvas.height = 250;
Canvas.style.border = "1px solid black";

var Objects = [];

//Testing

Objects.push({

  x: 50,
  y: 50,
  width: 50,
  height: 50,
  style: "black",

})

Objects.push({

  x: 55,
  y: 55,
  width: 50,
  height: 50,
  style: "blue",

})

//End Testing

function RenderObjects() {

  for (var i = 0; i < Objects.length; i++) {

    for (var j = 0; j < Objects.length; j++) {

      if (Hitting(Objects[i], Objects[j])) { //instead of Object[i], Object[j]

        console.log("Hitting object " + j);
        console.log(Objects[j]) //instead of Object[j]

      } else {

        Context.fillStyle = Objects[i].fillstyle;
        Context.fillRect(Objects[i].x, Objects[i].y, Objects[i].width, Objects[i].height);

      }

    }


  }

}

function Hitting(rectA, rectB) {

  return !(rectA.x + rectA.width < rectB.x ||
    rectB.x + rectB.width < rectA.x ||
    rectA.y + rectA.height < rectB.y ||
    rectB.y + rectB.height < rectA.y);

}

RenderObjects();

<canvas id = "ViewPort"></canvas>

为什么在定义它们时它会不断抛出读取未定义变量错误？

Why does it keep throwing a reading undefined variable error when they ARE defined?

html

javascript

debugging

html5-canvas