lesson 3 Moves and Keyboard - Движение и нажатия клавиш

Attention. First lesson presentation in english is available here
Almost the same. You have to change program code in the end of the list.
It makes the ball-object move by A-W-S-D keys.

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

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

3. Загружаем в проект небольшой рисунок, я выбрал вот этот:

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

4. Теперь двигаем объект куда нам нужно на сцене... нажимаем Save Stage - сохраняем положение

5. Нажимаем на шестерёнку и вызываем окно свойств

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

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

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

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

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

В секции "editor window" копируем следующий код:

$(document).keydown(function(e) {  
   
    switch (e.keyCode) {
   
    case 65 :
    var x=get_obj_x("#object_1");
    x=x-3;
    $("#object_1").css("left",x);
    break;

    case 87 :
    var y=get_obj_y("#object_1");
    y=y-3;
    $("#object_1").css("top",y);
    break;

    case 83 :
    var y=get_obj_y("#object_1");
    y=y+3;
    $("#object_1").css("top",y);
    break;

    case 68 :
    var x=get_obj_x("#object_1");
    x=x+3;
    $("#object_1").css("left",x);
    break;
 
  }   
    });


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

Когда запустится наша игра, при нажати A-W-S-D  шарик(object_1) будет двигаться


Пояснение
Конструкция $(document).keydown(function(e) {  - используется для перехвата нажатий клавиатуры. 

Конструкция e.keyCode - помогает извлечь цифровое значение ключа клавиатуры.
Если мы задумали сделать шарик послушным клавишам "A-W-S-D" , тогда мы должны переключать направление движения

a-65
w-87
s-83
d-68

 switch (e.keyCode) { - переключится при нажатии
case 65 : - если e.keyCode равно 65 ... далее выполняется код; case - начало блока

var x=get_obj_x("#object_1"); - создаём переменную x присваиваем ей координату x обекта - "object_1"

 x=x-3;  уменьшили значение

 $("#object_1").css("left",x); - с помощью CSS  сдвинули объект по оси х
 
break; - завершение выполнения кода - конец блока