Создание объектов на лету с помощью HTML5

Attention. First lesson presentation in english available here
It's not just the same. No objects are uploded!
All game objects are created dynamicaly.
Program lising of dymamic object is in the end of this lesson
Similar demo is here http://2l4u.ru/program_513.php

На этом уроке, хочется рассмотреть обязательные шаги необходимые при создании игры с помощью сервиса 2l4u.ru и как можно создать игру, когда нет под рукой графического редактора

1. Входим в систему.
2. Создаём новый проект.

3. В уроке 1 - здесь - Мы загружаем в проект небольшой рисунок:

для этого в окне сцены нужно нажать на кнопку Upload и указать путь к файлу...

Теперь мы не будем это делать, а создадим объект динамически.

4. Для этого, можно использовать объект контроллер - ctrl
Конечно, мы можем создать свой объект, но контроллер присутствует по умолчанию
Нажимаем на шестерёнку и вызываем окно свойств

В окне свойств нам нужно добавить событие Create - создание. Это событие
 стартует в начале игры. И это именно то, что нам нужно. Вообще есть два самых важных события - Step - Шаг - событие, которое обновляется через равные промежутки времени (по умолчанию 25 миллисекунд) и Событие Create - которое не обновляется, хотя функции могут работать или до своего завершения или в течения всей игры. Событие Шаг (Step) используется для дополнительной проверки состояний игровых объектов... например, можно проверить номер кадра в спрайте, или расстояние между объектами, или произошло ли столкновение объектов...

Итак, добавляем событие Create

Выбираем "Create" из списка

Результатом, действием на это событие добавим "blank script"

 
теперь откроем blank script - чистый скрипт на редактирование...

Откроется окно Редактор событий

Сейчас немного теории. Все объекты это слои, т.е. - тэги div.
И слой, обычно, бесцветный и прямоугольный, а нам нужен круг.
Теперь, мы подошли в плотную к использованию технологии HTML 5 в нашей игре.
Вместо слоя мы добавим   холст - Canvas

Это делается так:

$("#contnt").append('<CANVAS id="canv_1" width="30" height="30"></CANVAS>');

Метод append добавляет объект  с идентификатором "canv_1" к нашей сцене с размерами 30 на 30 пикселей.
Теперь можно нарисовать что-нибудь  на нашем холсте добавим ниже:

 var canvas = document.getElementById("canv_1");
  if (canvas.getContext)
    {
   //создаём переменную для работы с 2d контекстом - создаём форму для фигуры
   var ctx = canvas.getContext("2d");
   //определяемся с цветом заливки фигуры
 ctx.fillStyle = "red";
  // рисуем фигуру "арка", от центра (15 пикселов x,y (внутри Canvas))
  // Math.PI*2 - делаем полный поворот дуги, чтобы получился круг
 // двигаемся по часовой стрелке - true
 ctx.arc(15,15,14,0,Math.PI*2,true);
 // обводка чёрная
 ctx.strokeStyle = "#000000";
 // заполняем фигуру
 ctx.fill();
// размер линии
 ctx.lineWidth = 1;
// рисуем линию
 ctx.stroke();  
    }

Мы не только добавили объект "canv_1" динамически на сцену,
но и создали "налету" картинку для него.
Теперь мы можем присвоить любые свойства и события объекту "canv_1".

// положение объекта должно быть абсолютным, чтобы он мог перекрывать другие объекты,
// если это потребуется
$("#canv_1").css("position","absolute");
// расставляем на сцене
$("#canv_1").css("left","200px");
$("#canv_1").css("top","200px");
$("#canv_1").css("cursor","pointer");
// присваиваем событие клик объекту
// определяем положение добавляем 50 пикселей
// двигаем по оси x
$("#canv_1").click(function(){   
var x=get_obj_x("#canv_1");
x=x+50;
$("#canv_1").animate({left:+x+"px"},500,function(){});   
});


Теперь нажмём "Сохранить".
Далее, закроем все окна и нажмём "Пуск" или "run game"

Когда запустится наша игра, курсор при наведении на шарик(canv_1) будет меняться

При нажатии на шарик - (canv_1) он будет  двигаться направо.

Еще раз хочу привести весь листинг, который нужно скопировать и вставить в "editor window"

$("#contnt").append('<CANVAS id="canv_1" width="30" height="30"></CANVAS>');
 var canvas = document.getElementById("canv_1");

  if (canvas.getContext)

    {

   //создаём переменную для работы с 2d контекстом - создаём форму для фигуры

   var ctx = canvas.getContext("2d");

   //определяемся с цветом заливки фигуры

 ctx.fillStyle = "red";

  // рисуем фигуру "арка", от центра (15 пикселов x,y (внутри Canvas))

  // Math.PI*2 - делаем полный поворот дуги, чтобы получился круг

 // двигаемся по часовой стрелке - true
 ctx.arc(15,15,14,0,Math.PI*2,true);

 // обводка чёрная
 ctx.strokeStyle = "#000000";
 // заполняем фигуру

 ctx.fill();

// размер линии
 ctx.lineWidth = 1;

// рисуем линию
 ctx.stroke();
    }

$("#canv_1").css("position","absolute");
$("#canv_1").css("left","200px");
$("#canv_1").css("top","200px");
$("#canv_1").css("cursor","pointer");

$("#canv_1").click(function(){  
var x=get_obj_x("#canv_1");
x=x+50;
$("#canv_1").animate({left:+x+"px"},500,function(){});  
});


Удачи!
Шарик можно раскрасить поинтересней, с помощью градиентов и теней сделать  объёмным
Как это сделать расскажу позже