Configuración de un proyecto para crear un juego en JavaScript con Phaser

Configura un proyecto moderno y comienza a crear un juego HTML5 en JavaScript usando Phaser 3

Phaser es una plataforma increíble que hace que crear juegos sea muy fácil, además de tener soporte para la física, y es lo suficientemente popular como para que puedas encontrar complementos y herramientas para crear mejores juegos, más rápido.

Se basa en tecnologías HTML5, lo que significa que puedes crear juegos que pueden distribuirse a través de la Web, pero también empaquetarse como aplicaciones de escritorio o móviles si lo deseas.

La programación de juegos es un tema amplio y en esta introducción quiero hablar sobre los conceptos básicos que serán suficientes para crear juegos simples.

En este tutorial quiero detallar una configuración óptima para comenzar a construir un juego usando Phaser 3.

Vamos a instalarlo phaseren una carpeta usando npm :

npm init -ynpm install phaser

Ahora configuremos Parcel para empaquetar nuestro juego:

npm install -g parcel-bundler

Ahora crea un game.jsarchivo con este contenido:

import Phaser from 'phaser'new Phaser.Game()

Ahora corre

parcel watch game.js

y Parcel construirá nuestro JavaScript en el dist/game.jsarchivo.

Ahora crea un index.htmlarchivo con este contenido:

!DOCTYPE htmlhtml head script src="./dist/game.js"/script /head/html

Instalar browser-syncpara ejecutar un servidor HTTP con el contenido de esta carpeta:

npm install -g browser-sync

entonces corre

browser-sync start --server --files "."

El comando anterior observa todos los archivos en la carpeta actual (y todas las subcarpetas) en busca de cambios e inicia un servidor web en el puerto 3000, abriendo automáticamente una ventana del navegador para conectarse al servidor.

Cada vez que cambie un archivo, el navegador se actualizará.Te recomendamos Trucos y guías de videojuegos

Esto será muy útil mientras creamos prototipos de nuestros juegos.

Ahora debería ver una pantalla en blanco en su navegador, porque inicializamos Phaser:

import Phaser from 'phaser'new Phaser.Game()

pero no pasa nada más.

Copia este código en game.js:

import Phaser from 'phaser'function preload() { this.load.setBaseURL('https://labs.phaser.io') this.load.image('sky', 'assets/skies/space3.png') this.load.image('logo', 'assets/sprites/phaser3-logo.png') this.load.image('red', 'assets/particles/red.png')}function create() { this.add.image(400, 300, 'sky') const particles = this.add.particles('red') const emitter = particles.createEmitter({ speed: 100, scale: { start: 1, end: 0 }, blendMode: 'ADD' }) const logo = this.physics.add.image(400, 100, 'logo') logo.setVelocity(100, 200) logo.setBounce(1, 1) logo.setCollideWorldBounds(true) emitter.startFollow(logo)}const config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 } } }, scene: { preload: preload, create: create }}const game = new Phaser.Game(config)

Nota: puedes descargar el recurso desde https://github.com/photonstorm/phaser3-examples/tree/master/public/assets

y deberías ver rápidamente la aplicación de demostración Phaser ejecutándose en tu navegador:

Esta es la publicación de introducción a la serie Phaser. Consulta las otras publicaciones .

Tal vez te puede interesar:

1. Cómo generar un número aleatorio entre dos números en JavaScript
2. Cómo esperar el evento DOM listo en JavaScript simple
3. Cómo determinar si una fecha es hoy en JavaScript
4. Cómo contar el número de propiedades en un objeto JavaScript

Configuración de un proyecto para crear un juego en JavaScript con Phaser

Phaser es una plataforma increíble que hace que crear juegos sea muy fácil, además de tener soporte para la física, y es lo suficientemente popular como pa

programar

es

2025-01-05

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente