NatureOfCode2/phaser4.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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<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 G = 25;

            const WIDTH = 800;
            const HEIGHT = 600;
            var config = {
                type: Phaser.AUTO,
                width: WIDTH,
                height: HEIGHT,
                physics: {
                    default: 'arcade',
                    arcade: {
                        debug: false
                    }
                },
                scene: {
                    create: create,
                    update: update,
                }
            };

            const game = new Phaser.Game(config);
            var triangles = [];
            var sun = null;

            function attract(circle, triangle) {
                let force = circle.body.position.clone().subtract(triangle.body.position);
                let distanceSq = p5.prototype.constrain(force.lengthSq(), 100, 1000);
                let strength = G * (circle.body.mass * triangle.body.mass) / distanceSq;
                force.setLength(strength);
                triangle.body.setAcceleration(force.x, force.y);
            }

            function create() {
                for (let i = 0; i < 10; i++) {
                    triangles.push(this.add.triangle(p5.prototype.random(0, WIDTH), p5.prototype.random(0, HEIGHT), 0, 0 , 0, 64, 80, 32, 0x6666ff));
                    this.physics.add.existing(triangles[i]);
                    var vel = p5.Vector.random2D().mult(p5.prototype.random(50, 250));
                    triangles[i].body.setVelocity(vel.x, vel.y);
                    triangles[i].body.setSize(100, 100);
                    triangles[i].body.setMass(50);
                }
                sun = this.add.circle(WIDTH / 2 - 25, HEIGHT / 2 - 25, 50, 0xff0000);
                this.physics.add.existing(sun);
                sun.body.setImmovable(true);
                sun.body.setMass(100);
            }

            function update() {
                for (const triangle of triangles) {
                    triangle.rotation = triangle.body.velocity.angle();
                    attract(sun, triangle);
                }
            }
        </script>
    </head>
</html>