// HTML

    <div id="touch-panel"></div>
    <div id="sprite"></div>

// CSS

    body {
        overflow: hidden;
        width: 100vw;
        height: 100vh;
    }
    #touch-panel {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    #sprite {
        position: absolute;
        width: 50px;
        height: 85px;
        background-color: #000;
    }

// JS

// Идентификация панели выступающей в роли touch-pad`а ( по умолчанию - touch-panel )
var TouchPanel = document.getElementById('touch-panel');


// Отслеживание касания и последующего перемещения
TouchPanel.addEventListener("touchstart", function (e) {

    // Стартовое положение пальца
    var StartPosisionX = e.touches[0].clientX;
    var StartPosisionY = e.touches[0].clientY;

        // Отслеживание перемещения
        TouchPanel.addEventListener("touchmove", function (e) {

            // Положение после начала движения
            var positionX = e.touches[0].clientX;
            var positionY = e.touches[0].clientY;

            console.log(positionX, positionY)

            // Разницы перемещения
            positionX = StartPosisionX - positionX;
            positionY = StartPosisionY - positionY;

            // Новое стартовое положение
            StartPosisionX = e.touches[0].clientX;
            StartPosisionY = e.touches[0].clientY;

                // Передача параметров в функцию для обработки данных
                swipe(positionX, positionY);

        }, false);

}, false);

var sprite = document.getElementById('sprite');

// Обработка перемещения
function swipe( X, Y ) {

    console.log(X, Y);

    sprite.style.top = sprite.getBoundingClientRect().top - Y + "px";
    sprite.style.left = sprite.getBoundingClientRect().left - X + "px";
}