Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 16D : 7H : 0M : 2S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

Clases y Arrays en JavaScript22/36

Creemos nuestro primer juego con lo que hemos aprendido, lo llamaremos Pakiman

 

Como todos nuestro Pakimanes van a compartir características, vamos a crear objetos para definirlos

 

Recuerda:

 

  • Las clases son la definición de los objetos

Pakiman!
Tengo que atraparlooooss
Tu destino asiiiii eeeeeeesssss
son muy sabrosooooossss
en filete o en bisteeeecccc…

ahi esta la primera estrofa…

Veo en los comentarios que hay gente que dice que el curso es muy confuso, pero seguro están pensando que deben aprender todos estos códigos.

Es muy falso, este curso es solo para que se adentren al mundo de la programación, para que tengan noción de lo que es programar. Este no es un curso definitivo de Javascript.

Podríamos hacer una analogía con el fútbol. Si no eres muy fanático de fútbol, a lo mejor sabes que si la pelota entra dentro del arco es gol, que el que agarra la pelota con la mano, es el arquero.

Pero a lo mejor no sabes que el 6 debe marcar al 9 o que el defensor central no debe cobrar un lateral.

Pero con saber lo primero que dije, es suficiente para que tengas noción de lo que es el fútbol.

Eso es lo que hace este curso por ti, te adentra en lo que es la programación, pero no te enseña el 100% porque no estás preparado.

Si no entienden algo, solamente sigan avanzando y verán que al final van a tener má idea de lo que es este hermoso mundo.

✨ Una clase nos permite definir una colección de objetos permitiendo que estos posean los mismos atributos y métodos.

**Resumen de la clase: ** En Javascript existe la programación orientada a objetos (OOP en sus siglas en inglés), la cual se crea a partir de una clase, donde se define las características del objeto o atributos y sus capacidades o métodos.

Así como otros lenguajes, este concepto conlleva lo siguiente:

  • Objeto
    Una instancia de una Clase.
  • Propiedad
    Una característica del Objeto, como el color.
  • Método
    Una capacidad del Objeto, como caminar.
  • Constructor
    Es un método llamado en el momento de la creación de instancias.
  • Herencia
    Una Clase puede heredar características de otra Clase.
  • Encapsulamiento
    Una Clase sólo define las características del Objeto, un Método sólo define cómo se ejecuta el Método.
  • Abstracción
    La conjunción de herencia compleja, métodos y propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.
  • Polimorfismo
    Diferentes Clases podrían definir el mismo método o propiedad.

Para mayor información: POO en Javascript

Después de un día de trabajo, pude mejorar el ejercicio:
Aprendí a implementar clases, bucles con arrays, y a añadir elementos HTML mediante código JS.
De paso aprendí algo de CSS.

Annotation 2020-05-02 014509.png
HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Pokemon de inicio</title>
    <link rel="stylesheet"type="text/css" href="pokemon.css">
  </head>
  <h1>¿A quién elegirías si pikachu no es alternativa?</h1>
  <body>
    <script type="text/javascript"src="pokemonClases.js">
    </script>
    <script type="text/javascript"src="pokemon.js">
    </script>
  </body>
</html>

JAVASCRIPT CLASES

// DEFINIENDO LA CLASE POKEMON
class Pokemon {
  constructor(nombre,vida,ataque,defensa,ataqueEspecial,
    defensaEspecial,velocidad){
    this.imagen = new Image(); /*
    Importante que en esta línea se guarda como atributo
    de la clase pókemon un elemento imagen HTML.*/
    this.nombre = nombre;
    this.vida = vida;
    this.ataque = ataque;
    this.defensa = defensa;
    this.ataqueEspecial = ataqueEspecial;
    this.defensaEspecial = defensaEspecial;
    this.velocidad = velocidad;
    this.imagen.src = imagenes[this.nombre];/*
    En esta línea se guarda la ruta en la propiedad src del
    elemento imagen HTML*/
}
  hablar (){
  alert (this.nombre);
}
  mostrar(){
    var nuevaDiv= document.createElement('div');/*
    En esta línea se crea una división (etiqueta Div).
    A esta etiqueta por medio del método appendChild()
    agregaré un título, saltos de línea, la imagen, y
    ésta será anexada al body, el tronco principal. Las
    Div´s serían como las ramas.
    */
    var divCabecera = document.createElement('h2')
    divCabecera.innerHTML = this.nombre +'<br> Stats';
    divCabecera.setAttribute("class","cabeceraCajas")
    var saltoLinea = document.createElement('br')
    nuevaDiv.appendChild(this.imagen);
    nuevaDiv.appendChild(saltoLinea);
    nuevaDiv.appendChild(divCabecera);
    document.body.appendChild(nuevaDiv);

// creando tabla
    var coleccion = {
        'Vida': this.vida,
        'Ataque': this.ataque,
        'Defensa': this.defensa,
        'Ataque Especial': this.ataqueEspecial,
        'Defensa Especial': this.defensaEspecial,
        'Velocidad': this.velocidad,
      }; /*
      Este array solo sirve para disminuir las líneas de código
      más adelante. Es más fácil utilizar un "for-in" que siete
      líneas de texto añadiendo texto de las celdas "tr" y "td",
      y también es más fácil de leer.
      El método es sencillo:
      a) se crea la etiqueta HTML tabla
      b) se crea la etiqueta HTML tbody
      c) se crean un bucle dónde se crean las etiquetas TR y 
         TD con los datos que necesitamos que presenten,
         auxilíandonos de la CLASE y el Array
      d) Anexar las etiquetas TR y TD al tbody, y el tbody a 
         a la etiqueta tabla.
      */
    var tabla = document.createElement('table');
    var tbody = document.createElement('tbody');
    for (var stat in coleccion) {
      var filaTexto  = '<tr><td> '+stat+' </tr></td><tr><td>\
      '+coleccion[stat]+' </tr></td>';
      var fila = document.createElement('tr');
      fila.innerHTML = filaTexto;
      tbody.appendChild(fila);
    };
    tabla.appendChild(tbody);
    nuevaDiv.appendChild(tabla);
}
};

JAVASCRIPT CÓDIGO

// Colección de imágenes, se indexó la ubicación
var imagenes=[];
imagenes["Bulbasaur"] = "Bulbasaur.png";
imagenes["Charmander"]= "Charmander.png";
imagenes["Squirtle"]= "Squirtle.png";

// array que sirve para correr el ciclo "for-in".
var pokedex = [];
pokedex.push(new Pokemon("Bulbasaur",45,49,49,65,65,45));
pokedex.push(new Pokemon('Charmander',39,52,43,60,50,65));
pokedex.push(new Pokemon('Squirtle',44,48,65,50,64,43));

// bucle para mostrar todos los objetos de la clase Pókemon
for (var i in pokedex){
    pokedex[i].mostrar();
}

CSS

body {
  background: url(Pokemon_background.png);
  background-size: cover;
}
h1  {
  text-align: center;
  text-shadow: 1px 1px 1px black;
  -webkit-text-stroke: 1px blue;
  font-size: 4.3em;
  color: #fdd666;
}
div {
  background: rgba(255, 255, 255, 0.5);
  color: black;
  height: 500px;
  width: 400px;
  font-size: 20px;
  float: left;
  margin-left: 50px;
  margin-top: 0px;
  margin-bottom: 50px;
  text-align: center;
}
table{
    border-collapse: collapse;
    width: auto;
    margin: auto;
}
td, th {
    border: 1px black;
    padding:2px;
    text-align: left;

}
img {
  width: 200px;
  height: 200px;
}
h2.cabeceraCajas {
  font-weight: bold;
}
};

Hago mi aporte de los animales modificados con los poderes y nombre que inventé:

Lobolbasaur:
lobolbasaur.png
Vacuartle:
vacuartle.png
Pollormander:
pollormander.png

Y…

Cerdachu:
cerdachu.png

creo que soy el único que mira 2 horas el vídeo, y la duración es de 45 minutos :p

Hola buen día,

para que funcione bien al momento de crear los dos archivos .js, priemro deben colocar la etiqueta script de la clase y luego la correspondiente a definición de variables. Si lo hacen al revés les aparecerá un error. En este caso es importante el orden de las etiquetas script de html. Pruébenlo. 

    

  • RESUMEN:
    Clase: Es la definicion completa de un objeto (Se debe usar cuando tengo muchos objetos con los mismos atributos para asi no escribirlo multiples veces). Dentro de las clases no hay que escribir function porque se entiende de manera implicita que todo bloque de codigo dentro de una clase es una funcion. Las clases al igual que pasa con las funciones, JS es lo primero que lee y las monsta en memoria para que esten listas.

Objetos: Son instancias de la clase dentro una clase

Constructor: Dentro de las clases hay unas funciones que se disparan en el momento en que yo hago un nuevo objeto, esas funciones que se disparan cuando se esta creando el objeto se llaman constructores, constructor es como escribir function pero sin nombre, pero funciona igual que una function.

This: Es un indicador de la instancia de donde estoy

POO: Programacion Orientada a Objetos https://developer.mozilla.org/es/docs/Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos

Array: Es como si una variable tuviera cajitas. Asi se crea un array vacio var cajitas = []; Los arrays funcionan indexados a 0 (0, 1, 2, 3). Push le empuja un nuevo dato, no importa el numero que voy siempre le agrega al ultimo valor disponible otro nuevo. Se pueden crear un arrays que en vez de que sus posiciones sean numeros, sean texto. La forma estandar de llamarle a esto [] es sub [0] sub cero, [‘nombre’] sub nombre.

En programacion podemos crear diccionarios de equivalencias Esto en algunos lenguajes de programacion existe como la estructura de datos diccionario (existe en python, ruby, etc…).

En JS no existe de una manera natural pero funciona. Es como si llamara un array asociativo (Un array asociativo es un objeto literal en realidad)

CTRL + L: Limpia la consola (El codigo escrito sigue en memoria)

appendChild: Es una funcion que te agregas hijos al documento (Recuerda agregarle el appendChild a la etiqueta correcta en el video se muestra como se le agrega a document.body y como se corrige en el caso de que te equivoques)

Elements: Te muestra como esta el HTML despues de que JS lo haya manipulado

<hr />: Te traza una linea horizontal

for (var variable in/of object): Este ciclo solo va a operar por la cantidad de objetos que estan dentro del array. Ese objeto lo va a colocar dentro de var variable. El in te trae el indice del array. Este es un ciclo especial que me recorre la cantidad de veces que un objeto existe. Es una buena practica colocarle el var a la variable del ciclo. En ECMASCRIPT 15 hay un cambio en este ciclo que lo hace mas sencillo (of). of me muestra directamente la instancia en vez del indice. En los casos donde me sirve el indice usamos in. En los casos donde me sirve el objeto usamos of. El in y el of te sirve para recorrer un objeto por dentro y en ocasiones para recorrer arrays que no conocemos.

Captura de pantalla.png
momentos grasiosos2.PNG

copyright violada!!! xD 21:40

Aquí os dejo mi aporte, aplicando los mismos elementos, pero desde otro enfoque:

Se trata de un generador de personajes de fantasía épica. Hay 6 clases distintas de personajes, cada una con su imagen y sus bonificadores de características. Podremos seleccionar y cambiar entre las distintas clases con las flechas de “ANTERIOR” y “SIGUIENTE”. Podremos establecer el nombre de nuestro personaje. Podremos también generar puntuaciones aleatorias para las características de nuestro personaje (FUERZA, DESTREZA, CONSTITUCION, INTELIGENCIA) que irán cada una desde 1 hasta 10, + los bonos de cada característica de cada clase (ejemplo: mago +4 inteligencia y +1 destreza); finalmente la suma de todas las características SIEMPRE SUMARÁN 25 para que los personajes estén equilibrados. Podremos volver a generar las puntuaciones de un personaje cuantas veces queramos. Una vez que tengamos unas características que nos gusten podremos guardar a nuestro personaje para que no se nos pierda y crear otro distinto de la clase que queramos. Podremos crear y guardar TODOS LOS PERSONAJES QUE QUERAMOS, y cuando queramos ver nuestros personajes guardados solo tendremos que darle a “CARGAR” y se mostraran en orden con todas sus características debajo del creador. Podremos seguir creando y añadiendo personajes a la lista y mostrándolos cuanto queramos sin perder los anteriores. Por último, si queremos eliminar los personajes guardados y empezar de 0 solo tendremos que pulsar la tecla “LIMPIAR”, lo cual eliminará todos los personajes guardados y limpiará la pantalla.

TENGASE EN CUENTA QUE TODAS ESTAS ACCIONES ANTERIORMENTE MENCIONADAS SE REALIZAN SIN RECARGAR LA PAGINA.

