Estructura del código de nuestro videojuego

Contactar con el profesor

Estructura del HTML

Nuestro código Javascript estará dentro de un documento HTML similar al siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>El título del juego</title>
	<meta name="viewport" content="user-scalable=no,  initial-scale=1,  maximum-scale=1,  width=device-width" />
	<style>
		body {
			background: black;
			margin: 0
		}

		canvas {
			display: block;
			margin: 0;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>

	<script src="./js/phaser.min.js"></script>
	<script src="./js/javascript.js"></script>
</head>
<body>

</body>
</html>

Estructura del Javascript

class Escena extends Phaser.Scene {

	preload() {
		console.log('preload');
	}

	create() {
		console.log('create');
	}

	update() {
		console.log('update');
	}
}

const config = {
	type: Phaser.AUTO,
	width: 960,
	height: 640,
	scene: Escena,
	scale: {
		mode: Phaser.Scale.FIT
	}
	/*physics: {
		default: 'arcade',
		arcade: {
			debug: true,
			gravity: {
				y: 300,
			},
		},
	},*/
};

new Phaser.Game(config);

Para descargarte una plantilla para tus proyectos de React en la que esté todo bien preparado, puedes acceder a mi repositorio de github:

git clone https://github.com/monteserin/phaser-template.git

o

npx degit monteserin/phaser-template
← Estructura del código de nuestro videojuego
Elige tu propia aventura con PhaserJS →

Aviso Legal | Política de privacidad