JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.10.2/phaser.js"></script>

JavaScript

var game = new Phaser.Game(500, 300, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update});

var crouchFlag = false;


function preload() {

    game.stage.backgroundColor = '#85b5e1';


    game.load.spritesheet('player', 'https://upload.cc/i1/2018/03/25/mPOS5X.png',45,65);
    
    game.load.image('button', 'https://upload.cc/i1/2018/03/25/uKeZf5.png'); 
}

function create() {

    player = game.add.sprite(100, 100, 'player');
    player.customParams = {};
    cursors = game.input.keyboard.createCursorKeys();
    crouchAnim = player.animations.add('crouch', [0,  1, 2, 3], 10, false);
    crouchAnim.onComplete.add(function () {
          crouchFlag = false; 
        });
    
   Button1 = game.add.button(game.width - 200, game.height - 120, 'button');  
    
    Button1.scale.setTo(0.5);
    
    //attack
     //right

    Button1.events.onInputDown.add(function(){
    player.customParams.isCrouch = true;
    }, this);
    Button1.events.onInputOver.add(function(){
    player.customParams.isCrouch = false;
    }, this);
    Button1.events.onInputUp.add(function(){
    player.customParams.isCrouch = false;
    }, this);
    Button1.events.onInputOut.add(function(){
    player.customParams.isCrouch = false;
    }, this);
}

function update () {
  if (cursors.down.isDown || player.customParams.isCrouch)
        {
     crouchFlag = true;       
        } else{
            
        }   
    
console.log(crouchFlag);    
 if (crouchFlag) {    
   player.animations.play('crouch');
 } else{
     player.frame = 0;
 }
}