JSFiddle - React, Tailwind, and code Playground

HTML

<div id="roller" tabindex="1">
        <div id="plane"></div>
    <span id="ball" ></span>
     <div id="level"></div>
        <div id="splash">
            <div></div>
        </div>
    </div>

CSS

body {
    background: #000;
}
#roller {
    background: #000;
    position: absolute;
    width: 600px;
    height: 400px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -300px;
    z-index: 10000;
}
#ball {
    position: absolute;
    left: 292px;
    top: 192px;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background: url(http://www.ledr.com/colours/red.jpg) scroll;
    box-shadow: inset -5px -5px 5px rgba(0,0,0,.5);
}
#plane {
    position: absolute;
}
.tile {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: green;
}
.tile2 {
    background-color: yellow;
}
.tile12 {
    background-color: blue;
}
.tile13 {
    background-color: red;
}
#level {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}
#back {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    top: 10px;
    right: 10px;
}
#splash {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 400px;
    background-color: blue;
    overflow: hidden;
}
#splash div {
    margin: 280px 50px 0;
    text-align: center;
}
#splash div a {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #666;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    display: inline-block;
}
#splash div a:hover {
    background-color: #666;
}

JavaScript

var roller = function () {
    var timer,
        events = {
            timers: [],
            keys: []
        },
        level = 0,
        keys = {
            38: false,
            40: false,
            37: false,
            39: false
        },
        clock = function() {
            for (var i=0, lng = events.timers.length; i<lng; i++) {
                events.timers[i](keys);
            }
        },
        keyUp = function(ev) {
            if (keys[ev.keyCode] === true) {
                keys[ev.keyCode] = false;
                clock();
            }
        },
        keyDown = function(ev) {
            if (keys[ev.keyCode] === false) {
                keys[ev.keyCode] = true;
                clock();
            }
        },
        start = function() {
            $("#level").text('Level: '+(level+1));
            plane.loadLevel(level);
            ball.go();
        },
        selectLevel = function(ev) {
            if ($(ev.target).is('a')) {
                level = $('#splash a').index(ev.target);
                start();
                $('#splash').animate({
                    top: -400
                }, 600, 'easeOutBounce');
            }
            return false;
        },
        showSplash = function() {
            $('#splash').animate({
                top: 0
            }, 600, 'easeOutBounce');
            return false;
        };
    return {
        init: function() {
            var html = [];
            $.each(levels, function(nr) {
                html.push('<a href="#">');
                html.push(nr+1);
                html.push('</a>');
            });
            $('#splash')
                .find('div').html(html.join('')).end()
                .bind('click', selectLevel);
            $('#back').bind('click', showSplash);
            plane.init();
            ball.init();
            $('#roller')
                .bind('keydown', keyDown)
                .bind('keyup', keyUp)
                .focus();
           ...