Crear juegos con javascript
En esta sección, vamos a crear un juego Infinite Flier de calidad profesional desde cero. Cuando hayamos terminado, ¡tendrá este aspecto! En este juego, JetPack Monkey tendrá que volar por el paisaje mientras evita a los enemigos. Cuanto más tiempo permanezcas vivo más puntos conseguirás.
2. Utilizaremos un marco de desarrollo de juegos llamado Phaser. Phaser se encarga de gran parte del trabajo pesado y nos permite centrarnos en la construcción de nuestro juego. Para usar Phaser necesitaremos añadirlo como un ‘Recurso’ a nuestro proyecto.
Esta línea le dice a Phaser que construya un nuevo juego para nosotros, pero todavía tenemos que especificar algunas opciones cuando se crea. Pon tu cursor entre los paréntesis y añade un par de llaves “{ }”. A continuación, pulsa “Intro” para añadir una nueva línea entre ellos. Añade el siguiente código:
Consejo: Las líneas que empiezan por “//” se llaman comentarios. No afectan al código de ninguna manera y no necesitas incluirlas en tu código. Sin embargo, te recomendamos que lo hagas para que puedas recordar lo que hace el código.
Juegos Javascript
Tic-Tac-Toe is a two-player game in which the players fill up nine empty rectangles in a table with either an X or an O when it is their turn. Once someone succeeds to line up their sign vertically or horizontally without an interruption, that player wins. With our help you can make a multiplayer browser game, which you can play with a friend.
Starting off with HTML. This is the most simple and short part of our code. Here we will assign classes and ids to our HTML elements. Since this game is made of a board with cells inside, we will construct the cells with the <div> element. This means we will just create generic containers which we will style later. Our board will be as simple as possible.
As you probably already know, a tic-tac-toe game requires 9 cells (3×3). Instead of a full blown menu, we will just add a message at the end with the restart button. This is what we will create in the body of our HTML. This is what our HTML will look like:
In the body we created our board and named its class and id. We also assigned the “cell” class to the cells inside the board. We added a few more <div> elements for our winning message and the restart button. Para aprender un poco más sobre los conceptos básicos de HTML lee nuestro artículo “¿Qué es HTML?”.
Juegos fáciles en javascript
Snake es un juego divertido de hacer ya que no requiere mucho código (menos de 100 líneas con todos los comentarios eliminados). Esta es una implementación básica del juego de la serpiente, pero le faltan algunas cosas intencionadamente y se dejan como exploración adicional para el lector.
Nota importante: Responderé preguntas sobre el código pero no añadiré más características ni responderé preguntas sobre añadir más características. Esta serie pretende dar un esquema básico del juego, pero nada más.
(CC0 1.0 Universal) Eres libre de usar este juego y el código en cualquier proyecto, personal o comercial. No hay necesidad de pedir permiso antes de usarlos. Dar atribución no es obligatorio, pero se agradece.
Los Juegos HTML Básicos son posibles gracias a usuarios como tú. Cuando te conviertes en mecenas, obtienes acceso a los registros de desarrollo entre bastidores, la posibilidad de votar en qué juegos trabajaré a continuación y acceso anticipado al próximo Basic HTML Game.
Quería aprender a crear juegos con html, investigué y encontré un código que era un fork de éste (nada ha cambiado) y creé un juego base. Añadí un montón de cosas y un montón de características, pero la mayor parte de mi tiempo en este juego estaba tratando de arreglar este error. Creo que lo arreglé, si no me equivoco es en el momento en que comprueba si la serpiente llegó de un lado para desovar en el otro. Me di cuenta de esto cuando ya había cambiado mucho el código, así que puede que no sea así. Era el fragmento de código el que estaba buggy porque quitaba un pixel de la posición de la serpiente, por lo que la comprobación de colisión no funcionaba. Pronto publicaré mi versión. De hecho, el código es mucho más grande. una de las diferencias es que la serpiente no muere cuando es golpeada por ella misma. Esta versión también tiene una manzana malvada que hace que la serpiente se encoja de tamaño y tiene la capacidad de cambiar la resolución de la pantalla. es decir, en lugar de 400×400 (bloques de 16 que da 25×25), hice un sistema que toma y hace todo automáticamente (autotuning). muy bueno, voy a publicar pronto con licencia MIT
Cómo hacer un juego en javascript
Cada paso tiene muestras editables y en vivo disponibles para jugar, de modo que puedas ver cómo deberían ser las etapas intermedias. Aprenderás los fundamentos del uso del elemento <canvas> para implementar mecánicas de juego fundamentales como el renderizado y movimiento de imágenes, detección de colisiones, mecanismos de control y estados de ganar y perder.
Nota: Esta serie de artículos puede utilizarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del kit de contenidos Gamedev Canvas basado en este tutorial si quieres dar una charla sobre desarrollo de juegos en general.
