Ayuda javascript (herencia + prototype)

Iniciado por kgarcia994, 6 Enero 2017, 17:16 PM

0 Miembros y 1 Visitante están viendo este tema.

kgarcia994

Hola buenas, os agradecería mucho si me pudieras ayudar en un problema que tengo que me trae de cabezas estos dias.
El caso es que tengo que hacer para el ciclo un juego de rol (y no tenemos profes en esos módulos ya que la generalitat no nos ha asignado ninguno, y estudiamos sin profesor..).

El juego consiste en tener 3 clases (guerrero, mago blanco y mago negro) que heredan cada una de una clase que son Seres.

El problema que tengo viene al definir las funciones prototype.
El guerrero tiene tres funciones. 1- Pintar (pone la imagen y los datos en el navegador) 2 - Atacar (depende a quien ataque hace una cosa u otra) y 3 - MostrarDatos (muestra en un div los movimientos que hace y se tendría que ejecutar desde el método 2 (atacar)).
Cuando escribo contenido en las dos primeras funciones, pintar y atacar, me funciona todo bien, es decir refresco el navegador y se ve todo perfecto, pero, cuando pongo cualquier código (ya sea un alert, o un prompt) en la tercera función, al refrescar no se me ve nada.

Agradecería si alguien me pudiera ayudar en este problemilla ...

Adjunto el código de la clase guerrero que me falla :

Código (javascript) [Seleccionar]
function Guerrero(nombrePersonaje, imagenPersonaje, vidaPersonaje, idPantalla, fuerzaGuerrero) {
/*Con el metodo call heredamos los atributos de "Ser",
pasandole primero el objeto que las tendra ("this" en este caso por que queremos que erede el Guerrero) mas los atributos*/
Ser.call(this, nombrePersonaje, imagenPersonaje, vidaPersonaje, idPantalla);

/*Seguidamente ponemos el atributo unico del guerrero*/
this.fuerzaGuerrero = fuerzaGuerrero;
}


Guerrero.prototype.Pintar = function () {
/*Seleccionamos el id (div) donde introduciremos los elementos (pasado por los parametros del constructor)*/
var divPrincipal = document.getElementById(this.idPantalla);

/*Creamos un elemento (div) con una clase (para usarlo en el css mas adelante)
y lo introducimos en el elemento seleccionado arriba (el div principal)*/
var divPersonaje = document.createElement("div");
divPersonaje.className = "clasePersonaje";
divPrincipal.appendChild(divPersonaje);

/*Creamos un div para la imagen que extiende del div del personaje creado justo encima*/
var divImagenPersonaje = document.createElement("div");
divImagenPersonaje.className = "divImagenPersonaje";
divPersonaje.appendChild(divImagenPersonaje);

/*Creamos la imagen, le ponemos el nombre de la clase,
le pasamos la ruta de donde la cargara (this.imagenPersonaje)
y le decimos que es hijo del div de la imagen creado encima*/
var imagen = document.createElement("img");
imagen.className = "imagenPersonaje";
imagen.src = this.imagenPersonaje;
divImagenPersonaje.appendChild(imagen);



/*Creamos un div para los datos del personaje que extiende del div del personaje creado al principio*/
var divDatosPersonaje = document.createElement("div");
divDatosPersonaje.className = "divDatosPersonaje";
divPersonaje.appendChild(divDatosPersonaje);


/*Creamos los elementos ("p" para texto), le añadimos los valores
y ponemos extienda del div de los datos del personaje creado justo encima*/
var nombre = document.createElement("p");
nombre.innerHTML = "Nombre: " + this.nombrePersonaje;
divDatosPersonaje.appendChild(nombre);

var vida = document.createElement("p");
vida.innerHTML = "Vida: " + this.vidaPersonaje;
vida.id = "vida"+this.nombrePersonaje; /**/
divDatosPersonaje.appendChild(vida);

var fuerza = document.createElement("p");
fuerza.innerHTML = "Fuerza: " + this.fuerzaGuerrero;
divDatosPersonaje.appendChild(fuerza);

/*Creamos un elemento de tipo button, le ponemos el texto y seguidamente
añadimos su metono onclick y le indicamos que sera la funcion Atacar.
Una vez definido lo añadimos como hijo al div de los datos del personaje creado justo encima
(Si usamos Atacar() no copiaremos la funcion si no que tendremos el resultado de la ejecucion de la funcion)*/
var boton = document.createElement("button");
boton.innerHTML = "Atacar";
boton.onclick = this.Atacar;
boton.id = this.nombrePersonaje;/*Le ponemos de ID el nombre para usarlo a la hora de calcular los ataques*/
divDatosPersonaje.appendChild(boton);




}

Guerrero.prototype.Atacar = function () {

//Pedimos el nombre del personaje al que atacar
var nombrePersonajeElegido = prompt('Escribe el nombre del personaje al que quieres atacar');

//Comprobamos si existe el nombre escrito (key) en el array "Seres"
if(nombrePersonajeElegido in Seres){

//Guardamos la ruta de la imagen
var nombreImagen = Seres[nombrePersonajeElegido].imagenPersonaje;
//Quitamos los 4 primeros caracteres de la ruta (img/) y los cuatro ultimos (.jpg o .png) y lo guardamos en mayuscula.
var tipo = nombreImagen.slice(4,-4).toUpperCase();

//Comprobamos si es guerrero
if(tipo=="GUERRERO"){

/*Guardamos el resultado del calculo entre la vida del personaje y la fuerza del que ataca
("this.id" devuelve el ID del boton (definido arriba) que sera el nombre del atacante)*/
var vidaRestante= (parseInt(Seres[nombrePersonajeElegido].vidaPersonaje)) - (parseInt(Seres[this.id].fuerzaGuerrero));

/*Guardamos la vida restante que le queda al personaje atacado*/
Seres[nombrePersonajeElegido].vidaPersonaje = vidaRestante;

this.MostrarDatos();

}

}else{
alert('No existe ningun personaje con ese nombre');
}



}

Guerrero.prototype.MostrarDatos = function () {
/*Si pongo contenido aquí, ya no me funciona*/
}


Muchas gracias por adelantado.

#!drvy

En un principio no veo ningún error. Se puede deber a muchas causas según que interpreta el navegador (el html y la clase padre a la que llamas).  Normalmente si deja de ejecutarse o directamente no se ejecuta es por un error de syntax o parecido. Fíjate en la consola (F12) a ver que error te tira.


Saludos

kgarcia994

#2

Editado: Al parecer es el navegador, al utilizarlo desde Mozilla no me funcionaba, pero ejecutándolo desde el Chrome si que me carga este tercer metodo..