Mejoras constantes y eficientes

Las actualizaciones de Linux se realizan por colaboradores de todo el mundo. Con este tipo de soporte, los bugs se documentan y se resuelven rápidamente. Además, ya que los desarrolladores también son usuarios, tienen la motivación adecuada para asegurarse que las actualizaciones satisfacen las necesidades de los usuarios y que estén diseñadas para funcionar de forma óptima.

Menor riesgo

El programa es tan bueno como su soporte. Imagínate que una parte del programa es creado por la compañía XYZ y que después la misma quiebra u otra compañía la compra y decide dejar de brindar soporte. El programa no tendría más mejoras ni arreglos y, por lo tanto, su utilidad se perdería con el tiempo. Ninguna entidad o compañía es dueña de Linux por lo que esto nunca ocurriría. Cualquiera puede contribuir con Linux. Perder soporte es poco probable debido a su inmensa popularidad y uso.

Es ligero

Los requisitos de Linux para correr en un sistema son mucho más bajos que los requisitos de Windows o Mac. Con la distribución adecuada de Linux, un usuario puede tener una computadora modesta y Linux le brindará el valor del sistema. El espacio del disco y la memoria utilizada también pueden ser bajos. Algunas distribuciones son adecuadas las CPU que se remontan a la familia pentium, otras tienen un requisito de tan solo 128 MB de memoria RAM y más o menos la misma cantidad para el espacio del disco.

Altamente documentado tanto para usuarios principiantes como para avanzados

Linux tiene una comunidad activa compuesta por desarrolladores que están dispuestos a compartir su conocimiento (¡Como FreeCodeCamp!). Hay utilidades de líneas de comando incorporadas en Linux que brindan documentación en los comandos, librerías, estándares, entre otros (Páginas de man e info) y hay documentaciones disponibles en línea en una variedad de formatos entre los que se incluye el Proyecto de documentación de Linux, LinuxQuestions, ServerFault y The Arch Wiki.

Además de la documentación, hay muchas comunidades de ayuda y de bienvenida para que los nuevos usuarios pregunten tales como Ask Ubuntu y Reddit’s r/linuxquestions.

Hay certificaciones que pueden realizarse a un ritmo propio y que son reconocidas en la industria de TI (CompTIA’s Linux+ y LPI’s LPIC tests). Aunque no sea un requisito, al aprender C, el usuario podrá revisar el código de Linux para ver qué está ejecutando.

Soporte empresarial

El mundo depende del soporte de Linux a los sistemas críticos por lo que la demanda no desaparecerá. Es importante no solo para aquellos que contribuyen con Linux sino que también para aquellos que lo apoyan (¡Trabajos!). El soporte de Linux es cada vez más crítico en TI y también tener conocimiento como desarrollador hará que estén más capacitados y sean más útiles (es decir Full stack developers).

Interoperabilidad con otros sistemas operativos

Linux tiene soporte de controladores para los sistemas de archivos NTFS y HFS+ (utilizados en Windows y Mac) y también Samba para el soporte de servicio de archivos/impresión en Windows.

Mejor soporte para hardware

Con otros sistemas operativos, un usuario por lo general tendría que ir al sitio web del fabricante para obtener soporte de controladores para diferentes tipos de hardware. El núcleo de Linux soporta a una mayoría de hardwares automáticamente a través de plug-and-play (mayormente gracias a la comunidad de software libre). Algunos fabricantes también desarrollaron versiones de Linux de sus controladores por lo que se pueden instalar fácilmente por medio del repositorio del programa de una distribución o instalando de forma manual los binarios proporcionados.

Habilidad y compatibilidad del programa

Linux tiene una rica lista de aplicaciones disponibles. Tiene aplicaciones de LibreOffice, navegadores web (Google Chrome y Mozilla Firefox), reproductores multimedia, imágenes/procesadores de video, etc. Para video juegos, Steam corre en Linux y tiene muchos juegos compatibles. Las aplicaciones de Windows también pueden correr en Linux (lee Wine para obtener más información).

Creado para el desarrollo

Debido a que Linux originalmente fue creado por desarrolladores para desarrolladores, los mismos han dedicado muchísimo tiempo y esfuerzo para perfeccionar las herramientas que utilizarían. Tiene una consola poderosa que puede utilizarse para realizar una variedad de tareas de programación y de administración (Bash es el más popular y es la opción predeterminada para Linux). Mientras que Linux tiene un "bloc de notas"  equivalente a gedit, también provee una variedad de editores basados en textos poderosos y personalizables como Vim y Emacs (se recomienda que los usuarios de Linux conozcan al menos uno de estos editores). También están los IDE disponibles para desarrollo web como Atom, Aptana/Eclipse, Sublime, KomodoIDE, entre otros. Linux también puede utilizar programas como Apache para configurar servidores locales para pruebas, Git para control de versiones, entre otras herramientas/lenguajes como Node.js/Ruby/SaSS/Heroku ya que todos tienen soporte en Linux y tiene herramientas de líneas de comando que pueden utilizarse en lugar de una interfaz gráfica de usuario (GUI).

