1

Si tengo un constructor:

function B(x,y){

this.x = parseInt(x,10);
this.y = parseInt(y,10);

}

var player1 = new B(20,40);
var player2 = new B(100,20);
var player3 = new B(120,240);
var players = [];
players.push({
nombre:player1,
x: player1.x,
y: player1.y
},
{
nombre:player2,
x: player2.x,
y: player2.y
}
nombre:player3,
x: player3.x,
y: player3.y
);

Ahora necesito itero sobre ellos

var i=0,plargo = players.length;
for(;i<plargo;i++){

// Si mi jugador tiene mayor "x" que cualquier otro jugador colisionan

}

Estoy practicando colisiones en canvas, pero como podría hacer para saber si un jugador colisiona con otro?

Osea, ya se como sacar las coordenadas de una colisión de la siguiente forma con una "pared":

if(player1.x > anchoDElapared - player1.width) player1.x = anchodelapared - player1.width;

El ejemplo de arriba es SOLO para ejemplificar, pero como podria hacer para crear la colision, si cualquiera de los jugadores superan las coordenadas de otros?

Mi codigo actual es:

var c = document.getElementById("c");
var ct = c.getContext("2d");

/* Mapa */


var mapa = {
  
  x1: 0,
  y1: 0,
  y2: 300,
  x2: 300
  
  
};


/* Medidas arriba */ 

function Player(id,n){
  this.x = 0;
  this.mouseX = function(x){ // Posicion X DEL MOUSE
    var xm = parseInt(x,10);
    this.x = xm;
  };
  this.name = n.toString();
  this.y = 20;
  this.id = parseInt(id,10);
  this.speed = 0; // velocidad
  this.gravedad = function(g){ // Gravedad funcional
  this.g = parseFloat(g);  
  this.speed += this.g; // Gravedad
  this.y += this.speed; // eje abscisa
  var limite = 3; // limite de velocidad
  if(this.speed > limite) this.speed = limite; // aplicar limite
  };
  this.clear = function(){ // limpiar dibujado
  var fondo = new Image(); // fondo objeto image
  fondo.src = "https://danielino1.files.wordpress.com/2011/10/fondo-nuves.png";
  ct.drawImage(fondo,0,0); // dibujar fondo
  /* Borde del mapa */
    ct.strokeStyle = "red";
    ct.beginPath();
    ct.moveTo(0,0); // desde
    ct.lineTo(300,0); // hasta..
    ct.moveTo(0,300);
    ct.lineTo(300,300);
    ct.moveTo(0,0);
    ct.lineTo(0,300);
    ct.moveTo(300,0);
    ct.lineTo(300,300);
    ct.stroke();
    ct.closePath();
  };
  this.draw = function(color,x,y,bordecolor,name){ // dibujar jugador :)
  
  ct.fillStyle = color.toString();
  var px = parseInt(x,10);
  var py = parseInt(y,10);
  var playerW = 50;
  var playerH = 50;
  var n = name.toString();
  /* Colisiones especiales | INDIVIDUALES */
  var i=0,pl = players.length;
    
    for(;i<pl;i++) {
      
      
      
    }
   
    
  var bordeLineWidth = 5;  
  /* Colisión abscisa */ if(py > mapa.y2 - playerH) py = mapa.y2 - playerH - bordeLineWidth;  
  ct.beginPath(); // Arregla el bug de la combinación de colores rojo-verde
  ct.lineWidth = 5;  
  ct.strokeStyle = bordecolor;
  if(bordecolor == "red") {
    px = x*2;
    
  }   
  ct.strokeRect(px,py,playerW,playerH)
  ct.fillRect(px,py,playerW,playerH);
  ct.stroke(); 
  ct.fillStyle = "red";
  ct.closePath(); 
  ct.fillText(n,px+4,py-4); // Mismas coordenadas
  };
  
   
}
ct.canvas.width = 300;
ct.canvas.height = 300;


var np = new Player(1,"Eduardo");
var np2 = new Player(2,"Genesis");
var players = []; // Jugadores - LISTA
// Genesis y Eduardo */
players.push({
  
  name: np.name,
  x: np.x,
  y: np.y
  
},{
   
  name: np2.name,
  x: np2.x,
  y: np2.y
             
});
/**///////////////////////*
function loop(){  // Funcion para re-dibujar
  // Jugador 1 - Coordenadas positivas 
  np.clear();
  np.draw("#111",np.x,np.y,"green",np.name);
  np.gravedad("0.02");
  // Jugador 2 - Coordenadas negativas
  np2.draw("#fff",np.x,np.y,"red",np2.name);
  np2.gravedad("0.62");
  /////////////////////
  c.addEventListener("mousemove",function(n){
  np.mouseX(n.clientX);
  np2.mouseX(n.clientX);  
    
  });
  requestAnimationFrame(loop);
  
}
requestAnimationFrame(loop);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="c"></canvas>
</body>
</html>

1 respuesta 1

-1

y si detectas el limite actual de la posición de uno de los objetos con las coordenadas de tu actual objeto (x, y) y los comparas? checa este link

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.