JSFiddle - React, Tailwind, and code Playground

by rvaldez

HTML

<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<body>
    <div class="description"></div>
    <div class="canvasHolder">
        <canvas id="game" width="240" height="64" style="background-color:#607559">Your browser doesn't support canvas. Please download IE9+ on <a href="http://ie.microsoft.com/testdrive">IE Test Drive</a> 
        </canvas>
    </div>
    <button id="Start" onclick="init();">Start</button>
    <button id="Reset" onclick="reset();">Reset</button>
</body>

JavaScript

var canvas, stage, screen_width, screen_height, bmpAnimation;

    var imgPlayerRun = new Image();

    function init() {
        //find canvas and load images. Wait for last image to load
        alert("Init is being run");
        canvas = document.getElementById("game");
        canvas.style.background = "white";
        imgPlayerRun.onload = handleImageLoad;
        imgPlayerRun.onerror = handleImageError;
        imgPlayerRun.src = "http://s8.postimg.org/r8i7knr91/test_player_run.png";
    }

    function reset () {
        stage.removeAllChildren();
        createjs.Ticker.removeAllListeners();
        stage.update();
    }

    function handleImageLoad(e) {
        startGame();
    }

    function startGame() {
        alert("startGame is being run");
        stage = new createjs.Stage("canvas");

        //grab canvas width and height for later calculations
        screen_width = canvas.width;
        screen_height = canvas.height;

        //create spritesheet and assign associated data
        var spriteSheet = new createjs.SpriteSheet({
            //image to use
            images: [imgPlayerRun],
            //width height and registration point of each sprite
            frames: {
                width: 47,
                height: 47,
                regX: 32,
                regY: 32
            },
            animations: {
                walk: [0, 9, "walk"]
            }
        });

        //create bitmap animation instance to display the playback the animation sequence
        bmpAnimation = new createjs.BitmapAnimation(spriteSheet);

        //start playing the first sequence
        bmpAnimation.gotoAndPlay("walk"); //animate!!!

        //set up  a shadow - note shadows are ridiculously resource intensive - use if necessary only
        bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4);

        bmpAnimation.name = player1;
        bmpAnimation.direction = 90;
        bmpAnimation.vX = 4;
        bmpAnimation.x = 16;
       ...