JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.crafty-modules.com/crafty-DEBUG.js"></script>

JavaScript

Crafty.init(500,500);
Crafty.scene("ExampleGame", function()
{
    Crafty.background("#000");
    //Load a background map
    var worldBkg = Crafty.e("2D, DOM, Image")
    worldBkg.attr({  w:1280, h:1280, x: 0, y: 0  })
    worldBkg.image("http://opengameart.org/sites/default/files/Arkanos.png", "no-repeat");
    //found at: http://opengameart.org/content/mage-city-arcanos
    //Create a basic player sprite
    var playerRef = Crafty.e("2D, DOM, Image, Keyboard")
    playerRef.attr({x: 30*16, y: 30*16, w: 32, h: 32})
    playerRef.image("http://www.lorestrome.com/trash/oldgamefiles/steamy.gif", "no-repeat");
    //bind some keyboard events to the player entity
    playerRef.bind("KeyDown", function()
    {
        if (playerRef.isDown('LEFT_ARROW')) {  playerRef.x=playerRef.x-32;  }   
        else if (playerRef.isDown('RIGHT_ARROW')) {  playerRef.x=playerRef.x+32;  }          
        else if (playerRef.isDown('UP_ARROW')) {  playerRef.y=playerRef.y-32;  }          
        else if (playerRef.isDown('DOWN_ARROW')) {  playerRef.y=playerRef.y+32;  }
        //bound constrain the player to the map's size
        //(1280mapSize-48playerRefSize=1248boundary)
        if (playerRef.x < 0){  playerRef.x = 0  } else  //west check
        if (playerRef.x > 1248) {  playerRef.x = 1248  }  //east check
        if (playerRef.y < 0){  playerRef.y = 0  } else  //north check
        if (playerRef.y > 1248) {  playerRef.y = 1248  }  //south check 
    });
    Crafty.viewport.clampToEntities = false;
    Crafty.viewport.centerOn(playerRef,0);
    Crafty.viewport.follow(playerRef, 0, 0);
})
Crafty.scene("ExampleGame");