Home/ Questions/Q 3953570
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T01:59:26+00:00

I am messing around with the canvas element based off of tutorials online and

  • 0

I am messing around with the canvas element based off of tutorials online and have constructed the following page, here.

Here is my markup:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Canvas Game</title>

        <link rel="stylesheet" href="style.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
    <header>
        <h1>Cool Canvas Bouncing Effect!</h1>
        <p>Which would you like to see bounce around?</p>
        <input id="beachBallButton" type="button" value="Beach Ball" />
        <input id="avatarButton" type="button" value="Avatar" />
    </header>
    <br />
    <canvas id="myCanvas" width="600" height="400">
        Your browser does not support canvas!
    </canvas>
    </body>
</html>

And here is my JavaScript:

$(document).ready(function() {

const FPS;
var x = 0;
var y = 0;
var xDirection = 1;
var yDirection = 1;
var image = new Image();
image.src = null;
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

$('#avatarButton').click(function() {
    x = 0;
    y = 0;
    FPS = 30;
    image.src = 'avatar.png';

    setInterval(draw, 1000 / FPS);

    function draw() {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(image, x, y);

        x += 1 * xDirection;
        y += 1 * yDirection;

        if (x >= 500)
        {
            x = 500;
            xDirection = -1;
        }
        else if (x <= 0)
        {
            x = 0;
            xDirection = 1;
        }

        if (y >= 300)
        {
            y = 300;
            yDirection = -1;
        }
        else if (y <= 0)
        {
            y = 0;
            yDirection = 1;
        }
    }
});

$('#beachBallButton').click(function() {
    x = 0;
    y = 0;
    FPS = 60;
    image.src = 'beachball.png';

    setInterval(draw, 1000 / FPS);

    function draw() {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(image, x, y);

        x += 5 * xDirection;
        y += 5 * yDirection;

        if (x >= 450)
        {
            x = 450;
            xDirection = -1;
        }
        else if (x <= 0)
        {
            x = 0;
            xDirection = 1;
        }

        if (y >= 250)
        {
            y = 250;
            yDirection = -1;
        }
        else if (y <= 0)
        {
            y = 0;
            yDirection = 1;
        }
    }
});

});

Now, say you click on the Avatar button, and then click on the Beach Ball afterwards, the FPS is sped up. However, I reset the FPS variable within the click functions of both functions. I also reset the x and y variables.

Additionally, I could just keep clicking the same button and the speed will increase dramatically as well.

Could someone help explain why this is happening?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    MMM….. const FPS; <— What is this?

    As far as I remember, there is no constants in javascript. Anyway, if it is a constant, why you try to set it’s value later several times? I think that this statement fails and the first time you set the FPS, you create a global var, and later this global var is shared by all the functions.

    Also, you don’t use clearInterval, and you are invoking a new setInterval every time you make a click, so if you click 3 times in “beachBallButton”, you will have 3 setIntervals functions running, each of them executing the code. This is likely to cause the “speed up”.

    • 0