JSFiddle - React, Tailwind, and code Playground

by georgie

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.2.1/phaser.js"></script>

JavaScript

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create, update: update });
 
    var spaceButton;
    var currentEnergy = 0;
    var MAX_ENERGY = 500;
 
    var chargingEnergyGraphic;
    var previousChargingEnergyGraphic;
 
    function create() {
        chargingEnergyGraphic = game.add.graphics(0, 0);
        previousChargingEnergyGraphic = game.add.graphics(0, 0);
 
        var graphics = game.add.graphics(0, 0);
        graphics.lineStyle(2, 0xFF0000, 1);
        graphics.drawRect(50, 50, 500, 20);
 
        spaceButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
 
    }
 
    function update() {
        if (spaceButton.isDown && currentEnergy <= MAX_ENERGY) {
            currentEnergy += 10;
 
            chargingEnergyGraphic.clear();
 
            chargingEnergyGraphic.beginFill(0xFF0000);
            chargingEnergyGraphic.lineStyle(2, 0xFF0000, 1);
            chargingEnergyGraphic.drawRect(50, 50, currentEnergy, 20);
            chargingEnergyGraphic.endFill();
        }

        if (spaceButton.justUp) {
            trackPreviousEnergy();
        }
    }
 
    function trackPreviousEnergy() {;
        chargingEnergyGraphic.clear();
 
        previousChargingEnergyGraphic.clear();
 
        previousChargingEnergyGraphic.alpha = 0.5;
        previousChargingEnergyGraphic.beginFill(0xFF0000);
        previousChargingEnergyGraphic.drawRect(50, 50, currentEnergy, 20);
        previousChargingEnergyGraphic.endFill();
 
        currentEnergy = 0;
    }