Fps холста непреднамеренно ускоряется? - PullRequest
Новая
       8

Fps холста непреднамеренно ускоряется?

3 голосов
/ 15 февраля 2011

Я возиться с элементом canvas, основанным на обучающих материалах онлайн, и создал следующую страницу: здесь .

Вот моя разметка: 

<!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 увеличивается.Однако я сбросил переменную FPS в функциях click обеих функций.Я также сбрасываю переменные x и y.

Кроме того, я могу просто продолжать нажимать кнопку , то же самое , и скорость также резко возрастет.Может ли кто-нибудь помочь объяснить, почему это происходит?

Спасибо!

Ответы [ 2 ]

4 голосов
/ 15 февраля 2011

МММ ..... постоянный FPS;<--- Что это? </p>

Насколько я помню, в javascript нет констант.В любом случае, если это константа, почему вы пытаетесь установить ее значение позже несколько раз?Я думаю, что это утверждение не выполняется, и когда вы в первый раз устанавливаете FPS, вы создаете глобальную переменную, а затем эта глобальная переменная используется всеми функциями.Вы вызываете новый setInterval каждый раз, когда вы делаете клик, поэтому если вы щелкнете 3 раза в «beachBallButton», у вас будет запущено 3 функции setIntervals, каждая из которых выполняет код.Это может вызвать «ускорение».

2 голосов
/ 15 февраля 2011

это рабочий пример => http://www.jsfiddle.net/steweb/sLpCA/

Просто некоторые «дополнения» к тому, что сказал Алехандро (это правильно), нет констант в JS.Поэтому вам нужно «объявить» var FPS в начале.

Более того, вы должны установить переменную 'intervalID', то есть то, что setInterval возвращает при вызове.НО, перед каждым вызовом setInterval вам необходимо удалить «активные» интервальные действия , которые вы вызывали (обратите внимание, что в первый раз нечего очищать) 

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