帆布的fps无意中加速？

我在基于在线教程的画布元素搞乱了，并构建了以下页面，here。帆布的fps无意中加速？

这里是我的标记：

<!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>

这里是我的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; 
     } 
    } 
}); 

});

现在，假设你点击Avatar按钮，然后点击Beach Ball之后，FPS是加快了。但是，我在两个函数的click函数内重置了FPS变量。我还重置了x和y变量。

此外，我可以继续点击相同的按钮，速度也会显着增加。

有人可以帮助解释为什么会发生这种情况吗？

谢谢！

来源

2011-02-15 Qcom

MMM ..... const FPS; < ---这是什么？

据我记得，在JavaScript中没有常量。无论如何，如果它是一个常量，为什么你试图设置它的价值几次？我认为这个语句失败了，并且在你第一次设置FPS时，你创建了一个全局变量，后来这个全局变量被所有的函数共享。另外，你不使用clearInterval，并且每次点击时你都调用一个新的setInterval，所以如果你在“beachBallButton”中点击3次，你将会有3个setIntervals函数在运行，每个函数都会执行代码。这很可能会导致“加速”。

来源

2011-02-15 07:57:09

哇，我怎么能错过自己想要分配常数的变量。我从网上的一个教程调整了这个，所以它不是一个问题之前...... xD谢谢！ – Qcom 2011-02-15 23:07:34

这个工作示例=>http://www.jsfiddle.net/steweb/sLpCA/

只是一些“补充”到什么亚历杭德罗说（这是正确的），在JS没有常量。所以你需要在开始时声明'var FPS'。

此外，你必须设置一个'intervalID'变量，这就是你调用它时返回的结果setInterval。但每次的setInterval调用之前，你需要remove the 'active' interval actions你叫（请注意，第一次没有什么明确）

var myInterval; 
/* ... */ 
clearInterval(myInterval) 
myInterval = setInterval(draw,1000/FPS)

来源

2011-02-15 09:12:54 stecb

感谢您对`setInterval`的清晰解释，真的有所帮助！ – Qcom 2011-02-15 23:08:03

帆布的fps无意中加速？

回答

相关问题