Personalizable

Con Linux, el usuario puede cambiar el diseño del escritorio y los temas, añadir widgets y más. Estos cambios se pueden realizar con entornos de escritorios. Los diferentes entornos tienen diferentes opciones. Algunos populares son: KDE, GNOME, XFCE, Pantheon.

Es gratuito

¿Cómo se le gana a eso?

Para obtener más información sobre Linux visita:

• Los comandos básicos de Linux que deberías saber
• Los mejores tutoriales para Linux

Traducido del artículo - Why Use Linux? 11 Reasons Linux is Awesome

Hoy, JavaScript es uno de los lenguajes de programación más poderosos del mundo por su rendimiento y omnipresencia.

En lo personal, creo que JavaScript tiene el potencial de utilizarse en industrias reconocidas como Aprendizaje automático y Análisis de datos, donde todavía se usa muchísimo Python. ¡Ya está pasando con herramientas como Tensorflow.js!

Sin embargo, este fenómeno no se daba antes. Antes, JavaScript era un lenguaje débil e inadecuado por lo que era mal visto. JavaScript era para "perdedores".

Pero esto ya no sucede. Veamos cómo JavaScript cambió el juego en los últimos 10 años, por qué se volvió más fuerte que nunca y por qué está aquí para quedarse.

V8: La bestia que impulsa JavaScript

V8 es un motor de JavaScript. ¿Qué es un motor de JavaScript? Un motor de JavaScript es un intérprete que ejecuta el código de JavaScript. Un motor de JavaScript puede ser implementado como un intérprete estándar o un compilador just-in-time (JIT) que compila JavaScript en códigos de bytes en alguna forma.

V8 es un motor de JavaScript y WebAssembly JIT de código abierto de Google de alto rendimiento que está escrito en C++. Se utiliza en Chrome y en Node.js entre otros. V8 puede ejecutarse independientemente o puede incrustarse en cualquier aplicación de C++.

Ésta es una parte de programa que optimiza el código JS y lo convierte en código máquina para la CPU y para ejecutarse. Algunas de las tareas que se pueden realizar con V8 incluyen:

1. Recolección de basura
2. Compilación al código de máquina
3. Inline caching
4. Pointer compression
5. Y mucha más optimización

De hecho, el pointer compression es una técnica reciente en V8 para mejorar la optimización de memoria sin tener ningún efecto en el rendimiento. Si eres geek, puedes leer información detallada sobre cómo se implementa en el blog oficial de V8.

En resumen, puedes escribir JavaScript y dormir tranquilo porque tu código está en buenas manos.

Ecosistema maduro y comunidad

JavaScript tiene uno de los ecosistemas más maduros que un lenguaje podría tener (si es que no es el más maduro). La comunidad de JavaScript es grande y la barrera de ingreso está muy baja.

Puedes abrir un navegador (están en todas las computadoras personales), abrir la consola y encontrarás un motor de JS esperando a que ejecutes el código. Esto nunca sucedía con otro lenguaje de programación de tal complejidad.

Y como si la comunidad no fuese lo suficiente amplia, tenemos sistemas de paquetes npm y yarn. Hay un paquete para todo en el registro npm (desde creación de cadenas al azar hasta manejo de streams y búfers en JavaScript). Como dicen los desarrolladores de JavaScript:

"Lo que se puede hacer en JavaScript, se hará en JavaScript".

Creo que es gracioso pero discreto.

Si empiezas como principiante, es muy poco probable que te topes con un problema que nadie más se haya topado antes. Esto sucede porque todos los problemas posibles en JavaScript básico ya han sido consultados y archivados en sitios como Stack Overflow.

Los marcos y las librerías como React, Angular y Vue están construyendo el camino para el desarrollo de futuras aplicaciones. Están cambiando la perspectiva hacia la programación declarativa en vez de la programación imperativa. Lo que sería el "qué en vez del cómo". Esto le permite a los desarrolladores desarrollar aplicaciones de calidad sin tener que preocuparse de que el código sea de alto rendimiento.

Omnipresencia

JavaScript se utiliza para:

1. Front end (navegadores)
2. Back end (Node, Deno)
3. Android/iOs (React Native, NativeScript, etc.)
4. Escritorio (Electron)
5. Híbridos (Ionic)

¿Por qué esto es posible? Los motores de JS como el V8 están escritos en C/C++ y se pueden compilar en sistemas incrustados. Para otras plataformas, ya que los navegadores siempre están presentes (como en Android/ iOS), se envían con motores JS y después pueden ser utilizado para ejecutar cualquier código JS, incluso con aplicaciones nativas como es el caso de React Native.

