JSFiddle - React, Tailwind, and code Playground

by john_s

HTML

<circle></circle>

CSS

body {
    -webkit-text-smoothing: antialiased;
    height: 100%;
    overflow: hidden;
    color: #fff;
    background-color: #181818;
}
circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #fff;
}

JavaScript

var yvel = 0,
    xvel = 0,
    up = false, // W or arrow up
    left = false, // A or arrow left
    right = false, // D or arrow right
    down = false; // S or arrow down
        
// Keydown:
document.addEventListener("keydown", function(evt) {
    if (evt.keyCode == 87 || evt.keyCode == 38) { // up
        up = true;
    } else if (evt.keyCode == 65 || evt.keyCode == 37) { // left
        left = true;
    } else if (evt.keyCode == 68 || evt.keyCode == 39) { // right
        right = true;
    } else if (evt.keyCode == 83 || evt.keyCode == 40) { // down
        down = true;
    }
});

// Keyup:
document.addEventListener("keyup", function (evt) {
    if (evt.keyCode == 87 || evt.keyCode == 38) { // up
        up = false;
    } else if (evt.keyCode == 65 || evt.keyCode == 37) { // left
        left = false;
    } else if (evt.keyCode == 68 || evt.keyCode == 39) { // right
        right = false;
    } else if (evt.keyCode == 83 || evt.keyCode == 40) { // down
        down = false;
    }
});
			
function bounce(vel){
    return -1 * Math.round(vel*0.5);
}

var $obj = $('circle'),
    OBJ_W = 20,
    OBJ_H = 20;

setInterval(function() {
    yvel += up ? -2 : ((yvel < 0) ? 1 : 0);
    yvel += down ? 2 : ((yvel > 0) ? -1 : 0);
    xvel += left ? -2 : ((xvel < 0) ? 1 : 0);
    xvel += right ? 2 : ((xvel > 0) ? -1 : 0);

    var offset = $obj.offset(),
        nextposy = offset.top + yvel/16,
        nextposx = offset.left + xvel/16;

    if (nextposy < 0) {
        nextposy = 0;
        yvel = bounce(yvel);
    } else if (nextposy > window.innerHeight-OBJ_H) {
        nextposy = window.innerHeight-OBJ_H;
        yvel = bounce(yvel);
    }
    if (nextposx < 0) {
        nextposx = 0;
        xvel = bounce(xvel);
    } else if (nextposx > window.innerWidth-OBJ_W) {
        nextposx = window.innerWidth-OBJ_W;
        xvel = bounce(xvel);
    }

    $obj.css({
        top: nextposy + 'px',
        left: nextposx + 'px'
    });
}, 8);