мне нужна помощь в понимании концепции. javascript onkeydown - PullRequest
Новая
       32

мне нужна помощь в понимании концепции. javascript onkeydown

0 голосов
/ 13 июля 2020

Я сделал игру на HTML и javascript. так как я новичок, я не знаю, как сделать объект go «гладким». Я имею в виду, что я создал объект, и при нажатии "onkey" он будет двигаться. проблема в том, что он застрянет на 1 секунду после нажатия клавиши, а затем продолжится. Я искал ответ и нашел то, что искал (но я не понимаю код и то, как он работает, поскольку он включает $ ... и тому подобное, с которыми я не знаком). 

    function moveLeft()
        {
            var movementy=30;
            var x = document.getElementById("ball").offsetLeft;
            x = x - movementy;
            document.getElementById("ball").style.left = x + "px";
        }

        function moveRight()
        {
            var movementy = 30;
            var x = document.getElementById("ball").offsetLeft;
            x = x + movementy;
            document.getElementById("ball").style.left = x + "px";
        }
function ballmoveup()
        {

            var movement = 3;
            var y = document.getElementById("ball").offsetTop;
            y = y - movement;
            document.getElementById("ball").style.top = y + "px";
            window.onkeydown = function (event)
            {
                if ((event.keyCode == 39))
                {
                    moveRight();
                }
                if ((event.keyCode == 37))
                {
                    moveLeft();
                }
            }

            if (y<=20)
            {
                GameEnd();
            }

Я знаю, в чем проблема, но не знаю, как правильно ее решить, понимая, что я делаю (означает «нет $»). кроме того, ballmoveup () находится внутри интервала ("ballmoveup", 10);

1 Ответ

1 голос
/ 13 июля 2020

Одна большая проблема заключается в том, что вы устанавливаете прослушиватель событий внутри ballmoveup , а сама функция вызывается каждые 10 мс внутри интервала, что означает, что вы добавляете новый прослушиватель событий каждые 10 мс.

Вы должны переместить вашу функцию eventlistener из ballmoveup .

Если вы хотите иметь анимацию (простой способ), вы можете использовать это: 

#ball {
  transition: left 0.4s;
}

Также лучше иметь состояние вашей игры в виде переменных вне функций: 

var left = 0;

, чтобы вам не приходилось вызывать это каждый раз (вы просто изменяете переменную и устанавливаете левую) 

document.getElementById("ball").offsetLeft;
...