So….. I get an error:
"<a class='gotoLine' href='#101:18'>101:18</a> Uncaught TypeError: Cannot read properties of undefined (reading 'x')"
When I run this:
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>What is the issue? I have read through my code and I can’t find any issue. It should render two objects on an HTML canvas; provided that they don’t collide.
>Solution :
You only should fix some typo.
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>