CODEWITHSUNDEEP
javascripthtmlcss
Drummer Gaines
Drummer Gaines

Reputation: 35

after an animation, page will not reload

I'm creating a little bike dude that runs across the screen and when the mouse touches it, it is supposed to stop and look at you. its running, turning, and stopping fine, but when it stops the image of him looking at us is not working. Also, when I try to reload the page, it doesn't. I think there is a loop or something preventing it from reloading. 

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();

here is my 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>

here is my 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>

here are the animation images I am using: enter image description here enter image description here enter image description here

Upvotes: 1

Views: 76

Answers (1)

user120242
user120242

Reputation: 15268

So a couple problems. Floating point error.
How to deal with floating point number precision in JavaScript?
0.1 is one of those numbers that will cause that problem.
I've gone and dealt with quick and dirty by using Math.abs and comparing difference to < 0.01.

The other problem is your use of lastSpeed. mouseover might sometimes occur at a speed of 0, which causes the loop to get stuck forever, and would cause the direction to be wrong. So I've added a || so that it will ignore 0 speed.

Your 0.1 easing should probably be placed in a rAF loop, as it is right now a blocking operation, so it doesn't function as you intend it to. And/or a timeout loop.

And an idea that you might want to consider is to use a CSS transition to do the easing slowdown for you.

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>

Upvotes: 2

Related Questions