Comentario: Es un juego de ping-pong con 2 jugadores que usan una competencia de teclado; En este capítulo lo haremos: 1. Preparar la herramienta de desarrollo 2. Construya nuestro primer juego - Ping Pong 3. Aprenda a usar la biblioteca JQuery JavaScript para el posicionamiento básico 4. Obtenga entrada del teclado
En este capítulo lo haremos:
Preparar herramientas de desarrollo
Construye nuestro primer juego - Ping Pong
Aprenda a usar la biblioteca jQuery JavaScript para el posicionamiento básico
Obtener entrada del teclado
Creando el juego de ping pong con puntuación
Las siguientes capturas de pantalla del juego son los resultados de nuestro estudio en este capítulo. Es un juego de ping pong con 2 jugadores jugando en un teclado.
Entonces, comencemos a crear nuestro juego ahora.
Prepárese para el entorno de desarrollo
El desarrollo de juegos HTML5 y el desarrollo del sitio web son similares. Necesitamos un navegador web y una excelente herramienta de edición de texto.
Muchas herramientas de edición de texto son excelentes, solo usa lo que te gusta. Si no tiene uno, le recomiendo que use Notepad ++, una herramienta de edición pequeña y rápida. Con respecto a los navegadores, necesitamos un navegador que admita las características HTML5, CSS3 y pueda recibir herramientas de depuración.
Hay varios navegadores para elegir: Apple Safari (), Google Chrome (), Mozilla Firefox () y Opera (), todas las cuales admiten las características que necesitamos.
Preparar documentos HTML
Cada sitio web, página y juego HTML5 comienza con el documento HTML predeterminado. Y este documento HTML comienza con el código HTML básico. También comenzaremos nuestro desarrollo de juegos HTML5 con index.html.
Tiempo de acción
Crearemos nuestro juego HTML5 Ping Pong desde cero. Parece que tenemos que preparar todo nosotros mismos, y afortunadamente al menos pudimos ayudarnos con la Biblioteca JavaScript. JQuery es una biblioteca JavaScript que la usaremos en todos nuestros ejemplos. Esto ayudará a simplificar nuestra lógica de JavaScript:
1. Crea una nueva carpeta llamada Pingpong
2. Cree otra carpeta llamada JS en la carpeta
3. Descargar jQuery.
4. Seleccione Producción y haga clic en Descargar JQuery.
5. Guardar jQuery-1.7.1.min.js en la carpeta que creamos 2
6. Cree un nuevo archivo llamado index.html y guárdelo en la carpeta creada por 1.
7. Abra el archivo index.html con un editor de texto e inserte una plantilla HTML vacía:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> ping pong </title>
</ablo>
<Body>
<Header>
<h1> ping pong </h1>
</Header>
<ToToTer>
Este es un ejemplo de la creación de un juego de ping pong.
</foTer>
</body>
</html>
8. Consulte el archivo jQuery antes de la etiqueta de finalización del cuerpo
<script src = js/jQuery-1.7.1.min.js> </script>
9. Finalmente, queremos asegurarnos de que jQuery esté cargada con éxito. Por lo general, colocamos el siguiente código para verificar después del archivo jQuery antes de la etiqueta de finalización del cuerpo:
<script>
$ (function () {
alerta (bienvenido a la batalla de Ping pong);
});
</script>
10. Guarde index.html y ábralo con su navegador. Deberíamos ver la siguiente ventana de inmediato. Esto significa que nuestra jQuery está configurada correctamente:
¿qué pasó?
Acabamos de crear una página HTML5 básica con jQuery y nos aseguramos de que JQuery esté cargada correctamente.
Nuevo DOCTYPE HTML5
Tanto Doctype como Meta Tags se simplifican en HTML5.
En HTML4.01, declaramos que DocType requiere el siguiente código:
<! Doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
Es largo, ¿verdad? Sin embargo, en HTML5, la declaración de DOCTYP es mucho más simple:
<! Doctype html>
Ni siquiera hemos declarado la versión HTML, lo que significa que HTML5 será compatible con versiones HTML anteriores y las versiones HTML futuras también admitirán versiones HTML5.
Las metaetiquetas también se han simplificado. Ahora usamos el siguiente código para definir el conjunto de caracteres HTML:
<meta charset = utf-8>