PD: el método “document.write” no sirve para páginas ya cargadas, pues por defecto ejecuta la recarga de un nuevo documento en blanco, por los que para cargar tanto los textos como los las imágenes hay que utilizar “parent.appendChild”.
GeneradorPersonajesBien1.png
GeneradorPersonajesBien2.png

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Generador de personajes</title>
    <style media="screen">
      body
      {
        background-color: grey;
      }
      canvas
      {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <h1><strong>Generador de personajes</strong></h1>
    <p>Vamos a generar personajes en función a su clase</p>
    <p><strong>Nombre : <input type="text" id="nombreHtml" value=""></strong></p>
    <p><strong>Clase : <input type="button" id="botonAnteriorHtml" value="ANTERIOR"> <input type="text" id="claseHtml" value=""> <input type="button" id="botonSiguienteHtml" value="SIGUIENTE"></strong></p>
    <p><input type="button" id="botonGenerarHtml" value="GENERAR"> <input type="button" id="botonGuardarHtml" value="GUARDAR"> <input type="button" id="botonCargarHtml" value="CARGAR"> <input type="button" id="botonLimpiarHtml" value="LIMPIAR"></p>
    <canvas id="canvasImagenHtml" width="500" height="500"></canvas>
    <p><strong>FUERZA : </strong><input type="text" id="fuerzaHtml" value="0"></p>
    <p><strong>DESTREZA : </strong><input type="text" id="destrezaHtml" value="0"></p>
    <p><strong>CONSTITUCIÓN : </strong><input type="text" id="constitucionHtml" value="0"></p>
    <p><strong>INTELIGENCIA : </strong><input type="text" id="inteligenciaHtml" value="0"></p>
    <script type="text/javascript" src="generadorPersonajesJava.js"></script>
  </body>
</html>

alert("Funciona");

var nombreTexto = document.getElementById("nombreHtml");
var claseTexto = document.getElementById("claseHtml");
var botonAnterior = document.getElementById("botonAnteriorHtml");
var botonSiguiente = document.getElementById("botonSiguienteHtml");
var botonGenerar = document.getElementById("botonGenerarHtml");
var botonGuardar = document.getElementById("botonGuardarHtml");
var botonCargar = document.getElementById("botonCargarHtml");
var botonLimpiar = document.getElementById("botonLimpiarHtml");
var canvasImagen = document.getElementById("canvasImagenHtml");
var lienzo = canvasImagen.getContext("2d");
var fuerzaTexto = document.getElementById("fuerzaHtml");
var destrezaTexto = document.getElementById("destrezaHtml");
var constitucionTexto = document.getElementById("constitucionHtml");
var inteligenciaTexto = document.getElementById("inteligenciaHtml");

class Clase
{
  constructor(nom,url,fue,des,con,int)
  {
    this.nombre = nom;
    this.imagen = new Image;
    this.imagen.src = url;
    this.imagen.cargado = false;
    this.bonoFuerza = fue;
    this.bonoDestreza = des;
    this.bonoConstitucion = con;
    this.bonoInteligencia = int;
  }
}

var bardo = new Clase("BARDO","Bardo.png",0,3,0,2);
var picaro = new Clase("PICARO","Picaro.png",0,4,0,1);
var enano = new Clase("ENANO","Enano.png",2,0,3,0);
var explorador = new Clase("EXPLORADOR","Explorador.png",1,3,1,0);
var guerrero = new Clase("GUERRERO","Guerrero.png",2,1,2,0);
var mago = new Clase("MAGO","Mago.png",0,1,0,4);

var clases = [];
clases[0] = bardo;
clases[1] = picaro;
clases[2] = enano;
clases[3] = explorador;
clases[4] = guerrero;
clases[5] = mago;

bardo.imagen.addEventListener("load",cargarImagenBardo);
picaro.imagen.addEventListener("load",cargarImagenPicaro);
enano.imagen.addEventListener("load",cargarImagenEnano);
explorador.imagen.addEventListener("load",cargarImagenExplorador);
guerrero.imagen.addEventListener("load",cargarImagenGuerrero);
mago.imagen.addEventListener("load",cargarImagenMago);

function cargarImagenBardo()
{
  bardo.imagen.cargado = true;
}

function cargarImagenPicaro()
{
  picaro.imagen.cargado = true;
}

function cargarImagenEnano()
{
  enano.imagen.cargado = true;
}

function cargarImagenExplorador()
{
  explorador.imagen.cargado = true;
}

function cargarImagenGuerrero()
{
  guerrero.imagen.cargado = true;
}

function cargarImagenMago()
{
  mago.imagen.cargado = true;
}


var claseActual = 0;
clases[claseActual].imagen.addEventListener("load",seleccionarClase);

function seleccionarClase()
{
    claseTexto.value = clases[claseActual].nombre;

    if (clases[claseActual].imagen.cargado == true)
    {
      lienzo.drawImage(clases[claseActual].imagen,0,0);
    }
}

botonAnterior.addEventListener("click",claseAnterior);
botonSiguiente.addEventListener("click",claseSiguiente);

function claseAnterior()
{
  if (claseActual > 0)
  {
    claseActual = claseActual - 1;
    lienzo.clearRect(0,0,canvasImagen.width,canvasImagen.height);
    seleccionarClase();
  }
}

function claseSiguiente()
{
  if (claseActual < 5)
  {
    claseActual = claseActual + 1;
    lienzo.clearRect(0,0,canvasImagen.width,canvasImagen.height);
    seleccionarClase();
  }
}

botonGenerar.addEventListener("click",generarCaracteristicas);

function generarCaracteristicas()
{
  var fuerzaProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoFuerza;
  var destrezaProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoDestreza;
  var constitucionProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoConstitucion;
  var inteligenciaProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoInteligencia;

  var totalCaracteristicas = fuerzaProvisional + destrezaProvisional + constitucionProvisional + inteligenciaProvisional;

  if (totalCaracteristicas == 25)
  {
    fuerzaTexto.value = fuerzaProvisional;
    destrezaTexto.value = destrezaProvisional;
    constitucionTexto.value = constitucionProvisional;
    inteligenciaTexto.value = inteligenciaProvisional;
  }
  else
  {
    generarCaracteristicas();
  }
}

class Personaje
{
  constructor(nom,clas,img,fue,des,con,int)
  {
    this.nombre = nom;
    this.clase = clas;
    this.imagen = img;
    this.fuerza = fue;
    this.destreza = des;
    this.constitucion = con;
    this.inteligencia = int;
  }
}

var personajes = [];
var personajesGuardados = 0;

botonGuardar.addEventListener("click",guardarPersonaje);

function guardarPersonaje()
{
  personajes.push(new Personaje(nombreTexto.value,clases[claseActual].nombre,clases[claseActual].imagen,fuerzaTexto.value,destrezaTexto.value,constitucionTexto.value,inteligenciaTexto.value));
  personajesGuardados = personajesGuardados + 1;
}

var parrafos = [];
var imagenesInsertadas = [];

botonCargar.addEventListener("click",cargarPersonajes);

function cargarPersonajes()
{
  if (personajesGuardados > 0)
  {
    for(var posicion in personajes)
    {
      parrafos.push(document.createElement("p"));

      parrafos[posicion].innerHTML = "<strong>NOMBRE : </strong>" + personajes[posicion].nombre + "<br>" + "<strong>FUERZA : </strong>" + personajes[posicion].fuerza + "<br>" + "<strong>DESTREZA : </strong>" + personajes[posicion].destreza + "<br>" + "<strong>CONSTITUCION : </strong>" + personajes[posicion].constitucion + "<br>" +"<strong>INTELIGENCIA : </strong>" + personajes[posicion].inteligencia;

      imagenesInsertadas.push(personajes[posicion].imagen);

      document.body.appendChild(imagenesInsertadas[posicion]);
      document.body.appendChild(parrafos[posicion]);
    }
  }
}

botonLimpiar.addEventListener("click",limpiarPantalla);

function limpiarPersonajes()
{
  var partida = 0;
  var numeroBorrar = personajesGuardados;

  personajes.splice(partida,numeroBorrar);
  parrafos.splice(partida,numeroBorrar);
  imagenesInsertadas.splice(partida,numeroBorrar);

  personajesGuardados = 0;
}

function limpiarPantalla()
{
  var padre = document.body;

  for (var i = 0; i < personajesGuardados; i++)
  {
    var hijoParrafos = padre.getElementsByTagName("p")[8];
    var hijoImagenes = padre.getElementsByTagName("img")[0];

    padre.removeChild(hijoImagenes);
    padre.removeChild(hijoParrafos);
  }

  limpiarPersonajes();
}

En el paki.js, agregue el evento el cual cuando el puntero del mouse pasa sobre el pakiman, este hable, se aceptan sugerencias 😛

<
var c = document.getElementById("Pokacho");
c.addEventListener("mouseover",function(){
	pokacho.hablar();
});
var c2 = document.getElementById("Cauchin");
c2.addEventListener("mouseover",function(){
	cauchin.hablar();
});
var c3 = document.getElementById("Tocinauro");
c3.addEventListener("mouseover",function(){
	tocinauro.hablar();
});
>

Ademas al Pakiman.js, le agregue la siguiente linea al constructor, la cual agrega un identificador a cada imagen.

<
this.imagen.id = this.nombre;
>

Aquí mi aporte, agregándole mas personajes y un poco de diseño. Agregué el botón de seleccionar un pakiman, y al hacerle click, manda un mensaje diciendo cuál personaje es el que elegiste.

1.png
2.png

Al seleccionar un pakiman:
3.png

Código:
HTML:
4.png

Clase pakiman JS:
5.png
6.png

Pakiman app JS:
7.png

CSS:
8.png
9.png

No es en si el ejercicio, pero queria comentar que la primera vez que vi esta clase hace ya varios meses, me inspiro a hacer mi propia Pokedex y hoy puedo decir que esta casi terminada (Salvo el cross-browser) y queria compartirla con ustedes. Todos podemos aprender y crear cosas increibles. Pokedex ^^

like por pokachonononnononon :v

Una acotación por si alguien se quedó con la duda acerca del THIS.

El ‘this’ hace referencia a la instancia de la clase, en este caso cada pakiman es una instancia de la clase ‘Pakiman’. Por lo tanto al tener un pakiman que se llama ‘pepe’ por poner un ejemplo, cada vez que uses pepe.mostrarNombre() y esa función imprima el nombre de pepe, en su interior va a utilizar ‘console.log(this.nombre)’ donde this apunta a pepe, y con .nombre (punto-nombre) accede al nombre de pepe y no al de otro que se llame ‘juan’ es es porque hiciste pepe.mostrarNombre() y no juan.mostrarNombre()

Hola. Si a alguien no le quedó claro por qué se coloca this.variable ; se coloca así por que, como dijo Freddy, si tienes 2 variables, una dentro y otra fuera de una clase, las dos tienen el mismo nombre, Js las podría confundir (por que tienen el mismo nombre), entonces lo que hace el this es especificar que esa variable que se encuentra dentro de la clase (con this) es una clase distinta a la que está por fuera y por lo tanto tienen valores distintos y son para diferentes cosas.

this es la forma de declarar una variable dentro de una clase, al igual que var es para declarar una variable fuera de una clase.

Espero haberles ayudando 😄, muchos éxitos!

De pequeño jugaba el Pokemon Red así que no pude evitar las ganas recrear el diseño del juego original 😄

Todo lo armé con Tablas (la vieja confiable xD). Creé una Clase que maneja la interface (La navegación es con las flechas del teclado para subir y bajar. Enter y Esc para entrar y salir). Reemplacé las imágenes .webp por .gifs de internet. También agregué efectos de sonidos. Acá les dejo el link para que lo vean en vivo:

www. alain .pro/lab/pokemon_pokedex_interface/

Unos screens del código, seguro verán algunos espaciados extraños que le he dado para ayudar a la legibilidad. Creen que esté bien o debería dejarlos como viene por defecto?


Aquí les pongo todo el código en GitHub
github .com/alainrodriguezz/pokemon_simple_html_interface

/* Un array es un Vecto, puede ser array Sencillo [],
array Bidimenional [][], array Tridimensional [][][], 
array Multidimensional [][][][] */
// Este es un array asociativo
var imagenes = [];
imagenes ["Cauchin"] = "img/vaca.png";
imagenes ["Pokacho"] = "img/pollo.png";
imagenes ["Tocinauro"] = "img/cerdo.png";


// Con la clase packiman se crea la definicion de un objeto
class packiman 
{
	/*Esto se dispara cuando se
	 crea el objeto, parece una funcion no lo es funcion*/
	constructor(nombre, tipo, ataque)
	{
		this.imagen = new Image();
		this.nombre = nombre;
		this.tipo = tipo;
		this.ataque = ataque;

		this.imagen.src = imagenes[this.nombre];
	}
	/*Todo bloque de codigo dentro de una clase
	es una funcion*/
	hablar ()
	{
		alert(this.nombre);
	}

	//Aqui se va a agregar la imagen
	mostrar ()
	{
		document.write("<h2><strong style='color: purple; font-family:Helvetica;'> "+ this.nombre +" </strong></h2>");
		document.body.appendChild(this.imagen);
		document.write("<br/> <strong style='font-family:Helvetica;'> Tipo: </strong> <strong  style='color: blue; font-family:Helvetica;'>" + this.tipo + "</strong><br/ >");
		document.write("<br/> <strong style='font-family:Helvetica;'> Ataque: </strong> <strong  style='color: blue; font-family:Helvetica;'>" + this.ataque + "</strong><br/ ><hr />");
	}
}

var coleccion = [];
// Cada push indica un indice
coleccion.push(new packiman ("Cauchin", 100, 30));
coleccion.push(new packiman ("Pokacho", 80, 50));
coleccion.push(new packiman ("Tocinauro", 120, 40));

console.log(coleccion);

// Este ciclo solo opera la cantidad de objetos que esta dentro del array. En este caso el array Coleccion[]
// Of solo itera en el objeto
for(var packimanes of coleccion)
{
	packimanes.mostrar();
}
// In itera en el indice
for(var paki in coleccion[0])
{
	console.log(paki);
}```

Apuntes de clase:

  • clase: es la definicion de un objeto (es un tipo de dato que define un conjunto de variables y metodos para un objeto declarado).
  • objeto: Un objeto es un entidad concreta basada en una clase, y aveces se la denomina instancia de una clase.
  • constructor: Métodos especiales que se utilizan para inicializar objetos y se invocan en el momento de la creación del objeto.
  • this: es un indicador de la instancia de donde estoy.
  • Array: es como si una varialble tuviera cajitas, podemos tener cuantas cajitas queramos y cada una de ellas puede tener un valor diferente.
  • otra definicion de array: Un array es una estructura de datos que es utilizado para almacenar una colección de datos. Puedes imaginarlo como una colección de variables del mismo tipo.
  • aray asociativo: cuando la posicion de la cajita no es un numero sino un string (una cadena de texto).
    Recuerda:
  • in itera en el indice.
  • of itera sobre el objeto.
  • Dentro de una clase podemos hacer funciones pero ya no escribimos la palabra function solo el nombre y los pararentesis ejem: miFuncion();

este curso es mi primera experiencia con programación, algunas cosas las entiendo muchas otras no, se que requiere mucha practica y dedicación, pero en algunos temas quedo perdido casi al 100% y me crea dudas si realmente puedo o no con esto.(ya que esto es lo "basico)

*debería dominar todos los temas vistos hasta este punto?
*o puedo avanzar a otras clases y cursos sin dominar 100% lo que ya vimos?

algún consejo, ruta, método, motivación.

Tengo que ser ... Programador! Con Platzi voy a programar. Programarlos mi meta es diseñarlos mi ideal! ¡Pakiman! Programarlos ya!!

En Atom para no tener que estar todo el rato abriendo chrome para ver los cambios si instalais browser-plus con pulsar CTRL + Alt + O se os abre el navegador dentro del propio atom!!
https://atom.io/packages/browser-plus

Me gustaría que añadan un pdf de la teoría con ejemplos simples. Haría de este curso algo mejor.

Que tal a todos. Solo quisiera dar un pequeño comentario de apoyo, ya que he visto comentarios negativos respecto a las clases.

En 20 videos (o menos) enseñaron lo que dentro de mi preparatoria te enseñaban en la carrera de programación dentro de un semestre.
Si no fuera por que yo ya tengo conocimientos del tema, me costaría demasiado procesar esta información.

No es fácil, es verdad, pero, que tema completamente nuevo que hayan aprendido, fue fácil para ustedes?
No se rindan. Si no entienden algo pregunten, para eso estamos la comunidad de usuarios. Vuelvan a ver los videos tanto como sea necesario, pero, sobre todo, hay que leer mas! (me incluyo).

Si no le entienden a la forma en como explica este men, busquen algún otro libro, texto o documentación, que lo explique de forma diferente. Incluso no estaría mal apoyarse con tutoriales de youtube.

ANIMO A TODOS!

Bitacora : hoy es mi segundo dia repasando el video para poder entender jaja

Cuando te salió el código y no sabes ni como
elfredi.png

como dato extra les puedo decir que con ayuda de dos funciones se puede eliminar las propiedades de un miembro de un arreglo
(pero sigue ocupando su espacio) y con otra eliminar el miembro del array por completo.

*Con la función delete se elimina las propiedades del array, justo asi:

delete cajita[1]; //eliminando asi las propiedades que contenga este miembro del arreglo, pero no el miembro por completo.

*Con la funcion splice()se le pasan dos parámetros: el primero será el índice a partir del cual queremos borrar elementos y, el segundo, el número de elementos que queremos borrar a partir de la posición dada:

caja.splice(1,1); //eliminando por completo el miembro del array en la posicion 1

Saludos!!!

Después de esta clase, concluí que tenía el conocimiento suficiente para hacer el “juego de la culebrita” (Snake), que es algo que siempre había querido hacer.

https://github.com/guepardo190889/Platzi/blob/master/prograbasica/culebrita.zip

Cosas que no se vieron en el curso pero investigué:

  • innerHTML para poner texto dentro de una etiqueta HTML

  • setInterval /clearInterval para ejecutar una función dado un intervalo de tiempo definido

  • style.color para poner color a un elemento HTML

Son varios archivos js. Traté de dividir el código en diferentes clases y que cada una haga lo que necesita hacer.

Entre las aspectos a resaltar del juego están:

  • La cabeza de la serpiente, el cuerpo y la comida son de diferentes colores para poder diferenciarse claramente

  • Existen niveles para el juego, donde al completar un tablero, puedes pasar al siguiente donde el siguiente tablero es más grande y la velocidad de la culebra es mayor.

  • El programa te pide tu nombre y te lo imprime en pantalla, así como la cantidad de comida que has comido según vayas comiendo

  • El programa imprime en pantalla mensajes para avisarte de lo que ha sucedido como cuando chocas con la pared del tablero o contra tí mismo o felicitarte por completar un nivel

Hay un archivo especial que se llama configuracion.js y ahí se pueden configurar algunos aspectos del juego como la velocidad inicial de la culebra (en milisegundos), el tamaño inicial de la culebrita, el tamaño inicial del tablero, posibilidad de saltarse niveles sin acabar el anterior, etc.

Pueden sugerir cambios al proyecto si les parece. Por ejemplo, al avanzar de nivel, la velocidad de la culebra siempre se divide por dos, así que en solo 5 niveles la velocidad es tan rápida que es imposible controlar la culebra, por lo que habría que buscar una mejor fórmula que disminuya la velocidad pero no exponencialmente.

Busquen el caso especial en el programa donde ustedes pueden configurar que se muestre un mensaje especial al jugador al terminar un nivel especifíco. Pueden usarlo para pedirle a alguien especial si quiere ser su novia por ejemplo de forma muy original.

Le recomende a mis compañeros de universidad este curso, es impresionante como esto es mejor que 4 semestres de universidad

Mi cabeza explotó en esta clase!! :p

Like si te reíste con “TENGO UN POLLO, TENGO UN POLLO”

Hola, luego de varios días estudiando el lenguaje, regreso a ver este capítulo y lo encuentro muy bueno, y es que digerir la programación no es fácil para la mayoría, se necesita paciencia y perseverancia. Buena suerte a todos…

Hola amigos! a la vez que veo la clase, hago el mismo ejercicio que fredy pero con mis propios nombres e imágenes, resulta que al buscar imágenes en Internet que me gusten, eran de distintos tamaños, para solucionar este problema, dentro de la función mostrar, agrego el tamaño en px que deseo, dejo el código
por si alguien quiere verlo o quiere hacer lo mismo!

mostrar()
  {
    document.body.appendChild(this.imagen);
    this.imagen.width = 150;
    this.imagen.height = 150;
  }

Después de ver todo parece mucha información, cuando se está empezando es un poco abrumador.

voy a confesar que estoy un poco confundida u.u y al ver los códigos tan excelentes de mis compañeros me quedo impresionada 😄
veré ésta clase las veces que sea necesario para entenderla y poder publicar mi código como ustedes antes de continuar con Diagrama de flujo para cajero automático

A ver el video por segunda vez

Les dejo mi trabajo
Imagen1.png

var imagenes= [];
imagenes["Goku Niño"] = "Goku_niño.png";
imagenes["Goku Adolescente"] = "Goku_adolescente.png";
imagenes["Goku (contra Vegeta)"] = "Goku(contra_Vegeta).png";
imagenes["Goku Super Sajayin Fase 1"] = "Goku_super_sajayin_1.png";

class Goku{
  constructor(n, v, ki, at){
    this.imagen = new Image();
    this.nombre = n;
    this.vida = v;
    this.KI = ki;
    this.AtaqueEspecial = at;

    this.imagen.src = imagenes[this.nombre];
  }
  mostrar(){
    document.body.appendChild(this.imagen);
    document.write("<br /><strong>" + this.nombre + "</strong> <br />");
    document.write("<strong> Vida: </strong>" + this.vida + "<br />");
    document.write("<strong> Ki: </strong>" + this.KI + "<br />");
    document.write("<strong> Ataque Especial: </strong>" + this.AtaqueEspecial + "<hr />");

  }
}

var colección = [];
colección.push(new Goku("Goku Niño", 100, 110, "Kame Hame Ha"));
colección.push(new Goku("Goku Adolescente", 200, 325, "Kame Hame Ha"));
colección.push(new Goku("Goku (contra Vegeta)", 2000, "8.000", "Kame Hame Ha"));
colección.push(new Goku("Goku Super Sajayin Fase 1", 6000, "150.000.000", "Kame Hame Ha"));

for(var Fases of colección){
  Fases.mostrar();
}


Les dejo las imágenes

Goku_niño.png
Goku_adolescente.png
Goku(contra_Vegeta).png
Goku_super_sajayin_1.png

2020-04-16.png
Bueno, yo lo plantee de otra manera un poco diferente a ver si funcionaba para que quedara en cajitas… y funcionó… espero les guste y no olviden comentar.
HTML

<!--/**
*@Autor: Edwin zenon
*@fecha: 16/04/2020 22:41pm
*/-->
<!doctype html>
<html>
<head>
	<link rel="stylesheet" href="estilo.css">
<meta charset="utf-8">
<title>Lista de productos</title>
</head>

<body>
	<header>
	<h1><big>PRODUCTOS CREADOS</big>
		<hr></h1>
	</header>
	
	
</body>
<script src="Items.js"></script>
<script src="Productos.js"></script>
</html>

CSS

@charset "utf-8";
/**
*@Autor: Edwin zenon
*@fecha: 16/04/2020 22:41pm
*/
*{text-align: center}
header{
	text-align: center;
}
body{text-align: center;}

img{
	margi: auto;
}
section{
	float:left;
	text-align:center;
	width:300px;
	height: 300px;
	border-bottom:#000000;
	border-style: solid;
	border-radius: 5px;
	padding: 3px;
	margin: 5px;
}
p{
	margin: 2px;
}


JS

"use strict"
/**
*@Autor: Edwin zenon
*@fecha: 16/04/2020 22:41pm
*/
class Item{
	constructor(n,v,a){
		this.imagen= new Image();
		this.nombre=n;
		this.vitalidad=v;
		this.ataque=a;
		this.imagen.src= Imagenes[this.nombre];
	}
	mostrar(x){
		
		document.write("<section id=\"producto"+x+"\">");
		document.write("<br><strong><p>Nombre: "+this.nombre+"</p></strong>");
		document.write("<br><p>Valor: "+this.nombre)+"</p>";
		document.write("<br><p>Velocidad: "+this.ataque+"</p><br>");
		document.write("</section>");
		var s=document.getElementById("producto"+x);
		console.log(s);
		s.appendChild(this.imagen);
		console.log(x);
	}
}
"use strict"
/**
*@Autor: Edwin zenon
*@fecha: 16/04/2020 22:41pm
*/
var Imagenes =[];
Imagenes["item1"]="Imagenes/Item1.jpg";
Imagenes["item2"]="Imagenes/Item2.jpg";
Imagenes["item3"]="Imagenes/Item3.jpg";

var productos=[];
productos.push(new Item("item1",3000.000,300));
productos.push(new Item("item2",200.000,40));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));

var i=0;
for(var x of productos){
	x.mostrar(i);
	i++;
}```

Vaya, llevo 6 semestres en la universidad y ni de chiste se comparan a todo lo que he aprendido aquí en cuanto a programación

Este es un curso muy completo, pero cuando uno esta empezando de 0, hay muchas cosas que no se cogen de una, uno se hace bolas con cualquier cosa y a veces hasta dan ganas de rendirse por no entender.

Por eso es bueno complementar la información con investigación

Aquí está, le agregué un menú que me lleve a mi galería.
Captura de pantalla (309).png

Captura de pantalla (310).png

Para este ejercicio, quise poner a pelear a los Pakimanes, dando opción con botones para elegir quién peleaba con quién, comenzando de manera aleatoria.
Cree un nuevo .js llamado pakipelea, agregado al html, y el código me quedó grandísimo, supongo que se puede abreviar… pero es:

var boton = document.getElementById("botoncito");
var boton1 = document.getElementById("botoncito1");
var boton2 = document.getElementById("botoncito2");
boton.addEventListener("click", dibujoPorClick);
boton1.addEventListener("click", dibujoPorClick1);
boton2.addEventListener("click", dibujoPorClick2);

var mari = aleatorio(0,1);


function dibujoPorClick()
{
  document.write("Comienza la pelea de Cauchin y Pokacho <br />");
  if(mari == 0)
  {
    while (coleccion[0].vida > 0 && coleccion[1].vida > 0 )
    {
      if(coleccion[1].vida > 0)
      {
        document.write("Turno de Pokacho de atacar a Cauchin! " + "<br />");
        coleccion[0].vida = coleccion[0].vida - coleccion[1].ataque;
        document.write("La vida de Cauchin ha bajado a " + coleccion[0].vida + "<br />");
      }
      if(coleccion[0].vida > 0)
      {
        document.write("Turno de Cauchin de atacar a Pokacho! " + "<br />");
        coleccion[1].vida = coleccion[1].vida - coleccion[0].ataque;
        document.write("La vida de Pokacho ha bajado a " + coleccion[1].vida + "<br />");
      }
    }
    if(coleccion[0].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Pokacho! <br />" );
      document.body.appendChild(coleccion[1].imagen);
    }
    if(coleccion[1].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Cauchin! <br />" );
      document.body.appendChild(coleccion[0].imagen);
    }
  }

  if(mari == 1)
  {
    while (coleccion[0].vida > 0 && coleccion[1].vida > 0 )
    {
      if(coleccion[0].vida > 0)
      {
        document.write("Turno de Cauchin de atacar a Pokacho! " + "<br />");
        coleccion[1].vida = coleccion[1].vida - coleccion[0].ataque;
        document.write("La vida de Pokacho ha bajado a " + coleccion[1].vida + "<br />");
      }
      if(coleccion[1].vida > 0)
      {
        document.write("Turno de Pokacho de atacar a Cauchin! " + "<br />");
        coleccion[0].vida = coleccion[0].vida - coleccion[1].ataque;
        document.write("La vida de Cauchin ha bajado a " + coleccion[0].vida + "<br />");
      }
    }
    if(coleccion[0].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Pokacho! <br />" );
      document.body.appendChild(coleccion[1].imagen);
    }
    if(coleccion[1].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Cauchin! <br />" );
      document.body.appendChild(coleccion[0].imagen);
    }
  }
}

function dibujoPorClick1()
{
  document.write("Comienza la pelea de Cauchin y Tocinauro <br />");
  if(mari == 0)
  {
    while (coleccion[0].vida > 0 && coleccion[2].vida > 0 )
    {
      if(coleccion[2].vida > 0)
      {
        document.write("Turno de Tocinauro de atacar a Cauchin! " + "<br />");
        coleccion[0].vida = coleccion[0].vida - coleccion[2].ataque;
        document.write("La vida de Cauchin ha bajado a " + coleccion[0].vida + "<br />");
      }
      if(coleccion[0].vida > 0)
      {
        document.write("Turno de Cauchin de atacar a Tocinauro! " + "<br />");
        coleccion[2].vida = coleccion[2].vida - coleccion[0].ataque;
        document.write("La vida de Tocinauro ha bajado a " + coleccion[2].vida + "<br />");
      }
    }
    if(coleccion[0].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Tocinauro! <br />" );
      document.body.appendChild(coleccion[2].imagen);
    }
    if(coleccion[1].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Cauchin! <br />" );
      document.body.appendChild(coleccion[0].imagen);
    }
  }

  if(mari == 1)
  {
    while (coleccion[0].vida > 0 && coleccion[2].vida > 0 )
    {
      if(coleccion[0].vida > 0)
      {
        document.write("Turno de Cauchin de atacar a Tocinauro! " + "<br />");
        coleccion[2].vida = coleccion[2].vida - coleccion[0].ataque;
        document.write("La vida de Tocinauro ha bajado a " + coleccion[2].vida + "<br />");
      }
      if(coleccion[2].vida > 0)
      {
        document.write("Turno de Tocinauro de atacar a Cauchin! " + "<br />");
        coleccion[0].vida = coleccion[0].vida - coleccion[2].ataque;
        document.write("La vida de Cauchin ha bajado a " + coleccion[0].vida + "<br />");
      }
    }
    if(coleccion[0].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Tocinauro! <br />" );
      document.body.appendChild(coleccion[2].imagen);
    }
    if(coleccion[2].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Cauchin! <br />" );
      document.body.appendChild(coleccion[0].imagen);
    }
  }
}

function dibujoPorClick2()
{
  document.write("Comienza la pelea de Pokacho y Tocinauro <br />");
  if(mari == 0)
  {
    while (coleccion[1].vida > 0 && coleccion[2].vida > 0 )
    {
      if(coleccion[2].vida > 0)
      {
        document.write("Turno de Tocinauro de atacar a Pokacho! " + "<br />");
        coleccion[1].vida = coleccion[1].vida - coleccion[2].ataque;
        document.write("La vida de Pokacho ha bajado a " + coleccion[1].vida + "<br />");
      }
      if(coleccion[1].vida > 0)
      {
        document.write("Turno de Pokacho de atacar a Tocinauro! " + "<br />");
        coleccion[2].vida = coleccion[2].vida - coleccion[1].ataque;
        document.write("La vida de Tocinauro ha bajado a " + coleccion[2].vida + "<br />");
      }
    }
    if(coleccion[1].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Tocinauro! <br />" );
      document.body.appendChild(coleccion[2].imagen);
    }
    if(coleccion[2].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Pokacho! <br />" );
      document.body.appendChild(coleccion[1].imagen);
    }
  }

  if(mari == 1)
  {
    while (coleccion[1].vida > 0 && coleccion[2].vida > 0 )
    {
      if(coleccion[1].vida > 0)
      {
        document.write("Turno de Pokacho de atacar a Tocinauro! " + "<br />");
        coleccion[2].vida = coleccion[2].vida - coleccion[1].ataque;
        document.write("La vida de Tocinauro ha bajado a " + coleccion[2].vida + "<br />");
      }
      if(coleccion[2].vida > 0)
      {
        document.write("Turno de Tocinauro de atacar a Pokacho! " + "<br />");
        coleccion[1].vida = coleccion[1].vida - coleccion[2].ataque;
        document.write("La vida de Pokacho ha bajado a " + coleccion[1].vida + "<br />");
      }
    }
    if(coleccion[1].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Tocinauro! <br />" );
      document.body.appendChild(coleccion[2].imagen);
    }
    if(coleccion[2].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Pokacho! <br />" );
      document.body.appendChild(coleccion[1].imagen);
    }
  }
}


function aleatorio(min, maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
}

vean el vídeo dos veces para comprender de mejor forma todas las definiciones, les dejo como recomendación.

Gracias maestro!

Recomiendo vean este vídeo, dónde explican breve y claramente la diferencia entre un objeto y una clase.
Ver

Aquí os dejo mis apuntes. Cortos pero valiosos. Espero os sirvan. 😄

Me dio demasiada risa Freddy con: Que tiene un ataque de 50 porque es un pollo…agresivo.

les recomiendo que vean esta clase con calma y la **repitan de ser necesario **

Bueno… este fue mi intento, quedo un poco feo pero ahi vamos aprendiendo 😄
Annotation 2020-07-11 190459.png

Esto cada vez se pone más complicado, me da algo de miedo la verdad…

decidí crear un proyecto muy parecido al de los pakimanes pero con las clasificación de los poliedros regulares, insertando en el body imágenes desde javascript y dando la cantidad de caras vértices y aristas.
Nunca pares de programar 💚

Poliedros_Regulares.png

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1 {
        font-size: 25px;
      }
      p {
        font-size: 18px;
      }
    </style>
    <title>Poliedros Regulares</title>
  </head>
  <body>
    <h1>Los Poliedros regulares</h1>
    <script src="figuras.js"></script>
  </body>
</html>

JS

class Poliedro {
  constructor(n, c, a, v) {
    this.nombre = n;
    this.caras = c;
    this.aristas = a;
    this.vertices = v;
    this.imagen = new Image();
    this.imagen.src = imagenes[this.nombre];
  }
  mostrar() {
    document.body.appendChild(this.imagen);
    document.write("<p>");
    document.write("<strong>" +this.nombre + "</strong><br />");
    document.write("Caras: " +this.caras + "<br />");
    document.write("Aristas: " +this.aristas + "<br />");
    document.write("Vertices: " +this.vertices + "<br />");
    document.write("</p>");
  }
}

var imagenes = [];
imagenes ["tetraedro"] = "tetraedro.png";
imagenes ["cubo"] = "cubo.png";
imagenes ["octaedro"] = "octaedro.png";
imagenes ["dodecaedro"] = "dodecaedro.png";
imagenes ["icosaedro"] = "icosaedro.png";

var figuras_tridimensionales = [];
figuras_tridimensionales.push(new Poliedro("tetraedro", 4, 6, 4));
figuras_tridimensionales.push(new Poliedro("cubo", 6, 12, 8));
figuras_tridimensionales.push(new Poliedro("octaedro", 8, 12, 6));
figuras_tridimensionales.push(new Poliedro("dodecaedro", 12, 30, 20));
figuras_tridimensionales.push(new Poliedro("icosaedro", 20, 30, 12));

for (var i of figuras_tridimensionales) {
  i.mostrar();
}

jajaja aun no supero lo del pollo agresivo xd

jajaja me encantan las aclaraciones para los puristas del codigo jajaaj

Os comparto mi código:
pakiman.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 7;
        background-color: #7d5fff;
        color: white;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>PAKIMANES ATRAPADOS</h1>
    <h2>Presiona la imagen para que hablen:</h2>

    <script src="pakiman.js"> </script>
    <script type="text/javascript" src="paki.js"></script>
  </body>
</html>

pakiman.js

//Código donde está definida la clase Pakiman

class Pakiman{
  constructor(nombre, vida, ataque, audio){
    this.nombre = nombre;
    this.vida = vida;
    this.ataque = ataque;
    this.image = new Image();
    this.sound = new Audio(audio);
    this.image.src = imagenes[this.nombre];
  }

  hablar(){
    alert(this.nombre);
  }

  mostrar(){
    document.body.appendChild(this.image);
    document.write("<p>");
    document.write("<strong>" + this.nombre + "</strong> <br/>");
    document.write("Vida: " + this.vida + "<br/>");
    document.write("Ataque: " + this.ataque+ "<hr>");
    document.write("</p>");
  }
}

paki.js

//Código de funcionalidad del html


var imagenes = [] ;
imagenes["Cauchin"] = "vaca.png";
imagenes["Pokacho"] = "pollo.png";
imagenes["Tocinauro"] = "cerdo.png";

var audios = {
  cauchin: "sonidoVaca.mp3",
  pokacho: "sonidoRana.mp3",
  tocinauro: "oink.ogg"
}

var coleccion = [];
coleccion.push( new Pakiman("Cauchin", 100, 30, audios.cauchin) );
coleccion.push( new Pakiman("Pokacho", 80, 50, audios.pokacho) );
coleccion.push( new Pakiman("Tocinauro", 120, 40, audios.tocinauro) );


//Itera sobre el objeto o el value
for( const o of coleccion){ //iterador que regresa cada objeto o variable del arreglo directamente
  o.image.addEventListener("click", function(){
    o.sound.play();
  });
  o.mostrar();
}



/*
Itera sobre el índice o key
for( var i in coleccion){ //iterador de todos los elementos regresando el índice
  //coleccion[i].mostrar();
}
*/

Pakiman.png

y yo como estupido buscando en google “que es pakiman?”

Acá dejo algunos datos importantes:

  • Al momento de crear una funcion dentro del bloque de codigo de una clase no se debe especificar la sintaxis “Function”, ya que, se entiende implícitamente que es una funcion

  • El objeto “this” se usa como indicador de una instacia (clases), mientras que en funciones se usa para indicar que esa variable forma parte solo de la funcion.

  • Los arrays o arreglos, son zonas de almacenamiento contiguo que contienen una serie de datos.

  • El objeto “appendChild” agrega un “hijo” al arbol HTML.

Un pequeño cambio en la función “mostrar”
Captura.PNG

mostrar(){
	//document.body.appendChild(this.imagen);
	document.write("<table border=1 bgcolor=cian><td>");//crea tabla de color cian y columna
	document.write("<strong>" + this.nombre + "</strong><br />");//nombre
	document.write("Vida: " + this.vida + "<br />");//vida
	document.write("Ataque: " + this.ataque+"<td>");//ataque
	document.write("<img src="+imagenes[this.nombre]+">");//hace nueva columna para las imgns
	document.write("</td></td></table><br />");//cierra las 2 columnas y la tabla + salto de linea
	}

Para qué sirven los puntos que te da platzi?

literalmente llevo 2 dias literalmente sin poder dormir tratando de digerir todo este contenido. Realmente me esta gustando mucho lo que estoy aprendiendo.

Chicos, este curso es muy util, no se desanimen.

for-in y for-of in 39:23

for-in y for-of.png

Tendré que ver este video por ahi cinco veces minimo para entenderlo

Por que cuando decimos document.write no lo hacemos de manera document.body.write?

Hay alguien más aquí que sienta que si esta clase es básica necesita una clase de programación para dummies?

Freddy: "No se compliquen por ahora"
Yo: “Quiero que en vez de salir solo como elementos uno arriba del otro, los Pakimones sí aparezcan como tarjetitas del Pokedex”
.
Y así fue como me pasé varias horas rompiéndome la cabeza para hacer esto con HTML, CSS y Javascript:
.

.
Básicamente modifiqué algunas propiedades y la función mostrar(); para que en vez de poner los elementos en el body directamente, generase un div, y dentro de este añadiera los datos del Pakimon.
No sé si vayamos a ver esto más adelante en este curso, pero a lo mejor le sirve a alguien. En definitiva a mí me sirvió.
.
Les voy contando qué hice y cuál fue mi razonamiento en los comentarios del código

// Antes que otra cosa:
// Mucho texto :v

var imagenes = [];
imagenes["Cauchin"] = "vaca.webp";
imagenes["Pokacho"] = "pollo.webp";
imagenes["Tocinauro"] = "cerdo.webp";
imagenes["Kiobolobo"] = "lobo.png";

class Pakiman{
  constructor(n, t, v, a){
    this.imagen = new Image();
    this.nombre = n;
    this.tipo = t;
    this.vida = v;
    this.ataque = a;

    /*
    Cada Pakimon va a presentarse dentro de un DIV que será su tarjeta en el
    Pakidex.

    Para ello:
    1. Creamos un DIV en blanco dentro de la propiedad "this.div"
    2. Usando setAttribute le asignamos al DIV la clase html .pakimon, que usaremos
    para definir el estilo de todas las tarjetas en CSS.
    3. Usando setAttribute le asignamos como ID, this.nombre lo cual hará
    que el DIV se llame como el Pakimon, pudiendo así hacer hacer appendChild al
    DIV preciso del Pakimon, en vez de al document o al body en general.
    */

    this.div = document.createElement('div');
    this.div.setAttribute("class", "pakimon");
    this.div.setAttribute("id", this.nombre);

    /*
    Para insertar las propiedades del Pakimon dentro de la tarjeta (el DIV que
    armamos recién arriba) necesitamos usar appendChild, ya que no podemos
    hacer write directamente en el DIV. Peeero, por lo que pude entender
    mientras me golpeaba la cabeza contra el escritorio a la vez que leía cosas
    aun incomprensibles para mí en StackOverflow, no podemos hacer appendChild
    a un STRING, por lo que necesitamos crear un elemento tipo NODE, que por
    lo que entendí, es como se le llama a un elemento de HTML.

    Para ello:
    1. Se usa "createElement" para generar la etiqueta html que va a añadirse
    a la tarjeta  (ya sea "strong" o "P") para mostrar la propiedad del Pakiman.

    Este elemento NODE se genera dentro de la clase Pakiman como una nueva
    propiedad con la nomenclatura "this.[propiedadOriginal]Display"

    2.Al crearla este es un <p></p> vacío (o strong vacío). Su contenido es
    modificado definiendo this.[propiedadOriginal]Display.innerHTML

    innerHTML nos inserta lo que le pongamos, dentro de la etiqueta HTML
    que hayamos elegido en el paso 1. de esta sección.
    */
    this.nombreDisplay = document.createElement('strong');
    this.nombreDisplay.innerHTML = this.nombre;

    this.tipoDisplay = document.createElement('p');
    this.tipoDisplay.innerHTML = "Tipo: " + this.tipo;

    this.vidaDisplay = document.createElement('p');
    this.vidaDisplay.innerHTML = "Vida: " + this.vida;

    this.ataqueDisplay = document.createElement('p');
    this.ataqueDisplay.innerHTML = "Ataque: " + this.ataque;

    /*
    además de definir la src de la imagen, vamos a darle la class .imagenPakimon
    la cual será usada para definir su estilo en CSS
    */
    this.imagen.src = imagenes[this.nombre];
    this.imagen.setAttribute("class", "imagenPakimon");
  }
  hablar(){
    alert("¡" + this.nombre + "!")
  }
  mostrar(){
    //GENERA LA TARJETA DEL PAKIMON DENTRO DEL PAKIDEX

    /*Busca el DIV llamado #pakidex dentro del documento (abajo pongo el html) y le inserta
    el DIV que armamos arriba
    (El que tiene class=.pakimon, y con ID igual al nombre del Pakimon)
    */

    document.getElementById("pakidex").appendChild(this.div);

    /*
    Busca la tarjeta (el elemento cuyo ID es igual al nombre del Pakimon) y, usando
    appendChild, le inserta la imagen y el resto de propiedades del pakimon.
    (usando las propiedades Display que definimos arriba, que son nodos en vez
    de strings)
    */
    document.getElementById(this.nombre).appendChild(this.imagen);
    document.getElementById(this.nombre).appendChild(this.nombreDisplay);
    document.getElementById(this.nombre).appendChild(this.tipoDisplay);
    document.getElementById(this.nombre).appendChild(this.vidaDisplay);
    document.getElementById(this.nombre).appendChild(this.ataqueDisplay);
  }
}

var coleccion = [];
                  //Pakiman( NOMBRE , TIPO, VIDA,  ATAQUE)
coleccion.push( new Pakiman("Cauchin","Tierra",100,30) );
coleccion.push( new Pakiman("Pokacho","Electrico",80,50) );
coleccion.push( new Pakiman("Tocinauro","Normal",120,40) );
/*Gracias al proceso que hicimos, con añadir una linea de código
(+ la linea que nos importa la imagen) podemos añadir una tarjeta de
pakimon nueva a nuestro pokedex.
*/
coleccion.push( new Pakiman("Kiobolobo","Perreo",90,65) );


for(var pakimonDisplay of coleccion){
  pakimonDisplay.mostrar();
}

.
El html solamente contiene:
Dentro del head, los vínculos al CSS y el script de pakimanes.js.
Dentro del body, un <h1> que es el título “Mi pakidex” y el <div> con id=“pakidex”. Este Div es el el Javascript va a buscar para insertarle dentro las tarjetas de cada Pakimon cuando llamamos a la función mostrar();
.

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Pokimanes: Tengo ke atraparlos</title>
    <link rel="stylesheet" type="text/css" href="styles/style_pakimon.css">
    <script src="pakimanes.js" defer></script>
  </head>
  <body>
    <h1>Mi pakidex:</h1>
    <div id="pakidex">
    </div>
  </body>
</html>

.
El CSS define colores, tamaños, sombras y esas cosas.
.

body{
  display: block;
  background-color: #21252b;
  color: #FFFFFF;
  height: auto;
  width: auto;
  vertical-align: middle;
  text-align: center;
}

#pakidex{
  width: 50%;
  margin:0 25% 0 25%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px 20px 20px 20px;
  min-width: 150px;
  background-color: #2a2c36;
  box-shadow: 0px 1px 11px #21252b;
  box-shadow: 0px 2px 8px #21252b;
  border-radius: 15px
}

