после анимации страница не перезагружается - PullRequest
Новая
       0

после анимации страница не перезагружается

1 голос
/ 05 мая 2020

Я создаю маленького велосипедиста, который бегает по экрану, и когда мышь касается его, он должен останавливаться и смотреть на вас. его бег, поворот и остановка прекрасны, но когда он останавливается, его изображение, смотрящее на нас, не работает. Кроме того, когда я пытаюсь перезагрузить страницу, этого не происходит. Думаю есть al oop или что-то мешает его перезагрузке. 

let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 100;
let mX = 0;
let mY = 0;

//flipping and animating
function move() {
    x += speed;
    document.getElementById('riding').style.left=(x + "px");
    if (x + document.getElementById('riding').style.width >= window.innerWidth - 100) {
        speed = -5;
        document.getElementById('riding').style.transform="rotateY(150deg)";
    }
    if (x <= 0) {
        speed = 5;
        document.getElementById('riding').style.transform="rotateY(0deg)";
    }
    if (speed == 0) {
        document.getElementById('riding').src="stop.gif"; console.log('hi')
        setTimeout(reset, 2000);
    }
    requestAnimationFrame(move);
}

//mouse move collision detection
window.addEventListener('mousemove', function(e) {
    mX = e.clientX;
    mY = e.clientY;
    if (mX >= x && mX <= x + 100 && mY >= y && mY <= y + 100) {
        lastspeed = speed;
        if (counter == 0) {
        slow();
        counter = 1;
        }
    }
});

//braking it
function slow() {
    document.getElementById('riding').src="brake.gif";
    do {
        if (speed > 0){
            speed -= 0.1;
        } else if(speed < 0) {
            speed += 0.1;
        }
    } 
    while (speed !== 0);
}

//reset
function reset() {
    document.getElementById('riding').src="riding.gif";

    do {
        if (lastspeed > 0) {
            speed += 0.1;
        } else if (lastspeed < 0) {
            speed -= 0.1;
        }
    }
    while(speed !== 5 || speed !== -5);
    counter = 0;
}
move();

вот мой html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h6 id="message">this is working</h6>
    <img src="riding.gif" alt="riding" id="riding">
    <script src="rider.js"></script>
</body>
</html>

вот мой css

body{
    margin: 0px;
}
#riding{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 100px;
    left: 0px;
    transform: rotateY(0deg);
}
#message{
    position: absolute;
    top: 0;
    left: 0;
}



let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 100;
let mX = 0;
let mY = 0;

//flipping and animating
function move() {
    x += speed;
    document.getElementById('riding').style.left=(x + "px");
    if (x + document.getElementById('riding').style.width >= window.innerWidth - 100) {
        speed = -5;
        document.getElementById('riding').style.transform="rotateY(150deg)";
    }
    if (x <= 0) {
        speed = 5;
        document.getElementById('riding').style.transform="rotateY(0deg)";
    }
    if (speed == 0) {
        document.getElementById('riding').src="stop.gif"; console.log('hi')
        setTimeout(reset, 2000);
    }
    requestAnimationFrame(move);
}

//mouse move collision detection
window.addEventListener('mousemove', function(e) {
    mX = e.clientX;
    mY = e.clientY;
    if (mX >= x && mX <= x + 100 && mY >= y && mY <= y + 100) {
        lastspeed = speed;
        if (counter == 0) {
        slow();
        counter = 1;
        }
    }
});

//braking it
function slow() {
    document.getElementById('riding').src="brake.gif";
    do {
        if (speed > 0){
            speed -= 0.1;
        } else if(speed < 0) {
            speed += 0.1;
        }
    } 
    while (speed !== 0);
}

//reset
function reset() {
    document.getElementById('riding').src="riding.gif";

    do {
        if (lastspeed > 0) {
            speed += 0.1;
        } else if (lastspeed < 0) {
            speed -= 0.1;
        }
    }
    while(speed !== 5 || speed !== -5);
    counter = 0;
}
move();
body{
    margin: 0px;
}
#riding{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 100px;
    left: 0px;
    transform: rotateY(0deg);
}
#message{
    position: absolute;
    top: 0;
    left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h6 id="message">this is working</h6>
    <img src="riding.gif" alt="riding" id="riding">
    <script src="rider.js"></script>
</body>
</html>

вот используемые мной анимационные изображения: enter image description here enter image description here enter image description here

1 Ответ

2 голосов
/ 05 мая 2020

Итак, пара проблем. Ошибка с плавающей запятой.
Как справиться с точностью чисел с плавающей запятой в JavaScript?
0,1 - одно из тех чисел, которые вызывают эту проблему.
Я пошел и разобрался с быстрым и грязным, используя Math.abs и сравнивая разницу с <0,01. </p>

Другая проблема - это использование вами lastSpeed. наведение мыши иногда может происходить со скоростью 0, что приводит к зависанию l oop навсегда и может привести к неправильному направлению. Итак, я добавил || так что он будет игнорировать скорость 0.

Вашу динамику 0,1, вероятно, следует поместить в rAF l oop, поскольку сейчас это операция блокировки, поэтому она не работает так, как вы предполагали. И / или тайм-аут l oop.

И идея, которую вы, возможно, захотите рассмотреть, - это использовать переход CSS, чтобы замедлить замедление за вас. 

let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 100;
let mX = 0;
let mY = 0;

//flipping and animating
function move() {
    x += speed;
    document.getElementById('riding').style.left=(x + "px");
    if (x + document.getElementById('riding').style.width >= window.innerWidth - 100) {
        speed = -5;
        document.getElementById('riding').style.transform="rotateY(150deg)";
    }
    if (x <= 0) {
        speed = 5;
        document.getElementById('riding').style.transform="rotateY(0deg)";
    }
    if (speed == 0) {
        document.getElementById('riding').src="stop.gif";
        setTimeout(reset, 2000);console.log('hi');
    }
    else requestAnimationFrame(move);
}

//mouse move collision detection
window.addEventListener('mousemove', function(e) {
    mX = e.clientX;
    mY = e.clientY;
    if (mX >= x && mX <= x + 100 && mY >= y && mY <= y + 100) {
        lastspeed = speed || lastspeed;
        if (counter == 0) {
        slow();
        counter = 1;
        }
    }
});

//braking it
function slow() {
    document.getElementById('riding').src="brake.gif";
    do {
        if (speed > 0){
            speed -= 0.1;
        } else if(speed < 0) {
            speed += 0.1;
        }
    } 
    while (Math.abs(speed)>0.01);
    speed=0;
}

//reset
function reset() {
    document.getElementById('riding').src="riding.gif";

    do {
        if (lastspeed > 0) {
            speed += 0.1;
        } else if (lastspeed < 0) {
            speed -= 0.1;
        }console.log(lastspeed,speed);
    }
    while(5-Math.abs(speed) > 0.01);
    move();
    counter = 0;
}
move();
body{
    margin: 0px;
}
#riding{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 100px;
    left: 0px;
    transform: rotateY(0deg);
}
#message{
    position: absolute;
    top: 0;
    left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h6 id="message">this is working</h6>
    <img src="riding.gif" alt="riding" id="riding">
    <script src="rider.js"></script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...