Installation de base¶

Objectif¶

Installer un projet Phaser de base

Code de départ¶

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>Modèle</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="./src/css/styles.css" rel="stylesheet">

    <script src="./node_modules/phaser/dist/phaser.min.js"></script>
    <script src="./src/js/scenes/Intro.js"></script>
    <script src="./src/js/init.js" defer></script>
</head>
<body>
    <div id="canvas-wrapper"></div>
</body>
</html>

src/css/styles.css

body {
    font-family: Helvetica, Arial, sans-serif;
    color: #ccc;
    background-color: #222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

canvas {
    border-radius: 1rem;
    border: 4px solid rgba(0,0,0,0.2);
}

src/js/init.js

const config = {
    type: Phaser.AUTO,
    parent: "canvas-wrapper",
    width: 800,
    height: 600,
    scene: Intro
};
const game = new Phaser.Game(config);

src/js/scenes/Intro.js

class Intro extends Phaser.Scene {

    preload() {

    }

    create() {
        const text = this.add.text(10, 10, "Ludwig van Beethoven");
    }

    update() {

    }
}

Structure finale¶

Modele
│
├── index.html
├── node_module/
├── jsconfig.json
├── package-lock.json
├── package.json
└── src/
    ├── css/
    |   └── styles.css
    └── js/
        ├── init.js
        └── scenes/
            └── Intro.js

Installation de base¶

Objectif¶

Code de départ¶

Structure finale¶

Consignes¶