javascript заставить объект двигаться постепенно, а не мгновенно

Question

Я пытаюсь построить игру. Очень похоже на космических захватчиков, но без стрельбы, вместо этого он будет избегать движущихся захватчиков. Я назвал их вирусом короны :) Вирусы должны двигаться постепенно, чтобы герой мог попытаться избежать их удара, но вирусы перемещаются мгновенно в случайное положение. Как сделать так, чтобы он постепенно переходил в случайную точку?

Вот мой JS код

var henryLocation = {
    top: 700,
    left: 700
}

var coronaLocation = [
    {
        top: 0,
        left: 100
    }, 
    {
        top: 0,
        left: 300
    }, 
    {
        top: 0,
        left: 500
    }
    ]

document.onkeydown = function (evt) {
    console.log(evt)
    if (evt.keyCode === 38 && henryLocation.top > 10) {
        henryLocation.top = henryLocation.top - 10
    } else if (evt.keyCode === 40 && henryLocation.top < 700) {
        henryLocation.top = henryLocation.top + 10
    } else if (evt.keyCode === 37 && henryLocation.left > 10) {
        henryLocation.left = henryLocation.left - 10
    } else if (evt.keyCode === 39 && henryLocation.left < 1360) {
        henryLocation.left = henryLocation.left + 10
    }
    moveHenry()
}


function moveHenry () {
    document.getElementById('henry').style.top = henryLocation.top + 'px'
    document.getElementById('henry').style.left = henryLocation.left + 'px'
}

function locateCorona () {
    document.getElementById('corona').innerHTML = ""
    for (let i = 0; i < coronaLocation.length; i ++) {
        document.getElementById('corona').innerHTML += `<div class="corona1" style='top:${coronaLocation[i].top}px; left:${coronaLocation[i].left}px'}}></div>`
    }
}

const startBtn = document.getElementById('btn-start')
startBtn.addEventListener("click", startMoveCorona)

function startMoveCorona () {
    setInterval(movingCorona, 1000)
    function movingCorona () {
    const randomTop = Math.floor(Math.random()*600)
    const randomLeft = Math.floor(Math.random()*1300)
    for (let i = 0; i < coronaLocation.length; i++) {
        if (coronaLocation[i].top < 700 && coronaLocation[i].left < 1360) {
            coronaLocation[i].top = randomTop
            coronaLocation[i].left = randomLeft
        } else if (coronaLocation[i].top > 10 && coronaLocation[i].left > 10) {
            coronaLocation[i].top--
            coronaLocation[i].left--
        }
       }
    }
}

function gameLoop () {
    setTimeout(gameLoop, 1000)
    moveHenry()
    locateCorona()
}

gameLoop()

Answer 1

Лучше всего использовать переходы CSS. Например:

transition: top .5s ease, left .5s ease;

См. Демонстрацию ниже:

// Prepare vars
var $object = document.getElementById('object');
var $btn = document.getElementById('btn');
var w = window.innerWidth, h = window.innerHeight;

// Attach a click handler to the button
$btn.addEventListener('click', function (event) {
  // Modify the object's position to a random one within the window
  $object.style.top = Math.floor(Math.random() * h) + 'px';
  $object.style.left = Math.floor(Math.random() * w) + 'px';
}, false);

#object {
  position: absolute;
  top: 50px;
  left: 30px;
  width: 20px;
  height: 20px;
  background: red;
  transition: top .5s ease, left .5s ease;
}

<div id="object"></div>
<button id="btn">Move randomly</button>