.pakimon{
  flex-grow:1;
  min-width: 170px;
  max-width: 250px;
  display: inline-block;
  margin: 10px 5px 10px 5px;
  padding: 5px;
  text-align: center;
  box-shadow: 0px 6px 15px #21252b;
  box-shadow: 0px 2px 7px #21252b;
  background-color: #f7fff9;
  color: #21252b;
  border-radius: 15px;
}

/*Para que la imagen se muestre sobre el nombre del Pakimon en vez de al lado*/
.imagenPakimon{
  margin: auto;
  display: block;
}

.
No sé tanto de CSS así que estuve jugando un poco, y encontré una guía online de flexbox bastante buena y muy visual en google (Si buscas “flexbox guide” es lo primero que sale) que fue lo que usé para que las tarjetas hicieran esto cuando la pantalla está muy chiquita:
.

.

.
(Esto es indispensable, ya que, como todos sabemos, la Pantalla del Pakidex es muy chiquita: Ash Mustard no puede ir por la vida cargando una pantalla de computadora normal)

Y pues básicamente fue eso en lo que he estado desde que salí del trabajo hasta ahora que termino de escribir esto a las 2am.
Sí se puede, mis panas, nunca dejen de aprender.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
   <title>El caza pakimanes</title>
  <link rel="shortcut icon" href="imagenes/pokepelota.ico">
  
  
