JSFiddle - React, Tailwind, and code Playground

by shohan4556

HTML

<script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Meteor</title>
    
</head>
<body>
    <div id="gameContainer" ></div>
        
</body>
</html>

JavaScript

var game = new Phaser.Game(600,500,Phaser.CANVAS,'gameContainer');

    var GameState = function(game) {
        this.stoneGroup = null;
    };

    GameState.prototype = {
        
          preload: function(){
            this.load.spritesheet('stone','http://s8.postimg.org/uemiyw52d/stone.png',72,72);    
            this.load.image('bg','http://s8.postimg.org/prggx4hph/background.jpg');    
          },
        
        create: function(){
            this.physics.startSystem(Phaser.Physics.ARCADE);
            this.add.sprite(0,0,'bg');    
            this.handlestone();  
        },
        
        handlestone: function(){
            this.stoneGroup = this.add.physicsGroup(Phaser.Physics.ARCADE);
            for(var i=0;i<=5;i++){
                var stn = this.stoneGroup.create(this.rnd.integerInRange(20,550),this.rnd.integerInRange(0,-50),'stone');
                    stn.body.velocity.x = this.rnd.integerInRange(-50,-120);
                    stn.body.velocity.y = this.rnd.integerInRange(50,150);
            }
            
             this.stoneGroup.setAll('anchor.setTo',0.5);
             this.stoneGroup.setAll('body.setSize',55,55,0,0);
           // this.stoneGroup.setAll('body.velocity.y',this.rnd.integerInRange(-50,100));
            
            this.stoneGroup.callAll('animations.add','animations','rotate',[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18], this.rnd.integerInRange(12,50), true);
            this.stoneGroup.callAll('animations.play','animations','rotate');
            //this.stoneGroup.setAll('outOfBoundsKill',true);
            //this.stoneGroup.setAll('checkWorldBounds',true);
        },
        
        wrapStone: function(stone){
             if(stone.y>500){
                 stone.x = this.rnd.integerInRange(-20,550);
                 stone.y = this.rnd.integerInRange(0,-50);
             }
        },
        
        update: function(){
          this.physics.arcade.overlap(this.stoneGroup);     
       ...