recursal/MDN huggingface dataset:
Fin del juego
=============

* « Anterior
* Siguiente »

Este es el quinto paso de 10 del Gamedev Canvas tutorial (en-US). Puedes ver como debería quedar el código fuente después de completar esta lección en Gamedev-Canvas-workshop/lesson5.html.

Es divertido ver la bola rebotando en las paredes y ser capaz de mover la pala pero, aparte de eso, el juego no hace nada y no tiene ningún progreso ni un objetivo final.Sería bueno desde el punto de vista del juego poder perder. La lógica asociada a perder en este juego es fácil de entender: si se te escapa la bola y alcanza el borde inferior de la pantalla, pierdes y se acabó el juego.

Implementar el final del juego
------------------------------

Intentemos implementar el final del juego en nuestro juego.Aquí está el trozo de código de la tercera lección en donde hicimos que la pelota rebotara en las paredes:


```js
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
  dx = -dx;
}

if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
  dy = -dy;
}
```


En lugar de dejar que la pelota rebote en las cuatro paredes, vamos a permitir que lo haga sólo en tres: izquierda, arriba y derecha. Alcanzar la pared inferior supondrá el fin del juego. Editaremos el segundo bloque if y lo convertiremos en un "if else" que activará el estado de "final de juego" cuando la pelota colisione con el borde inferior del terreno de juego. Por ahora nos conformaremos con mostrar un mensaje con la función alert() y con reiniciar el juego volviendo a cargar la página. Modifica el segundo if para que quede así:


```js
if (y + dy < ballRadius) {
  dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
  alert("GAME OVER");
  document.location.reload();
}
```

Hacer que la pala golpee la bola
--------------------------------

Para terminar esta lección sólo nos falta detectar la colisión de la bola y la paleta para que pueda rebotar, volviendo hacia la zona de juego. La manera más sencilla de hacerlo es comprobar si el centro de la bola está entre los límites izquierdo y derecho de la paleta. Actualiza el último fragmento del código, el "if else" de antes, para que te quede así:


```js
if (y + dy < ballRadius) {
  dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
  if (x > paddleX && x < paddleX + paddleWidth) {
    dy = -dy;
  } else {
    alert("GAME OVER");
    document.location.reload();
  }
}
```


Si la bola toca el borde inferior del lienzo (Canvas) debemos comprobar si golpea la pala. Si es así, entonces rebota como el jugador se imagina que va a ocurrir; si no, el juego ha terminado.

Compara tu código
-----------------

Aquí tienes el código que funciona para que lo compares con el tuyo:

**Nota:** haz que la bola se mueva más rápida cuando golpea la pala.

Siguientes pasos
----------------

Lo estamos haciendo bastante bien hasta ahora y nuestro juego está empezando a despertar interés ahora que se puede perder. Pero todavía falta algo. Vamos a pasar al sexto capítulo, Construir el muro de ladrillos, y crear algunos ladrillos para que la bola los destruya.

* « Anterior
* Siguiente »
Controles del ratón
===================

* « Anterior
* Siguiente »

Este es el noveno paso de 10 del tutorial Canvas para el desarrollo de juegos (en-US). Puedes encontrar el código y pegarle un vistazo después de completar esta lección Gamedev-Canvas-workshop/lesson9.html.

El juego en sí está terminado, así que ahora vamos a pulirlo. Ya le hemos puesto el control del teclado y ahora le añadiremos el control del ratón.

Detectar el movimiento del ratón
--------------------------------

Detectar el movimiento del ratón es más fácil que detectar las pulsaciones de las teclas. Todo lo que necesitamos es un añadir "escuchador" al evento `mousemove` (en-US).Añade esta línea destrás de los otros "listeners", justo debajo del evento `keyup`:


```js
document.addEventListener("mousemove", mouseMoveHandler, false);
```

Asociar el movimiento de la pala con el movimiento del ratón
------------------------------------------------------------

Podemos cambiar la posición de la pala basándonos en las coordenadas del puntero del ratón. Eso es lo que hace la función siguiente. Añádela detrás de la línea que acabas de añadir:


