Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Estructura del HTML
Vamos a crear nuestro proyecto utilizando la herramienta de construcción de proyectos Vite. Para ello:
1. Instalamos la aplicación estable de nodejs (LTS, long time support).
2. Creamos la carpeta en la que estará el código fuente de nuestra aplicación.
3. Abrimos esa carpeta con Visual Studio Code.
4. En la consola, ejecutamos el siguiente comando:
npm create vite .Nuestro código Javascript estará dentro de un documento HTML similar al siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Juegos en Phaser</title>
<meta name="robots" content="noindex, follow">
<meta name="description" content="Juegos de Phaser">
<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%);
}
@font-face {
font-family: font1;
src: url(./assets/);
font-weight: 400;
font-weight: normal;
}
</style>
</head>
<body>
<script type="module" src="./scenes/Main/index.js"></script>
<div style="font-family:font1;position: absolute;left: -1000px;visibility: hidden;">.</div>
</body>
</html>Estructura del Javascript
La escena Main, o escena principal tendrá un código similar a este, en el que cargamos las escena de inicio (aunque ) pertinentes y la configuración inicial del juego.
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