Создаём Ваше первое webOS приложение

Мар 06
2011

zxcatUncategorized , , , , , , 6 комментариев

Разбирал webOS, решил перевести вводную статью с сайта developer.palm.com. Перевод местами вольный.

В данной статье будет показано, как создать Ваше первое приложение для HP webOS. Вместо показа традиционного «Hello, World!», мы создадим простой счётчик, подсчитывающий число нажатий на кнопку. По завершении урока вы будете знакомы с такими понятиями, как сцены* (stages), экраны* (scenes), помощники* (assistants), и с другими важными понятиями webOS.

* С русской терминологией «пальмоводов» не знаком, так что переводил, как пришло в голову. Scene с третьей попытки перевёл как «экран», вроде бы отражает суть и не конфликтует. Быть может в терминах театра лучше перевести: тут и сценарии (scripts), и помост (сцена), и сцены («явления»), и ассистенты. More

Пишем игру на 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

Реализация модульной системы в JavaScript

Янв 09
2011

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

Продолжая написание игры столкнулся с тем, что JavaScript — довольно своеобразный язык по сравнению с C/C++, на которых я в основном пишу. Например, в нём нет такого понятия как классы, нет возможности подключать модули.

Поэтому я и говорил ранее, что он хоть и более «человечен», чем тот же ассемблер (хорошее сравнение:) ), часто удобнее всяких C, но сильно отличается от других ООП языков. Вообще, если копать глубже, то это один из самых запутанных языков, которые я видел :) Но это сказывается привычка к C++.
More

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

Янв 08
2011

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

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

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

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

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

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

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

More