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>