HTML5-Spiel mit Phaser.io

Präsentation zum Tutorial auf Deutsch

PDF-Download

Start repl

https://repl.it/@CoderDojoSaar/phaser-game-template


Assets: Bilder und Sprite

Repl zum Tutorial

Start-Template

<!doctype html>

<html>
<head>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.20.0/dist/phaser.js">
    </script>
</head>

<body>
    <script type="text/javascript">
        var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };
    var game = new Phaser.Game(config);
    function preload () {
    }
    function create () {
    }
   function update () {
    }
    </script>
</body>

</html>

Alle Teile des Tutorials ausprobieren

Teil 01: phaser-game.coderdojosaar.repl.co/part01.html
Teil 02: phaser-game.coderdojosaar.repl.co/part02.html
Teil 03: phaser-game.coderdojosaar.repl.co/part03.html
Teil 04: phaser-game.coderdojosaar.repl.co/part04.html
Teil 05: phaser-game.coderdojosaar.repl.co/part05.html
Teil 06: phaser-game.coderdojosaar.repl.co/part06.html
Teil 07: phaser-game.coderdojosaar.repl.co/part07.html
Teil 08: phaser-game.coderdojosaar.repl.co/part08.html
Teil 09: phaser-game.coderdojosaar.repl.co/part09.html
Teil 10: phaser-game.coderdojosaar.repl.co/part10.html

API-Dokumentation (Englisch)

Teil 1 – Phaser starten

Teil 2 – Asset (Bild) laden

Teil 3 – Bild anzeigen

Teil 4 – Physik hinzufügen

Teil 5 – Sprite hinzufügen

Teil 6 – Collider

Teil 7 – Animationen und Tastatureingaben

Teil 8 – Group, Iterator, overlap

Teil 9 – Text

Teil 10 – Active, enableBody, allowGravity