</head>
<body>
    <h1>PAKIDEX</h1>
    <p>Lo que he encontrado</p>
    <script src="javascript/clase_pakiman.js"></script>
    <script src="javascript/pakiscript.js"></script>
    
</body>
</html>

CLASE

class Pakiman
{
    constructor(nombre, vida, ataque, tipo)
    {
        this.imagen =new Image();
        this.name = nombre;
        this.tipo = tipo;
        this.vida = vida;
        this.ataque = ataque;
		this.imagen.src=imag[this.name];
    }
    hablar()
    {
        alert(this.name + " esta vivo");
    }
    mostrar()
    {
        document.body.appendChild(this.imagen);
		    document.write("<p>");
		    document.write("<br /><strong>" + this.name + "</strong><br />");
        document.write("Tipo: " + this.tipo + " <br />");
        document.write("Vida: " + this.vida + " <br />");
		    document.write("Ataque: " + this.ataque + " <hr />");
		    document.write("</p>");
    }
}

PAKISCRIPT

var imag = [];
imag["cauchin"]="imagenes/vaca.png";
imag["pocacho"]="imagenes/pollo.png";
imag["tocinauro"]="imagenes/cerdo.png";

var coleccion =[];
// ---metodo de llenado de arrays con objetos, primero instanciando fuera del array----
/* var cauchin = new Pakiman("cauchin", 100, 30, "tierra");
var pocacho =new Pakiman("pocacho", 80, 50, "tierra-aire");
var tocinauro =new Pakiman("tocinauro", 120, 40, "tierra-agua"); */

/* coleccion.push(cauchin);
coleccion.push(pocacho);
coleccion.push(tocinauro); */

// ---metodo de llenado de arrays con objetos, instanciando directamente en la ultima posicion del array---
coleccion.push(new Pakiman("cauchin", 100, 30, "tierra"));
coleccion.push(new Pakiman("pocacho", 80, 50, "tierra-aire"));
coleccion.push(new Pakiman("tocinauro", 120, 40, "tierra-agua"));

// ---listado para mostrar el indice---
for(var integrantes in coleccion)
{
    console.log(integrantes + "A"); // ---listado para mostrar el indice---
    
}

for(var integrantes in imag)
{
    console.log(integrantes + "B"); // ---listado para mostrar el indice---
    
}

for(var integrantes in coleccion[2])
{
    console.log(integrantes); // ---listado para mostrar el indice---
    
}

//---listado para mostrar el objeto---
for(var integrantes of coleccion)
{
    integrantes.mostrar(); //---listado para mostrar el objeto---
}

Se me explotó el cerebro xD

Dejame te acaricio el pokacho :3 :'v

Cómo método de conquista le hice un Pakiman a mi novia y a mí. Lastimosamente ella es más fuerte que yo, es cool jugar con el código de esta forma.

freddy te amo ❤️

La clase Pakiman con algunos comentarios

