Canvas' fps unintentionally speeding up?
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>
开发者_StackOverflow社区 <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!
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".
this a working example => http://www.jsfiddle.net/steweb/sLpCA/
Just some 'additions' to what Alejandro said (that is correct), no constants in JS. So you need to 'declare' var FPS at the beginning.
Moreover, you have to set an 'intervalID' variable, that is what the setInterval returns when you call it. BUT, before each setInterval call, you need to remove the 'active' interval actions you called (note that the first time there's nothing to clear)
var myInterval;
/* ... */
clearInterval(myInterval)
myInterval = setInterval(draw,1000/FPS)
加载中,请稍侯......
精彩评论