NatureOfCode2/phaser3.html at master · brlebtag/NatureOfCode2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
    <head>
        <title>Phaser 3: Gravity</title>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
        <!--
            It is not possible to have a circle using arcade!
            https://www.reddit.com/r/phaser/comments/dbj8ev/making_a_simple_circle_when_using_arcade_physics/
        -->
        <script>
            const WIDTH = 800;
            const HEIGHT = 600;
            var config = {
                type: Phaser.AUTO,
                width: WIDTH,
                height: HEIGHT,
                physics: {
                    default: 'arcade',
                    arcade: {
                        gravity: { y: 200 },
                        debug: true
                    }
                },
                scene: {
                    create: create,
                    update: update,
                }
            };

            const game = new Phaser.Game(config);
            var triangle;

            function create() {
                this.physics.world.setBounds(0, 0, WIDTH, HEIGHT);
                triangle = this.add.triangle(0, 0, 0, 0 , 0, 64, 80, 32, 0x6666ff);
                this.physics.add.existing(triangle);
                triangle.body.setVelocity(100, 0);
                triangle.body.setGravity(0, 100);
                triangle.body.setBounce(1, 1);
                triangle.body.setSize(100, 100);
                triangle.body.setCollideWorldBounds(true);
            }

            function update() {
                triangle.rotation = triangle.body.velocity.angle();
            }
        </script>
    </head>
</html>