class Pakiman {
  //Definicion de un objeto
  constructor(n, v ,a )
  {
    //this es el indicador de la instancia de la clase
    //this tambien refiere a las variables dentro de la clase
    this.imagen = new Image();
    this.nombre = n;
    this.vida = v;
    this.ataque = a;

    //obtiene el valor del nombre que es igual a el valor del array asociativo en imagenes
    //en ese array estan las direcciones de las imagenes y con src las asigno como su valor a la imagen
    this.imagen.src = imagenes[this.nombre];
  }
  hablar(){
    alert(this.nombre);
  }
  mostrar()
  {
    //agrega un hijo al árbol q empieza con document q contiene el body q va a contener la imagen
    document.body.appendChild(this.imagen);
    //agrego elementos html
    document.write("<p>");
    document.write("<strong>" + this.nombre + "</strong><br>");
    document.write("Vida" + this.vida + "<br>");
    document.write("Ataque" + this.ataque);
    document.write("<hr></p>");
  }
}```
desafio.png

El dominio tocinauro.com esta disponible por si alguien está interesado en montar un restaurante u otra cosa. 😄

Me inspira ver este tipo de clases, la imaginaron explota inventando un mundo. Intente romper código para agregar otras cosas, pero aun no me salen. Espero seguir aprendiendo

cats.jpg

Mi actividad de esta clase
PAKIMAN.png

![](Screenshot_4.png

Viendo algunos comentarios, donde dice que no entiende. no es fácil para el que esta comenzando entender con rapidez, todo lo hace la practica, y me encanto esta parte de curso porque me motiva mas, a buscar y aprender mas.
También le recomiendo que imprima los cogidos. o lo escriba y escriba que hace cada cosa. así entenderá y se lo aseguro que se van a enamorar mas de la programación.

conecta el cargador que estas sin bateria @freddier

Me costo entenderlo al principio, recomiendo dividirlo por segmentos, osea entender cosita por cosita una vez finalizado, volver a ver el vídeo e intentar entenderlo integrado. Ya que esta muy concentrado este vídeo y es muy difícil comprender.

Mi código agregando un pokemón real 😄

var imagenes = [];
imagenes["Cauchin"] = "vaca.png";
imagenes["Pokacho"] = "pollo.png";
imagenes["Tocinauro"] = "cerdo.png";
imagenes["Latios"] = "latios.png";

class Pakiman {
  constructor(n, v, a)
  {
    this.imagen = new Image();
    this.nombre = n;
    this.vida = v;
    this.ataque = a;
    
    this.imagen.src = imagenes[this.nombre]; 
  }
  hablar() {
    alert(this.nombre + "!!");
  }
  mostrar() {
    document.body.appendChild(this.imagen);
    document.write("<p>");
    document.body.appendChild(this.imagen);
    document.write("Nombre: <strong>" + this.nombre + "</strong><br />");
    document.write("Vida: " + this.vida + "<br />");
    document.write("Ataque: " + this.ataque + "<hr />");
    document.write("</p>");
  }
}

var coleccion = [];

coleccion.push(new Pakiman("Cauchin", 100, 30))
coleccion.push(new Pakiman("Pokacho", 80, 50))
coleccion.push(new Pakiman("Tocinauro", 120, 40))
coleccion.push(new Pakiman("Latios", 160, 60))

for(var pakin of coleccion) {
  pakin.mostrar();
}
paki1.jpg
paki2.jpg

wow espectacular esta clase. Confieso que al principio no entendía es NA´ y regresaba una y varias veces hasta que logre entenderlo (recuerda que si es necesario repítelo una y mil veces hasta que lo entiendas). SUERTE Y MUCHAS GANAS

Pumm tengo un pollo, tengo un pollo

Nota: en las clases no es necesario poner el enunciado “funtcion” ya que se interpreta que un bloque de códigos es una funcion.

Yo ya me hice un lio, ya no se la diferencia entre un array, una clase y un objeto…

Me exploto la cabeza cuando vi que se podía nombrar las posiciones del array con string. 😮

Es decir que un Array asociativo funciona practicamente igual a JSON… Es decir que con la clave puedo obtener el valor, asi sea un Array o un objeto JSON… de la forma “variable.nombre” donde variable puede ser el nombre del Array o del objeto JSON y el nombre puede ser un String usado como índice o la clave del objeto JSON… ¿Es así, cierto?

Cuando conviene usar JSON particularmente?

PARA LOS QUE NO ENTIENDEN MUY BIEN LO DE:
FOR(var fredito of coleccion) AQUI LES DEJO UN EJEMPLO MAS SENCILLO.

var imagenes = [];
imagenes["Cauchin"] ="img/vaca.png";
imagenes["Pokacho"] ="img/pollo.png";
imagenes["Tocinauro"] ="img/cerdo.png";

var coleccion = [];
coleccion.push(new Pakiman("Cauchin",100,30));
coleccion.push(new Pakiman("Pokacho",80,50));
coleccion.push(new Pakiman("Tocinauro",120,40));

// for (var pakin of coleccion)
// {
// 	pakin.mostrar();
// }

for (var i = 0; i < coleccion.length; i++) {
	
	coleccion[i].mostrar();
}


Introducción al mundo de la programación orientada a objetos
constructores: son funciones que se encuentran en nuestras clases, y son las funciones que se disparan en el momento que creemos un objeto.
this: es un indicador de la clase. Se utiliza en las variables dentro de la clase.
dentro de una clase no es necesario escribir function para crear una funcion por que se sobreentienda que es un bloque te codigo.

Excelente expliacion de Clases y Arrays, toda mi carrera nunca tuve una clase de esta manera.

Por favor, que alguien haga una versión (no copyright) pixel art de nuestro pakimanes favoritos, y el entrenador Freddy! xD, si nadie se dispone los hare yo xD

Necesito aprender esto. me parece muy interesante

por fin pude entender objetos y clases.

muchas gracias Platzi

Log de los Pokemones como objetos y de sus propiedades (solo les cambié los nombres y las imágenes del mismo tamaño, espero les sirva 😃 ) :

for(var objeto of coleccion) { //log de los pokemones y sus propiedades
  console.log(objeto);
  for(var propiedad in objeto) {

    console.log(objeto[propiedad]);
  }
Screenshot_2.png

pikachu.png
charmander.png
mew.png

Pakiman!
Tengo que atraparlooooss
Tu destino asiiiii eeeeeeesssss
son muy sabrosooooossss
en filete o en bisteeeecccc…

ahi esta la primera estrofa…

Veo en los comentarios que hay gente que dice que el curso es muy confuso, pero seguro están pensando que deben aprender todos estos códigos.

Es muy falso, este curso es solo para que se adentren al mundo de la programación, para que tengan noción de lo que es programar. Este no es un curso definitivo de Javascript.

Podríamos hacer una analogía con el fútbol. Si no eres muy fanático de fútbol, a lo mejor sabes que si la pelota entra dentro del arco es gol, que el que agarra la pelota con la mano, es el arquero.

Pero a lo mejor no sabes que el 6 debe marcar al 9 o que el defensor central no debe cobrar un lateral.

Pero con saber lo primero que dije, es suficiente para que tengas noción de lo que es el fútbol.

Eso es lo que hace este curso por ti, te adentra en lo que es la programación, pero no te enseña el 100% porque no estás preparado.

Si no entienden algo, solamente sigan avanzando y verán que al final van a tener má idea de lo que es este hermoso mundo.

✨ Una clase nos permite definir una colección de objetos permitiendo que estos posean los mismos atributos y métodos.

**Resumen de la clase: ** En Javascript existe la programación orientada a objetos (OOP en sus siglas en inglés), la cual se crea a partir de una clase, donde se define las características del objeto o atributos y sus capacidades o métodos.

Así como otros lenguajes, este concepto conlleva lo siguiente:

  • Objeto
    Una instancia de una Clase.
  • Propiedad
    Una característica del Objeto, como el color.
  • Método
    Una capacidad del Objeto, como caminar.
  • Constructor
    Es un método llamado en el momento de la creación de instancias.
  • Herencia
    Una Clase puede heredar características de otra Clase.
  • Encapsulamiento
    Una Clase sólo define las características del Objeto, un Método sólo define cómo se ejecuta el Método.
  • Abstracción
    La conjunción de herencia compleja, métodos y propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.
  • Polimorfismo
    Diferentes Clases podrían definir el mismo método o propiedad.

Para mayor información: POO en Javascript

Después de un día de trabajo, pude mejorar el ejercicio:
Aprendí a implementar clases, bucles con arrays, y a añadir elementos HTML mediante código JS.
De paso aprendí algo de CSS.

Annotation 2020-05-02 014509.png
HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Pokemon de inicio</title>
    <link rel="stylesheet"type="text/css" href="pokemon.css">
  </head>
  <h1>¿A quién elegirías si pikachu no es alternativa?</h1>
  <body>
    <script type="text/javascript"src="pokemonClases.js">
    </script>
    <script type="text/javascript"src="pokemon.js">
    </script>
  </body>
</html>

JAVASCRIPT CLASES

// DEFINIENDO LA CLASE POKEMON
class Pokemon {
  constructor(nombre,vida,ataque,defensa,ataqueEspecial,
    defensaEspecial,velocidad){
    this.imagen = new Image(); /*
    Importante que en esta línea se guarda como atributo
    de la clase pókemon un elemento imagen HTML.*/
    this.nombre = nombre;
    this.vida = vida;
    this.ataque = ataque;
    this.defensa = defensa;
    this.ataqueEspecial = ataqueEspecial;
    this.defensaEspecial = defensaEspecial;
    this.velocidad = velocidad;
    this.imagen.src = imagenes[this.nombre];/*
    En esta línea se guarda la ruta en la propiedad src del
    elemento imagen HTML*/
}
  hablar (){
  alert (this.nombre);
}
  mostrar(){
    var nuevaDiv= document.createElement('div');/*
    En esta línea se crea una división (etiqueta Div).
    A esta etiqueta por medio del método appendChild()
    agregaré un título, saltos de línea, la imagen, y
    ésta será anexada al body, el tronco principal. Las
    Div´s serían como las ramas.
    */
    var divCabecera = document.createElement('h2')
    divCabecera.innerHTML = this.nombre +'<br> Stats';
    divCabecera.setAttribute("class","cabeceraCajas")
    var saltoLinea = document.createElement('br')
    nuevaDiv.appendChild(this.imagen);
    nuevaDiv.appendChild(saltoLinea);
    nuevaDiv.appendChild(divCabecera);
    document.body.appendChild(nuevaDiv);

// creando tabla
    var coleccion = {
        'Vida': this.vida,
        'Ataque': this.ataque,
        'Defensa': this.defensa,
        'Ataque Especial': this.ataqueEspecial,
        'Defensa Especial': this.defensaEspecial,
        'Velocidad': this.velocidad,
      }; /*
      Este array solo sirve para disminuir las líneas de código
      más adelante. Es más fácil utilizar un "for-in" que siete
      líneas de texto añadiendo texto de las celdas "tr" y "td",
      y también es más fácil de leer.
      El método es sencillo:
      a) se crea la etiqueta HTML tabla
      b) se crea la etiqueta HTML tbody
      c) se crean un bucle dónde se crean las etiquetas TR y 
         TD con los datos que necesitamos que presenten,
         auxilíandonos de la CLASE y el Array
      d) Anexar las etiquetas TR y TD al tbody, y el tbody a 
         a la etiqueta tabla.
      */
    var tabla = document.createElement('table');
    var tbody = document.createElement('tbody');
    for (var stat in coleccion) {
      var filaTexto  = '<tr><td> '+stat+' </tr></td><tr><td>\
      '+coleccion[stat]+' </tr></td>';
      var fila = document.createElement('tr');
      fila.innerHTML = filaTexto;
      tbody.appendChild(fila);
    };
    tabla.appendChild(tbody);
    nuevaDiv.appendChild(tabla);
}
};

JAVASCRIPT CÓDIGO

// Colección de imágenes, se indexó la ubicación
var imagenes=[];
imagenes["Bulbasaur"] = "Bulbasaur.png";
imagenes["Charmander"]= "Charmander.png";
imagenes["Squirtle"]= "Squirtle.png";

// array que sirve para correr el ciclo "for-in".
var pokedex = [];
pokedex.push(new Pokemon("Bulbasaur",45,49,49,65,65,45));
pokedex.push(new Pokemon('Charmander',39,52,43,60,50,65));
pokedex.push(new Pokemon('Squirtle',44,48,65,50,64,43));

// bucle para mostrar todos los objetos de la clase Pókemon
for (var i in pokedex){
    pokedex[i].mostrar();
}

CSS

body {
  background: url(Pokemon_background.png);
  background-size: cover;
}
h1  {
  text-align: center;
  text-shadow: 1px 1px 1px black;
  -webkit-text-stroke: 1px blue;
  font-size: 4.3em;
  color: #fdd666;
}
div {
  background: rgba(255, 255, 255, 0.5);
  color: black;
  height: 500px;
  width: 400px;
  font-size: 20px;
  float: left;
  margin-left: 50px;
  margin-top: 0px;
  margin-bottom: 50px;
  text-align: center;
}
table{
    border-collapse: collapse;
    width: auto;
    margin: auto;
}
td, th {
    border: 1px black;
    padding:2px;
    text-align: left;

}
img {
  width: 200px;
  height: 200px;
}
h2.cabeceraCajas {
  font-weight: bold;
}
};

Hago mi aporte de los animales modificados con los poderes y nombre que inventé:

Lobolbasaur:
lobolbasaur.png
Vacuartle:
vacuartle.png
Pollormander:
pollormander.png

Y…

Cerdachu:
cerdachu.png

creo que soy el único que mira 2 horas el vídeo, y la duración es de 45 minutos :p

Hola buen día,

para que funcione bien al momento de crear los dos archivos .js, priemro deben colocar la etiqueta script de la clase y luego la correspondiente a definición de variables. Si lo hacen al revés les aparecerá un error. En este caso es importante el orden de las etiquetas script de html. Pruébenlo. 

    

  • RESUMEN:
    Clase: Es la definicion completa de un objeto (Se debe usar cuando tengo muchos objetos con los mismos atributos para asi no escribirlo multiples veces). Dentro de las clases no hay que escribir function porque se entiende de manera implicita que todo bloque de codigo dentro de una clase es una funcion. Las clases al igual que pasa con las funciones, JS es lo primero que lee y las monsta en memoria para que esten listas.

Objetos: Son instancias de la clase dentro una clase

Constructor: Dentro de las clases hay unas funciones que se disparan en el momento en que yo hago un nuevo objeto, esas funciones que se disparan cuando se esta creando el objeto se llaman constructores, constructor es como escribir function pero sin nombre, pero funciona igual que una function.

This: Es un indicador de la instancia de donde estoy

POO: Programacion Orientada a Objetos https://developer.mozilla.org/es/docs/Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos

Array: Es como si una variable tuviera cajitas. Asi se crea un array vacio var cajitas = []; Los arrays funcionan indexados a 0 (0, 1, 2, 3). Push le empuja un nuevo dato, no importa el numero que voy siempre le agrega al ultimo valor disponible otro nuevo. Se pueden crear un arrays que en vez de que sus posiciones sean numeros, sean texto. La forma estandar de llamarle a esto [] es sub [0] sub cero, [‘nombre’] sub nombre.

En programacion podemos crear diccionarios de equivalencias Esto en algunos lenguajes de programacion existe como la estructura de datos diccionario (existe en python, ruby, etc…).

En JS no existe de una manera natural pero funciona. Es como si llamara un array asociativo (Un array asociativo es un objeto literal en realidad)

CTRL + L: Limpia la consola (El codigo escrito sigue en memoria)

appendChild: Es una funcion que te agregas hijos al documento (Recuerda agregarle el appendChild a la etiqueta correcta en el video se muestra como se le agrega a document.body y como se corrige en el caso de que te equivoques)

Elements: Te muestra como esta el HTML despues de que JS lo haya manipulado

<hr />: Te traza una linea horizontal

for (var variable in/of object): Este ciclo solo va a operar por la cantidad de objetos que estan dentro del array. Ese objeto lo va a colocar dentro de var variable. El in te trae el indice del array. Este es un ciclo especial que me recorre la cantidad de veces que un objeto existe. Es una buena practica colocarle el var a la variable del ciclo. En ECMASCRIPT 15 hay un cambio en este ciclo que lo hace mas sencillo (of). of me muestra directamente la instancia en vez del indice. En los casos donde me sirve el indice usamos in. En los casos donde me sirve el objeto usamos of. El in y el of te sirve para recorrer un objeto por dentro y en ocasiones para recorrer arrays que no conocemos.

Captura de pantalla.png
momentos grasiosos2.PNG

copyright violada!!! xD 21:40

Aquí os dejo mi aporte, aplicando los mismos elementos, pero desde otro enfoque:

Se trata de un generador de personajes de fantasía épica. Hay 6 clases distintas de personajes, cada una con su imagen y sus bonificadores de características. Podremos seleccionar y cambiar entre las distintas clases con las flechas de “ANTERIOR” y “SIGUIENTE”. Podremos establecer el nombre de nuestro personaje. Podremos también generar puntuaciones aleatorias para las características de nuestro personaje (FUERZA, DESTREZA, CONSTITUCION, INTELIGENCIA) que irán cada una desde 1 hasta 10, + los bonos de cada característica de cada clase (ejemplo: mago +4 inteligencia y +1 destreza); finalmente la suma de todas las características SIEMPRE SUMARÁN 25 para que los personajes estén equilibrados. Podremos volver a generar las puntuaciones de un personaje cuantas veces queramos. Una vez que tengamos unas características que nos gusten podremos guardar a nuestro personaje para que no se nos pierda y crear otro distinto de la clase que queramos. Podremos crear y guardar TODOS LOS PERSONAJES QUE QUERAMOS, y cuando queramos ver nuestros personajes guardados solo tendremos que darle a “CARGAR” y se mostraran en orden con todas sus características debajo del creador. Podremos seguir creando y añadiendo personajes a la lista y mostrándolos cuanto queramos sin perder los anteriores. Por último, si queremos eliminar los personajes guardados y empezar de 0 solo tendremos que pulsar la tecla “LIMPIAR”, lo cual eliminará todos los personajes guardados y limpiará la pantalla.

TENGASE EN CUENTA QUE TODAS ESTAS ACCIONES ANTERIORMENTE MENCIONADAS SE REALIZAN SIN RECARGAR LA PAGINA.

PD: el método “document.write” no sirve para páginas ya cargadas, pues por defecto ejecuta la recarga de un nuevo documento en blanco, por los que para cargar tanto los textos como los las imágenes hay que utilizar “parent.appendChild”.
GeneradorPersonajesBien1.png
GeneradorPersonajesBien2.png

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Generador de personajes</title>
    <style media="screen">
      body
      {
        background-color: grey;
      }
      canvas
      {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <h1><strong>Generador de personajes</strong></h1>
    <p>Vamos a generar personajes en función a su clase</p>
    <p><strong>Nombre : <input type="text" id="nombreHtml" value=""></strong></p>
    <p><strong>Clase : <input type="button" id="botonAnteriorHtml" value="ANTERIOR"> <input type="text" id="claseHtml" value=""> <input type="button" id="botonSiguienteHtml" value="SIGUIENTE"></strong></p>
    <p><input type="button" id="botonGenerarHtml" value="GENERAR"> <input type="button" id="botonGuardarHtml" value="GUARDAR"> <input type="button" id="botonCargarHtml" value="CARGAR"> <input type="button" id="botonLimpiarHtml" value="LIMPIAR"></p>
    <canvas id="canvasImagenHtml" width="500" height="500"></canvas>
    <p><strong>FUERZA : </strong><input type="text" id="fuerzaHtml" value="0"></p>
    <p><strong>DESTREZA : </strong><input type="text" id="destrezaHtml" value="0"></p>
    <p><strong>CONSTITUCIÓN : </strong><input type="text" id="constitucionHtml" value="0"></p>
    <p><strong>INTELIGENCIA : </strong><input type="text" id="inteligenciaHtml" value="0"></p>
    <script type="text/javascript" src="generadorPersonajesJava.js"></script>
  </body>
</html>

alert("Funciona");

var nombreTexto = document.getElementById("nombreHtml");
var claseTexto = document.getElementById("claseHtml");
var botonAnterior = document.getElementById("botonAnteriorHtml");
var botonSiguiente = document.getElementById("botonSiguienteHtml");
var botonGenerar = document.getElementById("botonGenerarHtml");
var botonGuardar = document.getElementById("botonGuardarHtml");
var botonCargar = document.getElementById("botonCargarHtml");
var botonLimpiar = document.getElementById("botonLimpiarHtml");
var canvasImagen = document.getElementById("canvasImagenHtml");
var lienzo = canvasImagen.getContext("2d");
var fuerzaTexto = document.getElementById("fuerzaHtml");
var destrezaTexto = document.getElementById("destrezaHtml");
var constitucionTexto = document.getElementById("constitucionHtml");
var inteligenciaTexto = document.getElementById("inteligenciaHtml");

class Clase
{
  constructor(nom,url,fue,des,con,int)
  {
    this.nombre = nom;
    this.imagen = new Image;
    this.imagen.src = url;
    this.imagen.cargado = false;
    this.bonoFuerza = fue;
    this.bonoDestreza = des;
    this.bonoConstitucion = con;
    this.bonoInteligencia = int;
  }
}

var bardo = new Clase("BARDO","Bardo.png",0,3,0,2);
var picaro = new Clase("PICARO","Picaro.png",0,4,0,1);
var enano = new Clase("ENANO","Enano.png",2,0,3,0);
var explorador = new Clase("EXPLORADOR","Explorador.png",1,3,1,0);
var guerrero = new Clase("GUERRERO","Guerrero.png",2,1,2,0);
var mago = new Clase("MAGO","Mago.png",0,1,0,4);

var clases = [];
clases[0] = bardo;
clases[1] = picaro;
clases[2] = enano;
clases[3] = explorador;
clases[4] = guerrero;
clases[5] = mago;

bardo.imagen.addEventListener("load",cargarImagenBardo);
picaro.imagen.addEventListener("load",cargarImagenPicaro);
enano.imagen.addEventListener("load",cargarImagenEnano);
explorador.imagen.addEventListener("load",cargarImagenExplorador);
guerrero.imagen.addEventListener("load",cargarImagenGuerrero);
mago.imagen.addEventListener("load",cargarImagenMago);

function cargarImagenBardo()
{
  bardo.imagen.cargado = true;
}

function cargarImagenPicaro()
{
  picaro.imagen.cargado = true;
}

function cargarImagenEnano()
{
  enano.imagen.cargado = true;
}

function cargarImagenExplorador()
{
  explorador.imagen.cargado = true;
}

function cargarImagenGuerrero()
{
  guerrero.imagen.cargado = true;
}

function cargarImagenMago()
{
  mago.imagen.cargado = true;
}


var claseActual = 0;
clases[claseActual].imagen.addEventListener("load",seleccionarClase);

function seleccionarClase()
{
    claseTexto.value = clases[claseActual].nombre;

    if (clases[claseActual].imagen.cargado == true)
    {
      lienzo.drawImage(clases[claseActual].imagen,0,0);
    }
}

botonAnterior.addEventListener("click",claseAnterior);
botonSiguiente.addEventListener("click",claseSiguiente);

function claseAnterior()
{
  if (claseActual > 0)
  {
    claseActual = claseActual - 1;
    lienzo.clearRect(0,0,canvasImagen.width,canvasImagen.height);
    seleccionarClase();
  }
}

function claseSiguiente()
{
  if (claseActual < 5)
  {
    claseActual = claseActual + 1;
    lienzo.clearRect(0,0,canvasImagen.width,canvasImagen.height);
    seleccionarClase();
  }
}

botonGenerar.addEventListener("click",generarCaracteristicas);

function generarCaracteristicas()
{
  var fuerzaProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoFuerza;
  var destrezaProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoDestreza;
  var constitucionProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoConstitucion;
  var inteligenciaProvisional = Math.floor(Math.random() * (10 - 1 + 1) + 1) + clases[claseActual].bonoInteligencia;

  var totalCaracteristicas = fuerzaProvisional + destrezaProvisional + constitucionProvisional + inteligenciaProvisional;

  if (totalCaracteristicas == 25)
  {
    fuerzaTexto.value = fuerzaProvisional;
    destrezaTexto.value = destrezaProvisional;
    constitucionTexto.value = constitucionProvisional;
    inteligenciaTexto.value = inteligenciaProvisional;
  }
  else
  {
    generarCaracteristicas();
  }
}

class Personaje
{
  constructor(nom,clas,img,fue,des,con,int)
  {
    this.nombre = nom;
    this.clase = clas;
    this.imagen = img;
    this.fuerza = fue;
    this.destreza = des;
    this.constitucion = con;
    this.inteligencia = int;
  }
}

var personajes = [];
var personajesGuardados = 0;

botonGuardar.addEventListener("click",guardarPersonaje);

function guardarPersonaje()
{
  personajes.push(new Personaje(nombreTexto.value,clases[claseActual].nombre,clases[claseActual].imagen,fuerzaTexto.value,destrezaTexto.value,constitucionTexto.value,inteligenciaTexto.value));
  personajesGuardados = personajesGuardados + 1;
}

var parrafos = [];
var imagenesInsertadas = [];

botonCargar.addEventListener("click",cargarPersonajes);

function cargarPersonajes()
{
  if (personajesGuardados > 0)
  {
    for(var posicion in personajes)
    {
      parrafos.push(document.createElement("p"));

      parrafos[posicion].innerHTML = "<strong>NOMBRE : </strong>" + personajes[posicion].nombre + "<br>" + "<strong>FUERZA : </strong>" + personajes[posicion].fuerza + "<br>" + "<strong>DESTREZA : </strong>" + personajes[posicion].destreza + "<br>" + "<strong>CONSTITUCION : </strong>" + personajes[posicion].constitucion + "<br>" +"<strong>INTELIGENCIA : </strong>" + personajes[posicion].inteligencia;

      imagenesInsertadas.push(personajes[posicion].imagen);

      document.body.appendChild(imagenesInsertadas[posicion]);
      document.body.appendChild(parrafos[posicion]);
    }
  }
}

botonLimpiar.addEventListener("click",limpiarPantalla);

function limpiarPersonajes()
{
  var partida = 0;
  var numeroBorrar = personajesGuardados;

  personajes.splice(partida,numeroBorrar);
  parrafos.splice(partida,numeroBorrar);
  imagenesInsertadas.splice(partida,numeroBorrar);

  personajesGuardados = 0;
}

function limpiarPantalla()
{
  var padre = document.body;

  for (var i = 0; i < personajesGuardados; i++)
  {
    var hijoParrafos = padre.getElementsByTagName("p")[8];
    var hijoImagenes = padre.getElementsByTagName("img")[0];

    padre.removeChild(hijoImagenes);
    padre.removeChild(hijoParrafos);
  }

  limpiarPersonajes();
}

En el paki.js, agregue el evento el cual cuando el puntero del mouse pasa sobre el pakiman, este hable, se aceptan sugerencias 😛

<
var c = document.getElementById("Pokacho");
c.addEventListener("mouseover",function(){
	pokacho.hablar();
});
var c2 = document.getElementById("Cauchin");
c2.addEventListener("mouseover",function(){
	cauchin.hablar();
});
var c3 = document.getElementById("Tocinauro");
c3.addEventListener("mouseover",function(){
	tocinauro.hablar();
});
>

Ademas al Pakiman.js, le agregue la siguiente linea al constructor, la cual agrega un identificador a cada imagen.

<
this.imagen.id = this.nombre;
>

Aquí mi aporte, agregándole mas personajes y un poco de diseño. Agregué el botón de seleccionar un pakiman, y al hacerle click, manda un mensaje diciendo cuál personaje es el que elegiste.

1.png
2.png

Al seleccionar un pakiman:
3.png

Código:
HTML:
4.png

Clase pakiman JS:
5.png
6.png

Pakiman app JS:
7.png

CSS:
8.png
9.png

No es en si el ejercicio, pero queria comentar que la primera vez que vi esta clase hace ya varios meses, me inspiro a hacer mi propia Pokedex y hoy puedo decir que esta casi terminada (Salvo el cross-browser) y queria compartirla con ustedes. Todos podemos aprender y crear cosas increibles. Pokedex ^^

like por pokachonononnononon :v

Una acotación por si alguien se quedó con la duda acerca del THIS.

El ‘this’ hace referencia a la instancia de la clase, en este caso cada pakiman es una instancia de la clase ‘Pakiman’. Por lo tanto al tener un pakiman que se llama ‘pepe’ por poner un ejemplo, cada vez que uses pepe.mostrarNombre() y esa función imprima el nombre de pepe, en su interior va a utilizar ‘console.log(this.nombre)’ donde this apunta a pepe, y con .nombre (punto-nombre) accede al nombre de pepe y no al de otro que se llame ‘juan’ es es porque hiciste pepe.mostrarNombre() y no juan.mostrarNombre()

Hola. Si a alguien no le quedó claro por qué se coloca this.variable ; se coloca así por que, como dijo Freddy, si tienes 2 variables, una dentro y otra fuera de una clase, las dos tienen el mismo nombre, Js las podría confundir (por que tienen el mismo nombre), entonces lo que hace el this es especificar que esa variable que se encuentra dentro de la clase (con this) es una clase distinta a la que está por fuera y por lo tanto tienen valores distintos y son para diferentes cosas.

this es la forma de declarar una variable dentro de una clase, al igual que var es para declarar una variable fuera de una clase.

Espero haberles ayudando 😄, muchos éxitos!

De pequeño jugaba el Pokemon Red así que no pude evitar las ganas recrear el diseño del juego original 😄

Todo lo armé con Tablas (la vieja confiable xD). Creé una Clase que maneja la interface (La navegación es con las flechas del teclado para subir y bajar. Enter y Esc para entrar y salir). Reemplacé las imágenes .webp por .gifs de internet. También agregué efectos de sonidos. Acá les dejo el link para que lo vean en vivo:

www. alain .pro/lab/pokemon_pokedex_interface/

Unos screens del código, seguro verán algunos espaciados extraños que le he dado para ayudar a la legibilidad. Creen que esté bien o debería dejarlos como viene por defecto?


Aquí les pongo todo el código en GitHub
github .com/alainrodriguezz/pokemon_simple_html_interface

/* Un array es un Vecto, puede ser array Sencillo [],
array Bidimenional [][], array Tridimensional [][][], 
array Multidimensional [][][][] */
// Este es un array asociativo
var imagenes = [];
imagenes ["Cauchin"] = "img/vaca.png";
imagenes ["Pokacho"] = "img/pollo.png";
imagenes ["Tocinauro"] = "img/cerdo.png";


// Con la clase packiman se crea la definicion de un objeto
class packiman 
{
	/*Esto se dispara cuando se
	 crea el objeto, parece una funcion no lo es funcion*/
	constructor(nombre, tipo, ataque)
	{
		this.imagen = new Image();
		this.nombre = nombre;
		this.tipo = tipo;
		this.ataque = ataque;

		this.imagen.src = imagenes[this.nombre];
	}
	/*Todo bloque de codigo dentro de una clase
	es una funcion*/
	hablar ()
	{
		alert(this.nombre);
	}

	//Aqui se va a agregar la imagen
	mostrar ()
	{
		document.write("<h2><strong style='color: purple; font-family:Helvetica;'> "+ this.nombre +" </strong></h2>");
		document.body.appendChild(this.imagen);
		document.write("<br/> <strong style='font-family:Helvetica;'> Tipo: </strong> <strong  style='color: blue; font-family:Helvetica;'>" + this.tipo + "</strong><br/ >");
		document.write("<br/> <strong style='font-family:Helvetica;'> Ataque: </strong> <strong  style='color: blue; font-family:Helvetica;'>" + this.ataque + "</strong><br/ ><hr />");
	}
}

var coleccion = [];
// Cada push indica un indice
coleccion.push(new packiman ("Cauchin", 100, 30));
coleccion.push(new packiman ("Pokacho", 80, 50));
coleccion.push(new packiman ("Tocinauro", 120, 40));

console.log(coleccion);

// Este ciclo solo opera la cantidad de objetos que esta dentro del array. En este caso el array Coleccion[]
// Of solo itera en el objeto
for(var packimanes of coleccion)
{
	packimanes.mostrar();
}
// In itera en el indice
for(var paki in coleccion[0])
{
	console.log(paki);
}```

