JSFiddle - React, Tailwind, and code Playground

by paperelectron

HTML

<script src="https://rawgithub.com/photonstorm/phaser/dev/build/phaser.min.js"></script>
<body>
  <div id="game"></div>
  <p id="test"></p>
</body>

CoffeeScript

player = null
controls = null

$ -> 
   preload = ->
       game.load.image('mushroom', " ")

   create = ->
        $("#test").text "created"
        game.world.setBounds(0, 0, 1400, 1400)
        textStyle =
            font: "20px Arial"
            fill: "#ffffff"
            align: "right"
        text = game.add.text(0, 0, "Wont stay put", textStyle)
        text.cameraOffset.x = 10
        text.cameraOffset.y = 10
        text.fixedToCamera = true
        player = game.add.sprite(50, 50, 'mushroom')
        player.body.collideWorldBounds = true
        game.camera.follow player
   update = ->
      left = game.input.keyboard.isDown(Phaser.Keyboard.LEFT)
      right = game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)
      down = game.input.keyboard.isDown(Phaser.Keyboard.DOWN)
      up = game.input.keyboard.isDown(Phaser.Keyboard.UP)
      any = left or right or up or down
      if any
        controls = true
        if (left)
          player.x -= 3
          player.animations.play "bounce"
        if (right)
          player.x += 3
          player.animations.play "bounce"
        if (down)
          player.y += 3
          player.animations.play "bounce"
        if (up)
          player.y -= 3
          player.animations.play "bounce"
      else
        player.animations.stop()
        controls = false
   game = new Phaser.Game(200, 100, Phaser.AUTO, "game", {preload: preload, create: create, update: update})