CODEWITHSUNDEEP
javascripthtml
JohnWick
JohnWick

Reputation: 5149

Javascript "ball" bouncing

I am a JS noob. I am getting into browser game programming and wanted to make a quick example of a ball dropping and bouncing just to learn. For some reason, when I created a jsfiddle my code actually didn't work, the onclick event for my div id="ball" didn't seem to be attaching, but when I run it in my browser it does. But that is not my question.

In this code, the user clicks the ball, which is just a div with a black bg. The div then follows the users cursor, and when the user clicks a second time, the div begins to fall towards the bottom of the window. When it hits the bottom, it should bounce back up, with an apex half the distance between the y coordinate of where it was originally dropped and the bottom of window. So if it was dropped at y position 600 and the bottom of the page is 800, the apex for the first bounce should be 700. The 2nd bounce, the apex would be 750. 3rd bounce, 775. You get the idea. Can someone help me a bit here? I am guessing I need to increment a counter each time the ball hits the bottom?

<html>
<head>
<style>
#ball {
    width: 50px;
    height: 50px;
    background-color: black;
    position: absolute;
}
</style>
<script>

window.onload = function() {

    var ballClicked = false;
    var ballFalling = false;
    var ballX = 100;
    var ballY = 100;
    var timesBounced = 0;
    var bounceApex = 0;
    var startingDropHeight = 0;
    var intervalVar;
    var ball = document.getElementById("ball");
    ball.style.left = ballX;
    ball.style.top = ballY;

    ball.onclick = function() {
        if (ballClicked == false) {
            ballClicked = true;
        } else {
            ballClicked = false;
            ballFalling = true;
            startingDropHeight = ballY;
            intervalVar = setInterval(function(){dropBall()} , 5);
        }
    };

    document.onmousemove = function(e) {
        if (ballClicked == true) {
            ballX = e.pageX;
            ballY = e.pageY;
            ball.style.left = ballX;
            ball.style.top = ballY;
        }
    };

    function dropBall() {
        if (ballFalling == true) {
            ballY = ballY + 1;
            ball.style.top = ballY;
            if (ballY == window.innerHeight - 50) {
                timesBounced = timesBounced + 1;
                bounceApex = (startingDropHeight + (window.innerHeight - 50)) / 2;
                ballFalling = false;
                if (bounceApex > window.innerHeight - 50) {
                    clearInterval(intervalVar);
                }
            };
        } else {
            ballY = ballY - 1;
            ball.style.top = ballY;
            if (ballY == bounceApex) {
                ballFalling = true;
            };
        }
    };

};

</script>
</head>
<body>
<div id="ball"></div>
</body>
</html>

Upvotes: 0

Views: 1855

Answers (1)

Shomz
Shomz

Reputation: 37711

When adding left and top styles, you need to specify the unit as well. So, instead of:

ball.style.left = 100;

it should be: 

ball.style.left = "100px";

I've fixed that in your code and made a working jsfiddle, will improve the bouncing in a bit. See it here: http://jsfiddle.net/12grut99/

About the repetitive bouncing, this line is the issue: 

bounceApex = (startingDropHeight + (window.innerHeight - 50)) / 2;

You're always calculating the apex based on the original drop height, yet after every bounce, the drop height should be the previous bounceApex (the highest point the ball reached).

Upvotes: 1

Related Questions