Javascript Game Loop - PullRequest
Новая
       33

Javascript Game Loop

2 голосов
/ 13 ноября 2011

У меня есть несколько вопросов, касающихся циклов JavaScript.

Вопросы:

  • Почему цикл JavaScript останавливает работу браузера
  • Почему рисование замедляется, даже если оно выполняетсяработает на 1 ничьей каждые 1 мс, и это рисует простейшую вещь!
  • Какое решение?Flash умирает, что нам теперь делать?

Вот код холста, который вы можете попробовать сами: 

<!doctype html>
<html>
<head>
</head>
<body>
    <canvas id="c" width="400" height="400"></canvas>
    <script type="text/javascript">

        var c = document.getElementById( 'c' );

        ctx = c.getContext( '2d' );

        var x = 100;

        ctx.fillStyle= '#f00';

        function loop()
        {
            ctx.fillRect( x, 100, 20, 20 );

            ++x;
        }

        setInterval( loop, 1 );
    </script>
</body>
</html>

Ответы [ 3 ]

10 голосов
/ 13 ноября 2011

Почему цикл JavaScript останавливает работу браузера (не происходит в C ++)

JavaScript является однопоточным. Состояние DOM не может измениться во время работы кода JavaScript или возникновения условий гонки. Это означает отсутствие рисования / переформатирования.

Почему отрисовка медленная, даже если она выполняется с 1 раз в 1 мс, и она рисует простейшую вещь!

Он не работает на 1 мс, он работает на 10 мс, потому что браузеры не позволяют вам зацикливаться.

Какое решение? вспышка умирает, что нам теперь делать?

Используйте requestAnimationFrame и запускайте игру со скоростью 60 FPS, зачем вам больше?

Пример использования (webkit) requestAnimationFrame , который работает для меня гладко.

2 голосов
/ 13 ноября 2011

Одна миллисекунда - чрезвычайно короткий интервал.
Это такой короткий интервал, что ваш код будет работать в потоке пользовательского интерфейса почти непрерывно, и браузер не отвечает.

Вам необходимо оставить паузы, чтобы дать пользователю время для взаимодействия со страницей.

Используйте интервал не менее десяти, а предпочтительно, ста миллисекунд.

0 голосов
/ 25 мая 2014

Причина падения частоты кадров и в конечном итоге зависания браузера происходит из-за памяти, занятой элементом canvas. Я уже ответил на этот вопрос. Вы можете найти нить здесь .

Каждый раз, когда вы рисуете что-то на холсте, эта операция сохраняется на пути холста. Этот путь занимает больше памяти каждый раз, когда вы рисуете что-то на холсте. Если вы не очистите путь холста, у вас будет падение частоты кадров. Например, посмотрите на разницу во времени выполнения между вашим javascript и javascript ниже, который очищает путь холста, 

var c = document.getElementById( 'c' );
ctx = c.getContext( '2d' );
var x = 100;
ctx.fillStyle= '#f00';

function loop()
{
    ctx.beginPath(); 
    ctx.fillRect( x, 100, 20, 20 );

    ++x;
}
setInterval( loop, 1 );
...