game-experiments/chest.html at main · bugout-dev/game-experiments · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 1</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

    var config = {
        type: Phaser.AUTO,
        width: 96,
        height: 96,
        physics: {
            default: 'arcade',
            arcade: {
                debug: false
            },
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var lootbox;
    var lootboxState = {
        opened: false,
    };
    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.spritesheet('lootbox', 'assets/chest.png', { frameWidth: 64, frameHeight: 64});
    }

    function create ()
    {
        lootbox = this.physics.add.sprite(48, 48, 'lootbox')
        this.anims.create({
            key: 'open',
            frames: this.anims.generateFrameNumbers('lootbox', { start: 1, end: 4 }),
            frameRate: 10,
            repeat: -1
        });
        this.anims.create({
            key: 'close',
            frames: this.anims.generateFrameNumbers('lootbox', { start: 3, end: 6 }),
            frameRate: 10,
            repeat: -1
        });


        this.anims.create({
            key: 'closed',
            frames: [ { key: 'lootbox', frame: 0 } ],
            frameRate: 20
        });

        this.anims.create({
            key: 'opened',
            frames: [ { key: 'lootbox', frame: 4 } ],
            frameRate: 20
        })

        cursors = this.input.keyboard.createCursorKeys();
    }

    function update ()
    {
        if (cursors.up.isDown)
        {
            if (!lootboxState.opened) {
                lootbox.anims.play('open', true);
                lootboxState.opened = true;
            }
        }
        else if (cursors.down.isDown)
        {
            if (lootboxState.opened){
                lootbox.anims.play('close', true);
                lootboxState.opened = false;
            }

        } else if (lootboxState.opened) {
            lootbox.anims.play('opened', true)
        }
        else {
            lootbox.anims.play('closed', true)
        }

    }

</script>

</body>
</html>