JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div class="box">
    <div class="score"></div>
    <div class="coin"></div>
</div>

CSS

html, body {
    margin:0px;
}
.box {
    width:1000px;
    height:500px;
    position:relative;
    border:1px solid blue;
    left:50%;
    margin-left:-500px;
    overflow:hidden;
}
.player {
    width:100px;
    height:100px;
    position:absolute;
    background:green;
}
.box .score {
    position: absolute;
    width:100%;
    text-align:center;
    z-index:99999;
    color:orange;
}
.box .coin {
    width:50px;
    height:50px;
    position:absolute;
    background: yellow;
    left: 700px;
    top: 400px;
}

JavaScript

var player = "<div class='player'></div>";
$(".box").append(player);

var score = 0;
$(".score").text(score);

$(document).keydown(function (e) {

    var position = $(".player").position();

    if (position.left >= 600 && position.top >= 300) {
        if (position.left < 750 && position.top < 450) {
            score = score + 10;
            $(".score").text(score);
            $(".coin").remove();
        }
    }

    if (score < 0) {
        alert("Game Over");
    } else {
        if (e.keyCode == 37) { // Left
            if (position.left <= 0) {
                console.log("left stuck");
                $(".box").css('border', '1px solid red');
            } else {
                $(".player").css('left', position.left - 20 + 'px');
                $(".box").css('border', '1px solid blue');
            }
        } else if (e.keyCode == 38) { // Top
            if (position.top <= 0) {
                console.log("top stuck");
                $(".box").css('border', '1px solid red');
            } else {
                $(".player").css('top', position.top - 20 + 'px')
                $(".box").css('border', '1px solid blue');
            }
        } else if (e.keyCode == 39) { // Right
            if (position.left >= 900) {
                console.log("right stuck");
                $(".box").css('border', '1px solid red');
            } else {
                $(".player").css('left', position.left + 20 + 'px');
                $(".box").css('border', '1px solid blue');
            }
        } else if (e.keyCode == 40) { // Down
            if (position.top >= 400) {
                console.log("bottom stuck");
                $(".box").css('border', '1px solid red');
            } else {
                $(".player").css('top', position.top + 20 + 'px');
                $(".box").css('border', '1px solid blue');
            }
        }
    }
});