Apuntes de clase:

  • clase: es la definicion de un objeto (es un tipo de dato que define un conjunto de variables y metodos para un objeto declarado).
  • objeto: Un objeto es un entidad concreta basada en una clase, y aveces se la denomina instancia de una clase.
  • constructor: Métodos especiales que se utilizan para inicializar objetos y se invocan en el momento de la creación del objeto.
  • this: es un indicador de la instancia de donde estoy.
  • Array: es como si una varialble tuviera cajitas, podemos tener cuantas cajitas queramos y cada una de ellas puede tener un valor diferente.
  • otra definicion de array: Un array es una estructura de datos que es utilizado para almacenar una colección de datos. Puedes imaginarlo como una colección de variables del mismo tipo.
  • aray asociativo: cuando la posicion de la cajita no es un numero sino un string (una cadena de texto).
    Recuerda:
  • in itera en el indice.
  • of itera sobre el objeto.
  • Dentro de una clase podemos hacer funciones pero ya no escribimos la palabra function solo el nombre y los pararentesis ejem: miFuncion();

este curso es mi primera experiencia con programación, algunas cosas las entiendo muchas otras no, se que requiere mucha practica y dedicación, pero en algunos temas quedo perdido casi al 100% y me crea dudas si realmente puedo o no con esto.(ya que esto es lo "basico)

*debería dominar todos los temas vistos hasta este punto?
*o puedo avanzar a otras clases y cursos sin dominar 100% lo que ya vimos?

algún consejo, ruta, método, motivación.

Tengo que ser ... Programador! Con Platzi voy a programar. Programarlos mi meta es diseñarlos mi ideal! ¡Pakiman! Programarlos ya!!

En Atom para no tener que estar todo el rato abriendo chrome para ver los cambios si instalais browser-plus con pulsar CTRL + Alt + O se os abre el navegador dentro del propio atom!!
https://atom.io/packages/browser-plus

Me gustaría que añadan un pdf de la teoría con ejemplos simples. Haría de este curso algo mejor.

Que tal a todos. Solo quisiera dar un pequeño comentario de apoyo, ya que he visto comentarios negativos respecto a las clases.

En 20 videos (o menos) enseñaron lo que dentro de mi preparatoria te enseñaban en la carrera de programación dentro de un semestre.
Si no fuera por que yo ya tengo conocimientos del tema, me costaría demasiado procesar esta información.

No es fácil, es verdad, pero, que tema completamente nuevo que hayan aprendido, fue fácil para ustedes?
No se rindan. Si no entienden algo pregunten, para eso estamos la comunidad de usuarios. Vuelvan a ver los videos tanto como sea necesario, pero, sobre todo, hay que leer mas! (me incluyo).

Si no le entienden a la forma en como explica este men, busquen algún otro libro, texto o documentación, que lo explique de forma diferente. Incluso no estaría mal apoyarse con tutoriales de youtube.

ANIMO A TODOS!

Bitacora : hoy es mi segundo dia repasando el video para poder entender jaja

Cuando te salió el código y no sabes ni como
elfredi.png

como dato extra les puedo decir que con ayuda de dos funciones se puede eliminar las propiedades de un miembro de un arreglo
(pero sigue ocupando su espacio) y con otra eliminar el miembro del array por completo.

*Con la función delete se elimina las propiedades del array, justo asi:

delete cajita[1]; //eliminando asi las propiedades que contenga este miembro del arreglo, pero no el miembro por completo.

*Con la funcion splice()se le pasan dos parámetros: el primero será el índice a partir del cual queremos borrar elementos y, el segundo, el número de elementos que queremos borrar a partir de la posición dada:

caja.splice(1,1); //eliminando por completo el miembro del array en la posicion 1

Saludos!!!

Después de esta clase, concluí que tenía el conocimiento suficiente para hacer el “juego de la culebrita” (Snake), que es algo que siempre había querido hacer.

https://github.com/guepardo190889/Platzi/blob/master/prograbasica/culebrita.zip

Cosas que no se vieron en el curso pero investigué:

  • innerHTML para poner texto dentro de una etiqueta HTML

  • setInterval /clearInterval para ejecutar una función dado un intervalo de tiempo definido

  • style.color para poner color a un elemento HTML

Son varios archivos js. Traté de dividir el código en diferentes clases y que cada una haga lo que necesita hacer.

Entre las aspectos a resaltar del juego están:

  • La cabeza de la serpiente, el cuerpo y la comida son de diferentes colores para poder diferenciarse claramente

  • Existen niveles para el juego, donde al completar un tablero, puedes pasar al siguiente donde el siguiente tablero es más grande y la velocidad de la culebra es mayor.

  • El programa te pide tu nombre y te lo imprime en pantalla, así como la cantidad de comida que has comido según vayas comiendo

  • El programa imprime en pantalla mensajes para avisarte de lo que ha sucedido como cuando chocas con la pared del tablero o contra tí mismo o felicitarte por completar un nivel

Hay un archivo especial que se llama configuracion.js y ahí se pueden configurar algunos aspectos del juego como la velocidad inicial de la culebra (en milisegundos), el tamaño inicial de la culebrita, el tamaño inicial del tablero, posibilidad de saltarse niveles sin acabar el anterior, etc.

Pueden sugerir cambios al proyecto si les parece. Por ejemplo, al avanzar de nivel, la velocidad de la culebra siempre se divide por dos, así que en solo 5 niveles la velocidad es tan rápida que es imposible controlar la culebra, por lo que habría que buscar una mejor fórmula que disminuya la velocidad pero no exponencialmente.

Busquen el caso especial en el programa donde ustedes pueden configurar que se muestre un mensaje especial al jugador al terminar un nivel especifíco. Pueden usarlo para pedirle a alguien especial si quiere ser su novia por ejemplo de forma muy original.

Le recomende a mis compañeros de universidad este curso, es impresionante como esto es mejor que 4 semestres de universidad

Mi cabeza explotó en esta clase!! :p

Like si te reíste con “TENGO UN POLLO, TENGO UN POLLO”

Hola, luego de varios días estudiando el lenguaje, regreso a ver este capítulo y lo encuentro muy bueno, y es que digerir la programación no es fácil para la mayoría, se necesita paciencia y perseverancia. Buena suerte a todos…

Hola amigos! a la vez que veo la clase, hago el mismo ejercicio que fredy pero con mis propios nombres e imágenes, resulta que al buscar imágenes en Internet que me gusten, eran de distintos tamaños, para solucionar este problema, dentro de la función mostrar, agrego el tamaño en px que deseo, dejo el código
por si alguien quiere verlo o quiere hacer lo mismo!

mostrar()
  {
    document.body.appendChild(this.imagen);
    this.imagen.width = 150;
    this.imagen.height = 150;
  }

Después de ver todo parece mucha información, cuando se está empezando es un poco abrumador.

voy a confesar que estoy un poco confundida u.u y al ver los códigos tan excelentes de mis compañeros me quedo impresionada 😄
veré ésta clase las veces que sea necesario para entenderla y poder publicar mi código como ustedes antes de continuar con Diagrama de flujo para cajero automático

A ver el video por segunda vez

Les dejo mi trabajo
Imagen1.png

var imagenes= [];
imagenes["Goku Niño"] = "Goku_niño.png";
imagenes["Goku Adolescente"] = "Goku_adolescente.png";
imagenes["Goku (contra Vegeta)"] = "Goku(contra_Vegeta).png";
imagenes["Goku Super Sajayin Fase 1"] = "Goku_super_sajayin_1.png";

class Goku{
  constructor(n, v, ki, at){
    this.imagen = new Image();
    this.nombre = n;
    this.vida = v;
    this.KI = ki;
    this.AtaqueEspecial = at;

    this.imagen.src = imagenes[this.nombre];
  }
  mostrar(){
    document.body.appendChild(this.imagen);
    document.write("<br /><strong>" + this.nombre + "</strong> <br />");
    document.write("<strong> Vida: </strong>" + this.vida + "<br />");
    document.write("<strong> Ki: </strong>" + this.KI + "<br />");
    document.write("<strong> Ataque Especial: </strong>" + this.AtaqueEspecial + "<hr />");

  }
}

var colección = [];
colección.push(new Goku("Goku Niño", 100, 110, "Kame Hame Ha"));
colección.push(new Goku("Goku Adolescente", 200, 325, "Kame Hame Ha"));
colección.push(new Goku("Goku (contra Vegeta)", 2000, "8.000", "Kame Hame Ha"));
colección.push(new Goku("Goku Super Sajayin Fase 1", 6000, "150.000.000", "Kame Hame Ha"));

for(var Fases of colección){
  Fases.mostrar();
}


Les dejo las imágenes

Goku_niño.png
Goku_adolescente.png
Goku(contra_Vegeta).png
Goku_super_sajayin_1.png

2020-04-16.png
Bueno, yo lo plantee de otra manera un poco diferente a ver si funcionaba para que quedara en cajitas… y funcionó… espero les guste y no olviden comentar.
HTML

<!--/**
*@Autor: Edwin zenon
*@fecha: 16/04/2020 22:41pm
*/-->
<!doctype html>
<html>
<head>
	<link rel="stylesheet" href="estilo.css">
<meta charset="utf-8">
<title>Lista de productos</title>
</head>

<body>
	<header>
	<h1><big>PRODUCTOS CREADOS</big>
		<hr></h1>
	</header>
	
	
</body>
<script src="Items.js"></script>
<script src="Productos.js"></script>
</html>

CSS

@charset "utf-8";
/**
*@Autor: Edwin zenon
*@fecha: 16/04/2020 22:41pm
*/
*{text-align: center}
header{
	text-align: center;
}
body{text-align: center;}

img{
	margi: auto;
}
section{
	float:left;
	text-align:center;
	width:300px;
	height: 300px;
	border-bottom:#000000;
	border-style: solid;
	border-radius: 5px;
	padding: 3px;
	margin: 5px;
}
p{
	margin: 2px;
}


JS

"use strict"
/**
*@Autor: Edwin zenon
*@fecha: 16/04/2020 22:41pm
*/
class Item{
	constructor(n,v,a){
		this.imagen= new Image();
		this.nombre=n;
		this.vitalidad=v;
		this.ataque=a;
		this.imagen.src= Imagenes[this.nombre];
	}
	mostrar(x){
		
		document.write("<section id=\"producto"+x+"\">");
		document.write("<br><strong><p>Nombre: "+this.nombre+"</p></strong>");
		document.write("<br><p>Valor: "+this.nombre)+"</p>";
		document.write("<br><p>Velocidad: "+this.ataque+"</p><br>");
		document.write("</section>");
		var s=document.getElementById("producto"+x);
		console.log(s);
		s.appendChild(this.imagen);
		console.log(x);
	}
}
"use strict"
/**
*@Autor: Edwin zenon
*@fecha: 16/04/2020 22:41pm
*/
var Imagenes =[];
Imagenes["item1"]="Imagenes/Item1.jpg";
Imagenes["item2"]="Imagenes/Item2.jpg";
Imagenes["item3"]="Imagenes/Item3.jpg";

var productos=[];
productos.push(new Item("item1",3000.000,300));
productos.push(new Item("item2",200.000,40));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));
productos.push(new Item("item3",1000,1));

