JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<span class="fontawesome-home button"></span>
<span class="fontawesome-refresh button" id="replay-bttn"></span>
<span class="fontawesome-plus button" id="new-bttn"></span>
<canvas id="canvas"></canvas>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

body {
    overflow:hidden;
    background:#DFE5E8;
}

#canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:rgba(255,255,255,0.3);
}

.square {
    display:inline-block;
    color:black;
    width:60px;
    height:60px;
    text-align:center;
    margin:0px 3px;
    position:relative;
    line-height:0;
    font-weight:bold;
    font-size:44px;
    border-radius:5px;
}
.square:before {
    position:absolute;
    top:0px;
    left:0px;
    width:60px;
    height:60px;
    background:#7FA2B0;
    content:' ';
    display:block;
    border-radius:5px;
    z-index:-1;
}
.square span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:300;
    color:rgba(255,255,255,0.8);
}
.square.end {
    background:#5CC465;
}

.button {
    display:inline-block;
    background:#152024;
    width:60px;
    height:60px;
    font-size:38px;
    position:relative;
    cursor:pointer;
    border-radius:5px;
}
.button:before {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    color:#CCE6ED;
}
#player {
    position:absolute;
    top:0px;
    left:0px;
    width:60px;
    height:60px;
    background:#E0A35C;
    z-index:200;
    border-radius:5px;
}

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

JavaScript

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

// End of requestAnimationFrame polyfill

function logArray(a) {
    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d");
    console.log(String(20 + 30 * a.length) + "px");
    canvas.width = 20 + 30 * a.length;
    canvas.height = 20 + 30 * a.length;
    for (i = 0; i < a.length; i++) {
        for (n = 0; n < a[i].length; n++) {
            ctx.fillRect(i * 30, n * 30, 26, 26);
        }
    }
}

var player = {
    // functions are defined later
    x: 0,
    y: 0,
    transition: {
        x: 0,
        y: 0
    }
};
var board = []; // 2D array containing board
var oldBoard;
var boardData = { // Random info about board
    startX: 0,
    startY: 0,
    endX: 0,
    endY: 0
};
var inputDir =...