```js
function mouseMoveHandler(e) {
  var relativeX = e.clientX - canvas.offsetLeft;
  if (relativeX > 0 && relativeX < canvas.width) {
    paddleX = relativeX - paddleWidth / 2;
  }
}
```


En esta función calculamos un valor `relativeX`, que es la posición horizontal del ratón en el "viewport" (`e.clientX`), menos la distancia entre el borde izquierdo del terreno de juego y el borde izquierdo del "viewport" (`canvas.offsetLeft`).

Si el valor resultante es mayor que cero y menor que el ancho del terreno de juego, es que el ratón está dentro de los límites, y calculamos la posición de la paleta poniéndole el valor `relativeX` menos la mitad del ancho de la paleta, para que el movimiento sea de verdad relativo a la mitad de la paleta.

Ahora, la paleta seguirá la posición del cursor del ratón pero, como restringimos el movimiento al <canvas>, no desaparecerá completamente por los lados.

Compara tu código
-----------------

Aquí tienes el código para comparar:

**Nota:** ajusta los límites del movimiento de la pala para que siempre se vea la pala completa (ahora sólo se ve media en los laterales).

Pasos siguientes
----------------

Ya tenemos el juego terminado, pero aún lo podemos mejorar con algunos trucos Finalizando.

* « Anterior
* Siguiente »
asm.js
======

Asm.js es un subconjunto de JavaScript que es altamente optimizable. Este artículo analiza exactamente lo que está permitido en el subconjunto asm.js, las mejoras que confiere, donde y cómo puedo utilizarlo, y otros recursos y ejemplos.

¿Qué es asm.js exactamente?
---------------------------

Es un subconjunto muy pequeño y estricto de JavaScript que solo permite cosas como `while`, `if`, números, funciones con nombres de nivel superior y otras construcciones simples. No permite objetos, cadenas, cierres y básicamente cualquier cosa que requiera una asignación de la pila. El código asm.js se parece al lenguaje de programación "C" en muchos aspectos, pero es JavaScript completamente válido que se ejecuta en todos los motores actuales. Impulsa los motores JS para optimizar este tipo de código, y le da a los compiladores como Emscripten una definición clara de qué tipo de código generar. A continuación, mostraremos cómo es un código asm.js y explicaremos cómo le ayuda y cómo puede usarlo.

Este subconjunto de JavaScript ya está altamente optimizado en muchos motores de JavaScript que utilizan técnicas de compilación Just-In-Time (JIT) sofisticadas. Sin embargo, al definir un estándar tan explícito, podemos trabajar en la optimización de este tipo de código aún más y obtener el máximo rendimiento posible. Facilita la colaboración en múltiples motores JS porque es fácil de comparar. La idea es que este tipo de código se ejecute muy rápido en cada motor, y si no lo hace, es que hay un error y es un claro mensaje de que los motores deben optimizarse.

También facilita la tarea de las personas que escriben compiladores que desean generar código de alto rendimiento en la web. Pueden consultar las especificaciones de asm.js para saber que se ejecutará rápidamente si se adhieren a los patrones de asm.js. Emscripten, un compilador de C/C++ a JavaScript, genera código asm.js para que funcione con un rendimiento casi nativo en varios navegadores.

Además, si un motor elige reconocer especialmente código asm.js, se pueden realizar aún más optimizaciones. Firefox es el único navegador que hace esto ahora.

Resumen del lenguaje asm.js
---------------------------

asm.js es un lenguaje de programación intermedio. Tiene una tasa de rendimiento muy predecible porque está limitada a un subconjunto extremadamente restringido de JavaScript que proporciona solo enteros, números en coma flotante, aritmética, llamadas a funciones y accesos de pila de tipo estricto. Las características de rendimiento son más cercanas al código nativo que las de JavaScript estándar. El uso del subconjunto de JavaScript asm.js ya es compatible con los principales navegadores web. Como asm.js se ejecuta en un navegador, depende en gran medida del navegador y del hardware.
WebRTC data channels
====================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La API WebRTC (en-US) (Web Real-Time Communications - Comunicaciones WEB en tiempo real) es principalmente conocida por dar soporte en las comunicaciones de audio y video; sin embargo también ofrece canales de datos punto a punto. Este artículo explica más sobre esto y te muestra como usar librerias para implementar canales de datos en tu juego.