var i=0;
for(var x of productos){
	x.mostrar(i);
	i++;
}```

Vaya, llevo 6 semestres en la universidad y ni de chiste se comparan a todo lo que he aprendido aquí en cuanto a programación

Este es un curso muy completo, pero cuando uno esta empezando de 0, hay muchas cosas que no se cogen de una, uno se hace bolas con cualquier cosa y a veces hasta dan ganas de rendirse por no entender.

Por eso es bueno complementar la información con investigación

Aquí está, le agregué un menú que me lleve a mi galería.
Captura de pantalla (309).png

Captura de pantalla (310).png

Para este ejercicio, quise poner a pelear a los Pakimanes, dando opción con botones para elegir quién peleaba con quién, comenzando de manera aleatoria.
Cree un nuevo .js llamado pakipelea, agregado al html, y el código me quedó grandísimo, supongo que se puede abreviar… pero es:

var boton = document.getElementById("botoncito");
var boton1 = document.getElementById("botoncito1");
var boton2 = document.getElementById("botoncito2");
boton.addEventListener("click", dibujoPorClick);
boton1.addEventListener("click", dibujoPorClick1);
boton2.addEventListener("click", dibujoPorClick2);

var mari = aleatorio(0,1);


function dibujoPorClick()
{
  document.write("Comienza la pelea de Cauchin y Pokacho <br />");
  if(mari == 0)
  {
    while (coleccion[0].vida > 0 && coleccion[1].vida > 0 )
    {
      if(coleccion[1].vida > 0)
      {
        document.write("Turno de Pokacho de atacar a Cauchin! " + "<br />");
        coleccion[0].vida = coleccion[0].vida - coleccion[1].ataque;
        document.write("La vida de Cauchin ha bajado a " + coleccion[0].vida + "<br />");
      }
      if(coleccion[0].vida > 0)
      {
        document.write("Turno de Cauchin de atacar a Pokacho! " + "<br />");
        coleccion[1].vida = coleccion[1].vida - coleccion[0].ataque;
        document.write("La vida de Pokacho ha bajado a " + coleccion[1].vida + "<br />");
      }
    }
    if(coleccion[0].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Pokacho! <br />" );
      document.body.appendChild(coleccion[1].imagen);
    }
    if(coleccion[1].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Cauchin! <br />" );
      document.body.appendChild(coleccion[0].imagen);
    }
  }

  if(mari == 1)
  {
    while (coleccion[0].vida > 0 && coleccion[1].vida > 0 )
    {
      if(coleccion[0].vida > 0)
      {
        document.write("Turno de Cauchin de atacar a Pokacho! " + "<br />");
        coleccion[1].vida = coleccion[1].vida - coleccion[0].ataque;
        document.write("La vida de Pokacho ha bajado a " + coleccion[1].vida + "<br />");
      }
      if(coleccion[1].vida > 0)
      {
        document.write("Turno de Pokacho de atacar a Cauchin! " + "<br />");
        coleccion[0].vida = coleccion[0].vida - coleccion[1].ataque;
        document.write("La vida de Cauchin ha bajado a " + coleccion[0].vida + "<br />");
      }
    }
    if(coleccion[0].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Pokacho! <br />" );
      document.body.appendChild(coleccion[1].imagen);
    }
    if(coleccion[1].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Cauchin! <br />" );
      document.body.appendChild(coleccion[0].imagen);
    }
  }
}

function dibujoPorClick1()
{
  document.write("Comienza la pelea de Cauchin y Tocinauro <br />");
  if(mari == 0)
  {
    while (coleccion[0].vida > 0 && coleccion[2].vida > 0 )
    {
      if(coleccion[2].vida > 0)
      {
        document.write("Turno de Tocinauro de atacar a Cauchin! " + "<br />");
        coleccion[0].vida = coleccion[0].vida - coleccion[2].ataque;
        document.write("La vida de Cauchin ha bajado a " + coleccion[0].vida + "<br />");
      }
      if(coleccion[0].vida > 0)
      {
        document.write("Turno de Cauchin de atacar a Tocinauro! " + "<br />");
        coleccion[2].vida = coleccion[2].vida - coleccion[0].ataque;
        document.write("La vida de Tocinauro ha bajado a " + coleccion[2].vida + "<br />");
      }
    }
    if(coleccion[0].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Tocinauro! <br />" );
      document.body.appendChild(coleccion[2].imagen);
    }
    if(coleccion[1].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Cauchin! <br />" );
      document.body.appendChild(coleccion[0].imagen);
    }
  }

  if(mari == 1)
  {
    while (coleccion[0].vida > 0 && coleccion[2].vida > 0 )
    {
      if(coleccion[0].vida > 0)
      {
        document.write("Turno de Cauchin de atacar a Tocinauro! " + "<br />");
        coleccion[2].vida = coleccion[2].vida - coleccion[0].ataque;
        document.write("La vida de Tocinauro ha bajado a " + coleccion[2].vida + "<br />");
      }
      if(coleccion[2].vida > 0)
      {
        document.write("Turno de Tocinauro de atacar a Cauchin! " + "<br />");
        coleccion[0].vida = coleccion[0].vida - coleccion[2].ataque;
        document.write("La vida de Cauchin ha bajado a " + coleccion[0].vida + "<br />");
      }
    }
    if(coleccion[0].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Tocinauro! <br />" );
      document.body.appendChild(coleccion[2].imagen);
    }
    if(coleccion[2].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Cauchin! <br />" );
      document.body.appendChild(coleccion[0].imagen);
    }
  }
}

function dibujoPorClick2()
{
  document.write("Comienza la pelea de Pokacho y Tocinauro <br />");
  if(mari == 0)
  {
    while (coleccion[1].vida > 0 && coleccion[2].vida > 0 )
    {
      if(coleccion[2].vida > 0)
      {
        document.write("Turno de Tocinauro de atacar a Pokacho! " + "<br />");
        coleccion[1].vida = coleccion[1].vida - coleccion[2].ataque;
        document.write("La vida de Pokacho ha bajado a " + coleccion[1].vida + "<br />");
      }
      if(coleccion[1].vida > 0)
      {
        document.write("Turno de Pokacho de atacar a Tocinauro! " + "<br />");
        coleccion[2].vida = coleccion[2].vida - coleccion[1].ataque;
        document.write("La vida de Tocinauro ha bajado a " + coleccion[2].vida + "<br />");
      }
    }
    if(coleccion[1].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Tocinauro! <br />" );
      document.body.appendChild(coleccion[2].imagen);
    }
    if(coleccion[2].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Pokacho! <br />" );
      document.body.appendChild(coleccion[1].imagen);
    }
  }

  if(mari == 1)
  {
    while (coleccion[1].vida > 0 && coleccion[2].vida > 0 )
    {
      if(coleccion[1].vida > 0)
      {
        document.write("Turno de Pokacho de atacar a Tocinauro! " + "<br />");
        coleccion[2].vida = coleccion[2].vida - coleccion[1].ataque;
        document.write("La vida de Tocinauro ha bajado a " + coleccion[2].vida + "<br />");
      }
      if(coleccion[2].vida > 0)
      {
        document.write("Turno de Tocinauro de atacar a Pokacho! " + "<br />");
        coleccion[1].vida = coleccion[1].vida - coleccion[2].ataque;
        document.write("La vida de Pokacho ha bajado a " + coleccion[1].vida + "<br />");
      }
    }
    if(coleccion[1].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Tocinauro! <br />" );
      document.body.appendChild(coleccion[2].imagen);
    }
    if(coleccion[2].vida <= 0)
    {
      document.write("El ganador de la batalla Pakimon ha sido Pokacho! <br />" );
      document.body.appendChild(coleccion[1].imagen);
    }
  }
}


function aleatorio(min, maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
}

vean el vídeo dos veces para comprender de mejor forma todas las definiciones, les dejo como recomendación.

Gracias maestro!

Recomiendo vean este vídeo, dónde explican breve y claramente la diferencia entre un objeto y una clase.
Ver

Aquí os dejo mis apuntes. Cortos pero valiosos. Espero os sirvan. 😄

Me dio demasiada risa Freddy con: Que tiene un ataque de 50 porque es un pollo…agresivo.

les recomiendo que vean esta clase con calma y la **repitan de ser necesario **

Bueno… este fue mi intento, quedo un poco feo pero ahi vamos aprendiendo 😄
Annotation 2020-07-11 190459.png

Esto cada vez se pone más complicado, me da algo de miedo la verdad…

decidí crear un proyecto muy parecido al de los pakimanes pero con las clasificación de los poliedros regulares, insertando en el body imágenes desde javascript y dando la cantidad de caras vértices y aristas.
Nunca pares de programar 💚

Poliedros_Regulares.png

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1 {
        font-size: 25px;
      }
      p {
        font-size: 18px;
      }
    </style>
    <title>Poliedros Regulares</title>
  </head>
  <body>
    <h1>Los Poliedros regulares</h1>
    <script src="figuras.js"></script>
  </body>
</html>

JS

class Poliedro {
  constructor(n, c, a, v) {
    this.nombre = n;
    this.caras = c;
    this.aristas = a;
    this.vertices = v;
    this.imagen = new Image();
    this.imagen.src = imagenes[this.nombre];
  }
  mostrar() {
    document.body.appendChild(this.imagen);
    document.write("<p>");
    document.write("<strong>" +this.nombre + "</strong><br />");
    document.write("Caras: " +this.caras + "<br />");
    document.write("Aristas: " +this.aristas + "<br />");
    document.write("Vertices: " +this.vertices + "<br />");
    document.write("</p>");
  }
}

var imagenes = [];
imagenes ["tetraedro"] = "tetraedro.png";
imagenes ["cubo"] = "cubo.png";
imagenes ["octaedro"] = "octaedro.png";
imagenes ["dodecaedro"] = "dodecaedro.png";
imagenes ["icosaedro"] = "icosaedro.png";

var figuras_tridimensionales = [];
figuras_tridimensionales.push(new Poliedro("tetraedro", 4, 6, 4));
figuras_tridimensionales.push(new Poliedro("cubo", 6, 12, 8));
figuras_tridimensionales.push(new Poliedro("octaedro", 8, 12, 6));
figuras_tridimensionales.push(new Poliedro("dodecaedro", 12, 30, 20));
figuras_tridimensionales.push(new Poliedro("icosaedro", 20, 30, 12));

for (var i of figuras_tridimensionales) {
  i.mostrar();
}

jajaja aun no supero lo del pollo agresivo xd

jajaja me encantan las aclaraciones para los puristas del codigo jajaaj

Os comparto mi código:
pakiman.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 7;
        background-color: #7d5fff;
        color: white;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>PAKIMANES ATRAPADOS</h1>
    <h2>Presiona la imagen para que hablen:</h2>

    <script src="pakiman.js"> </script>
    <script type="text/javascript" src="paki.js"></script>
  </body>
</html>

pakiman.js

//Código donde está definida la clase Pakiman

class Pakiman{
  constructor(nombre, vida, ataque, audio){
    this.nombre = nombre;
    this.vida = vida;
    this.ataque = ataque;
    this.image = new Image();
    this.sound = new Audio(audio);
    this.image.src = imagenes[this.nombre];
  }

  hablar(){
    alert(this.nombre);
  }

  mostrar(){
    document.body.appendChild(this.image);
    document.write("<p>");
    document.write("<strong>" + this.nombre + "</strong> <br/>");
    document.write("Vida: " + this.vida + "<br/>");
    document.write("Ataque: " + this.ataque+ "<hr>");
    document.write("</p>");
  }
}

paki.js

//Código de funcionalidad del html


var imagenes = [] ;
imagenes["Cauchin"] = "vaca.png";
imagenes["Pokacho"] = "pollo.png";
imagenes["Tocinauro"] = "cerdo.png";

var audios = {
  cauchin: "sonidoVaca.mp3",
  pokacho: "sonidoRana.mp3",
  tocinauro: "oink.ogg"
}

var coleccion = [];
coleccion.push( new Pakiman("Cauchin", 100, 30, audios.cauchin) );
coleccion.push( new Pakiman("Pokacho", 80, 50, audios.pokacho) );
coleccion.push( new Pakiman("Tocinauro", 120, 40, audios.tocinauro) );


//Itera sobre el objeto o el value
for( const o of coleccion){ //iterador que regresa cada objeto o variable del arreglo directamente
  o.image.addEventListener("click", function(){
    o.sound.play();
  });
  o.mostrar();
}



/*
Itera sobre el índice o key
for( var i in coleccion){ //iterador de todos los elementos regresando el índice
  //coleccion[i].mostrar();
}
*/

Pakiman.png

y yo como estupido buscando en google “que es pakiman?”

Acá dejo algunos datos importantes:

  • Al momento de crear una funcion dentro del bloque de codigo de una clase no se debe especificar la sintaxis “Function”, ya que, se entiende implícitamente que es una funcion

  • El objeto “this” se usa como indicador de una instacia (clases), mientras que en funciones se usa para indicar que esa variable forma parte solo de la funcion.

  • Los arrays o arreglos, son zonas de almacenamiento contiguo que contienen una serie de datos.

  • El objeto “appendChild” agrega un “hijo” al arbol HTML.

Un pequeño cambio en la función “mostrar”
Captura.PNG

mostrar(){
	//document.body.appendChild(this.imagen);
	document.write("<table border=1 bgcolor=cian><td>");//crea tabla de color cian y columna
	document.write("<strong>" + this.nombre + "</strong><br />");//nombre
	document.write("Vida: " + this.vida + "<br />");//vida
	document.write("Ataque: " + this.ataque+"<td>");//ataque
	document.write("<img src="+imagenes[this.nombre]+">");//hace nueva columna para las imgns
	document.write("</td></td></table><br />");//cierra las 2 columnas y la tabla + salto de linea
	}

Para qué sirven los puntos que te da platzi?

literalmente llevo 2 dias literalmente sin poder dormir tratando de digerir todo este contenido. Realmente me esta gustando mucho lo que estoy aprendiendo.

Chicos, este curso es muy util, no se desanimen.

for-in y for-of in 39:23

for-in y for-of.png

Tendré que ver este video por ahi cinco veces minimo para entenderlo

Por que cuando decimos document.write no lo hacemos de manera document.body.write?

Hay alguien más aquí que sienta que si esta clase es básica necesita una clase de programación para dummies?

Freddy: "No se compliquen por ahora"
Yo: “Quiero que en vez de salir solo como elementos uno arriba del otro, los Pakimones sí aparezcan como tarjetitas del Pokedex”
.
Y así fue como me pasé varias horas rompiéndome la cabeza para hacer esto con HTML, CSS y Javascript:
.

.
Básicamente modifiqué algunas propiedades y la función mostrar(); para que en vez de poner los elementos en el body directamente, generase un div, y dentro de este añadiera los datos del Pakimon.
No sé si vayamos a ver esto más adelante en este curso, pero a lo mejor le sirve a alguien. En definitiva a mí me sirvió.
.
Les voy contando qué hice y cuál fue mi razonamiento en los comentarios del código

// Antes que otra cosa:
// Mucho texto :v

var imagenes = [];
imagenes["Cauchin"] = "vaca.webp";
imagenes["Pokacho"] = "pollo.webp";
imagenes["Tocinauro"] = "cerdo.webp";
imagenes["Kiobolobo"] = "lobo.png";

class Pakiman{
  constructor(n, t, v, a){
    this.imagen = new Image();
    this.nombre = n;
    this.tipo = t;
    this.vida = v;
    this.ataque = a;

    /*
    Cada Pakimon va a presentarse dentro de un DIV que será su tarjeta en el
    Pakidex.

    Para ello:
    1. Creamos un DIV en blanco dentro de la propiedad "this.div"
    2. Usando setAttribute le asignamos al DIV la clase html .pakimon, que usaremos
    para definir el estilo de todas las tarjetas en CSS.
    3. Usando setAttribute le asignamos como ID, this.nombre lo cual hará
    que el DIV se llame como el Pakimon, pudiendo así hacer hacer appendChild al
    DIV preciso del Pakimon, en vez de al document o al body en general.
    */

    this.div = document.createElement('div');
    this.div.setAttribute("class", "pakimon");
    this.div.setAttribute("id", this.nombre);

    /*
    Para insertar las propiedades del Pakimon dentro de la tarjeta (el DIV que
    armamos recién arriba) necesitamos usar appendChild, ya que no podemos
    hacer write directamente en el DIV. Peeero, por lo que pude entender
    mientras me golpeaba la cabeza contra el escritorio a la vez que leía cosas
    aun incomprensibles para mí en StackOverflow, no podemos hacer appendChild
    a un STRING, por lo que necesitamos crear un elemento tipo NODE, que por
    lo que entendí, es como se le llama a un elemento de HTML.

    Para ello:
    1. Se usa "createElement" para generar la etiqueta html que va a añadirse
    a la tarjeta  (ya sea "strong" o "P") para mostrar la propiedad del Pakiman.

    Este elemento NODE se genera dentro de la clase Pakiman como una nueva
    propiedad con la nomenclatura "this.[propiedadOriginal]Display"

    2.Al crearla este es un <p></p> vacío (o strong vacío). Su contenido es
    modificado definiendo this.[propiedadOriginal]Display.innerHTML

    innerHTML nos inserta lo que le pongamos, dentro de la etiqueta HTML
    que hayamos elegido en el paso 1. de esta sección.
    */
    this.nombreDisplay = document.createElement('strong');
    this.nombreDisplay.innerHTML = this.nombre;

    this.tipoDisplay = document.createElement('p');
    this.tipoDisplay.innerHTML = "Tipo: " + this.tipo;

    this.vidaDisplay = document.createElement('p');
    this.vidaDisplay.innerHTML = "Vida: " + this.vida;

    this.ataqueDisplay = document.createElement('p');
    this.ataqueDisplay.innerHTML = "Ataque: " + this.ataque;

    /*
    además de definir la src de la imagen, vamos a darle la class .imagenPakimon
    la cual será usada para definir su estilo en CSS
    */
    this.imagen.src = imagenes[this.nombre];
    this.imagen.setAttribute("class", "imagenPakimon");
  }
  hablar(){
    alert("¡" + this.nombre + "!")
  }
  mostrar(){
    //GENERA LA TARJETA DEL PAKIMON DENTRO DEL PAKIDEX

    /*Busca el DIV llamado #pakidex dentro del documento (abajo pongo el html) y le inserta
    el DIV que armamos arriba
    (El que tiene class=.pakimon, y con ID igual al nombre del Pakimon)
    */

    document.getElementById("pakidex").appendChild(this.div);

    /*
    Busca la tarjeta (el elemento cuyo ID es igual al nombre del Pakimon) y, usando
    appendChild, le inserta la imagen y el resto de propiedades del pakimon.
    (usando las propiedades Display que definimos arriba, que son nodos en vez
    de strings)
    */
    document.getElementById(this.nombre).appendChild(this.imagen);
    document.getElementById(this.nombre).appendChild(this.nombreDisplay);
    document.getElementById(this.nombre).appendChild(this.tipoDisplay);
    document.getElementById(this.nombre).appendChild(this.vidaDisplay);
    document.getElementById(this.nombre).appendChild(this.ataqueDisplay);
  }
}

var coleccion = [];
                  //Pakiman( NOMBRE , TIPO, VIDA,  ATAQUE)
coleccion.push( new Pakiman("Cauchin","Tierra",100,30) );
coleccion.push( new Pakiman("Pokacho","Electrico",80,50) );
coleccion.push( new Pakiman("Tocinauro","Normal",120,40) );
/*Gracias al proceso que hicimos, con añadir una linea de código
(+ la linea que nos importa la imagen) podemos añadir una tarjeta de
pakimon nueva a nuestro pokedex.
*/
coleccion.push( new Pakiman("Kiobolobo","Perreo",90,65) );


for(var pakimonDisplay of coleccion){
  pakimonDisplay.mostrar();
}

.
El html solamente contiene:
Dentro del head, los vínculos al CSS y el script de pakimanes.js.
Dentro del body, un <h1> que es el título “Mi pakidex” y el <div> con id=“pakidex”. Este Div es el el Javascript va a buscar para insertarle dentro las tarjetas de cada Pakimon cuando llamamos a la función mostrar();
.

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Pokimanes: Tengo ke atraparlos</title>
    <link rel="stylesheet" type="text/css" href="styles/style_pakimon.css">
    <script src="pakimanes.js" defer></script>
  </head>
  <body>
    <h1>Mi pakidex:</h1>
    <div id="pakidex">
    </div>
  </body>
</html>

.
El CSS define colores, tamaños, sombras y esas cosas.
.

body{
  display: block;
  background-color: #21252b;
  color: #FFFFFF;
  height: auto;
  width: auto;
  vertical-align: middle;
  text-align: center;
}

#pakidex{
  width: 50%;
  margin:0 25% 0 25%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px 20px 20px 20px;
  min-width: 150px;
  background-color: #2a2c36;
  box-shadow: 0px 1px 11px #21252b;
  box-shadow: 0px 2px 8px #21252b;
  border-radius: 15px
}

.pakimon{
  flex-grow:1;
  min-width: 170px;
  max-width: 250px;
  display: inline-block;
  margin: 10px 5px 10px 5px;
  padding: 5px;
  text-align: center;
  box-shadow: 0px 6px 15px #21252b;
  box-shadow: 0px 2px 7px #21252b;
  background-color: #f7fff9;
  color: #21252b;
  border-radius: 15px;
}

/*Para que la imagen se muestre sobre el nombre del Pakimon en vez de al lado*/
.imagenPakimon{
  margin: auto;
  display: block;
}

.
No sé tanto de CSS así que estuve jugando un poco, y encontré una guía online de flexbox bastante buena y muy visual en google (Si buscas “flexbox guide” es lo primero que sale) que fue lo que usé para que las tarjetas hicieran esto cuando la pantalla está muy chiquita:
.

.

.
(Esto es indispensable, ya que, como todos sabemos, la Pantalla del Pakidex es muy chiquita: Ash Mustard no puede ir por la vida cargando una pantalla de computadora normal)

Y pues básicamente fue eso en lo que he estado desde que salí del trabajo hasta ahora que termino de escribir esto a las 2am.
Sí se puede, mis panas, nunca dejen de aprender.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
   <title>El caza pakimanes</title>
  <link rel="shortcut icon" href="imagenes/pokepelota.ico">
  
  
</head>
<body>
    <h1>PAKIDEX</h1>
    <p>Lo que he encontrado</p>
    <script src="javascript/clase_pakiman.js"></script>
    <script src="javascript/pakiscript.js"></script>
    
</body>
</html>

CLASE

class Pakiman
{
    constructor(nombre, vida, ataque, tipo)
    {
        this.imagen =new Image();
        this.name = nombre;
        this.tipo = tipo;
        this.vida = vida;
        this.ataque = ataque;
		this.imagen.src=imag[this.name];
    }
    hablar()
    {
        alert(this.name + " esta vivo");
    }
    mostrar()
    {
        document.body.appendChild(this.imagen);
		    document.write("<p>");
		    document.write("<br /><strong>" + this.name + "</strong><br />");
        document.write("Tipo: " + this.tipo + " <br />");
        document.write("Vida: " + this.vida + " <br />");
		    document.write("Ataque: " + this.ataque + " <hr />");
		    document.write("</p>");
    }
}

PAKISCRIPT

var imag = [];
imag["cauchin"]="imagenes/vaca.png";
imag["pocacho"]="imagenes/pollo.png";
imag["tocinauro"]="imagenes/cerdo.png";

var coleccion =[];
// ---metodo de llenado de arrays con objetos, primero instanciando fuera del array----
/* var cauchin = new Pakiman("cauchin", 100, 30, "tierra");
var pocacho =new Pakiman("pocacho", 80, 50, "tierra-aire");
var tocinauro =new Pakiman("tocinauro", 120, 40, "tierra-agua"); */

/* coleccion.push(cauchin);
coleccion.push(pocacho);
coleccion.push(tocinauro); */

// ---metodo de llenado de arrays con objetos, instanciando directamente en la ultima posicion del array---
coleccion.push(new Pakiman("cauchin", 100, 30, "tierra"));
coleccion.push(new Pakiman("pocacho", 80, 50, "tierra-aire"));
coleccion.push(new Pakiman("tocinauro", 120, 40, "tierra-agua"));

// ---listado para mostrar el indice---
for(var integrantes in coleccion)
{
    console.log(integrantes + "A"); // ---listado para mostrar el indice---
    
}

for(var integrantes in imag)
{
    console.log(integrantes + "B"); // ---listado para mostrar el indice---
    
}

for(var integrantes in coleccion[2])
{
    console.log(integrantes); // ---listado para mostrar el indice---
    
}

//---listado para mostrar el objeto---
for(var integrantes of coleccion)
{
    integrantes.mostrar(); //---listado para mostrar el objeto---
}

Se me explotó el cerebro xD

Dejame te acaricio el pokacho :3 :'v

Cómo método de conquista le hice un Pakiman a mi novia y a mí. Lastimosamente ella es más fuerte que yo, es cool jugar con el código de esta forma.

freddy te amo ❤️

La clase Pakiman con algunos comentarios

class Pakiman {
  //Definicion de un objeto
  constructor(n, v ,a )
  {
    //this es el indicador de la instancia de la clase
    //this tambien refiere a las variables dentro de la clase
    this.imagen = new Image();
    this.nombre = n;
    this.vida = v;
    this.ataque = a;

    //obtiene el valor del nombre que es igual a el valor del array asociativo en imagenes
    //en ese array estan las direcciones de las imagenes y con src las asigno como su valor a la imagen
    this.imagen.src = imagenes[this.nombre];
  }
  hablar(){
    alert(this.nombre);
  }
  mostrar()
  {
    //agrega un hijo al árbol q empieza con document q contiene el body q va a contener la imagen
    document.body.appendChild(this.imagen);
    //agrego elementos html
    document.write("<p>");
    document.write("<strong>" + this.nombre + "</strong><br>");
    document.write("Vida" + this.vida + "<br>");
    document.write("Ataque" + this.ataque);
    document.write("<hr></p>");
  }
}```
desafio.png

