Entonces... me sale un error:
"<a class='gotoLine' href='#101:18'>101:18</a> Uncaught TypeError: Cannot read properties of undefined (reading 'x')"Cuando ejecuto esto:
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>¿Cual es el problema? He leído mi código y no puedo encontrar ningún problema. Debería representar dos objetos en un lienzo HTML; siempre que no choquen.
Solo debes corregir algún error tipográfico.
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>