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

Фев 04
2011

zxcatbeta, ИгроДел , , , , , , , No Comments

Эта статья — продолжение части 2, код в которой получился незавершёным. Сегодня мы сделаем следующее:

  1. Добавим в ядро возможность загружать ресурсы для модулей.
  2. Проверим работоспособность модуля zx.Image.
  3. Разберём простую анимацию.

Загрузка ресурсов ядром.

MindDefGame

Прежде всего, перенесём в ядро некоторые свойства из game.js. Например, canvas и его context. Также вынесем их инициализацию в ядро. Таким образом метод MindDefGame.initialize() упростится до:

			initialize: function(cnv, w, h) {
				zx.go(cnv, w, h);
				this.x = 0;
			},

В методе MindDefGame.loop() исправим использование canvas и его контекста:

			loop: function() {
				zx.ctx.globalAlpha = .017;
				zx.ctx.fillStyle = "#000";
				zx.ctx.fillRect(0,0,zx.cnv.width,zx.cnv.height);
				zx.ctx.globalAlpha = 1;
				var clr = 'rgb(' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) + ')';
				zx.ctx.fillStyle = clr;
				zx.ctx.fillRect(this.x, 0, 1, zx.cnv.height);
				this.x++;
				this.x %= zx.cnv.width;

			},

Кроме того, счётчик this.x теперь сбрасывается при достижении значения, равного ширине canvas’а, что позволяет полностью заполнить его цветными полосками.

Ядро.

Теперь перейдём к ядру. More

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

Янв 11
2011

zxcatИгроДел , , , , , , 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.

Янв 08
2011

zxcatbeta, ИгроДел , , , , 2 комментария

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

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

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

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

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

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

More