JSFiddle - React, Tailwind, and code Playground

by digitalicarus

HTML

<div id="action"></div>

CSS

#action {
    width: 500px;
    height: 250px;
    background: rgb(185,185,255);
    border: 1px solid black;
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: 0;
    margin-top: -125px;
    margin-left: -250px;
}

#action:hover {
    cursor: crosshair;
}

#player {
    width: 20px;
    height: 20px;
    position: absolute;
}

JavaScript

///////////////////////////////////
///                             ///
/// REMOVE IMAGE/TEXT SELECTION ///
///                             ///
///////////////////////////////////

    var ignoreFormTags=["input", "textarea", "select"]
    
    ignoreFormTags = ignoreFormTags.join("|")
    
    function disableselect(e) {
        if (ignoreFormTags.indexOf(e.target.tagName.toLowerCase()) == -1)
        return false
    }
    
    function reEnable() {
        return true
    }
    
    if (typeof document.onselectstart != "undefined")
        document.onselectstart = new Function ("return false")
    else {
        document.onmousedown=disableselect
        document.onmouseup=reEnable
    }


///////////////////////////////
///                         ///
/// GAME CONTROLS/FUNCTIONS ///
///                         ///
///////////////////////////////
    
    $(function() {
    
        // Global Varibles
        
            var health = 6;
            var speed = Math.ceil(health / 2);
            var keys = {};
    
        // Setup Level
        
            $("#action").append('<img src="http://i53.tinypic.com/nnjv9x.png" id="player" alt="" />');
    
        // Move Character
        
            $(this).stop(true, false).keydown(function(e) {
                keys[e.which] = true;
                keypressed(keys);
            });
        
            $(this).keyup(function(e) {
                delete keys[e.which];
            });
    
            function keypressed() {
        
                for (var key in keys) {
                    
                    var key_W = 87;
                    var key_w = 119;
                    var key_D = 68;
                    var key_d = 100;
                    var key_S = 83;
                    var key_s = 115;
                    var key_A = 65;
                    var key_a = 97;
        
                    // Directions - Up, Right, Left, Down
                    
                        if (key == key_W || key...