3

我正在使用基于在线教程的画布元素，并在此处构建了以下页面。

这是我的标记：

<!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变量。

此外，我可以一直单击相同的按钮，速度也会显着提高。

有人可以帮助解释为什么会这样吗？

谢谢！

4

2 回答 2

4

嗯……常量 FPS；<--- 这是什么？

据我记得，javascript 中没有常量。无论如何，如果它是一个常数，为什么你要在以后多次设置它的值？我认为这个语句失败了，第一次设置 FPS 时，你创建了一个全局变量，后来这个全局变量被所有函数共享。

此外，您不使用 clearInterval，并且每次单击时都会调用新的 setInterval，因此如果您在“beachBallButton”中单击 3 次，您将运行 3 个 setIntervals 函数，每个函数都执行代码。这很可能导致“加速”。

于 2011-02-15T07:57:09.473 回答
2

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

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

此外，您必须设置一个“intervalID”变量，这就是setInterval在您调用它时返回的内容。但是，在每次 setInterval 调用之前，您需要删除您调用的“活动”间隔操作（请注意，第一次没有什么要清除的）

var myInterval;
/* ... */
clearInterval(myInterval)
myInterval = setInterval(draw,1000/FPS)
于 2011-02-15T09:12:54.743 回答