Inicializando el juego

Clase 45 de 51 • Fundamentos de JavaScript 2017

Resumen

Con el teclado virtual que hicimos capturaremos el evento keydown llamada a través de la función document.addEventListener(‘keydown’)

Cada tecla de nuestro teclado físico tiene un código asignado, con la función anterior obtendremos el keyCode de cada tecla para después asociarlo a nuestro teclado virtual con la propiedad data-key de la etiqueta div.

La función docment.querySelector(’[data-key]="${keyCode}"’) nos devolverá las etiquetas que poseen la propiedad data-key. Por lo tanto crearemos una función propia llamada getElementByKeycode que reciba el keycode asignado para que filtre y nos devuelva la etiqueta que tenga la propiedad data-key con ese keycode.

A continuación haremos una función que trabajará sobre los estilos css y mostrará activa, presionada o fallada la tecla presionada de nuestro teclado virtual.

Y podemos llamarla así:

activate(65);
activate(65, { success: true});
activate(65, { fail: true});

Con esto la tecla presionada adoptará el estilo css especificado.

Para añadir un toque genial a nuestro teclado pondremos un Time Out para desactivar la tecla y regresarla a su estilo inicial, esto nos dará un efecto de keyDown y keyUp.

Por último haremos dos funciones más que se enfocarán en la lógica de nuestro juego. Nos ayuden a definir aleatoriamente las teclas que el usuario debe presionar tras saber su nivel recuerda que esto debe suceder cada vez que se inicie un nuevo juego.

Luis Felipe Silgado Cortázar

student•

copia y pega

      <div class="row">
        <div class="key" data-key= "81">q</div>
        <div class="key" data-key= "87">w</div>
        <div class="key" data-key= "69">e</div>
        <div class="key" data-key= "82">r</div>
        <div class="key" data-key= "84">t</div>
        <div class="key" data-key= "89">y</div>
        <div class="key" data-key= "85">u</div>
        <div class="key" data-key= "73">i</div>
        <div class="key" data-key= "79">o</div>
        <div class="key" data-key= "80">p</div>
      </div>
      <div class="row">
        <div class="key" data-key= "65">a</div>
        <div class="key" data-key= "83">s</div>
        <div class="key" data-key= "68">d</div>
        <div class="key" data-key= "70">f</div>
        <div class="key" data-key= "71">g</div>
        <div class="key" data-key= "72">h</div>
        <div class="key" data-key= "74">j</div>
        <div class="key" data-key= "75">k</div>
        <div class="key" data-key= "76">l</div>
      </div>
      <div class="row last">
        <div class="key" data-key= "90">z</div>
        <div class="key" data-key= "88">x</div>
        <div class="key" data-key= "67">c</div>
        <div class="key" data-key= "86">v</div>
        <div class="key" data-key= "66">b</div>
        <div class="key" data-key= "78">n</div>
        <div class="key" data-key= "77">m</div>
      </div>

Esteban Saravia

student•

Div y class estaban juntos. ahi van separados

<div class="row">
            <div class="key" data-key="81">q</div>
            <div class="key" data-key="87">w</div>
            <div class="key" data-key="69">e</div>
            <div class="key" data-key="82">r</div>
            <div class="key" data-key="84">t</div>
            <div class="key" data-key="89">y</div>
            <div class="key" data-key="85">u</div>
            <div class="key" data-key="73">i</div>
            <div class="key" data-key="79">o</div>
            <div class="key" data-key="80">p</div>
        </div>
        <div class="row">
            <div class="key" data-key="65">a</div>
            <div class="key" data-key="83">s</div>
            <div class="key" data-key="68">d</div>
            <div class="key" data-key="70">f</div>
            <div class="key" data-key="71">g</div>
            <div class="key" data-key="72">h</div>
            <div class="key" data-key="74">j</div>
            <div class="key" data-key="75">k</div>
            <div class="key" data-key="76">l</div>
        </div>
        <div class="row last">
            <div class="key" data-key="90">z</div>
            <div class="key" data-key="88">x</div>
            <div class="key" data-key="67">c</div>
            <div class="key" data-key="86">v</div>
            <div class="key" data-key="66">b</div>
            <div class="key" data-key="78">n</div>
            <div class="key" data-key="77">m</div>
        </div>

Juan Reyes

student•

Maquina!

Miguel Sosa

student•

En lugar de

setTimeout(() => deactivate(el), 500)

Se puede utilizar bind, que devuelve una función

setTimeout(deactivate.bind(null, el), 500)

El primer atributo es el scope de la función, como no lo queremos cambiar, lo pasamos por null, el segundo son los atributos que recibe la función original.