Características novedosas y avances
Los estándares de JavaScript están encabezados por la comunidad ECMA-262 TC39 y trabajan bastante duro. ECMAScript publica estándares nuevos de JavaScript todos los años (lee las nuevas características ECMAScript2020). Como desarrollador, puedes pedir que se añadan nuevas características al lenguaje.

Por ejemplo, en la imagen de abajo se muestran las características novedosas pendientes que pueden estar en los estándares de JavaScript en un futuro cercano:

En el siguiente enlace, puedes leer todas las propuestas: TC39 Proposals.

JavaScript es RÁPIDO y AMPLIABLE

Claro, en realidad, nadie le gana a C/C++/Rust pero JavaScript es rápido, ya que V8 genera código altamente optimizado al monitorear cómo tu código se ejecuta, retrasar bits de ejecución que no se utilizan y optimizar los segmentos de código que se utilizan una y otra vez. Especialmente, al comparar con los competidores más cercanos como Python, con los avances en V8, JavaScript tiene mayor rendimiento y memoria eficiente.

JavaScript (Node) se puede ampliar (con superconjuntos como TypeScripts). Ya que se ejecuta en una arquitectura de un solo hilo, las personas suelen criticar a Node al no tener un ambiente de hilos pero, en realidad, esto no tiene mucha importancia.

La forma en la que se amplían las aplicaciones de Node no es la misma que la forma en la que se amplía una aplicación multihilo. Node en inglés significa "nodo" (un único nodo en un árbol de procesos). Node se amplía al ejecutar múltiples instancias del mismo y gestionar el grupo.

JavaScript lidera el evento asincrónico impulsado por el modelo de programación de la industria y no necesita ningún hilo para amplíarse. En cambio, los procesos individuales de Node se podrían crear para gestionar y utilizar el núcleo completo de la CPU. Más adelante, brindaré más información sobre la ampliación de Node.

En conclusión

Adoro JavaScript y utilizándolo cree una plataforma de desarrolladores para desarrolladores como tú. En la misma, no solo puedes aprender JavaScript sino que también otros lenguajes como C, C++, Node, Python, entre otros. Únete sin costo alguno y aprende junto a otros desarrolladores desde tu navegador.

JavaScript está aquí para quedarse y liderar la industria de esta época. ¿Piensas igual? Cuéntame en mi Twitter e Instagram - conectémonos.

Traducido del artículo de Mehul Mohan - Why JavaScript Is the Programming Language of the Future

Operador lógico AND (&&)

Este operador lógico compara dos expresiones. Si la primera se evalúa como "verdadera" (truthy), la sentencia devolverá el valor de la segunda expresión. Si la primera expresión se evalúa como "falsa"(falsy), la sentencia devolverá el valor de la primera expresión.

Cuando solo se incluyen valores booleanos (true o false), se devuelve verdadero si las dos expresiones son verdaderas. Si una o ambas expresiones son falsas, la sentencia completa se devolverá como falsa.

true && true //devuelve el segundo valor, verdadero
true && false //devuelve el segundo valor, falso
false && false //devuelve el primer valor, falso
123 && 'abc' // devuelve el segundo valor, 'abc'
'abc' && null //devuelve el segundo valor, nulo
undefined && 'abc' //devuelve el primer valor, indefinido
0 && false //devuelve el primer valor, 0

Operador lógico OR ( || )

Este operador lógico compara dos expresiones. Si la primera se evalúa como "falsa", la sentencia devolverá el valor de la segunda expresión. Si la primera se evalúa como "verdadera", la sentencia devolverá el valor de la primera expresión.

Cuando solo se incluyen valores booleanos (true o false), se devuelve como true si cualquiera de las dos expresiones son verdaderas. Ambas expresiones pueden ser verdaderas, pero solo se necesita una para que el resultado sea verdadero.

true || true //devuelve el primer valor, verdadero
true || false //devuelve el primer valor, verdadero
false || false //devuelve el segundo valor, falso
123 || 'abc' //devuelve el primer valor, 123
'abc' || null //devuelve el primer valor, 'abc'
undefined || 'abc' //devuelve el segundo valor, 'abc'
0 || false //devuelve el segundo valor, falso

Evaluación de "corto circuito"

&& y || funcionan como operadores de corto circuito.

Con el operador lógico AND, si el primer operando se devuelve como falso, el segundo nunca será evaluado y se devolverá el primer operando.

Con el operador lógico OR, si el primer valor se devuelve como verdadero, el segundo nunca será evaluado y el primer operando será devuelto.

Operador lógico NOT (!)

El operador lógico NOT no realiza ninguna comparación como lo hacen los operadores AND y OR. Además, se opera en solo un operando.

Se utiliza un símbolo "!" (signo de exclamación) para representar un operador NOT.

Usos del operador NOT

1. Convertir la expresión en un booleano.
2. Devolver el valor contrario del booleano obtenido en el último paso.

var spam = 'rinki'; //spam puede ser igual a cualquiera de las cadenas de texto no vacías
var booSpam = !spam;
/*devuelve falso
  porque la string vacía al convertirse en un booleano se devuelve como verdadera y lo contrario se devuelve como falso 
*/

var spam2 = ''; //spam2 es igual a una cadena de texto vacía
var booSpam2 = !spam2;
/*devuelve verdadero
  porque la cadena de texto vacia al convertirse en un booleano se devuelve como falsa y lo contrario se devuelve como verdadero.
*/

Consejo:

Ambos operadores lógicos devolverán el valor de la última expresión. Por ejemplo:

"gato" && "perro" //devuelve "perro"
"gato" && false //devuelve falso
0 && "gato"  //devuelve 0 (que es un valor falso)

"gato" || "perro" //devuelve "gato"
"gato" || false //devuelve "gato"
0 || "gato" //devuelve "gato"

Ten en cuenta que && devuelve el primer valor, mientras que || devuelve el segundo valor y vice versa.

Traducido del artículo de JavaScript Logical Operators

El juego de la serpiente es un juego sencillo en el que una serpiente se mueve adentro de una caja y trata de comerse una manzana. Una vez que se come la manzana, la serpiente crece de largo y se mueve más rápido.

El juego termina una vez que la serpiente se choca con sí misma o con cualquiera de las cuatro paredes.

Bueno, comencemos con HTML y CSS (los cimientos de nuestro juego).

HTML

<h1>Nokia 3310 snake</h1>
<div class="muestraPuntaje"></div>
<div class="cuadrilla"></div>
<div class="boton">
    <button class="superior">superior</button>
    <button class="fondo">fondo</button>
    <button class="izquierda">izquierda</button>
    <button class="derecha">derecha</button>
</div>
<div class="popup">
    <button class="juegaDeNuevo">Inténtelo de nuevo</button>     
</div>

Este código de HTML es sencillo y tiene:

• Un div de clase muestraPuntaje que mostrará nuestro puntaje.
• Un div de clase cuadrilla en el que se desarrollará el juego (la cuadrilla sería de 10 por 10).
• Una clase buton que contiene un botón para los usuarios que juegan en el teléfono (lo automatizaremos con el teclado para los usuarios de computadora).
• Una clase popup que mostrará el botón "Inténtelo de nuevo".

Ahora le añadiremos un poco de estilo con CSS.

CSS

      body {
        background: rgb(212, 211, 211);
      }
     .cuadrilla {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
      }
      .cuadrilla div {
        width: 20px;
        height: 20px;
        /*border:1px black solid;
box-sizing:border-box*/
      }
      .serpiente {
        background: blue;
      }
      .manzana {
        background: yellow;
        border-radius: 20px;
      }
      .popup {
        background: rgb(32, 31, 31);
        width: 100px;
        height: 100px;
        position: fixed;
        top: 100px;
        left: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

En CSS, la cuadrilla, que es el tablero del juego, tiene una dimensión establecida y un display de flex. Esto permite que los contenidos (div) de esta cuadrilla estén alineados de forma horizontal como si fuesen elementos en línea en lugar de la disposición normal de los bloques.

La propiedad flex wrap mueve los divs hacia la próxima línea para que no traspasen la dimensión del elemento padre establecida (cuadrilla).

Crearemos de forma dinámica los contenidos del tablero del juego desde JS pero podemos darle anchura y altura desde CSS (con el .cuadrilla div). En el ejemplo, incluí comentarios para ayudarte a ver los divs; por lo que, a medida que avancemos dejaremos el código sin comentarios.

Las clases serpiente y manzana nos muestran donde está la serpiente y el bonus en el juego, mientras que la clase popup es un div fijo que alberga el botón juegaDeNuevo.

En este punto, obtendrás lo siguiente:

Ahora estamos listo para empezar con JavaScript.

JavaScript

Lo primero que tenemos que hacer es definir las variables:

let cuadrilla = document.querySelector(".cuadrilla") 
let popup = document.querySelector(".popup"); 
let juegaDeNuevo = document.querySelector(".juegaDeNuevo"); 
let muestraPuntaje = document.querySelector(".muestraPuntaje") 
let izquierda = document.querySelector(".izquierda") 
let fondo = document.querySelector(".fondo") 
let derecha = document.querySelector(".derecha") 
let arriba = document.querySelector(".superior") 
let ancho = 10; 
let indiceActual = 0 
let indiceManzana = 0 
let serpienteActual = [2,1,0] 
let direccion = 1 
let puntaje = 0 
let velocidad = 0.8 
let tiempoInterval = 0 
let interval = 0

La variable ancho es la anchura de la cuadrilla (10). Las otras variables tendrán más sentidos a medida que avancemos. Sin embargo, aunque no lo creas, nuestra serpiente en realidad es un arreglo llamado serpienteActual.

Ahora veamos las funciones:

document.addEventListener("DOMContentLoaded",function(){ 
    document.addEventListener("keyup",control) 
    crearTablero() 
    comiezaJuego() 
    juegaDeNuevo.addEventListener("click", repeticion); 
})

Hay un eventListener en el objeto del documento llamado DomContentLoaded y este evento se ejecutará una vez que el contenido del HTML se cargue en la pantalla.

Una vez que esto sucede, establecemos un eventListener en el documento para esperar clics del teclado (después veremos esto con más detalles). Luego, queremos crear el juego de mesa, empezar el juego y prestarle atención a los clics en el botón de juegaDeNuevo.

Función crearTablero

function crearTablero(){ 
    popup.style.display = "none"; 
    for(let i=0;i<100;i++){
        let div = document.createElement("div") 
        cuadrilla.appendChild(div) 
    }
} 

Como mencioné antes, este es un cuadrilla de 10 por 10 por lo cual vamos a necesitar 100 divs. Entonces, co el fragmento anterior, cerramos el div popup, creamos un nuevo div con un bucle de 100 iteraciones y insertamos a la cuadrilla (juego de meza).

Inmediatamente se añadirán algunos de los estilos creados en un principio (el .cuadrilla div). Puedes remover los /* */del estilo CSS y observarás los divs creados (vuelve agregar los /* */).

Función comenzaJuego

function comenzaJuego(){ 
let cuadrados = document.querySelectorAll(".cuadrilla div") 
manzanaAlAzar(cuadrados) 
// manzana al azar
direccion = 1 
mostrarPuntaje.innerHTML = puntaje 
tiempoInterval = 1000 
serpienteActual = [2,1,0] 
indiceActual = 0 
serpienteActual.forEach(index => cuadrados[index].classList.add("serpiente")) 
interval = setInterval(moverResultado,tiempoInterval) 
} 

La función comenzaJuego primero toma todos los divs (ya que estamos creando los divs en el tiempo de ejecución, no podemos incluirlos en la parte superior del código).

El siguiente paso es seleccionar un lugar dónde ubicar la manzana. Esto se realizará más abajo dentro de la función manzanaAlAzar. La variable direccion se refiere hacia donde se dirige la serpiente -1 para la derecha, -1 para la izquierda y así.

Con tiempoInterval se establece el tiempo que le toma a la serpiente moverse, mientras que serpienteActual define la ubicación exacta de la serpiente en el cuadrilla (ten en cuenta que básicamente la serpiente está formada por un par de divs con un color particular).

Para mostrar a nuestra serpiente en la pantalla, realizaremos bucles sobre el arregloserpienteActual con un forEach. Cada valor obtenido, se utilizará con cuadrados. Recuerda que debes utilizar querySelectorAll para acceder a los cuadrilla divs y, después, podemos tener acceso a ellos como un arreglo que está utilizando números. En este caso, estos son los valores de serpienteActual.

El siguiente paso insertar el método setInterval (moverResultado, tiempoInterval) en la variable interval. Con esto podemos llamar fácilmente a clearInterval en esa variable.

moverResultado se ejecuta cada 1000ms (1s) y básicamente define qué sucede cuando mueves la serpiente.

Función moverResultado

function moverResultado() { 
let cuadrados = document.querySelectorAll(".cuadrilla div") 
if(compruebaPorGolpes(squares)) {
alert("golpeaste algo") 
popup.style.display="flex" 
return clearInterval(interval) 
} else { 
mueveSerpiente(cuadrados) 
}
} 

Como con la función comenzaJuego mencionada previamente,  primero obtenemos todos los cuadrilla divs y luego verificamos si la función compruebaPorGolpes devuelve true (verdadero).

Si lo hace, quiere decir que la serpiente se chocó con algo y aparece el botón "Inténtelo de nuevo" y borra el interval. Si la función devuelve false (falso), la serpiente no chocó con nada y podemos mover la serpiente con la función mueveSerpiente.

Por lo tanto, cada 1 segundo el juego termina si compruebaPorGolpes  es true o la serpiente realiza un movimiento más si compruebaPorGolpes es false. Primero explicaré la función mueveSerpiente.  

Función mueveSerpiente

function mueveSerpiente(cuadrados){
let cola = serpienteActual.pop()  
cuadrados[cola].classList.remove("serpiente") 
serpienteActual.unshift(serpienteActual[0]+direccion)  
// movimiento termina aquí
comeManzanas(cuadrados,cola)  
cuadrados[serpienteActual[0]].classList.add("serpiente")  
} 

La función mueveSerpiente recibe un argumento llamado cuadrados lo que no es necesario obtener de nuevo el .cuadrilla div en esta función.

Lo primeo que necesitamos hacer es quitar el último elemento del arreglo serpienteActual con un pop (este sería la cola y el primer elemento del arreglo sería la cabeza). Básicamente, la serpiente se mueve un paso hacia adelante y sale de la posición en la que estaba anteriormente. Después de esto, insertamos un nuevo valor al principio del arreglo con unShift.

Supongamos que nuestra serpiente empezó a moverse y se dirige hacia la derecha (direccion = 1). La dirección se añadirá a cabeza serpienteActual y la suma se colocará como el nuevo cabezaDeSerpiente.

Por ejemplo, si la serpiente estaba en posición [2,1,0], eliminamos el último elemento y dejamos la posición [2,1]. Luego, tomamos la cabeza que sería el elemento 2, le añadimos la dirección que es el elemento 1 y hacemos que este valor sea el nuevo valor [3,2,1] que mueve nuestra serpiente un paso hacia a la derecha después de un segundo.

Si queremos mover la serpiente hacia abajo, la dirección se establecerá a el ancho (que es 10) y se insertará en el primer elemento (que es 12 y se pondrá al principio del arreglo) [12,2,1].

Después, verificamos si la serpiente se comió la manzana y si se visualiza la nueva cabeza de la serpiente en el DOM.

Función compruebaPorGolpes

function compruebaPorGolpes(cuadrados) {  
    if (  
    (serpienteActual[0] + ancho >=(ancho * ancho) && direccion === ancho) ||
    (serpienteActual[0] % ancho === ancho -1 && direccion ===1) ||   
    (serpienteActual[0] % ancho === 0 && direccion === -1) ||   
    (serpienteActual[0] - ancho <= 0 && direccion === -ancho) ||
    cuadrados[serpienteActual[0] + direccion].classList.contains("serpiente") 
    ) { 
        return true  
    } else {  
    	return false 
    }
}   

La función compruebaPorGolpes tiene una sentencia if. Según la condición definida, podría devolver true (la serpiente se chocó con algo) o false.

La primera condición es si serpienteActual [0] (la cabeza de la serpiente) + ancho (10) es igual al total del área del ancho (que es ancho * ancho = 100) y la dirección es igual al ancho.

Ahora asumamos que la cabeza de la serpiente está en posición 97 que es la última capa de nuestro cuadrilla. Si añadieses 10 a 97 (= 107), superaría al total de la cuadrilla que es de 100. Si la dirección de la serpiente continúa hacia abajo, quiere decir que la serpiente se chocó con el borde inferior.

Si la serpiente estaba en 97 (97 + 10= 107) pero el jugador pudo cambiar la dirección a 1 (tocando la tecla izquierda), no se chocará con nada.

Si la cabeza de la serpiente está en posición 39 y la dirección todavía es 1 (la serpiente sigue dirigiéndose hacia la pared) y se chocará con el borde derecho.

Cualquier otra condición es prácticamente lo contrario de las dos condiciones anteriores. La última condición permite que si la cabeza de la serpiente se dirige hacia otro elemento que ya contiene la clase serpiente, la serpiente se chocará con sí misma.

Por lo que si una de las condiciones mencionadas previamente se cumple, significa que la serpiente se chocó con algo y se devolverá true (sino false). Y en ese caso, el juego se terminó. Pero si es falso, con mueveSerpiente mueves la serpiente realiza otro movimiento.

Function comeManzanas

function comeManzanas(cuadrados,cola){ 
    if(cuadrados[serpienteActual[0]].classList.contains("manzanas")){ 
        cuadrados[serpienteActual[0]].classList.remove("manzanas") 
        cuadrados[cola].classList.add("serpiente") 
        serpienteActual.push(cola)
        manzanaAlAzar(cuadrados) 
        puntaje++ 
        muestraPuntaje.textContent = puntaje 
        clearInterval(interval) 
        tiempoInterval = tiempoInterval * velocidad 
        interval = setInterval(moverResultado, tiempoInterval) 
    }
} 

A la función comeManzana se la llama desde la función mueveSerpiente cada vez que la serpiente realiza un movimiento.

Recibe dos argumentos cuadrados, .cuadrilla div y cola, básicamente es el valor que apareció de la serpiente en moverResultado. Luego verifica si la próxima posición del movimiento de la serpiente contiene una manzana.

Si lo hace, simplemente añade la cola que sacamos devuelta al arreglo. Esto sucede porque cada vez que nuestra serpiente se come una manzana, su largo incrementa un valor.

Después solo tenemos que seleccionar una nueva posición para nuestra manzana con manzanaAlAzar (ver más adelante). Y insertamos un valor de uno a nuestra puntuación, se lo mostramos al usuario, y borramos el tiempoInterval (para poder incrementar la velocidad de la serpiente). Por último, establecemos el intervalo de nuevo.

Función manzanaAlAzar

function manzanaAlAzar(cuadrados){ 
do { 
    appleIndex = Math.floor(Math.random() * cuadrados.length) 
} while(cuadrados[appleIndex].classList.contains("serpiente")) 
    cuadrados[appleIndex].classList.add("manzana") 
} 

Lo que hace manzanaAlAzar es seleccionar un lugar donde ubicar a nuestra manzana al utilizar un bucle do while. Primero selecciona una posición al azar con Math.random() en el bucle do y verifica si el lugar seleccionado ya contiene la clase serpiente.

Esto quiere decir que la condición en la sentencia do se ejecutará hasta que encuentre un lugar en el que no esté la serpiente (esto se continua ejecutando hasta que sea true). Una vez que encuentre un lugar, le da a ese lugar la clase manzana.

Establecer controles

Ahora tenemos que establecer nuestros controles. Vamos a empezar con los usuarios del teclado.

function control(e){ 
    if (e.keycode === 39){
        direccion = 1 // derecha 
    } else if (e.keycode === 38){ 
        direccion = -ancho // si presionamos la flecha de arriba, la serpiente irá 10 divs hacia arriba
    }else if (e.keycode === 37){ 
        direccion = -1 // izquierda, la serpiente irá un div a la izquierda
    }else if (e.keycode === 40){
        direccion = +ancho // la serpiente irá 10 divs hacia abajo desde el div actual
    } 
} 

Recuerda que establecimos un eventListener para keyup. Esta función se ejecuta inmediatamente al presionar y soltar una tecla.

Ahora cada botón del teclado tiene un valor llamado keycode (numeros) desde el cual tenemos acceso y nos permite saber qué numero se cliqueó. Básicamente, estaremos atentos a las flechas con sus respectivos valores (keycodes). Gracias a esto, cambiamos la dirección, por ejemplo -1, 10 y así.

Espero que hayan comprendido cómo ahora se podrá mover a la serpiente.

El siguiente conjunto de botones es para dispositivos móviles y básicamente estamos haciendo lo mismo:

arriba.addEventListener("click",() => direccion = -ancho ) 
fondo.addEventListener("click",() => direccion = +ancho ) 
izquierda.addEventListener("click",() => direccion = -1 ) 
derecha.addEventListener("click",() => direccion = 1 )

Por último, necesitamos crear el div repetición que aparecerá cuando la serpiente se choque con algo. Con este botón, podremos borrar el juego.  

Función repetición

 function repetición() { 
 cuadrilla.innerHTML="" 
 crearTablero()   
 comiezaJuego()  
 popup.style.display = "none"; 
 }  

Con este fragmento, borramos la cuadrilla (juego de mesa) y ejecutamos las funciones previas.

¡Felicidades! Llegaste al final. Aquí tenemos el resultado final:

Espero que hayas podido seguir el código y lo hayas disfrutado.

En este tutorial, aprendimos a crear juego de la serpiente con JavaScript. Algunos de los conceptos importantes que vimos incluyen push, pop, setInterval, clearInterval y eventListener.

Para jugar al juego haz clic aqui:

Gracias por leer el artículo. Sigueme en Twitter:

Traducido del artículo de Fakorede Damilola - How to Build a Snake Game In JavaScript

Muchas personas pensaron que el dinosaurio solo era un lindo ícono pequeño para brindarles compañía mientras no había conexión. Después, alguien presionó la barra espaciadora y el dinosaurio empezó a correr.

Este jueguito se convirtió en furor. Pero ¿qué sucede si lo quieres jugar (cuidado que es adictivo) cuando tienes internet y necesitas un descanso? En este artículo, aprenderás a cómo jugar al juego cuando estás con o sin conexión a Internet.

Cómo jugar al juego de Chrome sin conexión

Si no tienes Internet, solo tienes que abrir Chrome y visitar un sitio web. Notarás que hay un pequeño dinosaurio al lado del mensaje de error.

Sólo tienes que presionar la barra espaciadora y el dinosaurio comenzará a saltar. Presiona la flecha de arriba para saltar sobre los obstáculos (como los cactus) que hay en el camino. Si mantienes la fecha presionada más tiempo, el dinosaurio saltará por más tiempo.

Presiona la flecha de abajo para evitar los obstáculos que están en el aire.

Cuánto más juegues, más rápido corre el dinosaurio. Una vez que te choques con algún obstáculo, se acabó el juego y tienes que volver a empezar. Para jugar otra vez, presiona la barra espaciadora.

Cómo jugar si tienes conexión a Internet

Genial, tuviste algo para entretenerte mientras esperabas a que regresara tu conexión. Pero ¿y si lo quiero seguir jugando? A continuación te enseñaré cómo puedes hacerlo:

Visita la URL del dino

La forma más fácil de jugar a este juego es visitando esta URL: chrome://dino/ y ¡listo! Puedes ver al pequeño dinosaurio y al cartel que dice "Sin conexión".

Una vez que veas este mensaje, solo presiona la barra espaciadora y empieza a saltar cactus.

Bonus: otra forma de encontrar el juego

Quizás no te apareció el mensaje de error con el dinosaurio cuando te quedaste sin conexión. O quizás no quieres apagar tu wifi a propósito.

Entonces, si tienes Internet pero quieres desconectar la conexión en las herramientas de desarrollador de Chrome, presiona F12 para abrir las herramientas de desarrollador.

Haz clic en la pestaña "Network" arriba a la derecha y busca la pestaña "Online"/"Offline" en la segunda fila de abajo:

Busca la flechita hacia abajo, haz clic y selecciona "Offline" (debería estar establecido como "Online" si tienes conexión).

Una vez que lo hayas hecho, si intentas visitar la página ¡te aparecerá el dinosaurio! Puedes salir de las herramientas de desarrollador y presionar la barra espaciadora, como siempre, para empezar a jugar.

Ahora sabes cómo encontrar el juego sin o con conexión a Internet ¡Pásala bien!

Traducido del artículo de Abbey Rennemeyer - How to Play the No Internet Google Chrome Dinosaur Game - Both Online and Offline

En este artículo, desmitificaré la diferencia entre encodeURI y encodeURIComponent.

¿Qué es una URI y cómo se diferencia de una URL?

URI significa Identificador de Recurso Uniforme (Uniform Resourse Identifier).

URL significa Localizador de Recurso Uniforme (Uniform Resource Locator).

Cualquier cosa que excepcionalmente identifique un recurso es su URI como id, nombre, o número ISBN. Un URL especifica un recurso y cómo se puede evaluar (el protocolo). Todas las URL pero no todas las URI son URL.

¿Por qué necesitamos codificar?

Las URL solo pueden tener ciertos caracteres de los 128 set de caracteres estándar ASCII. Se debe codificar los caracteres reservados que no pertenezcan a este set.

Esto significa que es necesario codificar los caracteres cuando pasan a una URL. Cuando los caracteres especiales como &, space, ! entran en una URL, se tienen que escapar ya que sino pueden causar situaciones impredecibles.

Ejemplos de uso:

1. El usuario envió valores en un formulario que puede estar en un formato de string y se deben pasar, tal como los campos URL.
2. Es necesario aceptar parámetros de cadena de consulta (query string parameter) para realizar una solicitud GET.

¿Cual es la diferencia entre encodeURI y encodeURIComponent?

encodeURI y encodeURIComponent se utilizan para codificar Identificadores de Recurso Uniforme (URI) al remplazar cierto caracter por uno, dos, tres o cuatro secuencias de escape que representen la codificación UTF-8 de los caracteres.

El encodeURIComponent se debe utilizar para codificar un URI Component  (una string que supuestamente debe ser parte de una URL).

El encodeURI se debe utilizar para codificar una URI o una URL existente.

Tabla útil de las diferencias en la codificación de caracteres.

¿Qué caracteres están codificados?

encodeURI() no codificará: ~!@#$&*()=:/,;?+'

encodeURIComponent() no codificará: ~!*()'

Los caracteres A-Z a-z 0-9 - _ . ! ~ * ' ( ) no se escapan.

Ejemplos

const url = 'https://www.twitter.com'

console.log(encodeURI(url))             //https://www.twitter.com
console.log(encodeURIComponent(url))    //https%3A%2F%2Fwww.twitter.com


const paramComponent = '?q=search'
console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch"
console.log(url + encodeURIComponent(paramComponent)) //https://www.twitter.com%3Fq%3Dsearch

Cuándo codificar

1. Cuando se acepta una entrada (input) que puede tener espacios.

encodeURI("http://www.mysite.com/a file with spaces.html"

2. Cuando se crea una URL desde un parámetro de solicitud (query parameter).

 let param = encodeURIComponent('mango')
 let url = "http://mysite.com/?search=" + param + "&length=99"; //http://mysite.com/?search=mango&length=99

3. Cuando se aceptan parámetros de solicitud que puede que tengan caracteres reservados.

let params = encodeURIComponent('mango & pineapple')
   let url = "http://mysite.com/?search=" + params; //http://mysite.com/?search=mango%20%26%20pineapple

Resumen

Si tienes una URL completa, utiliza encodeURI. Pero si tienes una parte de una URL, utiliza encodeURIComponent.

Traducido del artículo de Shruti Kapoor - JavaScript URL Encode Example – How to Use encodeURIcomponent() and encodeURI()