JSFiddle - React, Tailwind, and code Playground

by Tiago Marinho

HTML

<script src="http://static.tumblr.com/uzcr0ts/uzIn1l1v2/easeljs-0.7.1.min.js"></script>
<p class="speed"></p>
    <build>Build 0x02</build>
    <canvas id="canvas">
        <h2>Your browser doesn't support Canvas.</h2>
        <p>Switch to <b>Chrome 33</b>, <b>Firefox 27</b> or <b>Safari 7</b>.</p>
    </canvas>

CSS

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,600' rel='stylesheet' type='text/css'> * {
            margin: 0;
        }
        html,
        body {
            -webkit-text-smoothing: antialiased;
            font-family: Verdana, arial, sans-serif;
            color: #fff;
            background-color: #181818;
        }
        build {
            position: absolute;
            bottom: 5px;
            right: 5px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.05);
        }
        canvas {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            transition: 2.5s ease;
        }
        .speed {
            opacity: 0;
            position: absolute;
            top: 5px;
            left: 5px;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            font-size: 11px;
            font-weight: 300;
            transition: 2.5s ease;
        }
        h2 {
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            font-size: 22px;
            font-weight: 700;
        }
        p {
            font-size: 11px;
            margin: 0;
        }

JavaScript

// (function() {

         // Primary vars (stage, circle, rects):
        var stage,
            circle, // Hero!
            rects = []; // Platforms
         // Velocity vars:
        var xvel = 0, // X Velocity
            yvel = 0; // Y Velocity
         // Keyvars (up, left, right, down):
        var up = false, // W or arrow up
            left = false, // A or arrow left
            right = false, // D or arrow right
            down = false; // S or arrow down
         // Other vars (maxvel):
        var maxvel = 80; // Maximum velocity

         // Main part (aka creating stage, setting circle.scales, etc):

        function init() {
            stage = new createjs.Stage("canvas");

            circle = new createjs.Bitmap("http://i.imgur.com/fCq5GJT.png"); // Width = 33, height = 33;
            circle.scaleX = 0.66; // circle.image.height = 33*0.66 = 21.78;
            circle.scaleY = 0.66; // circle.image.height = 33*0.66  = 21.78;

            $(window).load(function(){
                $(".speed").css({
                    opacity: 1
                });
                $("canvas").css({
                    opacity: 1
                });
            });

            // Creating rects:

            setTimeout(function () {
                // newobj(W, H, X, Y)
                newobj(250, 5, stage.canvas.width / 2 - 125, stage.canvas.height / 4 * 3 - 5);
                newobj(250, 250, stage.canvas.width / 2 - 125, stage.canvas.height / 4 * 3 - 5);
            }, 75); // Wait until first tick finishes and stage is resized to 100%, then calculate the middle of canvas.

            // Creating the circle (aka the hero):

            setTimeout(function () {
                circle.y = Math.round(stage.canvas.height / 2 - (height(circle) / 2));
                circle.x = Math.round(stage.canvas.width / 2 - (width(circle) / 2));
                stage.addChild(circle);
            }, 75) // Wait until first tick finishes and stage is resized to 100%, then...