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.gito
npx degit monteserin/phaser-template