Пишем игру на HTML5 и JS. Часть 2.

No Comments

Продолжаем написание HTML5 игры. Теперь, когда готова модульная система, можем опробовать все её преимущества на деле. Это первое, что мы сделаем в этой части. А второе — это напишем модуль для работы с изображениями-спрайтами. Пока что только с неподвижными, анимация будет позже.

Переходим на модули.

Для начала, адаптируем имеющийся код.

minddef.html

В html файле после описания стилей уберём подключение старого js-скрипта. Затем включим загрузку js-классов, ядра системы и опишем модуль-запускальщик:

<script type="text/javascript" src="core/class.js"></script>
<script type="text/javascript" src="core/zx.js"></script>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        zx.unit('main', {
            requires: ['minddef.game'],
            body: function() { MindDefGame.start('canvas', 320, 480); }
        });
    }, false);
 </script>

More

Создание игры на HTML5. Часть 1.

2 Comments

В этой части расскажу немного теории об устройстве игр и покажу небольшой пример работы с canvas.

Алгоритм практически каждой игры состоит из стандартной последовательности действий. Сначала происходит подготовка, настройка параметров игры (уровня), затем запускается повторяющийся игровой цикл, ну а после выхода из него (game over/переход на след. уровень) освобождаются выделенные ресурсы.

Самое интересное находится внутри цикла. Тут у нас происходит следующее:

  1. Опрос клавиатуры/мыши/итд — управление.
  2. Глобальные события (например, перемещение камеры).
  3. Обновление состояния игровых объектов  (координаты, скорости, поведение: столкновение, умирание, появление, превращение и т.п.).
  4. Отрисовка игровых объектов и всего остального (задний фон, набранные очки и др.).

Вообще, слово “объект” слишком общее, им можно назвать что угодно. Но не придумал пока что ничего лучше (если есть идеи — сообщите ;) ). Поэтому уточню.

Игровым объектом будем считать элемент игры, обладающий своим поведением; с этим элементом игрок (или другие объекты) может взаимодействовать.

More