El dominio tocinauro.com esta disponible por si alguien está interesado en montar un restaurante u otra cosa. 😄

Me inspira ver este tipo de clases, la imaginaron explota inventando un mundo. Intente romper código para agregar otras cosas, pero aun no me salen. Espero seguir aprendiendo

cats.jpg

Mi actividad de esta clase
PAKIMAN.png

![](Screenshot_4.png

Viendo algunos comentarios, donde dice que no entiende. no es fácil para el que esta comenzando entender con rapidez, todo lo hace la practica, y me encanto esta parte de curso porque me motiva mas, a buscar y aprender mas.
También le recomiendo que imprima los cogidos. o lo escriba y escriba que hace cada cosa. así entenderá y se lo aseguro que se van a enamorar mas de la programación.

conecta el cargador que estas sin bateria @freddier

Me costo entenderlo al principio, recomiendo dividirlo por segmentos, osea entender cosita por cosita una vez finalizado, volver a ver el vídeo e intentar entenderlo integrado. Ya que esta muy concentrado este vídeo y es muy difícil comprender.

Mi código agregando un pokemón real 😄

var imagenes = [];
imagenes["Cauchin"] = "vaca.png";
imagenes["Pokacho"] = "pollo.png";
imagenes["Tocinauro"] = "cerdo.png";
imagenes["Latios"] = "latios.png";

class Pakiman {
  constructor(n, v, a)
  {
    this.imagen = new Image();
    this.nombre = n;
    this.vida = v;
    this.ataque = a;
    
    this.imagen.src = imagenes[this.nombre]; 
  }
  hablar() {
    alert(this.nombre + "!!");
  }
  mostrar() {
    document.body.appendChild(this.imagen);
    document.write("<p>");
    document.body.appendChild(this.imagen);
    document.write("Nombre: <strong>" + this.nombre + "</strong><br />");
    document.write("Vida: " + this.vida + "<br />");
    document.write("Ataque: " + this.ataque + "<hr />");
    document.write("</p>");
  }
}

var coleccion = [];

coleccion.push(new Pakiman("Cauchin", 100, 30))
coleccion.push(new Pakiman("Pokacho", 80, 50))
coleccion.push(new Pakiman("Tocinauro", 120, 40))
coleccion.push(new Pakiman("Latios", 160, 60))

for(var pakin of coleccion) {
  pakin.mostrar();
}
paki1.jpg
paki2.jpg

wow espectacular esta clase. Confieso que al principio no entendía es NA´ y regresaba una y varias veces hasta que logre entenderlo (recuerda que si es necesario repítelo una y mil veces hasta que lo entiendas). SUERTE Y MUCHAS GANAS

Pumm tengo un pollo, tengo un pollo

Nota: en las clases no es necesario poner el enunciado “funtcion” ya que se interpreta que un bloque de códigos es una funcion.

Yo ya me hice un lio, ya no se la diferencia entre un array, una clase y un objeto…

Me exploto la cabeza cuando vi que se podía nombrar las posiciones del array con string. 😮

Es decir que un Array asociativo funciona practicamente igual a JSON… Es decir que con la clave puedo obtener el valor, asi sea un Array o un objeto JSON… de la forma “variable.nombre” donde variable puede ser el nombre del Array o del objeto JSON y el nombre puede ser un String usado como índice o la clave del objeto JSON… ¿Es así, cierto?

Cuando conviene usar JSON particularmente?

PARA LOS QUE NO ENTIENDEN MUY BIEN LO DE:
FOR(var fredito of coleccion) AQUI LES DEJO UN EJEMPLO MAS SENCILLO.

var imagenes = [];
imagenes["Cauchin"] ="img/vaca.png";
imagenes["Pokacho"] ="img/pollo.png";
imagenes["Tocinauro"] ="img/cerdo.png";

var coleccion = [];
coleccion.push(new Pakiman("Cauchin",100,30));
coleccion.push(new Pakiman("Pokacho",80,50));
coleccion.push(new Pakiman("Tocinauro",120,40));

// for (var pakin of coleccion)
// {
// 	pakin.mostrar();
// }

for (var i = 0; i < coleccion.length; i++) {
	
	coleccion[i].mostrar();
}


Introducción al mundo de la programación orientada a objetos
constructores: son funciones que se encuentran en nuestras clases, y son las funciones que se disparan en el momento que creemos un objeto.
this: es un indicador de la clase. Se utiliza en las variables dentro de la clase.
dentro de una clase no es necesario escribir function para crear una funcion por que se sobreentienda que es un bloque te codigo.

Excelente expliacion de Clases y Arrays, toda mi carrera nunca tuve una clase de esta manera.

Por favor, que alguien haga una versión (no copyright) pixel art de nuestro pakimanes favoritos, y el entrenador Freddy! xD, si nadie se dispone los hare yo xD

Necesito aprender esto. me parece muy interesante

por fin pude entender objetos y clases.

muchas gracias Platzi

Log de los Pokemones como objetos y de sus propiedades (solo les cambié los nombres y las imágenes del mismo tamaño, espero les sirva 😃 ) :

for(var objeto of coleccion) { //log de los pokemones y sus propiedades
  console.log(objeto);
  for(var propiedad in objeto) {

    console.log(objeto[propiedad]);
  }
Screenshot_2.png

pikachu.png
charmander.png
mew.png