¿Qué es un canal de datos?
--------------------------

Un canal de datos WebRTC te permite enviar texto o datos binarios a través de una conexión activa a un punto. En el contexto de un juego, esto permite a los jugadores enviarse datos entre ellos, ya sea por chat de texto o por información de estado del juego. Los canales de datos vienen en dos sentidos.

Los **canales fiables** garantizan que los mensajes que envíes lleguen al otro interlocutor y en el mismo orden en que se enviaron. Esto es análogo a un socket TCP.

Los **canales no confiables** no ofrecen tales garantías; no se garantiza que los mensajes lleguen en un orden particular y, de hecho, no se garantiza que lleguen. Esto es análogo a un socket UDP.

Tenemos documentación sobre WebRTC (en-US). Este artículo, sin embargo, aprovechará algunas bibliotecas que pueden ayudar a trivializar el trabajo, y demostrará formas de usar la abstracción para evitar las diferencias de implementación entre los navegadores. Con suerte, por supuesto, esas diferencias se desvanecerán en el tiempo.

Usando la libreria p2p
----------------------

Una biblioteca que puede usar es la biblioteca p2p. Esta biblioteca proporciona una API simple para crear conexiones entre puntos y configurar transmisiones y canales de datos. También hay un componente de servidor intermediario y un agente hospedado que puedes usar en lugar de tener que configurar uno.

**Nota:** Continuaremos agregando contenido aquí pronto; hay algunos problemas de organización por resolver.
Servidor Node sin framework
===========================

Este artículo proporciona un servidor de ficheros estático simple construido con Node.js puro, para aquellos de vosotros que no quieran usar un framework.

NodeJS tiene muchos `frameworks` para ayudarte a poner en marcha tu servidor, siendo los más populares:

* Express: El framework más utilizado.
* Total: El framework Node.js todo en uno que lo tiene todo y no depende de ningún otro framework o módulo.

Sin embargo, no existe una solución que se adapte a todas las situaciones. Un desarrollador puede necesitar construir su propio servidor, sin ninguna otra dependencia.

Ejemplo
-------

A continuación se muestra un servidor de archivos estático simple creado con NodeJS:


```js
var http = require("http");
var fs = require("fs");
var path = require("path");

http
  .createServer(function (request, response) {
    console.log("request ", request.url);

    var filePath = "." + request.url;
    if (filePath == "./") {
      filePath = "./index.html";
    }

    var extname = String(path.extname(filePath)).toLowerCase();
    var mimeTypes = {
      ".html": "text/html",
      ".js": "text/javascript",
      ".css": "text/css",
      ".json": "application/json",
      ".png": "image/png",
      ".jpg": "image/jpg",
      ".gif": "image/gif",
      ".svg": "image/svg+xml",
      ".wav": "audio/wav",
      ".mp4": "video/mp4",
      ".woff": "application/font-woff",
      ".ttf": "application/font-ttf",
      ".eot": "application/vnd.ms-fontobject",
      ".otf": "application/font-otf",
      ".wasm": "application/wasm",
    };

    var contentType = mimeTypes[extname] || "application/octet-stream";

    fs.readFile(filePath, function (error, content) {
      if (error) {
        if (error.code == "ENOENT") {
          fs.readFile("./404.html", function (error, content) {
            response.writeHead(404, { "Content-Type": "text/html" });
            response.end(content, "utf-8");
          });
        } else {
          response.writeHead(500);
          response.end(
            "Sorry, check with the site admin for error: " +
              error.code +
              " ..\n",
          );
        }
      } else {
        response.writeHead(200, { "Content-Type": contentType });
        response.end(content, "utf-8");
      }
    });
  })
  .listen(8125);
console.log("Server running at http://127.0.0.1:8125/");
```

Que Hacer
---------

Sería bueno extender este artículo para explicar cómo funciona el código anterior, y quizás también mostrar una versión extendida que sirve archivos estáticos y también maneja algún tipo de solicitudes dinámicas.
Primeros Pasos en la Programación de Lado-Servidor
==================================================