Luis Felipe Silgado Cortázar

student•

Me gusta su pensar buen hombre, las comprobaciones parecen ser correctas.

Nestor Beltran

student•

Excelente muy bueno, pero alguien podría explicarme porque funciona ?

setTimeout(desactivate.bind(null, el), 500)

se que el bind le esta seteando el elemento a la función desactivate(), pero porque la ejecuta ? que no para ejecutarla deberíamos de usar call o apply en lugar del bind ?

Alberto Hernández López

student•

Realmente lo que hacemos al colocar

Math.round(Math.random() * (90 - 65) + 65);

Estamos mapeando las variables

Roberto Prince

student•

Un pequeño bug del codigo, debes de sumar 1 antes de multiplicar para que max se inclusivo, eso ya lo habia explicado Sacha en este curso

function  random(min, max){
  return Math.floor( Math.random() * (max - min  + 1) ) + min 
}

Platzi Team

student•

no hace falta Roberto, acabo de probar

Alex Guaman

student•

Quieres decir que si no le sumo 1, nunca obtendrá el valor máximo de 90?

Ignacio Esteban Aredez Diaz

student•

Teniendo buenas ideas y sabiendo como uo puede crear cosas muy visuales y de calidad WOW gracias Sacha

Carlos Sampol

Team Platzi•

Así es!
Teniendo las ganas de aprender y buenas ideas las posibilidades son infinitas.

Alberto Lasa Saracíbar

student•

PARA OBTENER LOS CÓDIGOS DE TECLADO

Ignacio Briones

student•

Gracias Sachita! un grande 😃

Jacob Samuel G

student•

Esta pagina nos indica los datos del keyboard. Solo escriban la letra.

Daniel Hidalgo

student•

Ayuda…
No entendí exactamente esta parte del código… porq está vacío y en que momento obtiene un resultado, y qué resultado obtiene?

opts = {}```

Diego Forero

Team Platzi•

Este es un parámetro de la función, que tiene un valor por defecto, si no llega ese parámetro entonces queda como el diccionario vació.

Teofilo Rosales Gama

student•

descripcion grafica de este video:

Steven Giraldo

student•

Excelente cómo Sacha en una línea generar un Array con programación funcional

José Ignacio Miranda

student•

function deactivate(){
    this.className = 'key'
}

setTimeout(deactivate.bind(el),500)

Kennedy ${{7*7}} Sanchez ${7*7}

student•

Excelente Sesion 😃

Carlos Raez

student•

no me va el activate no entiendo pq

  //vamos a hacer un funcion para obtener cualquiera de los elementos para obtener cualquiera del datakey
    function obtenerCodigo(keyCode)
      { //si quisieramos todos los elementos de la clase key podriamos poner .key como si fuera un selector css
        return document.querySelector(`[data-key="${keyCode}"]`)//querySelector sirve para obetener un elemento sobre cierto atributo
      }                    //[data-key]entre corchetes para indicar que es un atributo

    function activate(keyCode , opts = {}) {
    const element = obtenerCodigo(keyCode) //a este elemento le vamos a instertar una clase
    element.classList.add('activate')
        if (opts == true)
         {
           element.classList.add('success')
         }
        else
        {
          element.classList.add('fail')
        }
    }```

David Toca

student•

veo que estas haciendo la comparacion de

if(opts == true)

pero opts es un objeto, así que la comparacion siempre dara falso, lo que deberias hacer es

if(opts.success)

Carlos Raez

student•

si pero donde esta definido ese objeto??? eso es lo que no comprendo

Gerald Jóse Cerda Olivas

student•

la funcion generarTeclaAleatoria me genera decimales asi que guarde el numero aleatorio y los quite con

let x= Math.round=Math.random() * (max - min +1) + min
        return Math.trunc(x)```

espero a alguien le sirva

Kenny Martinez

student•

Para generar los div presionando las teclas en el explorador:

document.addEventListener("keydown", function(ev) {
    console.log(`<div class="key" data-key="${ev.keyCode}">${ev.key}</div>`);
   })

José Tuzinkievicz

student•

Ahora me gusta mas este juego que el God of War 😄

Ivan Santiago

student•

q: 81
w: 87
e: 69
r: 82
t: 84
y: 89
u: 85
i: 73
o: 79
p: 80
a: 65
s: 83
d: 68
f: 70
g: 71
h: 72
j: 74
k: 75
l: 76
z: 90
x: 88
c: 67
v: 86
b: 66
n: 78
m: 77

Inicializando el juego

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial