JSFiddle - React, Tailwind, and code Playground

by snake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.0.3/phaser.min.js"></script>

JavaScript

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render:render });

        function preload () {}

        var texts = new Array();
        var text_group;
        var speed = 8
        function create() {
            var bar = game.add.graphics();
            bar.beginFill(0xff0000, 0.5);
            bar.drawRect(0, 0, 50 , 50);
            
            var mask = game.add.graphics();
            mask.beginFill(0xff0000, 0.5);
            mask.drawRect(0, 0, 50 , 50);

            bar.mask = mask
            
            var style = { font: "bold 50px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };

            text_group = game.add.group();
            var i;
            for (i = 0; i <= 8; i++) {
                texts[i] = game.add.text(10, 50 * i, i+1, style);
                text_group.add(texts[i])
            };
            
            texts[i] = game.add.text(10, 50 * i, 1, style);
            text_group.add(texts[i])
            
            console.log(text_group.y)
            console.log(text_group.hitArea )

            text_group.mask = mask
            
            bar.inputEnabled = true;
        }

        function update () {                   
            text_group.y-= speed //-= 0.01
            if(text_group.y <= -450)
            {
                text_group.y += 450
            }
        }

        function render() {}