En este, nuestro módulo sobre programación de Lado-Servidor, contestaremos a unas pocas preguntas fundamentales - "¿Qué es?", "¿En qué se diferencia de la programación de Lado-Cliente?" y "¿Porqué es tan útil?". Proporcionaremos un vistazo de algunos de los "web-frameworks" de lado-servidor más populares, junto con indicaciones de cómo seleccionar el framework más adecuado para crear tu primer sitio. Finalmente proporcionaremos un artículo introductorio de alto nivel sobre seguridad en el servidor web.

Prerequisitos
-------------

Antes de comenzar este módulo no necesitas tener ningún conocimiento de programación de sitios web de lado-servidor, y tampoco de ningún otro tipo de programación.

Necesitarás entender "cómo funciona la web". Te recomendamos que leas primero los siguientes temas:

* Qué es un servidor web
* ¿Qué software necesito para construir un sitio web?
* ¿Cómo se suben los ficheros a un servidor web? (en-US)

Con este conocimiento básico estarás listo para recorrer el camino a través de los módulos de esta sección.

Guías
-----

Introducción al lado servidor

¡Bienvenidos al curso MDN de programación para principiantes de lado servidor! En este primer artículo enfocamos la programación de Lado-Servidor desde un nivel alto, respondiendo a preguntas tales como "¿qué es?", "¿en qué se diferencia de la programación de Lado-Cliente?" y "¿porqué es tan útil?". Después de leer este artículo entenderás el poder adicional para los sitios web disponible a través de la codificación lado-servidor.

Visión general Cliente-Servidor

Ahora que conoces el propósito y beneficios potenciales de la programación lado-servidor examinaremos en detalle qué pasa cuando un servidor recibe una "petición dinámica" desde un explorador web. Como el código de lado-servidor de la mayoría de sitios web gestiona las peticiones y las respuestas de forma similar, ésto te ayudará entender qué necesitas hacer cuando escribes tu propio código.

Web frameworks de lado-servidor

El anterior artículo te mostró lo que necesita una aplicación web de lado servidor para responder a las peticiones de un explorador web. Ahora te mostraremos cómo los web frameworks pueden simplificar estas tareas y ayudarte a seleccionar el framework correcto para tu primera aplicación web de lado servidor.

Seguridad de Sitios Web

La seguridad de los sitios web requiere vigilancia en todos los aspectos del diseño y uso del sitio . Este artículo introductorio no te convertirá en un gurú de la seguridad de sitios web, pero te ayudará a entender los primeros pasos importantes que deber dar para robustecer tu aplicación web contra las amenazas más comunes.

Evaluaciones
------------

Este módulo "visión general" no hace ninguna evaluación ya que no te hemos enseñado ningún código todavía. Esperamos que en este punto tengas una comprensión de qué clase de funcionalidad puedes distribuir usando programación de lado servidor y habrás tomado una decisión sobre el web framework de lado servidor que usarás para crear tu primer sitio.
Tablas HTML
===========

Una tarea muy común en HTML es la estructuración de datos, y para esto hay múltiples elementos y atributos. Esto unido a un poco de CSS, hace que en HTML sea sencillo mostrar tablas con información sobre tu horario escolar, los horarios de una piscina local o las estadisticas de tu equipo de dinosaurios o fútbol preferido. Este módulo te guiará en todo lo que necesitas saber sobre la estructuración tabular de datos en HTML.

Requisitos previos
------------------

Antes de comenzar este módulo, deberías de saber las cosas básicas de HTML — ver Introducción a HTML.

**Nota:** Si estas trabjando en un ordenador/tableta/otro dispositivo en el que no puedes crear tus propios archivos, puedes probar la mayoría de ejemplos online en webs como JSBin o Glitch.

Guías
-----

Este módulo contiene los siguientes artículos:

Comenzando con tablas HTML

Este artículo te introduce en las tablas HTML , cubriendo las cosas más basicas como las líneas y las celdas, encabezados, crear celdas de multiples líneas y columnas, y como agrupar todas las celdas en una columna con fines estilisticos.

Características avanzadas y accesibilidad en tablas HTML

En el segundo artículo de este módulo, veremos algunas características avanzadas de las tablas HTML — como subtítulos/resumenes y agrupar líneas en la cabeza, cuerpo y pie de la tabla — además de realizar tablas accesibles para aquellos usuarios con problemas de visión.

Evaluación
----------

Estructurar datos planetarios

En nuestra evaluación, te proporcionamos datos sobre los planetas de nuestro sistemas solar y tu los estructurarás en una tabla HTML.
Pon a prueba tus habilidades: texto HTML avanzado
=================================================

El objetivo de esta prueba de habilidad es evaluar si ha entendido nuestras formato de texto avanzado articulo.

**Nota:** Puede probar soluciones en los editores interactivos a continuación; sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como CodePen, jsFiddle, o Glitch trabajar en las tareas.

Si tiene problemas, pídeanos ayuda; consulte la sección Evaluación o ayuda adicional en la parte inferior de esta página.

Texto HTML avanzado 1
---------------------

En esta tarea, queremos que convierta los animales proporcionados y sus definiciones en una lista de descripción.

Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:

**Nota:** Descarga el punto de partida para esta tarea para trabajar en su propio editor o en un editor en línea.

Texto HTML avanzado 2
---------------------

En esta tarea, queremos que agregue algo de semántica al HTML proporcionado de la siguiente manera:

* Convierta el segundo párrafo en una cita a nivel de bloque e indique semánticamente que la cita se toma de Accesibilidad.
* Marque semánticamente "HTML" y "CSS" como acrónimos, proporcionando expansiones como información sobre herramientas.
* Asocia semánticamente fechas legibles por máquina con las fechas en el texto.
* Utilice subíndice y superíndice para proporcionar la semántica correcta para las fórmulas químicas y fechas, y hacer que se muestren correctamente.

Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:

**Nota:** Descarga el punto de partida para esta tarea para trabajar en su propio editor o en un editor en línea.

Evaluación o ayuda adicional
----------------------------

Puede practicar estos ejemplos en los editores interactivos anteriores.

Si desea que se evalúe su trabajo, o está atascado y desea pedir ayuda:

1. Pon tu trabajo en un editor que se pueda compartir en línea, como CodePen, jsFiddle, o Glitch. Puede escribir el código usted mismo o utilizar los archivos de punto de inicio vinculados en las secciones anteriores.
2. Escriba una publicación solicitando evaluación y / o ayuda en el MDN Discourse forum Categoría de aprendizaje. Tu publicación debe incluir:
    * Un título descriptivo como "Se busca evaluación para la prueba de habilidad de texto avanzado HTML 1".
    * Detalles de lo que ya ha probado y lo que le gustaría que hiciéramos, p. Ej. si está atascado y necesita ayuda, o quiere una evaluación.
    * Un enlace al ejemplo que desea evaluar o con el que necesita ayuda, en un editor que se puede compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.
    * Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que desea ayuda.
Prueba tus habilidades: Texto básico HTML
=========================================

El objetivo de esta prueba de habilidad es evaluar si has comprendido el artículo Fundamentos de texto en HTML.

**Nota:** Puedes intentar resolverlo en los editores interactivos de más abajo, sin embargo puede ser muy úytil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

Si te atascas, entonces pídenos ayuda — busca en la sección Assessment or further help al final de esta página.

Texto básico HTML 1
-------------------

En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. Intenta actualizando el código más abajo para recrear el ejemplo terminado:

**Nota:** Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

Texto básico HTML 2
-------------------

En esta tarea necesitamos que cambies la primera lista no marcada en una lista no ordenada, y la segunda en una lista ordenada.

Intenta actualizando el código más abajo para recrear el ejemplo terminado:

**Nota:** Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

Texto básico HTML 3
-------------------

En esta tarea se te entrega un párrafo, y tu objetivo es usar algunos elementos en línea para marcar algunas palabras con importancia, y otras con énfasis

Intenta actualizando el código más abajo para recrear el ejemplo terminado:

**Nota:** Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

Evaluación o ayuda adicional
----------------------------

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir:
    * Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".
    * Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
    * Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
    * Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.