JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
		<div id="person"></div>
		<div id="velocity"></div>
		<div id="position"></div>
		<div id="pressed"></div>
	</div>

CSS

#person {

    width: 80px;
    height: 80px;
    position: absolute;
    background-image: url(http://faoor.com/account/img/back.gif);
    background-repeat: no-repeat;
    border: 1px dotted grey;
}

#point {

	position: absolute;
	left:20%;
	top:30%;
	width: 300px;
	height: 300px;
	background-color: lightgreen;
	border: 1px solid green;
}

#point {

	border: 1px solid grey;
	background-color: #ccc;
}
	html, body {
       width: 100%;
	   background: #ffe;

}
#content {
       /* максимальная ширина страницы - 600px */
       width: 600px;
	   max-width: 600px;
	   border: 1px solid;
}

JavaScript

$(document).ready(function () {
    
    // Персонаж
    var person = $("#person"),
    
    // информация о скорости, позиции и нажатых клавишах
    velocity_info = $("#velocity"),
    position_info = $("#position"),
    pressed_info = $("#pressed"),
    
    // текущее положение объекта
    position = [100, 100, 80, 80]
    position[4] = position[0] + position[2]
    position[5] = position[1] + position[3]

    // координаты точки цели и её размеры по ширине и высоте
    var point = [400, 400, 100, 100]
    point[4] = point[0] + point[2]
    point[5] = point[1] + point[3]
    var point_reached = false;
    
    // вектор скорости
    var velocity = [0, 0, 0, 0, 0 ,0],
    
    // зажатые клавиши
    pressed = [],
    
    // обработчик игровой логики (отдельный таймер, НЕ requestAnimationFrame!!!)
    calc = setInterval(calc, 0);

    $('body').append('<div id="point"></div>');
    $('#point').css({'position' : 'absolute',
                     'left' : point[0] + 'px',
                     'top' : point[1] + 'px',
                     'width' : point[2] + 'px',
                     'height' : point[3] + 'px'});

    var point_info = $("#point");

// случаем отдельно события нажатия и отжатия
$('body').on("keydown", function (event) {

    if (pressed.indexOf(event.which) === -1) {
        switch (event.which) {
            case 65: // left
                vec_add(velocity, [-2, 0]);
                break;

            case 87: // forward
                vec_add(velocity, [0, -2]);
                break;

            case 68: // right
                vec_add(velocity, [2, 0]);
                break;

            case 83: // back
                vec_add(velocity, [0, 2]);
                break;
        }
        
        pressed.push(event.which);
        
         // после отжатия клавиши перемещения персонажа обновляем его изображение и проверяем достижение им цели
        if (event.which === 65 || event.which === 87 || event.which === 68 || event.which === 83)...