JSFiddle - React, Tailwind, and code Playground

by nils_r

HTML

<script src="https://raw.github.com/louisstow/Crafty/master/crafty-min.js"></script>

CoffeeScript

settings = # {{{
  width      : 500
  height     : 300
  tileSize   : 10
  startSpeed : 1
  tileSize   :
    w        : 25
    h        : 25
# }}}
# }}}

# Components {{{
# Basics {{{
Crafty.c "Basics",
  init: ->
    @addComponent "2D, Canvas, Collision"
# }}}
# Wall {{{
Crafty.c "Wall",
  init: -> 
    @requires "Basics, solid, Color"
    @color 'blue'

  wall: (dimensions) ->
    @x = dimensions.x
    @y = dimensions.y
    @w = dimensions.w
    @h = dimensions.h
# }}}
# Player {{{
Crafty.c "Player",
  init: ->
    @requires "Basics, solid, Color, Gravity"

    @w = 24
    @h = 24
    @color "green"
    @gravity "Floor"
    @bind "EnterFrame", ->
      Crafty.viewport.y = ( @y * -1  )
      Crafty.viewport.y += settings.tileSize.w
# }}}
# Floor # {{{
Crafty.c "Floor",
  init: -> 
    @requires "Basics, Gravity, solid"
# }}}
# /Components }}}

# Scenes # {{{
# load {{{
Crafty.scene "load", -> 
  Crafty.background "#000000"

  Crafty.load [ "images/sprite.png", "images/background.gif", "images/megaman.gif" ], ->
    Crafty.scene "main"
  
  Crafty.e("Text, 2D, DOM")
    .text("loading")
    .attr({
      w: 100, h: 20,
      x: Math.floor(settings.width/2), 
      y: Math.floor(settings.height/2)
    }).css('color': '#f00')
# }}}
# Main # {{{
Crafty.scene "main", ->
  generateWorld()
  player = (Crafty.e "Player, Multiway")
    .attr({
      x: Math.floor(settings.width/2)
      y: 0
      z: 100
    })
    .multiway(1.5, {
      W: -90
      S:  90
      D:   0
      A: 180
    })
    # }}}
# /Scenes }}}

generateWorld = -> # {{{
  # create wall at the left and right side of the screen
  for x in [0, settings.width-settings.tileSize.w]
    (Crafty.e "Wall").wall {
      w: settings.tileSize.w
      h: settings.tileSize.h * 200
      x: x
      y: 0
    }

    for y in [0..200/settings.tileSize.h]
      padding = if x==0 
      then x + settings.tileSize.w 
      else x - settings.tileSize.w

      (Crafty.e "Floor, Color")
        .attr({
          w:...