Tengo un mapa 2D que usa el elemento canvas html y he dibujado un cuadrado rojo como jugador, y una pared de color azul claro debajo. Quiero saber cómo puedo detectar si el jugador (cuadrado rojo) está tocando la pared (azul claro). No tengo clases ni nada, solo dibujé cuadrados usando el elemento canvas, con posiciones establecidas.

CÓDIGO:

 var ctx = document.getElementById("canvas").getContext('2d') document.getElementById("canvas").tabIndex = 1; // quick way to get focus so keypresses register ctx.font = '8px sans'; var offsetx = 0 var offsety = 0 var things = [ [0,100,300,50] ] function offset() { ctx.save(); ctx.translate(offsetx,offsety); // clear the viewport ctx.clearRect(-offsetx, -offsety, 300,300); ctx.fillStyle = "red"; ctx.fillRect(50-offsetx,50-offsety,8,8) // draw the other stuff on the screen, which have the set positions in the array. var l = things.length; var i = 0; for (i = i; i < l; i++) { var x = things[i][0]; var y = things[i][1]; var sizex = things[i][2] var sizey = things[i][3] ctx.fillStyle = 'lightblue'; ctx.fillRect(x, y, sizex, sizey); ctx.fillStyle = 'black'; } ctx.restore(); } offset(); // the first call to draw all the elements. document.getElementById("canvas").addEventListener('keydown', function(e) { if (e.keyCode === 37) { // left offsetx++; } else if (e.keyCode === 39) { // right offsetx--; } else if (e.keyCode === 38) { // up offsety++; } else if (e.keyCode === 40) { // down offsety--; } offset(); }, false); setInterval(function() { // in here i would check for the collisions }, 10);