Hola estoy haciendo un programita de una pelota que rebota dentro de un div.
El problema viene cuando intento añadir otra pelota y entoces solo se me mueve una de ellas.
Esta es la pagina principal:
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Practica 24</title>
<script type="text/javascript" src="clasePelota.js"></script>
</head>
<body>
<div style="width:600px;height:600px;border:1px orange solid;" id="campo">
</div>
<div style="background-color:gray;width:600px; height:50px;" id="info">
</div>
<script type="text/javascript">
var pelota1 = new ClasePelota(3,2);
var pelota2 = new ClasePelota(2,2);
var intervalId = setInterval(function(){pelota1.mover();pelota2.mover()}, 100);
</script>
</body>
</html>
Y esta es mi clase js:
Código:
function ClasePelota(ix,iy){
this.x = 0;
this.y = 0;
this.minX = 0;
this.minY = 0;
this.maxX = 600;
this.maxY = 600;
this.ancho = 64
this.alto=64;
this.incrementoX = ix;
this.incrementoY = iy;
this.contrarioX = false;
this.contrarioY = false;
campo.innerHTML+="<img src='img/pelota.png' id='imgPelota"+ ix + iy +"' style='position:absolute;top:0px;left:0px;width:64px;height:64px;'>";
this.pelota = document.getElementById("imgPelota" + ix + iy);
}
ClasePelota.prototype.mover = function(){
if (!this.contrarioX){
this.pelota.style.top = this.x + this.incrementoX + "px";
this.x +=this.incrementoX;
}else{
this.pelota.style.top = this.x - this.incrementoX + "px";
this.x -=this.incrementoX;
}
if (!this.contrarioY){
this.pelota.style.left = this.y + this.incrementoY + "px";
this.y +=this.incrementoY;
}else{
this.pelota.style.left = this.y - this.incrementoY + "px";
this.y -=this.incrementoY;
}
if (this.x + this.ancho >= this.maxX){
this.contrarioX= true;
}
if (this.x <= this.minX){
this.contrarioX = false;
}
if (this.y + this.ancho >= this.maxY){
this.contrarioY= true;
}
if (this.y <= this.minY){
this.contrarioY = false;
}
info.innerHTML="Coordenadas X(" + this.x + ") - Y(" + this.y + ")";
}