JSFiddle - React, Tailwind, and code Playground

by Hive7

HTML

<div class='game'>
    <div class='character'></div>
</div>

CSS

.character {
    background: blue;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 94px;
    left: 115px;
}
.game {
    width: 400px;
    height: 400px;
    border: solid 1px #ccc;
    position: relative;
    background-image: url(http://s18.postimg.org/gp5uzkwah/level_1.jpg);
}

JavaScript

// left = 37
// up = 38
// right = 39
// down = 40;
var g = $('.game');
var c = $('.character');
var interval1;
var interval2;
var interval3;
var interval4;
var level = 1;
var leftArrowPressed = false;
var upArrowPressed = false;
var rightArrowPressed = false;
var downArrowPressed = false;
var start = c.css({'left': '115px', 'bottom': '94px'});
$(document).keydown(function (e) {
    if (e.which == 37) {
        leftArrowPressed = true;
        interval1 = clearInterval(interval1);
        interval1 = window.setInterval(function () {
            if (rightArrowPressed !== true) {
                if ((c.css('left') >= '50px') && (c.css('left') <= '100px')) {
                    interval1 = clearInterval(interval1);
                    interval2 = clearInterval(interval2);
                    interval3 = clearInterval(interval3);
                    interval4 = clearInterval(interval4);
                    alert('lose');
                }
                if (c.css('left') !== '0px') {
                    c.css('left', '-=1px');
                }
                if(level === 1) {
                    if(c.css('left') === '90px') {
                        c.css({'left': '115px', 'bottom': '94px'});
                    }
                }
            }
        });
    }
    if (e.which == 38) {
        upArrowPressed = true;
        interval2 = clearInterval(interval2);
        interval2 = window.setInterval(function () {
            if (downArrowPressed !== true) {
                if (c.css('bottom') !== g.height() - c.height() + 'px') {
                    c.css('bottom', '+=1px');
                }
            }
        });
    }
    if (e.which == 39) {
        rightArrowPressed = true;
        interval3 = clearInterval(interval3);
        interval3 = window.setInterval(function () {
            if (leftArrowPressed !== true) {
                if (c.css('left') !== g.width() - c.width() + 'px') {
                    c.css('left', '+=1px');
                }
         ...