JSFiddle - React, Tailwind, and code Playground

HTML

<div id="game">
    <div id="hero"><img src="http://teh_pro.webs.com/soldier_fag.gif" /></div>
</div>

CSS

body {
    background-color: #000;
}
#game {
    position: relative;
    width: 700px;
    height: 300px;
    margin: 50px auto 0px;
    border-top: 15px solid #3a9103;
    border-left: 15px solid #3a9103;
    border-bottom: 15px solid #265f02;
    border-right: 15px solid #265f02;
    background-color: #fff;
}
#hero {
    position: absolute;
    bottom: 0px;
    left: 50px;
}

JavaScript

ffffffffffff// coded by gerelt.od, [email protected]

// Дарсан товчны цуглуулга хадгалах
game.pressedKeys = [];
// Ашиглагдах товчнуудын цуглуулга. Ингэж тодорхойлж(define) өгсөнөөр 1т товч бүрийн ASCII г санах шаардлагагүй. 2т дараа нь солих болбол шууд уг утгаа сольчихдог давуу талтай.
var KEY = {
    W: 87,    // үсрэх
    S: 83,    // суух
    A: 65,    // зүүн
    D: 68,    // баруун
    SPACE: 32, // буудах
    H: 72      // хутгалах
};
// Үндсэн баатарын обьект
game.hero = {
    speed: 3,
    // ерөнхий хурд pixel ээр
    x: 150,
    // эхлэх зай(зүүнээс)
    y: 0,
    // эхлэх өндөр(шалнаас)
    action: 'stand' // эхлэх үйлдэл
};
// Үйлдэл бүрийн спрайтыг хадгалахаар үүсгэв. Зургуудыг http://teh_pro.webs.com/sprites.htm эндээс авч ашиглана
hero.actions = {
    stand: 'http://teh_pro.webs.com/soldier_fag.gif',
    run: 'http://teh_pro.webs.com/soldier_run1.gif',
    pistol: 'http://teh_pro.webs.com/soldier_handgun.gif',    
    knife: 'http://teh_pro.webs.com/soldier_knife.gif'
};

// Дарсан товчийг массивт хийх болон гаргах үйлдэл (push, pop)
// Ингэж хийснээр давхар урсгал (thread) зохьцуулах боломжтой болдог юм.
// 30ms бол боломжын бага тоо. Хэт бага байх нь тоглоомны FPS д нөлөөлнө
$(function() {
    game.timer = setInterval(gameloop, 30);
    $(document).keydown(function(e) {
        game.pressedKeys[e.which] = true;
    });
    $(document).keyup(function(e) {
        game.pressedKeys[e.which] = false;
    });
});

// Үндсэн давталт. Үүн дотор бүх урсгал(thread) үүдээ байрлуулж өгнө.
function gameloop() {
    moveHero();
}

// Баатарын хөдөлгөөнийг хянаж удирдах
function moveHero() {
    if (game.pressedKeys[KEY.D]) {
        var left = parseInt($("#hero").css("left"), 10);
        var right = parseInt($("#hero").css("left"), 10) + parseInt($("#hero").css("width"), 10);
        if (right < parseInt($("#game").css("width"), 10)) {
            $("#hero").css("left", left + game.hero.speed);
            $("#hero img").attr('src',...