JSFiddle - React, Tailwind, and code Playground

HTML

<link href=fiddle.css rel="stylesheet" type="text/css">
Press Spacebar to create a Yoshi.<br>
Click on a yoshi to control it.

<div id="background1"></div>
<div id="background2"></div>

<div id="yoshi"></div>

<script src=http://code.jquery.com/jquery-1.6.4.js></script>
<script src=fiddle.js></script>

CSS

#background1 {
    background-image: url(http://i52.tinypic.com/293kp50.gif);    
    
    left:0px;
    
    width: 512px;
    height: 317px;
    position:absolute;    
}
#background2 {
    background-image: url(http://i52.tinypic.com/293kp50.gif);   
    
    left: 512px;
    
    width: 512px;
    height: 317px;
    position:absolute;    
}

#yoshi {
    background: url(http://i53.tinypic.com/bdwhat.gif);
    width: 64px;
    height: 64px;
    position: absolute;
    top: 250px;
    left: 50px;
}

JavaScript

/*jslint devel: true, regexp: true, browser: true, confusion: true, continue: true, sloppy: true, white: true, maxerr: 50, indent: 4 */

/*global $ */

/*properties
    append, cancelBubble, characterSpeed, css, currentPosition, doAnimation, 
    hide, id, isAnimationRunning, isCharacterMovingLeft, 
    isCharacterMovingRight, keyCode, keydown, keypress, keyup, left, log, 
    mousedown, moveCharacter, movingLeftIntervalID, movingRightIntervalID, 
    offset, preventDefault, random, ready, returnValue, spriteHeight, 
    startAnimation, stopAnimation, stopPropagation, toggleAnimation, top, 
    yoshiKeyDownLeft, yoshiKeyDownRight, yoshiKeyUpLeft, yoshiKeyUpRight, 
    yoshiSprite
*/


$(document).ready(function() {
    //to hide the (necessary) original <img> yoshi
    $("#yoshi").hide();
    
    //declare some initial variables
    var currentFrame   = 0,
        intervalID     = 0,
        animationSpeed = 66,
    
        selectedYoshi,
        creationID    = 0,
        yoshiArr      = [0],
        spriteImage;
    
    //hide scrollbar in chrome
    $("body").css("overflow", "hidden");
    // Prevent Firefox from scrolling when an arrow key is pressed.
    $(window).keypress(function() {
        return false;
    });

    //get the sprite image from what's currently set in css
    spriteImage = $("#yoshi").css("background-image").slice(4, -1);
    
    function selectYoshi(id) {
        //prevents a never clearing setInterval when you hold down an arrow key while clicking another yoshi
        if (selectedYoshi) {
            selectedYoshi.yoshiKeyUpLeft();
            selectedYoshi.yoshiKeyUpRight();
        }

        selectedYoshi = yoshiArr[id];
        console.log(selectedYoshi);
    }
    
    //Yoshi class
    function YoshiObj(creationID) {
        this.isCharacterMovingLeft  = false;
        this.isCharacterMovingRight = false;
        
        this.isAnimationRunning = false;
        
        this.movingLeftIntervalID  = 0;
       ...