Objetos en JS
Clase 16 de 50 • Curso de Programación Básica 2014
Contenido del curso
Clase 16 de 50 • Curso de Programación Básica 2014
Contenido del curso
Arturo Téllez Ramírez
Gustavo A. Meza G.
Martin Arzuaga
AlexGuzman
César Fabián Domínguez Velasco
César Fabián Domínguez Velasco
☜☮☞ Engel ☜☮☞
Usuario anónimo
Diego Zazueta
José Bautista Rodríguez
Christopher Lara
Abrahamzick Orozco Zambrano
Veronica Carcaño Ventura
Christopher Lara
José Bautista Rodríguez
Cesar Fernando Beltran Garzon
El Fer
Usuario anónimo
José Bautista Rodríguez
juan camacho
José Bautista Rodríguez
Santiago Ruiz Martin
Santiago Ruiz Martin
Esme Lopez Escobar
Alejandro Gonzalez Rivera
Daniel Zárate Ortiz
Oscar Viedma
Mauro Manuel García Vilchis
Santiago Avellaneda
wr4pp3r
José Bautista Rodríguez
Alexandro Gálvez
Colocaré el código de mi tarea, el algoritmo es:
· Explicarle al usuario que hay que hacer.
· Darle las 2 únicas opciones a escoger.
· Si el dato es correcto, pintar el pantalla los datos del pokemon que escogió el usuario así como su foto.
· Si el dato es incorrecto decirle al usuario que es un tonto y volver a las opciones para que vuelva a escoger algo válido.
El código me quedo así:
function Pokemon(n,v,a,g) { this.grito = g; this.nombre = n; this.vida = v; this.ataque = a; this.gritar = function () { alert(this.grito); } } function inicio() { var opcionNombre = ["Pikachu", "Rattata"]; var opcionGrito = ["¡Pika!", "¡Paredes!"]; opcionUsuario = prompt("¿Qué Pokemon escoges?\nEscribe\n0 para: Pikachu\n1 para: Rattata", 0); if(opcionNombre[opcionUsuario] == "Pikachu") { var opcionPokemon = new Pokemon(opcionNombre[opcionUsuario], 100, 8, opcionGrito[opcionUsuario]); nombrePokemon.innerText = opcionPokemon.nombre; document.write("<img src=img/pikachu.jpg />"); datosPokemon.innerText = "El nombre del Pokemon es: " + opcionPokemon.nombre + "\nLa vida del Pokemon es de: " + opcionPokemon.vida + "\nEl ataque del Pokemon es: " + opcionPokemon.ataque + "\nEl Pokemon tiene un grito: " + opcionPokemon.grito; } else if(opcionNombre[opcionUsuario] == "Rattata") { var opcionPokemon = new Pokemon(opcionNombre[opcionUsuario], 100, 6, opcionGrito[opcionUsuario]); nombrePokemon.innerText = opcionPokemon.nombre; document.write("<img src=img/rattata.jpg />"); datosPokemon.innerText = "El nombre del Pokemon es: " + opcionPokemon.nombre + "\nLa vida del Pokemon es de: " + opcionPokemon.vida + "\nEl ataque del Pokemon es: " + opcionPokemon.ataque + "\nEl Pokemon tiene un grito: " + opcionPokemon.grito; } else if(opcionUsuario <= 0 || opcionUsuario >= 1) { alert("Eres un tonto no elegiste un Pokemon de las opciones existentes"); inicio(); } } alert("Elige un Pokemon de las opciones que se te darán.");
arthure2 está chulo tu codigo pero creo que en el ultimo else if debes quitarle el igual ya que estas incluyendo en la condicion el cero y el 1. deberia quedar asi:
else if(opcionUsuario < 0 || opcionUsuario > 1)
Fuiste muy inteligente en la elección de tu código @arthure2
// Así es como me quedo el archivo javascript para la tarea, el html es igual
function Pokemon(n, v, a)
{
this.grito = "Pika!";
this.nombre = n;
this.vida = v;
this.ataque = a;
this.gritar = function ()
{
alert(this.grito);
}
}
function inicio()
{
alert("Esto es despues del inicio");
var pikachu = new Pokemon("Pikachu", 100, 55);
var rattata = new Pokemon("Rattata", 40, 2);
rattata.vida -= 13;
rattata.grito = "Paredes!!!!";
var eleccion = prompt("Selecciona... \n 1 Para Pikachu \n !=1 para Rattata", 1);
if (eleccion == 1)
{
nombrePokemon.innerText = pikachu.nombre;
datosPokemon.innerText = "El pokemon se llama: " +
pikachu.nombre +", tiene una vida de: " + pikachu.vida +
", un ataque de: " + pikachu.ataque + " y su grito es: " + pikachu.grito;
document.write("<img src=Pikachu.jpg />");
}
else
{
nombrePokemon.innerText = rattata.nombre;
datosPokemon.innerText = "El pokemon se llama: " +
rattata.nombre +", tiene una vida de: " + rattata.vida +
", un ataque de: " + rattata.ataque + " y su grito es: " + rattata.grito;
document.write("<img src=Rattata.jpg />");
}
}
alert("Esto es antes del inicio");
Les aporto mi versión implementando las imagenes. Dichas imagenes se encuentran dentro de un folder nombrado "img", y adicionalmente incluyo la etiqueta "audio" perteneciente a HTML5 con enlaces de los gritos según WikiDex...
pokemons = ["Pikachu", "Bulbasaur", "Charmander"]; //Fuente WikiDex gritos = ["", "", "; function Pokemon(n, v, a, g) { this.grito = g; this.nombre = n; this.vida = v; this.ataque = a; this.gritar = function() { alert(this.grito); } } function configurar(n, a, g, gr) { var pok = new Pokemon(n, 100, a, g); nombrePokemon.innerText = pok.nombre; datosPokemon.innerText = "Vida: " + pok.vida +"\nAtaque: " + pok.ataque + "\nGrito: " + pok.grito; document.write("<img src = img/" + pok.nombre + ".png width = \"400\" height = \"400\"></img>"); document.write("<audio src = "+ gritos[gr] +" autoplay controls></audio>"); } function inicio() { var p = prompt("Pikachu: 0\nBulbasaur: 1\nCharmander: 2", 0); if(pokemons[p] == "Pikachu") { configurar("Pikachu", 55, "Pika!", p) } else if(pokemons[p] == "Bulbasaur") { configurar("Bulbasaur", 50, "Bulba!", p) } else if(pokemons[p] == "Charmander") { configurar("Charmander", 52, "Char!", p) } else { alert("Escogiste mal..."); } }
Al copiar y pegar directamente del Sublime Text, se omitieron algunos caracteres restantes... Al menos la idea ahi está...
Esta divertido este código me divirtió hacerlo , te lo comparto le hice algunos pequeños cambios ... saludos!.
var pokemons = ["Pikachu", "Bulbasaur", "Charmander"]; gritos = ["", "", "; function Pokemon(n, v, a, g) { this.nombre = n; this.vida = v; this.ataque = a; this.grito = g; this.gritar = function(){ alert(this.grito); } } function configurar(n, a, g, gr){ var pok = new Pokemon(n, 100, a, g); // console.log("nombre: "+pok.nombre+ "\nAtaque: " + pok.ataque); var pok_nombre = document.getElementById("Nombre").innerHTML = pok.nombre; var pok_datos = document.getElementById("datos").innerHTML = "\nVida: " + pok.vida + " Ataque: " + pok.ataque + " Grito: " + pok.grito; document.write("<div id='bloque2'><img src = img/" + pok.nombre + ".jpg width = \"400\" height = \"400\"></img>"); document.write("<br /><audio src = "+ gritos[gr] +" autoplay controls></audio></div>"); } function inicio(){ var p = prompt("Pikachu: 0\nBulbasaur: 1\nCharmander: 2", 0); switch( Number(p) ){ case 0: console.log("Case: Picachu "); configurar("Pikachu", 90,"Pika!", p); break; case 1: console.log("case : Bulbasaur"); configurar("Bulbasaur", 50,"Bulba!", p); break; case 2: console.log("case : Charmander"); configurar("Charmander", 52, "Char!", p); break; default: console.log(p); alert("Concha e tu madre , que escojiste mal tu pokemon"); break; } } inicio();
Hola, aquí les comparto el código de cómo lo realicé, para que puedan guiarse:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Clase 10: Objeto en JS (Pokemon)</title> <script type="text/javascript" src="js/clase10.js"></script> <style type="text/css"> #contenido { color: #000; width: 800px; margin: 0 auto; background-color: #FFF; height: 700px; } </style> </head> <body> <div id="contenido"> <h1 align="center" id="nombrePokemon">Pokemon</h1> <div align="center"> <img id="imgPokemon"/> </div> <p id="datosPokemon" align="center">Datos de prueba</p> <script type="text/javascript"> seleccion(); //Aquí estamos llamando a la función que declaramos en el documento script con las condicionales </script> </div> </body> </html>
Javascript
//Creo una función llamado pokemon y declaro los atributos function Pokemon (g,n,v,a,i) { this.grito = g; this.nombre = n; this.vida = v; this.ataque = a; this.gritar = function () { alert(this.grito); } this.imagen = i; } //Declaro las variables de las imágenes var imgPikachu = "http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/revision/latest?cb=20140902050035"; var imgSquirtle = "http://cdn.bulbagarden.net/upload/thumb/3/39/007Squirtle.png/250px-007Squirtle.png"; var imgVulpix = "http://38.media.tumblr.com/256928e03098cc5cd02855026eed8a32/tumblr_inline_n79nzkAtNT1r14c1g.gif"; var imgMew = "http://cdn.bulbagarden.net/upload/thumb/b/b1/151Mew.png/250px-151Mew.png"; //Asigno los atributos de cada pokemon var pikachu = new Pokemon("Pika!", "Pikachu", 100, 55, imgPikachu); var squirtle = new Pokemon("Vamo a calmarno", "Squirtle", 90, 43, imgSquirtle); var vulpix = new Pokemon("Vullll", "Vulpix", 80, 45, imgVulpix); var mew = new Pokemon("Aaaaaaah", "Mew", 70, 48, imgMew); //Le pregunto al usuario cuál pokemon desea escoger opcionPokemon = prompt("¿Cuál Pokemon eliges?:\n\nPikachu\nSquirtle\nVulpix\nMew"); //Luego creo una función y adentro coloco condicionales con los atributos de cada pokemon, esto es para que el HTML sólo muestre el que escogió el usuario. La función seleccion() es la que se llamará desde el HTML. function seleccion () { if (opcionPokemon == "pikachu" || opcionPokemon == "PIKACHU" || opcionPokemon == "Pikachu") { alert(pikachu.grito); imgPokemon.src = pikachu.imagen; nombrePokemon.innerText = pikachu.nombre; datosPokemon.innerText = "Vida: " + pikachu.vida + "\nAtaque: " + pikachu.ataque; //Cuando una función está en un objeto se llama método y cuando una variable está en un objeto se llama atributo. } else if (opcionPokemon == "squirtle" || opcionPokemon == "SQUIRTLE" || opcionPokemon == "Squirtle") { alert(squirtle.grito); imgPokemon.src = squirtle.imagen; nombrePokemon.innerText = squirtle.nombre; datosPokemon.innerText = "Vida: " + squirtle.vida + "\nAtaque: " + squirtle.ataque; } else if (opcionPokemon == "vulpix" || opcionPokemon == "VULPIX" || opcionPokemon == "Vulpix") { alert(vulpix.grito); imgPokemon.src = vulpix.imagen; nombrePokemon.innerText = vulpix.nombre; datosPokemon.innerText = "Vida: " + vulpix.vida + "\nAtaque: " + vulpix.ataque; } else if (opcionPokemon == "mew" || opcionPokemon == "MEW" || opcionPokemon == "Mew") { alert(mew.grito); imgPokemon.src = mew.imagen; nombrePokemon.innerText = mew.nombre; datosPokemon.innerText = "Vida: " + mew.vida + "\nAtaque: " + mew.ataque; } else { alert("Has escrito mal el nombre, actualiza con F5 y vuélvelo a escribir"); } }
A mí me funcionó :D
Les comparto mi código tiene 4 pokemons registrados! espero les ayude de algo, saludos.
(function() { // Clase pokemon --------------------------- var Pokemon = function (n,g,t,d,v,a,i) { this.nombre = n; this.tipo = t; this.debilidad = d; this.vida = v; this.ataque = a; this.imagen = i; this.grito = g; fotoPokemon.setAttribute("src",this.imagen); nombrePokemon.innerText = this.nombre; datosPokemon.innerText = "Grito: "+ this.grito + "\n Tipo: " + this.tipo + "\n Debilidad: " + this.debilidad + "\n Vida: " + this.vida + "\n Ataque: " + this.ataque; }; // Un listener que escuche cuando el DOM carge se lanze la funcion principal document.addEventListener('DOMContentLoaded',function (){ var input = document.getElementById("busca"); //Listener que escucha cuando hay cambios en el menu de pokemons del html document.getElementById("busca").addEventListener("change",function () { var nombre = input.value; //Ya se que switch es del diablo -.-"" switch(nombre) { case "Pikachu": Pokemon("Pikachu","Pika,Pika!!","Electrico","Piedra & Tierra",100,55,"http://t05.deviantart.net/2jsZRXMq6F99nvYCkU4nLGJo9XI=/fit-in/300x900/filters:no_upscale():origin()/pre12/1f7a/th/pre/i/2004/158/0/1/pikachu.png"); break; case "Rattata": Pokemon("Rattata","Paredes!!","Normal","Lucha",40,2,"https://i.vimeocdn.com/portrait/7948788_300x300.jpg"); break; case "Bulbasaur": Pokemon("Bulbasaur","Bolba!!","Planta","Fuego,Veneno,Hielo & Volador",90,50,"http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=33619195"); break; case "Charmander": Pokemon("Charmander","Char!!","Fuego","Agua,Tierra & Roca",90,50,"http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=71669469"); break; } }); }); }())
Mi html
<!DOCTYPE html> <html lang="es"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="description" content=""> <meta name ="keywords" content=""> <link rel="stylesheet" href="estilo.css"> <title>Pokedex</title> </head> <body> <div class="contenedor"> <img src="http://vignette1.wikia.nocookie.net/deadliestfiction/images/e/e6/Pokemon_Logo.png/revision/latest/scale-to-width-down/640?cb=20140709063650" alt="logo"> <select name="Busca" id="busca"> <option value="Pikachu">Pikachu</option> <option value="Rattata">Rattata</option> <option value="Bulbasaur">Bulbasaur</option> <option value="Charmander">Charmander</option> </select> <div class="imagen"> <img src="http://images.vectorhq.com/images/previews/cd1/blue-question-mark-clip-art-99583.png" alt="" id="fotoPokemon"> </div> <h2 id="nombrePokemon"></h2> <p id="datosPokemon">Elige un pokemon!!</p> </div> <script src ="script.js"></script> </body> </html>
Y si quieren el css
* { margin: 0; padding: 0; text-decoration: none; list-style: none; } body { background: #2d2d2d; background-image: url("http://i.imgur.com/BJ8bOnf.png"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; color: #eee; text-align: left; font-family: arial; } body div.contenedor { width: 400px; height: 500px; text-align: center; padding-top: 30px; margin-left: 200px; } body div.contenedor img { width: 100%; margin-bottom: 30px; } body div.contenedor h2 { font-size: 30px; margin-bottom: 10px; margin-top: 3%; } body div.contenedor p { font-size: 20px; line-height: 1.7; } body div.contenedor select { height: 30px; width: 200px; text-align: center; font-size: 1.3em; margin-bottom: 5%; } body div.contenedor button { height: 30px; width: 70px; font-size: 1.2em; margin-left: 2%; } body div.contenedor button:hover { background: #a94442; border: 1px solid transparent; color: #eee; } body div.contenedor div.imagen { margin: auto; width: 200px; height: 200px; } body div.contenedor div.imagen img#fotoPokemon { width: 100%; border-radius: 5%; }
Gracias
Se ve genial :D
Amigos comparto mi trabajo, espero que les sirva. Estructura HTML:
<!DOCTYPE html> <html lang="en"> <head> <title>Tarea</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="app.js"> </script> </head> <body> <style> .content-poke{ position: relative; margin: 0 auto; width: 958px; height: 500px; } .content-poke .avatar-poke{ position: absolute; top: 0; left: 0; width: 479px; height: 500px; } .content-poke .avatar-poke .content-img{ position: relative; margin-left: 30px; margin-top: 30px; width: 200px; height: 200px; } .content-poke .avatar-poke .content-img img{ width: 100%; } .content-poke .descripcion-poke{ position: absolute; top: 0; right: 0; width: 479px; height: 500px; } .content-poke .descripcion-poke ul{ margin: 10px 0px 0px 0px; } .content-poke .descripcion-poke li{ font-size: 20px; font-family: "Helvetica"; } </style> <div class="content-poke"> <div class="avatar-poke"> <h1>Avatar de pokemón</h1> <div class="content-img"> <img id="pokeAvatar" src="" alt=""> </div> </div> <div class="descripcion-poke"> <h1>Características del pokemon seleccionado</h1> <ul> <li id="pokeNombre">1</li> <li id="pokeVida">2</li> <li id="pokeAtaque">3</li> <li id="pokeGrito">4</li> </ul> </div> </div> <script> inicio(); </script> </body> </html>
Codigo JS:
function Pokemon(n,v,a,g,i){ this.nombre = n; this.vida = v; this.ataque = a; this.grito = g; this.imagen = i; } function opcionnoValida(){ alert("Escoge una opcion valida!!!! Gracias."); setTimeout('document.location.reload()',1000); } function inicio(){ var Diglett = new Pokemon("Diglett", "100", "29","Soy mudo","http://i.neoseeker.com/ca/pokemon_heart_gold_conceptart_WizI8.png"); var Machamp = new Pokemon("Machamp", "100", "60","ho!! ho!!","http://i.neoseeker.com/ca/pokemon_heart_gold_conceptart_qjXRD.png"); var Geodude = new Pokemon("Geodude", "100", "55","Ghrrr!!","http://i.neoseeker.com/ca/pokemon_heart_gold_conceptart_T7j7K.png"); var Onix = new Pokemon("Onix", "100", "55","#%&!$#!!","http://i.neoseeker.com/ca/pokemon_heart_gold_conceptart_reNCx.png"); s = prompt("Selecciona un pokemon: \n 1 Para Diglett \n 2 Para Machamp \n 3 para Geodude \n 4 Para Onix"); if (s == 1){ pokeNombre.textContent = "Nombre:" + " " + Diglett.nombre; pokeVida.textContent = "Vida:" + " " + Diglett.vida; pokeAtaque.textContent = "Ataque:" + " " + Diglett.ataque; pokeGrito.textContent = "Grito:" + " " + Diglett.grito; pokeAvatar.src = Diglett.imagen; } else if (s == 2){ pokeNombre.textContent = "Nombre:" + " " + Machamp.nombre; pokeVida.textContent = "Vida:" + " " + Machamp.vida; pokeAtaque.textContent = "Ataque:" + " " + Machamp.ataque; pokeGrito.textContent = "Grito:" + " " + Machamp.grito; pokeAvatar.src = Machamp.imagen; } else if (s == 3){ pokeNombre.textContent = "Nombre:" + " " + Geodude.nombre; pokeVida.textContent = "Vida:" + " " + Geodude.vida; pokeAtaque.textContent = "Ataque:" + " " + Geodude.ataque; pokeGrito.textContent = "Grito:" + " " + Geodude.grito; pokeAvatar.src = Geodude.imagen; } else if (s == 4){ pokeNombre.textContent = "Nombre:" + " " + Onix.nombre; pokeVida.textContent = "Vida:" + " " + Onix.vida; pokeAtaque.textContent = "Ataque:" + " " + Onix.ataque; pokeGrito.textContent = "Grito:" + " " + Onix.grito; pokeAvatar.src = Onix.imagen; } else if (s != 1 || s != 2 || s != 3 ||s != 4){ opcionnoValida(); } }
Hola Compañeros, por acá les dejo el código que hice:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pokemon</title> <script type="text/javascript" src="js/document.js"> </script> </head> <body> <h1> Ejemplo de Pokemon </h1> <h2 id="nombrePok">Nombre de Prueba</h2> <img id="imgPok" ></img> <h4 id="datosPok"> Datos de Prueba</h4> <script type="text/javascript"> inicio(); </script> </body> </html>
JS
function Pokemon(num,n,v,a,i) { this.numero = num; this.nombre=n; this.vida = v; this.ataque = a; this.imagen= i; } var pikachu = new Pokemon("025","Pikachu",100,65,"http://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png"); var charmander = new Pokemon("004","Charmander",65,50,"http://assets.pokemon.com/assets/cms2/img/pokedex/full/004.png"); var squirtle = new Pokemon("007","Squirtle",80,45,"http://assets.pokemon.com/assets/cms2/img/pokedex/full/007.png"); var meowth = new Pokemon("052","Meowth",60,25,"http://assets.pokemon.com/assets/cms2/img/pokedex/full/052.png"); var bulbasaur = new Pokemon("001","Bulbasaur",90,55,"http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png"); var celebi = new Pokemon("251","Celebi",110,60,"http://assets.pokemon.com/assets/cms2/img/pokedex/full/251.png"); var tyranitar = new Pokemon("248","Tyranitar",120,70,"http://assets.pokemon.com/assets/cms2/img/pokedex/full/248.png"); var umbreon = new Pokemon("197","Umbreon",70,30,"http://assets.pokemon.com/assets/cms2/img/pokedex/full/197.png"); var rhydon = new Pokemon("112","Rhydon",75,35,"http://assets.pokemon.com/assets/cms2/img/pokedex/full/112.png"); var pidgeot = new Pokemon("018","Pidgeot",65,40,"http://assets.pokemon.com/assets/cms2/img/pokedex/full/018.png"); var listado = [pikachu,charmander,squirtle,meowth,bulbasaur,celebi,tyranitar,umbreon,rhydon,pidgeot]; var seleccion = prompt("Seleccione un valor entre 0-9 para saber que Pokemon eligio"); function inicio() { if (seleccion>0 && seleccion<=9) { var pokemon = listado[seleccion]; nombrePok.innerText= "Nombre: " + pokemon.nombre; imgPok.src=pokemon.imagen; datosPok.innerText = "No: " + pokemon.numero + "\nVida: " + pokemon.vida + "\n Ataque: " + pokemon.ataque; } }
Hola! les comparto el código de la tarea!
<!DOCTYPE html> <html lang="en"> <head> <meta content="text/html;charset=utf-8" /> <title>Document Object Model</title> <script type="text/javascript" src="document.js"> </script> </head> <body> <h1>Pokemons al ataque</h1> <h2>Elige un número entre el 1 y el 4</h2> <input type="text" id="opcion" /> <input type="button" value="Elegir" onclick="inicio()" /> <br /> <div> <div> <h2 id="nombrePokemon"></h2> <h3 id="gritoPoke"></h3> <h3 id="vidaPoke"></h3> <h3 id="ataquePoke"></h3> <h3 id="tipoPoke"></h3> </div> <div><img id="imgPokemon" src="" /></div> </div> </body> </html>
El document.js
function Pokemon(n,v,a,t,g,i) { this.grito = g; this.tipo = t; this.nombre = n; this.vida = v; this.ataque = a; this.imagen = i; this.gritar = function () { alert(this.grito); } } function error() { document.write("<h1>¡Número incorrecto!</h1>"); setTimeout('document.location.reload()',1000); } function inicio () { //Declaración de ruta de imágenes var imgVulvix = "http://cdn.bulbagarden.net/upload/thumb/6/60/037Vulpix.png/250px-037Vulpix.png"; var imgVapo= "http://cdn.bulbagarden.net/upload/thumb/f/fd/134Vaporeon.png/250px-134Vaporeon.png"; var imgSteel = "https://cazadordedioses.files.wordpress.com/2014/07/steelix_is_huge__by_joshr691-d4th6wr.gif"; var imgGrov = "http://cdn.bulbagarden.net/upload/thumb/9/98/Grovyle_BET.png/200px-Grovyle_BET.png"; //Declaración de objetos var vulpix = new Pokemon("Vulpix", 49, 5, "Fuego", "Vulx!", imgVulvix); var vaporeon = new Pokemon("Vaporeon", 20, 8, "Agua", "Vapo!", imgVapo); var steelix = new Pokemon("Steelix", 90, 3, "Acero", "Ste!!", imgSteel); var grovyle = new Pokemon("Grovyle", 70, 9, "Planta", "Grov!", imgGrov ); //Mostrar datos var opcionPoke = opcion.value; if(opcionPoke == 1) { nombrePokemon.innerText = vulpix.nombre; gritoPoke.innerText = vulpix.grito; vidaPoke.innerText = vulpix.vida; ataquePoke.innerText = vulpix.ataque; tipoPoke.innerText = vulpix.tipo; imgPokemon.src = vulpix.imagen; } else if(opcionPoke == 2) { nombrePokemon.innerText = vaporeon.nombre; gritoPoke.innerText = vaporeon.grito; vidaPoke.innerText = vaporeon.vida; ataquePoke.innerText = vaporeon.ataque; tipoPoke.innerText = vaporeon.tipo; imgPokemon.src = vaporeon.imagen; } else if(opcionPoke == 3) { nombrePokemon.innerText = steelix.nombre; gritoPoke.innerText = steelix.grito; vidaPoke.innerText = steelix.vida; ataquePoke.innerText = steelix.ataque; tipoPoke.innerText = steelix.tipo; imgPokemon.src = steelix.imagen; } else if(opcionPoke == 4) { nombrePokemon.innerText = grovyle.nombre; gritoPoke.innerText = grovyle.grito; vidaPoke.innerText = grovyle.vida; ataquePoke.innerText = grovyle.ataque; tipoPoke.innerText = grovyle.tipo; imgPokemon.src = grovyle.imagen; } else if(opcionPoke < 0 || opcionPoke > 4) { error(); } }
Funciona de maravilla.
Hola veronicacarcanoventura
El código setTimeout me parece muy ingenioso.
Gracias :)
Hola, este es mi código:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pokemon</title> <script type="text/javascript" src="document.js"></script> </head> <body> <h1>Pokemon</h1> <h2 id="nombrePokemon">Pokemon de prueba</h2> <img id="imagenPokemon" width=200> <p id="datosPokemon">Datos de prueba</p> <script type="text/javascript"> inicio(); </script> </body> </html>
Javascript
function Pokemon(n,v,a,g,i) { this.nombre = n; this.vida = v; this.ataque = a; this.grito = g, this.imagen = i, this.gritar = function() { alert(this.grito); } } function inicio() { if (pokemonElegido == undefined || pokemonElegido == "") { alert("No elegiste un Pokemon Válido!"); } else { pokemonElegido.vida = pokemonElegido.vida - 13; nombrePokemon.innerText = pokemonElegido.nombre; imagenPokemon.src = pokemonElegido.imagen; datosPokemon.innerText = "El Pokemon se llama " + pokemonElegido.nombre + ", tiene una vida de " + pokemonElegido.vida + ", tiene un ataque de " + pokemonElegido.ataque + " y su grito es " + pokemonElegido.grito; } } var pikachu = new Pokemon("Pikachu",100,55,"Pika!!!","img/Pikachu.jpg"); var charmander = new Pokemon("Charmander",90,50,"Cha Charmander!!!","img/Charmander.png"); var bulbasaur = new Pokemon("Bulbasaur",60,35,"Bulll!!!","img/Bulbasaur.png"); var rattata = new Pokemon("Rattata",40,20,"Raaaaaa!!!","http://4.bp.blogspot.com/-OlRzmF2xh_w/Ux1-iuiofSI/AAAAAAAAAAg/zDkNkqcuz10/s1600/19__rattata__vector__by_inkomingvirus-d5cy2up.png"); var opcionesPokemon = ["",pikachu,charmander,bulbasaur,rattata]; var opcionUsuario = prompt("Elige tu Pokemon\n1 Pikachu\n2 Charmander\n3 Bulbasaur\n4 Rattata",1); var pokemonElegido = opcionesPokemon[opcionUsuario];
Gracias!.
!Muy bueno cesarbeltran! Aporto mi mejora, elimino la validación en la función inicio(), y quito el primer elemento de string vacio en el array opcionesPokemon, con lo cual si el usuario se equivoco de opción simplemente lo posiciono en el primer pokemon (pikachu), el cual actúa de pokemon que se muestra por default.
También he compactado todas las declaraciones de las variables, para evitar el uso de var cada vez que declarado una variable, separo las distintas variables con comas como nos enseño Fredie.
function Pokemon(n, v, a, g, i ) { this.nombre = n; this.vida = v; this.ataque = a; this.grito = g; this.imagen = i; this.gritar = function() { alert(this.grito); } } function inicio() { pokemonElegido.vida = pokemonElegido.vida - 13; nombrePokemon.innerText = pokemonElegido.nombre; imagenPokemon.src = pokemonElegido.imagen; datosPokemon.innerHTML = "El Pokemon se llama " + pokemonElegido.nombre + ", tiene una vida de " + pokemonElegido.vida + ", tiene un ataque de " + pokemonElegido.ataque + " y su grito es " + pokemonElegido.grito; } var pikachu = new Pokemon("Pikachu", 100, 55, "Pika!!!", "img/pikachu.jpg") , charmander = new Pokemon("charmander", 90, 50, "Cha Charmander", "img/Charmander.png") , bulbasaur = new Pokemon("Bulbasaur", 60, 55, "Bull!!!", "img/Bulbasaur.png") , rattata = new Pokemon("Rattata", 40, 20, "Raaaaaaa!!!", "img/Rattata.png") , opcionesDePokemon = [pikachu, charmander, bulbasaur, rattata] , opcionDeUsuario = prompt("Elije tu Pokemon" + "\n1 Pikachu" + "\n2 Charmander" + "\n3 Bulbasaur" + "\n4 Rattata", "1") , pokemonElegido = opcionesDePokemon[opcionDeUsuario - 1] || opcionesDePokemon[0];
Ahí me dices que te parece el código. Saludos.
<h3 id="VidaSalvaje"></h3>
<h3 id="SMovimiento1"></h3>
<h3 id="SMovimiento2">
<h3 id="SPuntosOfensiva"></h3>
</div>
//Introducción alert("Hola, soy el Prof.Okey, y este es el mundo de los Pokemon."); alert("Bien ahora dinos tu nombre y bla bla bla"); NombreJugador= prompt("¿Cuál es tu nombre?","Escribe tu nombre"); alert("....Así que te llamas "+ NombreJugador + "? ...Muy bien!..."); alert("Bla bla bla bla"); alert("Bueno, tu gran aventura comienza hoy y todas esas cosas que digo en todos los demas juegos"); // Pokemon elegir PokemonElegido = prompt("Elige a tu Pokemon, ¿Quieres a charmander, squirtle o a bulbasaur?","Escribe charmander, squirtle o bulbasaur"); function Pokemon(NombrePoke, AtaPoke, VidaPoke,Movi1, Movi2,imagenPoke){ var EstructuraPokemon = { Nombre:NombrePoke, Ataque:AtaPoke, Vida:VidaPoke, Movimiento1:Movi1, Movimiento2:Movi2, imagenP:imagenPoke, }; return EstructuraPokemon }; if (PokemonElegido == "squirtle") { var MiPokemon = new Pokemon("squirtle", 100, 100, "Mordisco", "Chorro de Agua","squirtle.png"); alert( NombreJugador + " eligió squirtle!!"); alert("squerooo!"); } else if (PokemonElegido == "charmander") { var MiPokemon = new Pokemon("charmander", 100, 100,"Arañazo","Lanza llamas","charmander.png"); alert(NombreJugador+ " eligió charmander"); alert("Char!"); } else if(PokemonElegido == "bulbasour") { var MiPokemon = new Pokemon("bulbasour",100,100,"Mordisco","Latigo cepa","bulbasour.png"); alert(NombreJugador + " eligió bulbasour"); alert("bulbasour!"); }; // / View tú pokemon NombrePokemonJugador.innerText = "Tú Pokemon: " + MiPokemon.Nombre; VidaMia.innerText = "Vida: " + MiPokemon.Vida; PuntosOfensiva.innerText = "Puntos de Ofensiva: " + MiPokemon.Ataque; Movimiento1.innerText = " Ataque: " + MiPokemon.Movimiento1; Movimiento2.innerText ="Super Ataque: " + MiPokemon.Movimiento2; PokemonTuyo.src=MiPokemon.imagenP; // // Terreno de Hierva alta function later() { var movimiento1 = ["Placaje","Arañazo"]; var movimiento2 = [ ["Mordisco"],["Veneno"],["Garras"],["Excavar"],["Aplastar"],["Rayo"] ]; var Puchihiena = new Pokemon("Puchihiena",100,100,movimiento1[0],movimiento2[0][0],"Puchihiena.png"); var Ratatta = new Pokemon("Ratatta",100,100,movimiento1[1],movimiento2[1][0],"Ratatta.png"); var Miau = new Pokemon("Miau",100,100,movimiento1[1],movimiento2[2][0],"Miau.png"); var Digglet = new Pokemon("Digglet",100,100,movimiento1[0],movimiento2[3][0],"Digglet.png"); var Snorlax = new Pokemon("Snorlax",100,100,movimiento1[0],movimiento2[4][0],"Snorlax.png"); var Pikachu = new Pokemon("Pikachu",100,100,movimiento1[0],movimiento2[5][0],"Pikachu.png") var HiervaAlta = [ [Puchihiena, Ratatta],[Miau, Digglet],[Snorlax,Pikachu] ]; //Explicación zona de hierva alta alert("Bien pues con ese pokemon te harás hombre, iremos a la zona de hierva alta y lucharás contra otros pokemon"); // //Pasos Y alert("Elige del 0 al 2, para el numero de pasos en Y que vas a avanzar en la zona de hierva alta"); PasosY = prompt("Elige 0 o 2","0 , 1 o 2"); // //Pasos X alert("Bien, ahora elige un otra vez 0 o 1, para el numero de pasos en X que vas a avanzar en la zona de hierva alta"); PasosX = prompt("Elige 0 o 1","0 o 1"); var PokemonSilvestre = HiervaAlta[PasosY][PasosX]; // //View contrincante NombrePokemonSalvaje.innerText = "Pokemon Salvaje: " + PokemonSilvestre.Nombre; VidaSalvaje.innerText = "Vida: " + PokemonSilvestre.Vida; SPuntosOfensiva.innerText = "Puntos de Ofensiva: " + PokemonSilvestre.Ataque; SMovimiento1.innerText = " Ataque: " + PokemonSilvestre.Movimiento1; SMovimiento2.innerText ="Super Ataque: " + PokemonSilvestre.Movimiento2; PokemonMalo.src=PokemonSilvestre.imagenP; }
body{ font-family:helvetica; margin: 0px; padding: 0px; } #PokemonJugador{ padding: 10px; margin: 40px 10px 10px 10px; width: 560px; height: 800px; font-size: 25px; background-color: #A02727 ; border-radius: 2%; } #PokemonTuyo{ margin:50px 50px 0px 130px; width: 300px; height: 300px; } #PokemonSalvaje{ padding: 10px; margin: -830px 10px 0px 750px; width: 560px; height: 800px; font-size: 25px; background-color: #2E2E2E; border-radius: 2%; } #PokemonMalo{ margin:50px 50px 0px 130px; width: 300px; height: 300px; }
Hola mgiovannief
Tienes un trabajo muy interesante (Y)^5
Intentare hacer uno mejor >:D
Codigo html
<!DOCTYPE HTML> <html> <head> <meta charset = "utf-8"/> <title> Document Object Model </title> <script type = "text/javascript" src = "document.js"> </script> </head> <body> <audio src ="D:\Docs Juan\imgs\pokemonsoundtrack.mp3" autoplay> </audio> <h1> ATRAPALOS YAAA POKEMON!!</h1><img img src = "D:\Docs Juan\imgs\machamp.gif" border = "4" width = "338" height = "500" hspace = "500" >
<h2> Datos del pokemon: </h2><strong><u><p id = "nombrePokemon">Pokemon</p></u></strong>
<strong><u><p id = "vidaPokemon"> Pokemon</p></u></strong>
<strong><u><p id = "ataquePokemon">Pokemon</p></u></strong>
<strong><u><p id = "gritoPokemon">Pokemon</p></u></strong>
<script type = "text/javascript"> inicio(); </script> </body> </html> ////////////////////////////////////////////Codigo javascript///////////////////////////////
function Pokemon (n,v,a)
{
this.grito = "MAAATZUUN!";
this.nombre = n;
this.vida = v;
this.ataque = a;
this.gritar = function ()
{
alert (this.grito);
}
}
function inicio ()
{
var machamp = new Pokemon ("Machamp",100,220);
machampgrito = "MAAATZUUN!";
nombrePokemon.textContent = machamp.nombre;
vidaPokemon.textContent = machamp.vida;
ataquePokemon.textContent = machamp.ataque;
gritoPokemon.textContent = machamp.grito;
}
+juanhxcamacho la opción que le has agregado al audio es buena así como incluir el gif, (Si gustas puedes también compartir el trabajo completo, para poder visualizar mejor tu colaboración, incluyendo mediante un acceso las imágenes y audio)*Toma en cuenta el mejor usar rutas absolutas o relativas* [Puedes usar o ]
Creativo trabajo (Y).
Quiero compartirles el código de la tarea, las imágenes se deben poner en la misma carpeta donde se encuentre el javaScript
function Pokemon (n,v,a,g) { this.nombre=n; this.vida=v; this.ataque=a; this.grito= g; this.gritar = function() { alert(this.grito); } } function configurarPokemonHTML() { var p =prompt("¿Que pokemon te gustaria conocer?: \n"+"1. Pikachu\n"+ "2. Bulbasaur\n"+"3. Rattata\n"+"4. Charizard"); if(p==1) { crearPokemon("Pikachu", 100, 55, "Pika!"); }else if(p==2) { crearPokemon("Bulbasaur", 120,45, "Bulba!"); }else if(p==3) { crearPokemon("Rattata", 60, 34, "Ratta!"); }else if(p==4) { crearPokemon("Charizard", 134, 67, "Charr!"); }else { alert("El valor ingresado o es valido, intente de nuevo"); } } function crearPokemon(nom,vi,ataq,g) { var p = new Pokemon(nom,vi,ataq,g); nombrePokemon.innerText=p.nombre; imagen.innerHTML=('<img src='+p.nombre+'.png'+ ' width="300" height="300"/>'); datosPokemon.innerText= "El nombre del pokemon es: "+ p.nombre+"\n"+"Vida del Pokemon:"+ p.vida+"\n"+"Ataque del pokemon: "+ p.ataque+"\n"+"Grito del Pokemon: "+p.grito; }
Para ahorrar memoria cada uno de los objetos Pokemon se crean justo cuando el usuario desea visualizarlo, pues crearlos todos para luego mostrar solo el que usuario usa es un desperdicio.
var Objeto=
{
atributo1: "valor_del_atributo_string" ,
atributo2: valor_del_atributo_numero**,**
atributon: valor_del_atributo
**};
1)**Para usar la estructura del mi objeto creo una funcion que retorne la estructura y al crear un objeto puedo hacer lo siguiente:
**var objeto = funcion(); ->**para crear un objeto con una estructura definida.
objeto.atributo= valor; -> para agregar valores a la estructura. **2) **Variables de asignación por valor.**apunta exactamente a los valores de la estructura original del objeto, sin incluir el valor de los atributos. 3) **Variables de asignación por referenciaapunta exactamente a los valores de la estructura original del objeto, esto incluye los atributos Y EL VALOR DE LOS ATRIBUTOS. 4) this.atributo= algo : es un indicador de la estructura del objeto, otra manera de definir los atributos de un objeto.**tomar en cuenta variables globales y locales.
Este codigo completo HTML, con imagen de un solo personaje. Si quieres montar los demas personajes, goglealos y copia la URL, y colocala como parametro a cada personaje. Saludos
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Pokemon</title> <script> //cuando este el documento listo ejecuta la funcion INICIO window.onload = inicio; //Creamos el Objeto con la estructura que contendra function estructuraPokemon (nombre,vida,tipo,grito,imagen){ this.grito = grito; this.nombre = nombre; this.vida = vida; this.tipo = tipo; this.gritar = function(){alert("El personaje "+this.nombre+", grita asi: "+this.grito) this.imagen = imagen;}; } function inicio(){ //creamos INSTANCIA del objeto estructuraPokemon y las guardo en un array var personaje1 = new estructuraPokemon("Veneusaur",228,"veneno","Agg-huu","http://cdn.bulbagarden.net/upload/thumb/a/ae/003Venusaur.png/250px-003Venusaur.png","URL IMAGEN"); var personaje2 = new estructuraPokemon("Charmander",229,"fuego","Fhhhhhg","URL IMAGEN"); var personaje3 = new estructuraPokemon("Wartortle",223,"agua","Glup-glup","URL IMAGEN"); var personaje4 = new estructuraPokemon("Caterpie",024,"Bicho","Huyyy","URL IMAGEN"); var personaje5 = new estructuraPokemon("Pikachu",022,"electrico","Flyyy","URL IMAGEN"); //MANDO LOS DATOS AL DOCUMENT nombrePokemon.innerHTML = personaje1.nombre; tipoPokemon.innerHTML = "Este pokemon grita asi: "+ personaje1.grito+", tiene: "+ personaje1.vida+" de vida y es de tipo: "+ personaje1.tipo; //termino la cadena y mando alerta personaje1.gritar(); //muestro la imagen. En el HTML coloco la etiqueta IMG sin SRC. Y cuando tengo el personaje le mando su SRC imagen.setAttribute("src",personaje1.imagen); } </script> </head> <body> <h1>Pokemon</h1> <p id="nombrePokemon"></p> <p id="tipoPokemon"></p> <img id="imagen"> </body> </html>
Lo logré!
solo añadi esta etiqueta en html con una imagen de ejemplo asignandole un ID
<img src="https://media2.giphy.com/media/XKnvIs2ELq7du/200_s.gif" id="fotoPokemon"/>
para que quedara así:
<html> <head> <meta charset="utf-8"/> <title> Objetos en JS</title> <script type="text/javascript" src="documento.JS" ></script> </head> <body> <h1>Pokemon</h1> <img src="https://media2.giphy.com/media/XKnvIs2ELq7du/200_s.gif" id="fotoPokemon"/> <h2 id="nombrePokemon">Pokemon de Prueba</h2> <p id="vidaPokemon">Vida de Prueba</p> <p id="ataquePokemon">Ataque de Prueba</p> <script type="text/javascript"> inicio(); </script> </body> </html>
y en JS :
function Pokemon(n,v,a) { this.grito = "Pika!"; this.nombre = n; this.vida = v; this.ataque = a; this.gritar = function () { alert(this.grito); } } function inicio() { var pikachu = new Pokemon("Pikachu", 100, 55); pikachu.vida = pikachu.vida-13; pikachu.ataque = pikachu.ataque -13; pikachu.gritar(); nombrePokemon.innerText= pikachu.nombre; vidaPokemon.innerText= ["Vida: " + pikachu.vida]; ataquePokemon.innerText= ["Ataque: " + pikachu.ataque]; document.getElementById('fotoPokemon').src = "http://files.gamebanana.com/img/ico/sprays/untitled-1_13.gif"; // alert("esto es despues del inicio"); }
Lo más práctico que pude.
-HTML (no olviden cambiar la ruta del src ="futbol.js"
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>¿Quién es el mejor jugador?</title> <script type="text/javascript" src="futbol.js"></script> </head> <body> <h1>Elige tu jugador favorito:</h1> <h2 id="nombreJugador"></h2> <img id="imagenJugador"></img> <h4 id="datosJugador"></h4> <script type="text/javascript"> inicio(); </script> </body> </html>
JS
function Jugador(g,n,e,p,a,i) { this.grito = g; this.nombre = n; this.edad = e; this.posicion = p; this.ataque = a; this.imagen = i; } var messi = new Jugador("Goooooooool!", "Lionel Messi", 28, "Delantero", 99, "http://img.uefa.com/imgml/TP/players/1/2016/324x324/95803.jpg"); var cr7 = new Jugador("Siiiiiiiiii!", "Cristiano Ronaldo", 32, "Delantero", 98, "http://img.uefa.com/imgml/TP/players/1/2016/324x324/63706.jpg"); var elige =[messi,cr7]; var opcionJugador = prompt("¿Qué jugador es tu favorito?\nLionel Messi = 0\nCristiano Ronaldo = 1"); function inicio() { if (opcionJugador<=1) { var jugador = elige[opcionJugador]; alert(jugador.grito); nombreJugador.innerText= "Nombre: " + jugador.nombre; imagenJugador.src=jugador.imagen; datosJugador.innerText = "Edad: " + jugador.edad + "\nPosición: " + jugador.posicion + "\nAtaque: " + jugador.ataque; } }
Hola, les dejo mi archivo, hice algunas modificaciones, no se si son correctas o simplemente fue suerte y me funciono, espero puedan comentar al respecto
Acá les dejo funcionando:
Mi código JS fue:
function Pokemon(n,v,a,g,i) { this.grito = g; this.nombre = n; this.vida = v; this.ataque = a; this.img = i; this.gritar = function () { alert(this.grito); } } function cargar(pokemon) { pokemon.gritar(); nombrePokemon.innerText = pokemon.nombre; datosPokemon.innerText = "El pokemon se llama: " + pokemon.nombre + ", tiene una vida de: " + pokemon.vida + ", tiene un ataque de: " + pokemon.ataque + " y su grito es: " + pokemon.grito; imgPokemon.src = "img/" + pokemon.img +".jpg"; } var pikachu = new Pokemon("Pikachu", 100, 55, "Pika!!", "pikachu"); var bulbasaur = new Pokemon("Bulbasaur", 45, 30, "Blasa!!", "bulbasaur"); var jigglypuff = new Pokemon("Jiglypuff", 10, 5, "Jigly!!", "jigglypuff"); var squirtle = new Pokemon("Squirtle", 40, 35, "Squa!!", "squirtle");
y mi código HTML fue:
<html> <head> <meta charset="utf-8" /> <title>DOM - Pokemon - Tarea 2</title> <script type="text/javascript" src="js/pokemon.js"></script> </head> <body> <h1>Pokemon</h1> <h2 id="nombrePokemon">Nombre del Pokemon</h2> <p id="datosPokemon">Datos de prueba</p> <img id="imgPokemon" src="img/pokebola.jpg" width="200px"> <p>Seleccione un pokemon para conocer mas info</p> <ul> <li><a href="javascript:cargar(pikachu);">Pikachu</a></li> <li><a href="javascript:cargar(jigglypuff);">Jigglypuff</li> <li><a href="javascript:cargar(bulbasaur);">Bulbasaur</li> <li><a href="javascript:cargar(squirtle);">Squirtle</li> </ul> </body> </html>
Hola a todos he creado el programa con imágenes y preguntas y así conocer que pokemón seleccionar, también le di un aspecto visual diferente a través de css, lo pueden probar y si lo puede reusar para aprender más un +1 súper <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Pokemon</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'> <script type="text/javascript"> function Pokemon(n,v,a,g,i) { this.nombre = n; this.vida = v; this.ataque = a; this.grito = g; this.imagen = i; } function inicio() { var Pikachu = new Pokemon ("Pikachu", 100, 50, "Pika Pika", "http://www.smashbros.com/images/og/pikachu.jpg"); var Bulbasaur = new Pokemon ("Bulbasaur", 80, 45, "Bulba Bulba", "http://orig09.deviantart.net/86ed/f/2011/266/5/c/bulbasaur_by_element_7-d4ani1l.png"); var Charmander = new Pokemon ("Charmander", 100, 48, "Char Char", "http://vignette4.wikia.nocookie.net/pokemon/images/4/41/004Charmander_OS_anime_2.png/revision/latest?cb=20140603214909"); seleccion = prompt("Selecciona el Pokemón, 1 para Pikachu, 2 para Bulbasaur y 3 u otro valor para Charmander"); if (seleccion==1) { nombre.textContent = Pikachu.nombre; vida.textContent = Pikachu.vida; ataque.textContent = Pikachu.ataque; grito.textContent = Pikachu.grito; imgPokedex.src = Pikachu.imagen; } else if (seleccion==2) { nombre.textContent = Bulbasaur.nombre; vida.textContent = Bulbasaur.vida; ataque.textContent = Bulbasaur.ataque; grito.textContent = Bulbasaur.grito; imgPokedex.src = Bulbasaur.imagen; } else { nombre.textContent = Charmander.nombre; vida.textContent = Charmander.vida; ataque.textContent = Charmander.ataque; grito.textContent = Charmander.grito; imgPokedex.src = Charmander.imagen; } } </script> <style type="text/css"> body { font-family: 'Open Sans', sans-serif; color: white; } table { width:400px; margin: 0px auto; border: 1px solid grey; border-radius: 15px; padding: 30px; background-color: #FB0505; } #imgPokedex { width: 300px; margin: 0 auto; padding: 15px; } .centrar { text-align: center; } </style> </head> <body> <table> <thead> <td> <h2 class="centrar">Platzi Pokedex</h2> </td> </thead> <tr> <td> <img id="imgPokedex" src="http://www.adslzone.net/app/uploads/2014/09/apertura-cargando-fcc.jpg"> </td> </tr> <tr> <td> <p>La información de tu Pokemón es:</p> </td> </tr> <tr> <td> <ol> <li>Nombre: <span id="nombre"></span></li> <li>Vida: <span id="vida"></span></li> <li>Ataque: <span id="ataque"></span></li> <li>Grito: <span id="grito"></span></li> </ol> </td> </tr> </table> </body> <script type="text/javascript"> inicio(); </script> </html>
Buenas Tengas tod@s, de tarde, noche o día.
Adjunto mi tarea espero que sea de su agrado si no con gusto acepto los comentarios, que lo que hace falta en estos días.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="Damian Benavides - wr4pp3r"> <meta name="description" content="Tarea Juego Pokemon Platzi"> <title>Mi juego pokemon</title> <script type="text/javascript" src="pokemon.js"></script> </head> <body> <h2>Jugando con los inútiles pokemon</h2> <table> <tbody> <tr> <td width="500px"><h1>Jugador 1 <b><font size="5" color="blue" id="nomPokemon1"></font></b></h1></td> <td width="500px"><h1>Jugador 2 <b><font size="5" color="blue" id="nomPokemon2"></font></b></h1></td> </tr> <tr> <td><font size="6">Datos Pokemon</font></td> <td><font size="6">Datos Pokemon</font></td> </tr> <tr> <td><font size="4">Vida: </font><font size="4" id="vidaPokemon1"></font></td> <td><font size="4">Vida: </font><font size="4" id="vidaPokemon2"></font></td> </tr> <tr> <td><font size="4">Ataque: </font><font size="4" id="ataquePokemon1"></font></td> <td><font size="4">Ataque: </font><font size="4" id="ataquePokemon2"></font></td> </tr> <tr> <td><font size="4">Grito de Ataque: </font><font size="4" id="gritoAtaque1"></font></td> <td><font size="4">Grito de Ataque: </font><font size="4" id="gritoAtaque2"></font></td> </tr> <tr> <td><font size="4">Tipo1: </font><font size="4" id="tipo1Pokemon1"></font></td> <td><font size="4">Tipo1: </font><font size="4" id="tipo1Pokemon2"></font></td> </tr> <tr> <td><font size="4">Tipo2: </font><font size="4" id="tipo2Pokemon1"></font></td> <td><font size="4">Tipo2: </font><font size="4" id="tipo2Pokemon2"></font></td> </tr> <tr> <td><font size="4">Puntos para evolución</font></td> <td><font size="4">Puntos para evolución</td> </tr> <tr> <td><img id ="imagenPokemon1" src="" \></td> <td><img id="imagenPokemon2" src="" \></td> </tr> </tbody> </table> <script type="text/javascript"> inicio(); </script> </body> </html>
JS
//Elaborado por @author: Damian Benavides - wr4pp3r function Pokemon(n,v,a,g) { this.grito = g; this.nombre = n; this.vida = v; this.ataque = a; this.gritar = function () { alert(this.grito); } } function aleatorio(min,max,ocasion){ var vida = Math.floor(Math.random()* (max - min) + min); return vida; } function inicio() { var valVida = aleatorio(80,100,2); var valAtaque = aleatorio(25,55,1) var pokemons = [["Balbasaur", "Planta", "Veneno", valVida, valAtaque, "Baaarr", "http://vignette4.wikia.nocookie.net/es.pokemon/images/4/43/Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20150621181023"], ["Charmander", "Fuego", "NA", valVida, valAtaque, "Chuurr", "http://vignette1.wikia.nocookie.net/es.pokemon/images/5/56/Charmander.png/revision/latest/scale-to-width-down/200?cb=20140207202456"], ["Squirtle", "Agua", "NA", valVida, valAtaque, "Squuur", "http://vignette2.wikia.nocookie.net/es.pokemon/images/e/e3/Squirtle.png/revision/latest/scale-to-width-down/200?cb=20160309230820"], ["Caterpie", "Bicho", "NA", valVida, valAtaque, "Catrrr", "http://vignette1.wikia.nocookie.net/es.pokemon/images/0/05/Caterpie.png/revision/latest/scale-to-width-down/200?cb=20080723091758"], ["Pidgeotto", "Normal", "Volador", valVida, valAtaque, "Pidguuur", "http://vignette2.wikia.nocookie.net/es.pokemon/images/5/57/Pidgeotto.png/revision/latest/scale-to-width-down/200?cb=20141214195017"], ["Rattata", "Normal", "NA", valVida, valAtaque, "Riattss", "http://vignette3.wikia.nocookie.net/es.pokemon/images/c/c4/Rattata.png/revision/latest/scale-to-width-down/200?cb=20080723091810"], ["Spearow", "Normal", "Volador", valVida, valAtaque, "Speaaar", "http://vignette3.wikia.nocookie.net/es.pokemon/images/a/a1/Spearow.png/revision/latest/scale-to-width-down/200?cb=20080908155927"], ["Ekans", "Veneno", "NA", valVida, valAtaque, "Ekaaaaanssd", "http://vignette3.wikia.nocookie.net/es.pokemon/images/1/11/Ekans.png/revision/latest/scale-to-width-down/200?cb=20080908162546"], ["Pikachu", "Eléctrico", "NA", valVida, valAtaque, "Pikaaa", "http://vignette2.wikia.nocookie.net/es.pokemon/images/7/77/Pikachu.png/revision/latest/scale-to-width-down/200?cb=20150621181250"], ["Sandshrew", "Tierra", "NA", valVida, valAtaque, "Sandsseerr", "http://vignette1.wikia.nocookie.net/es.pokemon/images/d/df/Sandshrew.png/revision/latest/scale-to-width-down/200?cb=20080909114740"]]; var balbasaur = 0, charmander = 1, squirtle = 2,caterpie = 3, pidgeotto = 4,rattata = 5,spearow = 6,ekans = 7,pikachu = 8, sandshrew = 9; var Tipo1 = 1, Tipo2 = 2, Vida = 3, Ataque = 4, Grito = 5, Imagen = 6; var tblRef = [ [ 0 , 1 , 2, 3 ,4, 5, 6 ], [ 1 , 1 , 2, 3 ,4, 5, 6 ], [ 2 , 1 , 2, 3 ,4, 5, 6 ], [ 3 , 1 , 2, 3 ,4, 5, 6 ], [ 4 , 1 , 2, 3 ,4, 5, 6 ], [ 5 , 1 , 2, 3 ,4, 5, 6 ], [ 6 , 1 , 2, 3 ,4, 5, 6 ], [ 7 , 1 , 2, 3 ,4, 5, 6 ], [ 8 , 1 , 2, 3 ,4, 5, 6 ], [ 9 , 1 , 2, 3 ,4, 5, 6 ] ]; var uno=0, dos=1; var jugador = prompt("Elige el jugador que deseas ser:\n" + "Para el primer Jugador escribe 0\n" + "Para segundo Jugador escribe 1"); var eleccion = prompt("Elige el pokemon con el cual deseas jugar.\n" + "balbasaur = 0 charmander = 1 squirtle = 2 \n" + "caterpie = 3 pidgeotto = 4 rattata = 5\n" + "spearow = 6 ekans = 7 pikachu = 8 sandshrew = 9"); //alert if (jugador >= uno && jugador <= dos){ if (eleccion != null && eleccion <= 9) { if (eleccion == balbasaur) { //alert("Aqui adentro"); //alert("Aqui jugando:" + jugador); if (jugador == uno) { var accesObjeto = new Pokemon(pokemons[0][0],pokemons[0][3],pokemons[0][4],pokemons[0][5]); nomPokemon1.textContent = accesObjeto.nombre; vidaPokemon1.textContent = accesObjeto.vida; ataquePokemon1.textContent = accesObjeto.ataque; gritoAtaque1.textContent = accesObjeto.grito; tipo1Pokemon1.textContent = pokemons[0][1]; tipo2Pokemon1.textContent = pokemons[0][2]; imagenPokemon1.src = pokemons[0][6]; } else if (jugador == dos) { var accesObjeto = new Pokemon(pokemons[0][0],pokemons[0][3],pokemons[0][4],pokemons[0][5]); nomPokemon2.textContent = accesObjeto.nombre; vidaPokemon2.textContent = accesObjeto.vida; ataquePokemon2.textContent = accesObjeto.ataque; gritoAtaque2.textContent = accesObjeto.grito; tipo1Pokemon2.textContent = pokemons[0][1]; tipo2Pokemon2.textContent = pokemons[0][2]; imagenPokemon2.src = pokemons[0][6]; } //alert("Pokemon " + accesObjeto); } else if (eleccion == charmander) { //alert("Elegiste a " + pokemons[charmander]); //alert("Aqui jugando:" + jugador); if (jugador == uno) { var accesObjeto = new Pokemon(pokemons[1][0],pokemons[1][3],pokemons[1][4],pokemons[1][5]); nomPokemon1.textContent = accesObjeto.nombre; vidaPokemon1.textContent = accesObjeto.vida; ataquePokemon1.textContent = accesObjeto.ataque; gritoAtaque1.textContent = accesObjeto.grito; tipo1Pokemon1.textContent = pokemons[1][1]; tipo2Pokemon1.textContent = pokemons[1][2]; imagenPokemon1.src = pokemons[1][6]; } else if (jugador == dos) { var accesObjeto = new Pokemon(pokemons[1][0],pokemons[1][3],pokemons[1][4],pokemons[1][5]); nomPokemon2.textContent = accesObjeto.nombre; vidaPokemon2.textContent = accesObjeto.vida; ataquePokemon2.textContent = accesObjeto.ataque; gritoAtaque2.textContent = accesObjeto.grito; tipo1Pokemon2.textContent = pokemons[1][1]; tipo2Pokemon2.textContent = pokemons[1][2]; imagenPokemon2.src = pokemons[1][6]; } } else if (eleccion == squirtle ) { //alert("Elegiste a " + pokemons[squirtle]); //alert("Aqui jugando:" + jugador); if (jugador == uno) { var accesObjeto = new Pokemon(pokemons[2][0],pokemons[2][3],pokemons[2][4],pokemons[2][5]); nomPokemon1.textContent = accesObjeto.nombre; vidaPokemon1.textContent = accesObjeto.vida; ataquePokemon1.textContent = accesObjeto.ataque; gritoAtaque1.textContent = accesObjeto.grito; tipo1Pokemon1.textContent = pokemons[2][1]; tipo2Pokemon1.textContent = pokemons[2][2]; imagenPokemon1.src = pokemons[2][6]; } else if (jugador == dos) { var accesObjeto = new Pokemon(pokemons[2][0],pokemons[2][3],pokemons[2][4],pokemons[2][5]); nomPokemon2.textContent = accesObjeto.nombre; vidaPokemon2.textContent = accesObjeto.vida; ataquePokemon2.textContent = accesObjeto.ataque; gritoAtaque2.textContent = accesObjeto.grito; tipo1Pokemon2.textContent = pokemons[2][1]; tipo2Pokemon2.textContent = pokemons[2][2]; imagenPokemon2.src = pokemons[2][6]; } } else if (eleccion == caterpie) { //alert("Elegiste a " + pokemons[caterpie]); //alert("Aqui jugando:" + jugador); if (jugador == uno) { var accesObjeto = new Pokemon(pokemons[3][0],pokemons[3][3],pokemons[3][4],pokemons[3][5]); nomPokemon1.textContent = accesObjeto.nombre; vidaPokemon1.textContent = accesObjeto.vida; ataquePokemon1.textContent = accesObjeto.ataque; gritoAtaque1.textContent = accesObjeto.grito; tipo1Pokemon1.textContent = pokemons[3][1]; tipo2Pokemon1.textContent = pokemons[3][2]; imagenPokemon1.src = pokemons[3][6]; } else if (jugador == dos) { var accesObjeto = new Pokemon(pokemons[3][0],pokemons[3][3],pokemons[3][4],pokemons[3][5]); nomPokemon2.textContent = accesObjeto.nombre; vidaPokemon2.textContent = accesObjeto.vida; ataquePokemon2.textContent = accesObjeto.ataque; gritoAtaque2.textContent = accesObjeto.grito; tipo1Pokemon2.textContent = pokemons[3][1]; tipo2Pokemon2.textContent = pokemons[3][2]; imagenPokemon2.src = pokemons[3][6]; } } else if (eleccion == pidgeotto) { //alert("Elegiste a " + pokemons[pidgeotto]); //alert("Aqui jugando:" + jugador); if (jugador == uno) { var accesObjeto = new Pokemon(pokemons[4][0],pokemons[4][3],pokemons[4][4],pokemons[0][5]); nomPokemon1.textContent = accesObjeto.nombre; vidaPokemon1.textContent = accesObjeto.vida; ataquePokemon1.textContent = accesObjeto.ataque; gritoAtaque1.textContent = accesObjeto.grito; tipo1Pokemon1.textContent = pokemons[4][1]; tipo2Pokemon1.textContent = pokemons[4][2]; imagenPokemon1.src = pokemons[4][6]; } else if (jugador == dos) { var accesObjeto = new Pokemon(pokemons[4][0],pokemons[4][3],pokemons[4][4],pokemons[4][5]); nomPokemon2.textContent = accesObjeto.nombre; vidaPokemon2.textContent = accesObjeto.vida; ataquePokemon2.textContent = accesObjeto.ataque; gritoAtaque2.textContent = accesObjeto.grito; tipo1Pokemon2.textContent = pokemons[4][1]; tipo2Pokemon2.textContent = pokemons[4][2]; imagenPokemon2.src = pokemons[4][6]; } } else if (eleccion == rattata) { //alert("Elegiste a " + pokemons[rattata]); //alert("Aqui jugando:" + jugador); if (jugador == uno) { var accesObjeto = new Pokemon(pokemons[5][0],pokemons[5][3],pokemons[5][4],pokemons[5][5]); nomPokemon1.textContent = accesObjeto.nombre; vidaPokemon1.textContent = accesObjeto.vida; ataquePokemon1.textContent = accesObjeto.ataque; gritoAtaque1.textContent = accesObjeto.grito; tipo1Pokemon1.textContent = pokemons[5][1]; tipo2Pokemon1.textContent = pokemons[5][2]; imagenPokemon1.src = pokemons[5][6]; } else if (jugador == dos) { var accesObjeto = new Pokemon(pokemons[5][0],pokemons[5][3],pokemons[5][4],pokemons[5][5]); nomPokemon2.textContent = accesObjeto.nombre; vidaPokemon2.textContent = accesObjeto.vida; ataquePokemon2.textContent = accesObjeto.ataque; gritoAtaque2.textContent = accesObjeto.grito; tipo1Pokemon2.textContent = pokemons[5][1]; tipo2Pokemon2.textContent = pokemons[5][2]; imagenPokemon2.src = pokemons[5][6]; } } else if (eleccion == spearow) { //alert("Elegiste a " + pokemons[spearow]); //alert("Aqui jugando:" + jugador); if (jugador == uno) { var accesObjeto = new Pokemon(pokemons[6][0],pokemons[6][3],pokemons[6][4],pokemons[6][5]); nomPokemon1.textContent = accesObjeto.nombre; vidaPokemon1.textContent = accesObjeto.vida; ataquePokemon1.textContent = accesObjeto.ataque; gritoAtaque1.textContent = accesObjeto.grito; tipo1Pokemon1.textContent = pokemons[6][1]; tipo2Pokemon1.textContent = pokemons[6][2]; imagenPokemon1.src = pokemons[6][6]; } else if (jugador == dos){ var accesObjeto = new Pokemon(pokemons[6][0],pokemons[6][3],pokemons[6][4],pokemons[6][5]); nomPokemon2.textContent = accesObjeto.nombre; vidaPokemon2.textContent = accesObjeto.vida; ataquePokemon2.textContent = accesObjeto.ataque; gritoAtaque2.textContent = accesObjeto.grito; tipo1Pokemon2.textContent = pokemons[6][1]; tipo2Pokemon2.textContent = pokemons[6][2]; imagenPokemon2.src = pokemons[6][6]; } } else if (eleccion == ekans) { //alert("Elegiste a " + pokemons[ekans]); //alert("Aqui jugando:" + jugador); if (jugador == uno) { var accesObjeto = new Pokemon(pokemons[7][0],pokemons[7][3],pokemons[7][4],pokemons[7][5]); nomPokemon1.textContent = accesObjeto.nombre; vidaPokemon1.textContent = accesObjeto.vida; ataquePokemon1.textContent = accesObjeto.ataque; gritoAtaque1.textContent = accesObjeto.grito; tipo1Pokemon1.textContent = pokemons[7][1]; tipo2Pokemon1.textContent = pokemons[7][2]; imagenPokemon1.src = pokemons[7][6]; } else if (jugador == dos) { var accesObjeto = new Pokemon(pokemons[7][0],pokemons[7][3],pokemons[7][4],pokemons[7][5]); nomPokemon2.textContent = accesObjeto.nombre; vidaPokemon2.textContent = accesObjeto.vida; ataquePokemon2.textContent = accesObjeto.ataque; gritoAtaque2.textContent = accesObjeto.grito; tipo1Pokemon2.textContent = pokemons[7][1]; tipo2Pokemon2.textContent = pokemons[7][2]; imagenPokemon2.src = pokemons[7][6]; } } else if (eleccion == pikachu) { //alert("Elegiste a " + pokemons[pikachu]); //alert("Aqui jugando:" + jugador); if (jugador == uno) { var accesObjeto = new Pokemon(pokemons[8][0],pokemons[8][3],pokemons[8][4],pokemons[8][5]); nomPokemon1.textContent = accesObjeto.nombre; vidaPokemon1.textContent = accesObjeto.vida; ataquePokemon1.textContent = accesObjeto.ataque; gritoAtaque1.textContent = accesObjeto.grito; tipo1Pokemon1.textContent = pokemons[8][1]; tipo2Pokemon1.textContent = pokemons[8][2]; imagenPokemon1.src = pokemons[8][6]; } else if (jugador == dos) { var accesObjeto = new Pokemon(pokemons[8][0],pokemons[8][3],pokemons[8][4],pokemons[8][5]); nomPokemon2.textContent = accesObjeto.nombre; vidaPokemon2.textContent = accesObjeto.vida; ataquePokemon2.textContent = accesObjeto.ataque; gritoAtaque2.textContent = accesObjeto.grito; tipo1Pokemon2.textContent = pokemons[8][1]; tipo2Pokemon2.textContent = pokemons[8][2]; imagenPokemon2.src = pokemons[8][6]; } } else if (eleccion == sandshrew) { //alert("Elegiste a " + pokemons[sandshrew]); //alert("Aqui jugando:" + jugador); if (jugador == uno) { var accesObjeto = new Pokemon(pokemons[9][0],pokemons[9][3],pokemons[9][4],pokemons[9][5]); nomPokemon1.textContent = accesObjeto.nombre; vidaPokemon1.textContent = accesObjeto.vida; ataquePokemon1.textContent = accesObjeto.ataque; gritoAtaque1.textContent = accesObjeto.grito; tipo1Pokemon1.textContent = pokemons[9][1]; tipo2Pokemon1.textContent = pokemons[9][2]; imagenPokemon1.src = pokemons[9][6]; } else if (jugador == dos) { var accesObjeto = new Pokemon(pokemons[9][0],pokemons[9][3],pokemons[9][4],pokemons[9][5]); nomPokemon2.textContent = accesObjeto.nombre; vidaPokemon2.textContent = accesObjeto.vida; ataquePokemon2.textContent = accesObjeto.ataque; gritoAtaque2.textContent = accesObjeto.grito; tipo1Pokemon2.textContent = pokemons[9][1]; tipo2Pokemon2.textContent = pokemons[9][2]; imagenPokemon2.src = pokemons[9][6]; } } }else { alert("Deberías elegir una de las opciones listada :("); } } else { alert("Debes elegir una opción valida."); } //var rattata = new Pokemon("Rattata", 40, 2, "Riiurr"); //rattata.vida = rattata.vida - 13; //nomPokemon.textContent = rattata.nombre; //vidaPokemon.textContent = rattata.vida; //ataquePokemon.textContent = rattata.ataque; //rattata.gritar(); //nomPokemon.textContent = pokemons[5][3]; }
Saludos Gracias.
Hola wr4pp3r
No me sale el Pokemon del otro jugador
function Pokemon(n, v, a, g, i){
this.nombre = n;
this.vida = v;
this.ataque = a;
this.imagen = i;
this.grito = g;
this.gritar = function (){
alert(this.grito);
};
this.foto = function (){
var nuevoImg = document.createElement("img");
nuevoImg.setAttribute("src", this.imagen);
fotoPokemon.appendChild(nuevoImg);
}
}
//crea una nueva clase(declaracion de objeto) asignada a pikachu
//var poke = new Pokemon("Pikachu", 100, 55);
function inicio(){
var poke = new Pokemon("Bulbasaur", 90, 50, "Bulbasaur!!!",";
//var poke = new Pokemon("Pikachu", 100, 55, "Pika!!!",";
datoPokemon = "El es " + poke.nombre + " tiene " + poke.vida + " puntos de vida, " + poke.ataque + " de ataque y su grito es " + poke.grito;
nombrePokemon.innerText = poke.nombre;
datosPokemon.innerText = datoPokemon;
poke.foto();
poke.gritar();
}