Обнаружение медленного исполнения игры и реагирование на него

В отличие от консольных игр, которые выполняются в жестко контролируемой среде, среда игр HTML5 переменчива, непредсказуема и хаотична. Нередко игра работает недопустимо медленно, так как пользователь воспроизводит видео YouTube в другой вкладке или еще как-нибудь перегружает ЦП или графический процессор. И всегда есть вероятность того, что игрок будет использовать браузер, который "не тянет".

Разработчик игр должен предвидеть эти неблагоприятные условия и соответственно реагировать на них. Snail Bait постоянно контролирует частоту кадров, и когда она опускается ниже определенного порога много раз и на много секунд, отображает сообщение о медленной работе игры, показанное на рисунке 5.

Рисунок 5. Обнаружение низкой частоты кадров

Включение социальных функций

Почти все популярные игры включают социальные аспекты, такие как размещение счета в Twitter или Facebook. Когда игрок Snail Bait щелкает на ссылке Tweet my score, которая появляется в конце игры (см. рисунок 2), Snail Bait открывает Twitter в отдельной вкладке и автоматически создает твит с объявлением счета, как показано на рисунке 7.

Рисунок 7. Текст твита

Теперь, когда у вас сложилось общее представление об игре, пришло время взглянуть на код.

В начало

Код HTML и CSS игры Snail Bait

Статистика кода Snail Bait

Число строк кода:

• HTML: 276;
• CSS: 410;
• JavaScript: 3898.

Игра Snail Bait реализована на базе HTML, CSS и JavaScript; как видно из врезки Статистика кода Snail Bait, большая часть кода ― это JavaScript. Остальные статьи этого цикла посвящены главным образом JavaScript ― с отдельными вылазками в сторону HTML и CSS3.

На рисунке 8 показаны элементы HTML и соответствующие CSS для самой игры, без HTML и CSS других элементов, таких как сообщения и заключительные титры.

Рисунок 8. Код HTML и CSS игры (без объявлений и надписей)

Код CSS в основном ничем не примечателен, за исключением нескольких интересных атрибутов, которые я подчеркнул на рисунке 8. Во-первых, я установил значение 0 auto атрибута margin элемента wrapper, что означает, что оболочка и все, что внутри нее, центрируется в окне по горизонтали. Во-вторых, положение элементов lives и sound-and-music имеет значение absolute. Если оставить значение по умолчанию relative, то эти элементы DIV развернутся до ширины холста и заслонят своих соседей (счет и инструкции соответственно). Наконец, классы CSS keys и explanation имеют атрибут inline, чтобы соответствующие элементы размещались в той же строке.

В листинге 2 показан код CSS, соответствующий рисунку 8.

Листинг 2. game.CSS (фрагмент)

#arena { text-align: center; padding: 5px; width: 805px; height: 445px;} #copyright { margin-top: -35px; float: right; margin-right: 12px; padding: 2px; color: blue; text-shadow: 1px 1px 1px rgba(255,255,255,0.7); font-size: 0.8em;}.explanation { color: #ff0; text-shadow: 1px 1px 1px rgba(0,0,0,1.0); display: inline; margin-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 2px;} #game-canvas { border: 2px inset rgba(0,0,80,0.62); -webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px; -moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px; -o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px; box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;} #instructions { height: 30px; margin-right: 8px; padding-top: 6px; padding-left: 25px; -webkit-transition: opacity 2s; -moz-transition: opacity 2s; -o-transition: opacity 2s; transition: opacity 2s; color: #ff0; font-size: 1.05em; opacity: 1.0;}.keys { color: blue; text-shadow: 1px 1px 1px rgba(255,255,0,1.0); background: rgba(0,0,0,0.1); border: thin solid rgba(0,0,0,0.20); border-radius: 5px; margin-left: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 5px; display: inline;} #sound-and-music { position: absolute; top: 495px; margin-left: 10px; color: #ff0; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); background: rgba(0,0,0,0.1); border-radius: 5px; border: thin solid rgba(0,0,0,0.20); padding-top: 2px; padding-bottom: 2px; z-index: 1;} #wrapper { margin: 0 auto; margin-top: 20px; padding: 5px; width: 817px; height: 520px;}

 

Как видно из листинга 3, который содержит код HTML, соответствующий рисунку 8, HTML-код игры ― это набор элементов DIV и холстов с несколькими изображениями и парой флажков.

Листинг 3. game.html (фрагмент)

<!DOCTYPE html><html> <!-- Head........................................................--> <head> <title>Snail Bait</title> </head> <!-- Body........................................................--> <body> <!-- Wrapper..................................................--> <div id='wrapper'>    <!-- Header.................................................-->     <div id='header'>       <div id='lives'>          <img id='life-icon-left' src='images/runner-small.png'/>          <img id='life-icon-middle' src='images/runner-small.png'/>          <img id='life-icon-right' src='images/runner-small.png'/>       </div>        <div id='score'>0</div>           <div id='fps'></div>    </div>     <!-- Arena..................................................-->     <div id='arena'>       <!-- The game canvas.....................................-->        <canvas id='game-canvas' height='400'>           Your browser does not support HTML5 Canvas.        </canvas>        <!-- Sound and music.....................................-->        <div id='sound-and-music'>          <div class='checkbox-div'>             Sound <input id='sound-checkbox'                             type='checkbox' checked/>          </div>           <div class='checkbox-div'>             Music <input id='music-checkbox'                                   type='checkbox' checked/>          </div>       </div>        <!-- Instructions........................................-->        <div id='instructions'>          <div class='keys'>             d / k              <div class='explanation'>                move left/right             </div>          </div>           <div class='keys'>             f / j              <div class='explanation'>                jump             </div>          </div>           <div class='keys'>             p              <div class='explanation'>                pause              </div>          </div>       </div>        <!-- Copyright...........................................-->        <div id='copyright'> В©2012 David Geary</div>    </div> </div> <!-- JavaScript................................................--> <script src='js/stopwatch.js'></script> <script src='js/animationTimer.js'></script> <script src='js/sprites.js'></script> <script src='js/requestNextAnimationFrame.js'></script> <script src='js/behaviors/bounce.js'></script> <script src='js/behaviors/cycle.js'></script> <script src='js/behaviors/pulse.js'></script> <script src='game.js'></script> </body></html>

 

Элемент canvas ― это место, где происходит все действие. Холст содержит 2D-контекст с мощным API для реализации 2D-игр и прочих вещей. Текст внутри элемента canvas представляет собой страховочный текст, который браузер отображает только в том случае, если он не поддерживает Canvas HTML5.

Одно заключительное замечание о коде HTML и CSS игры: обратите внимание, что ширина и высота холста указывается атрибутами элемента canvas width и height. Эти атрибуты относятся как к размеру элемента canvas, так и к размеру поверхности рисунка, содержащейся в этом элементе.

С другой стороны, размер элемента canvas можно установить, только используя CSS для задания его ширины и высоты. Поле рисунка сохраняет свою ширину и высоту по умолчанию в 300 и 150 пикселей соответственно. Это означает, что соответствия между размером элемента canvas и размером поля его рисунка, скорее всего, не будет, и браузер изменит масштаб поля рисунка под размер элемента. Чаще всего это нежелательно, поэтому лучше задать размер элемента canvas с помощью CSS.