Desarrollo y diseño

Clases en javascript

D
danielme #1 Dic '15

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:

<!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:

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 + ")";
}

Me inserta las dos imagenes pero una se mueve y la otra no

tada
tada #2 Dic '15

#1 Crea el elemento utilizando document.createElement("img"), no se muy bien la causa pero no parece reconocer la instancia de la pelota1 insertandolo directamente.

                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;

                    img = document.createElement("img");
                    img.setAttribute('src', 'img/pelota.png');
                    img.setAttribute('id', 'imgPelota'+ix+iy);
                    img.style.position = 'absolute';
                    img.style.top = '0px';
                    img.style.left = '0px';
                    img.style.width = '64px';
                    img.style.height = '64px';
                    campo.appendChild(img);

                    this.pelota = document.getElementById("imgPelota" + ix + iy);
            }

Usuarios habituales

Tags