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 .5. Debemos instalar el módulo de phaser en nuestra aplicación:
npm i phaser6. Así como las dependencias necesarias:
npm iNuestro 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;
}
@font-face {
font-family: font1;
src: url(/assets/myfont.ttf); /* (por si queremos usar fuentes personalizadas) */
font-weight: 400;
font-weight: normal;
}
</style>
</head>
<body>
<script type="module" src="./src/main.js"></script>
<div style="font-family:font1;position: absolute;left: -1000px;visibility: hidden;">.</div>
<div id="gameParent"></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.
./src/consts.js
export const gameWidth = 960;
export const gameHeight = 640;./src/main.js
import 'phaser';
import Init from './scenes/Init';
import { gameWidth, gameHeight } from './consts';
const config = {
type: Phaser.AUTO,
width: gameWidth,
height: gameHeight,
parent: `gameParent`,
scene: Init,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH
},
dom: {
createContainer: true
}
/*
, physics: {
default: 'arcade',
arcade: {
debug: true,
gravity: {
y: 300,
},
},
},
*/
};
new Phaser.Game(config);./src/scenes/Init/index.js
class Init extends Phaser.Scene {
preload() {
console.log('preload');
}
create() {
console.log('create');
}
update() {
console.log('update');
}
}
export default Init;