No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Clases y Arrays en JavaScript

21/37
Recursos

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

Aportes 1207

Preguntas 198

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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.

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

ahi esta la primera estrofa…

✨ 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.


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;
}
};

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

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

Lobolbasaur:

Vacuartle:

Pollormander:

Y…

Cerdachu:

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. 

    

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 ^^

  • 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.

copyright violada!!! xD 21:40

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.


Al seleccionar un pakiman:

Código:
HTML:

Clase pakiman JS:

Pakiman app JS:

CSS:

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;
>

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

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”.

<!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();
}

like por pokachonononnononon :v

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();

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!

/* 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);
}```

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.

Les dejo mi trabajo

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




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

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

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

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

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!

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

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

Mi cabeza explotó en esta clase!! :p

Aquí está, le agregué un menú que me lleve a mi galería.

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

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

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;
  }

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…

A ver el video por segunda vez

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

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

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;
}


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

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

Yo leyendo los comentarios:
yo: por que la gente no entiende el curso?
mi subconsciente: al parecer a partir de aquí las cosas se ponen feas! xD

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.

for-in y for-of in 39:23

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.

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();
}
*/

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 💚

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();
}

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

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. 😄

En definitiva no hay mejor compañero para tomar esta clase

Observo muchos comentarios negativos. Sé que al principio todo parece confuso, pero ey ¡Si les gusta, no se rindan! Se los dice una Contadora que no tenia ni idea de la programación.

Hola compañeros! Les comparto mi trabajo con algunas modificaciones jeje. Juego con eso para tratar de entenderlo mejor.

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

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

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?

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.

![](

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

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

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.

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---
}

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

Mi actividad de esta clase

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

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 😄

jajaja aun no supero lo del pollo agresivo xd

jajaja me encantan las aclaraciones para los puristas del codigo jajaaj

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

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
	}

Yo 🐢
Freddy: 🐇

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

Solo quería compartir mi felicidad, me siento más apto cad di

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

ya había visto videos tratando de explicar que es el famosísimo “objeto” en la programación orientada a objetos…
Este video de una manera diferente y a mi parecer clara.

Lo que al final quiero decir es que: si no entiendes la explicación, no te desanimes o te apresures a pensar que este o cualquier video de programación es confuso; en ves de eso, mira otros videos, lee otros artículos, practica otros ejercicios y vas a ver como este o cualquier otro concepto se va aclarando en tu mente.

Nos vemos en un futuro proyecto… =)

Comprendo a las personas que dicen que esta clase es confuso o que no están comprendiendo, porque me pasó lo mismo. No lo entendí a la primera pero trate de hacerlo a mi manera, volví a repetir el vídeo y ahora me queda más claro. Los ánimo a que lo hagan a su modo y sobre todo no se den por vencidos!

Para qué sirven los puntos que te da platzi?

¡ Clases y Arrays en JavaScript !
Las clases son “funciones especiales”, la sintaxis de una clase tiene dos componentes: expresiones de clases y declaraciones de clases.
Una expresión de clase es otra manera de definir una clase.
Las expresiones de clase pueden ser nombradas o anónimas.
El nombre dado a la expresión de clase nombrada es local y se ubican dentro del cuerpo de la misma.
Una manera de definir una clase es mediante una declaración de clase. Para declarar una clase, utilizamos la palabra reservada class y un nombre para la clase, ej: “Pakiman”.

Los arrays (Array o matrices) son objetos de tipo lista cuyo prototipo tiene métodos para realizar operaciones de recorrido y mutación. pero ni la longitud o los tipos de los elementos del array son fijos. La longitud de un array puede cambiar en cualquier momento, y los datos pueden almacenarse en ubicaciones, no se garantiza que los arrays en JavaScript sean densos, esto depende de cómo el programador quiera usarlos.

Desde aquí empieza lo interesante, porque la clase esta muy densa, y empiezas a apoyarte en otros recursos. OOP es algo complejo de entender, hablé con alguien que trabaja en esto y me dijo que no me preocupara tanto, por que él demoró alrededor de 3 meses en entenderlo.

les recomiendo este link, que te da una buena introducción al OOP.

Por fin entendí que significa y como utilizar correctamente el this y crear una clase.

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

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

for (var pakimCapt of colPakimanes)
{
    pakimCapt.mostrar();
}```

Pregunta compañeros, solo ven estas clases o aparte leen algunos libros??, si lo hacen me gustaría que me compartieran sus libros para aprender y comprender mejor…

Clase: La clase es la definición de un objeto.
class Pakiman
{

} = Creación de una clase llamada Pkiman.

class Pakiman
{
constructor()
{
alert(“mensaje flotante”);
}
} = Dentro de las clases existen unas funciones que se disparan en el momento en el que se hace una nueva imagen, esta imagen que se dispara cuando se crea un objeto se llama constructores, estas se crean con “constructor” esto es como escribir “function” pero no tiene nombre y esta funciona igual que una función

var cauchin = new Pakiman(); = cauchin Es una instancia de la clase Pakiman

class Pakiman
{
constructor()
{
this.tipo = “tierra”;
}
} = Para agregar una variable dentro de las clases se tiene que agregar dentro del constructor, this es un indicador de la instancia de donde estoy es decir una instancia de la clase, pero también si solo se tiene una función que no fuera una clase this se referiría a todas las variables que fueron creadas dentro del bloque de código dentro de las {}, en una función las variables creadas dentro de las llaves solo viven dentro de esas llaves y viven mientras a función viva, fuera de la función es imposible acceder a esas variables, el this es eso y funciona por ejemplo cuando una variable dentro de la función se llama igual a una variable por fuera de la función, la que esta por fuera no se le coloca this y la que esta por dentro si.

class Pakiman
{
constructor(n)
{
this.nombre = n;
this.tipo = “tierra”;
}
}

var cauchin = new Pakiman(“Cauchin”); = this se refiera a las variables dentro de la clase, mientras que las variables que no son parte de la clase que pueden venir por parámetro o por fuera como una variable global la cual la pueda ver todo el código tiene otro nombre y no se le coloca this, this se vuelve un indicador de la instancia de la clase en este caso de cauchin.

class Pakiman
{
constructor(n, v, a)
{
this.nombre = n;
this.vida = v;
this.ataque = a;
}
}

var cauchin = new Pakiman(“Cauchin”, 100, 30); = Se le agregan distintos atributos a los Pakimanes como el nombre, vida y ataque.

console.log(cauchin, pokacho, tocinauro); =Para imprimir múltiples cosas en la consola solo se separan por comas, esto nos ahorra lineas de codigo.

class Pakiman
{
constructor(n, v, a)
{
this.nombre = n;
this.vida = v;
this.ataque = a;
}
hablar()
{
alert(this.nombre);
}
} = Para crear funciones dentro de las clases no se tiene que escribir function porque se entiende manera implícita que todo bloque de código dentro de una clase es una función y solo se elige el nombre en este caso hablar.

pokacho.hablar(); = Así funcionan las funciones dentro de una clase, se invoco la función hablar que estaba dentro de una clase.

var imagenes = [];
imagenes[“Cauchin”] = “vaca.png”;
imagenes[“Pokacho”] = “pollo.png”;
imagenes[“Tocinauro”] = “cerdo.png”; = Un array es como si una variable tuviera cajitas, para crear un array vació se abren llaves cuadradas [], los array funcionan indexados a 0, 1, 2, …, cajitas [0] = “Hola”; para agregar letras o números en las cajitas de los arrays, para consultar lo que esta dentro del array se consulta por números del 0, 1, …, cajitas [2]; para consultar la cajita, cajita 0 = 1, 1 = 2, …, tambien se les puede empujar un nuevo dato con cajitas.push(“ultimo”), esto agrega lo que esta dentro de los paracentesis al ultimo valor del array, se pude hacer que en los arrays en ves de que las posiciones sean números estas sean texto cajitas[“nombre”] = “Platzi”; esto agrego la palabra Platzi en sub nombre lo que esta dentro de las llaves cuadradas se le llama sub.
En JS un array asociativo es cuando la posición de la cajita no es un numero sino un string.

Se puede limpiar la consola con ctrl + l

mostrar()
{
document.body.appendChild(this.imagen);
} = Para agregar un elemento imagen al documento es por medio de la función appendChild el cual agrega un nuevo hijo al árbol html en la etiqueta body en este caso una imagen.

La opción Elements en la consola muestra como esta el html incluso después de que el JS lo ha manipulado con la opción del ratón se coloreara las opciones conforme vallamos navegando en el html.

<hr /> = La etiqueta hr agrega una raya entre lo que esta debajo y lo que esta arribo en el html, hace un salto de linea con una ralla.

Para hacer mas profesional el código se puede aislar la clase Pakiman en un archivo JS aparte.

<script src=“pakiman.js”></script>
<script src=“paki.js”></script> = Y en el html antes de llamar el script primario se manda a llamar el script con la clase que se corto del .js primario, esto funciona porque html al final se va a traer todos los archivos y no importa de donde los sustraiga porque se van al final se van a juntar y tambien porque las clases al igual que las funciones JS los carga primero en la memoria RAM y después ejecuta lo demás linea por linea.

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 freddito in coleccion)
{
console.log(coleccion[freddito]);
} = Para cada freddito dentro del array (colección), es un ciclo especial que recorre la cantidad de veces que un objeto existe, con el in pone en la variable freddito lo que resulte del ciclo for y es una buena practica declarar la variable.

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 freddito of coleccion)
{
freddito.sostrar();
} = En la nueva version de JS que se llama emnascript 2015, en esa versión de JS existe un cambio en el ciclo for que hace el ciclo mas sencillo, el cambio es cambiar in por of esto muestra directamente la instancia en vez del indice, van a ver casaos en donde se necesite usar el indice y en esos casos se va a utilizar in y en los casos donde funciona el objeto se usa of.
in itera en el indice.
of en ocaciones funciona e itera en el objeto.

¿Soy el único que no supera los nombres de los Pakimanes?😆 Mencanta que Pakiman no infrinja los derechos de autor de nadie , deberían registrarlo 😏

Código de un mini juego (inutil) en el cual podemos seleccionar al animal y moverlo por la pantalla. Las imagenes con ‘r’ al principio son solo los mismos .png volteados.

var d = document.getElementById('papel');
var papel = d.getContext('2d');

var teclas = {
    left: 37,
    up: 38,
    right: 39,
    down: 40
};

var imagenes = {
    fondo: 'fondo.png',
    pollo: 'pollo.png',
    cerdo: 'cerdo.png',
    vaca: 'vaca.png',
    rpollo: 'rpollo.png',
    rcerdo: 'rcerdo.png',
    rvaca: 'rvaca.png'
};

class Animal{
    constructor(nombre, vida, ataque){
        this.imagen = new Image();
        this.nombre = nombre;
        this.imagen.src = imagenes[this.nombre];
        this.vida = vida;
        this.ataque = ataque;
        this.cargaOk = false;
        this.selected = false;
        this.sentido = false;
        this.x = aleatorio(0, 5)*60;
        this.y = aleatorio(0, 5)*60;
    }

}

var animales = [];
animales.push(new Animal('fondo', 0, 0));
animales.push(new Animal('vaca', 50, 50));
animales.push(new Animal('cerdo', 25, 75));
animales.push(new Animal('pollo', 75, 25));

animales[1].selected = true;

function dibujar(){
    for(var i in animales){
        if(animales[i].cargaOk){
            if(i==0) papel.drawImage(animales[i].imagen, 0, 0);
            else papel.drawImage(animales[i].imagen, animales[i].x, animales[i].y);
        }
    }
}

function cargar(){
    for(var i in animales){
        if(animales[i].imagen.src.localeCompare(event.path[0].src)==0){
            animales[i].cargaOk = true;
        }
    }
    dibujar();
}

function seleccionar(){
    console.log(event);
}

for(var i in animales){
    animales[i].imagen.addEventListener('load', cargar);
}

function mover(){
    for(var i in animales){
        if(animales[i].selected){
            switch(event.keyCode){
                case teclas.left:
                    if(!animales[i].sentido) animales[i].sentido=true;
                    animales[i].x -= 10;
                    break;
                case teclas.up:
                    animales[i].y -= 10;
                    break;
                case teclas.right:
                    if(animales[i].sentido) animales[i].sentido=false;
                    animales[i].x += 10;
                    break;
                case teclas.down:
                    animales[i].y += 10;
                    break;
            }
            if(animales[i].x<0) animales[i].x=420;
            if(animales[i].x>420) animales[i].x=0;
            if(animales[i].y<0) animales[i].y=420;
            if(animales[i].y>420) animales[i].y=0;
            if(!animales[i].sentido) animales[i].imagen.src = imagenes['r' + animales[i].nombre];
            else animales[i].imagen.src = imagenes[animales[i].nombre];
            dibujar();
        }
    }
}

function mostrar(){
    for(var i in animales){
        if(i!=0){
            if(event.clientX>=animales[i].x && event.clientX<=animales[i].x+80
                && event.clientY>=animales[i].y && event.clientY<=animales[i].y+80){
                for(var j in animales){
                    if(j!=i) animales[j].selected = false;
                    else animales[j].selected = true;
                }
            }
        }
    }
}

document.addEventListener('keydown', mover);
document.addEventListener('click', mostrar);

Paso la versión mejorada del proyecto:


var rutaImagenes = 
{
    Pikachu: "pollo.png",
    Bolbasor: "cerdo.png",
    Charmander: "vaca.png"
}

var Pikachu = new Pakiman("Pikachu", "Electrico", 10, 10);
var Bolbasor = new Pakiman("Bolbasor", "Planta", 10, 5);
var Charmander = new Pakiman("Charmander", "Fuego", 5, 20);

Pikachu.mostrar();
Bolbasor.mostrar();
Charmander.mostrar();

Aquí adjunto el archivo donde defino la clase:


class Pakiman
{
    constructor(Nombre, Tipo, Vida, Ataque)
    {
        this.nombre = Nombre;
        this.tipo = Tipo;
        this.vida = Vida;
        this.ataque = Ataque;

        this.imagen = new Image();
        this.imagen.src = rutaImagenes[this.nombre];

        console.log(this.imagen.src);
    }

    mostrar()
    {
        document.body.appendChild(this.imagen);
        document.write("<br/>");
        document.write("-Nombre: " + this.nombre + "<br/>");
        document.write("-Tipo: " + this.tipo + "<br/>");
        document.write("-Vida: " + this.vida + "<br/>");
        document.write("-Ataque: " + this.ataque + "<br/> <hr/>");
    }
    
    /*

    Como "document.write" escribe sobre un documento HTML, debemos
    pasarle tambien codigo HTML. Por eso se utilizan las siguientes
    etiquetas:

    -   <br/> -> Salto de linea en HTML.
    -   <hr/> -> Linea horizontal.

    */
}

Notas de clase:

  • Dentro de las clases se disparan funciones, tambien llamadas constructores

  • Para agregar variables en la clase se agregan dentro del constructor

  • THIS es un indicador de la instancia en donde estoy.

  • Se sobre entinde que todo bloque de codigo dentro de una clase es una funcion, constructor es una funcion. Podemos crear mas funciones entro de la clase con el nombre que queramos.

  • Cuando secrea un array asociativo en JS console.log no muesra los datos, pero si estan alli

  • Un array asociativo en JS es un objeto

[email protected] disculpen mi ignorancia pero se me esta dificultando mucho debo entregar como proyecto final una pagina web y la verdad no soy muy buena en esto alguien que me pueda ayudar por favor 😃

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]);
  }



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.