5

Estoy diseñando un juego. Encontré una forma de detectar las colisiones:

var divPlayer = document.getElementById("div");
var div2 = document.getElementById("div2");
var pdiv1 = div1.getBoundingClientRect(),
  pdiv2 = div2.getBoundingClientRect();

if (
  pdiv1.right >= pdiv2.left &&
  pdiv1.left <= pdiv2.right &&
  pdiv1.bottom >= pdiv2.top &&
  pdiv1.top <= pdiv2.bottom
) {
  // Ejecutar codigo
}

Pero, no sé cómo hacer para que el jugador no traspase el objeto al colisionar con él.

2
  • 4
    Tu pregunta carece de detalles en este momento, para que alguien te pueda ayudar debes añadir un ejemplo mínimo verificable
    – Rodrigo
    Commented el 23 feb. 2021 a las 4:14
  • Con que se hace la animacion: Con css o con js.
    – DABL03
    Commented el 23 feb. 2021 a las 4:26

2 respuestas 2

6
+50

Lo que estas haciendo ahí es detectar que se esta tocando el objeto (entiendo que una pared un objeto con el colisionar), lo que tendría que hacer es tener otro objeto que no sea visible y que actué como bloque de colisión (este es el que se va a encargar de verificar si va a chocar o no). Para eso tienes que mover el objeto de colisión y si este entra en colisión con algo. Que vuelva a la posición anterior y que el objeto o jugador real no se mueva siquiera.

struct LastPositionCollision;
if (
  divPlayerCollision.right >= divPlayerCollision.left &&
  divPlayerCollision.left <= divPlayerCollision.right &&
  divPlayerCollision.bottom >= divPlayerCollision.top &&
  divPlayerCollision.top <= divPlayerCollision.bottom
   ){
    //Ha entrado en colisión con un objeto, no movemos al jugador y volvemos 
    //a resetear la posición del bloque de colisión

      Position = LastPositionCollision;
    }else{
    //No ha entrado en colisión con ningún objeto, movemos el jugador encima 
    //del bloque de colisión del jugador
    }
1

cada personaje podria tener un puntoPixel (x,y,x1,y2) y tambien un area puede ser un area cuadrado, estos datos no deben ser visibles para el usuario, la idea es identificar que el puntoPixel de un personaje esta dentro del area del otro personaje, aqui un ejemplo:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var point = {
  'x': 2,
  'y': 20
};
var point2 = {
  'x': 20,
  'y': 20
};

var cuadrado = {
  'x': 10,
  'y': 10,
  'base': 50,
  'altura': 100
};


function putPixel(ctx, x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, 2, 2);
}

function draw(x, y, base, altura) {
  ctx.strokeRect(x, y, base, altura);
}

draw(cuadrado.x, cuadrado.y, cuadrado.base, cuadrado.altura);
putPixel(ctx, point.x, point.y, 'blue');
putPixel(ctx, point2.x, point2.y, 'red');
console.log(comprobar(point, cuadrado));
console.log(comprobar(point2, cuadrado));

function comprobar(punto, cuadrado) {
  if (punto.x > cuadrado.x && punto.x < cuadrado.x + cuadrado.base && punto.y > cuadrado.y && punto.y < cuadrado.y + cuadrado.altura) {
    return true;
  }
  return false;
}
<canvas id="canvas">
</canvas>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.