Дневник разработчика YuryOl

Да можно извернуться, но я все равно считаю перспективу мейкера не очень удачной для кого-то высокого.

Давай делай уже скорее, хочу свою зельду на мв слепить.

Как поклоннику "Эквилибриума" и боевых сцена в "матрице" (хотя сам фильм не люблю) всегда хотелось добавить динамичности и гибкости в перестрелки в своей АБС.



Поэтому многое пытаюсь сделать именно для маневренности героя и динамичности боев

Фиксация направления

Наверное самое легкое что можно придумать, так как такая возможность есть в самом мукере, а значит просто привяжем это к кнопке.

Блокирование движения

Задача капельку сложнее. Тут нам надо самим добавить свойство, которое позволяет героя поворачиваться не двигаясь. Назовем его isBlockMove

Ну а теперь в стандартной функции moveStraight делаем проверку включено ли это свойство.

1) если нет - позволяем ему (this) идти в заданном напарвлении (d)
Game_Character.prototype.moveStraight.call(this, d)

2) если же свойство есть - разрешаем ему только повернуться
this.setDirection(d)

Отход назад

Нам надо чтоб герой при нажатии на кнопку резко отсупил допустим на 2 клетки назад. Эта задачка еще сложнее.

1) в основном из-за вымученной функции moveEvent из этого поста: тык

2) Здесь нам понадобится немного иная блокировка - блокируем вообще все движения героя. Для этого создадим новое свойство block и функции для его включения/выключения:

3) Лезем в функцию Game_Player.prototype.canMove и добавляем в условие проверку включен ли наш "блок")

4) Конечно же ускорение должно делать героя быстрее. поэтому прибавляем герою скорость на две единицы

5) Итого сама функция ускорения,где
n - количество шагов,на которые пробежит герой
13 - код для ROUTE_MOVE_BACKWARD, т.е. для движения героя назад

6) Не забываем отключить блокировку движения. Добавляем в moveEvent следующую строчку. Она добавляет в маршрут героя скрипт (код 45) для отключения блока - parameters: ["$gamePlayer.disableBlock();"]

Альтернативное оружие

Об этом завтра, спать хочу

Никогда не понимал этой темы с фиксацией направления стрельбы. Еще во времена нес уже были твинстик шутеры, хоть на них и нужно было с двух контроллеров играть. Но сейчас-то кнопок хватает. Так что почему бы недобавить твинстик управление? Назначить кнопками стрельбы wasd и все, это всяко удобнее чем лок/анлок направления для игрока.

Paranoid пишет: Никогда не понимал этой темы с фиксацией направления стрельбы. Еще во времена нес уже были твинстик шутеры, хоть на них и нужно было с двух контроллеров играть. Но сейчас-то кнопок хватает. Так что почему бы недобавить твинстик управление? Назначить кнопками стрельбы wasd и все, это всяко удобнее чем лок/анлок направления для игрока.

тут уже на любителя. мне лично такое не по нраву, но в старой версии у меня был выбор назначить такое управление на правый стик, а на левый - смену оружия. в текущую версию тоже наверное добавлю, но обязательным такое делать не хочу.

Ну опция такой стрельбы была бы замечательна.

Блок-схема

Сделал подобие блок-схемы для плагина АБС.

1) код уже довольно внушительный, по блок-схеме легче ориентироваться в функциях

2) позволяет оценить архитектуру плагина. Как видно на схеме - структура иерархична, и при этом между собой подобия "модулей" не слишком связаны, что облегчает работу с плагином.Также внутри "модулей" связь тоже не слишком сильная, в отличии от предыдущих версий плагина, когда чтобы добавить например бумеранг приходилось лезть в функций 6, чтобы ничего не сломать

3) другими цветами помечены функции сторонних плагинов:
- желтым - плагин Пещерного TileSwap
- серым - плагин Амфилохия EventFactory

4) блок-схема отнюдь неполная, здесь только основные функции (около 70ти). На данный момент функций около ста

5) Основа боевой системы:
- проверка нажатия клавиш YuryolInput, после которых и запускается действие героя.
- проверка столкновений collision.
- худ YuryolHud.

6) Описание каждой из функций пока не сделано

Для увеличения нажать правой кнопкой, затем "открыть в другой вкладке"

- с оружием в руке герой стреляет вперед, а потом мгновенно - назад. из того же пистолета, не глядя
- с пистолетами в двух руках герой убивает двух врагов впереди, а потом расставив руки в сторону, уничтожает всех по бокам от себя
- с калашом наперевес герой отстреливает противников. внезапно на него нападает чувак сзади, но наш герой фигачит его штык-ножом, не особо отвлекаясь на стрельбу и не меняя оружие
- против танка и пеших сражаться гораздо легче если у тебя оружие с подствольным гранатометом
- и т.д.

Для всего этого в плагин было добавлено альтернативное оружие. По задумке это:
- другой вариант выстрела из этого же оружия. Например,герой из двух пистолетов может стрелять как вперед, таки в стороны.
- дополнительная возможность самого оружия - подствольный гранатомет или альтернативные патроны

Когда-то раньше

В прошлый версиях в заметках оружия можно было приписать несколько дополнительных свойств - направление выстрелов, альтернативный патрон и еще несколько других тегов.

Для использования этих дополнительных возможностей следовало зажать один из шифтов геймпада при выстреле, что просчитывалось следующим кодом несложным кодом:

То есть при зажатии двух кнопок вызывалась функция с двумя аргументами: 0 и "true", где:

• "0" - слот экипировки оружия (для справки: 0 - это оружие, 1 - щит, 2 - броня головы, 3 - броня тела, 4 - аксессуар),
• "true" - использовано альтернативное оружие. И этот второй параметр так и передавался через все функции, а те, в свою очередь, проверяли какое оружие использовано. Мало того, что было куча проверок, так еще и с каждой новой возможностью оружия этих проверок становилось всё больше

Один параметр

Решение было простым - а давайте просто сделаем возможность вместо альтернативных тегов оружия указывать ДРУГОЕ оружие. То есть при зажатии двух кнопок у нас просто выстреливало оружие с ID, которое указывалось в заметках экипированного оружия. Теперь настройка стала легче

Однако, ни от второго аргумента функции,ни от кучи проверок мы не избавились. Надо оставить один параметр функции, и соответственно этот параметр должен быть слотом экипировки. А потому логично всего лишь взять и добавить еще один слот экипировки, в котором у нас будет храниться альтернативное оружие. Соответственно,код у нас становится таким

Шестой слот

А вот как добавить этот шестой слот была та еще задачка. Минут сорок при инициализации текущей экипировки я пытался вставить дополнительный слот партии $gameParty.leader() . И только потом я наконец догадался, что слоты у партии берутся из слотов героя, у значит у Game_Actor. Еще через мучительных поисков в коде и попыток сделать красиво, я в итоге довольно костыльно изменил одну строчку в функции Game_Actor.prototype.initEquips

До меня таки не дошло, откуда берется количество слотов у героя, и в итоге я тупо прибавил к нему единичку

А дальше всё просто. Если у оружия в слоте "0" есть тег altId, то мы добавляем шестой слот экипировки с id=5 (помним что нумерация слотов идет с нуля) - $gameParty.leader()._equips[5]:

Патроны

Ну и последнее - если у нас второе оружие стреляет одинаковыми патронами и по сути является тем же оружием с измеенной характеристикой, то нам надо,чтоб магазин был один. Поэтому добавляем проверку "если у оружия одинаковые патроны, то в функцию "траты" патронов мы передаем магазин оружия с нулевого слота:

ИТОГО:
С помощью менее 10 строчек добавлено альтернативное оружие

Вот смотрю на блок-схему и думаю. Может тоже состряпать такой же блок. Юр, а на какой проге ты рисовал схему то, фотошоп? Просто так в акурат все нарисованно. Да здесь указаны практически одни update'ы, чувствую разных там переменных и прочих данных много. А вот не сильная связь между модулей это тема. Класс, молодец %)

Doctor_Bug пишет: Вот смотрю на блок-схему и думаю. Может тоже состряпать такой же блок. Юр, а на какой проге ты рисовал схему то, фотошоп? Просто так в акурат все нарисованно. Да здесь указаны практически одни update'ы, чувствую разных там переменных и прочих данных много. А вот не сильная связь между модулей это тема. Класс, молодец %)

спасибо! апдейты - это я описание пока не писал,лень

делал в go.gliffy.com , но не советую - хоть и удобно, но там только пробный период и сохранить нельзя. я в итоге по-быстрому набросал для пробы и заскринил, а потом склеил в ФШ. Наверняка есть бесплатные инструменты для этого.

yuryol пишет: делал в go.gliffy.com , но не советую - хоть и удобно, но там только пробный период и сохранить нельзя. я в итоге по-быстрому набросал для пробы и заскринил, а потом склеил в ФШ. Наверняка есть бесплатные инструменты для этого.

Есть хороший сайт для создания блок-схем — draw.io . Всё сохраняет и денег не просит. Надеюсь, подойдет под нужды.

NettySvit пишет: Есть хороший сайт для создания блок-схем — draw.io . Всё сохраняет и денег не просит. Надеюсь, подойдет под нужды.

спасибо, жаль что редко знаем у кого действительно надо спрашивать

понемногу прихожу в себя, а потому после двухмесячного "почти-перерыва" возвращаюсь



Смена оружия

Решил добавить второе оружие и понял, что мои функции никуда не годятся, хотя три месяца назад казалось обратное. Вновь переписал "модуль" смены оружия, теперь он позволяет менять не только оружие, но и броню, вещи и скиллы

1. Добавил элемент equip в объект $gameParty


2. Сейчас все "экипированные" элементы сохраняю в нем. На данный момент это
   • Оружия, хранящиеся в $gameParty.equip.weapons
   • Броня, хранящиеся в $gameParty.equip.armors
   • Вещи, хранящиеся в $gameParty.equip.items
   • Скиллы, хранящиеся в $gameParty.equip.skills


3. Для универсальности функций вместо проверок в духе if ('armors') $gameParty.equip.armors гораздо удобнее возвращать массив через $gameParty.equip . Вроде мелочь, но позволяет избавить от кучи if или от ненавистных мне switch-ей


4. Подобное очень удобно и для $dataItems, $dataWeapons. Однако записи по типу возвращают массив с элементом строку в нем. Спасибо dmy, благодаря нему допер, что глобальный объект надо вызывать через window.
   Теперь вместо
   Code:

   if (element = 'items') data = $dataItems; if (element = 'weapons') data = $dataWeapons; if (element = 'armors') data = $dataArmors; if (element = 'skills') data = $dataSkills;
   Или свитча
   Code:

   switch = (element) { case 'items': data = $dataItems; break; case 'weapons': data = $dataWeapons; break; case 'armors': data = $dataArmors; break; case 'skills': data = $dataSkills; break; }
   достаточно написать:
   Code:

   data = '$data'+element [0].toUpperCase() + element .substring(1); data = window[data]


5. Еще одна проблема: не нашел стандартной функции, возвращающей список ВСЕХ оружий. Есть отдельная функция для возврата оружия в инвентаре:
   $gameParty.weapons()
   Есть стандартная функция для возврата экипированного оружия:
   $gameParty.leader().equips()[0]
   
   Эти функции не пересекаюся. То есть если у вас два оружия и первое экипировано, то первая функция возвратит неэкипированное оружие, а вторая - экипированное.
   
   Решается всё довольно простым методом concat:
   $gameParty.weapons().concat($gameParty.leader().equips()[0])
   то есть к оружию в инвентаре добавляется оружие из экипировки


6. Предыдущий метод возвращает нам массив, в котором экипированное оружие ставится в конце, поэтому нам требуется отсортировать полученный в предыдущем шаге массив через метод sort по ID оружия (arr - массив из предыдущего шага)
   Code:

   arr.sort((a, b) => { return a.id - b.id; });

Итого

Таким образом достиг 7-ого левела в программировании, ибо уже 7-ой раз переписываю свою АБС
- переписываю полностью на ES6 (в прошлой версии было на процентов 60);
- стараюсь не сильно дробить функции. В прошлой версии из-за функций из двух строчек модуль расползался значительно, что затрудняло отладку. Теперь дроблю только при проверках, а к примеру различные циклы не выношу отдельно благодаря стрелочным функциям.

Что добавлено:

1. Использование предметов и скиллов. Теперь Прыжок, бег или телепорт не надо выносить на отдельную кнопку. Надо добавить его в скилл, "экипировать" его и затем уже использовать через кнопку скилла


2. При этом можно назначить тот же самый телепорт и на отдельную кнопку


3. Теперь управление на геймпаде примерно такое
   
   ВНИМАНИЕ: Спойлер!

   
   • Смена оружия достигается через левый нижний шифт + кнопка выстрела/использования предмета или скилла
   • Альтернативное оружие стреляет через верхний нижний шифт + кнопка выстрела
   • Также смену оружия и второго оружия можно настроить на стики
   • Альтернативное оружие стреляет через верхний нижний шифт + кнопка выстрела
   • На клавиатуре смена оружия-предметов-скиллов на Q,W,E,R, а использование,выстрел оружия-предметов-скиллов на A,S,D,F
   • Для бега на геймпаде не выделено кнопки, так как бегать можно через двойное нажатие стрелки

наш Di.H не хвастается, поэтому просто поделюсь в дневничке пиксельным клипом, который создал он с пиксельными товарищами



Цитата от админа паблика "16 бит назад" ( vk.com/16bit_nazad ):

"Привет, друзья! Мы, 16 бит назад, совместно с пабликом .pixel этим летом собирали людей для совместного проекта. И наконец наш коллаб на клип Gorillaz - Feel Good Inc. нарисован, смонтирован и склеен! Для нас это действительно много значит - в ходе работы многие художники (а некоторые из них рисовали впервые) получили драгоценный опыт. И сейчас вы можете увидеть результат долгих трудов. Администрация 16 бит назад благодарит всех участников за проделанную работу и желает им новых творческих успехов!

Надеемся, что эта работа будет не последней в жизни нашего паблика. А также надеемся на дальнейшие совместные проекты с ребятами из .pixel. Наша команда, в свою очередь, даст каждому возможность проявить свои творческие способности в последующих задумках. Приятного просмотра!"

Подробнее об участниках и о коллабе:

Оригинальное видео:
Gorillaz - Feel Good Inc.


Коллаб состоялся благодаря:
- .pixel ( vk.com/pixel.arts )
- 16 бит назад ( vk.com/16bit_nazad )

Фейкбит ремикс:

..
Сделали:
- Theodote - the remix itself ( vk.com/theodote )
- kubikami - mix & master ( vk.com/unseeniverse )

Пиксель артисты:
- Akaleaf ( vk.com/akaleaf )
- Albatross vk.com/albatross1997
- Alexander "PASdor" Pushkin ( vk.com/pasdoor )
- Александа Чирвина ( vk.com/id46378027 )
- aturbidflow/kubikami ( vk.com/aturbidflow , эй, он заставил ремикс звучать круче!)
- Benedique ( vk.com/huenduk )
- Crackpot Apricot ( vk.com/id471257432 )
- dethrood ( vk.com/bonenote )
- Di.H ( vk.com/dimon_in_hell )
- doctorTARDIS ( vk.com/doc_tar )
- DuckPsycho ( vk.com/id281886673 )
- Fresh Salad ( vk.com/id376281682 )
- Fullmetal Heretic ( vk.com/flamorax )
- itsmadxme ( vk.com/ismab2000 )
- ivelsoul ( vk.com/iv_sashka )
- ivocroza ( vk.com/ivocroza )
- Krutskoy ( vk.com/ivan_krutskoy )
- Medini Santjago ( vk.com/medinisantjago )
- meLogo ( vk.com/utlyakov0 )
- Михаил Сидельников ( vk.com/muxaulo )
- Mormorion Fox ( vk.com/id119520212 )
- Мухтар Абасов ( vk.com/mukhtar_abasov )
- muLticake ( vk.com/mother_king )
- Мурка Мирзоев ( vk.com/id486362242 )
- Настя ( vk.com/id324724438 )
- P.Vale ( vk.com/debil1945 )
- Павел Иванов ( vk.com/id161982910 )
- Pretty Shark ( vk.com/id440185946 )
- Rieraf ( vk.com/iddimanusus )
- Shilov ( vk.com/shilov.for.life )
- Sonnenstein ( vk.com/sonnenstein )
- Taisa Max ( vk.com/id__sova )
- tap to start ( vk.com/arvixs8 )
- TATAPNHOB ( vk.com/dantatarinov )
- Theodote ( vk.com/bogdanr5000 , эй, он сделал ремикс!)
- vemigvan ( vk.com/serfruktoz )
- Владислав Дурочив ( vk.com/fanklers )
- zedoff ( vk.com/zedoffrus , эй, он санимировал больше всего кусков!)
- Сорочьи Ножки/Magpie Legs ( vk.com/mmmmmmmyeahhhhhhhniceeeeeeeeeeee )

Организаторы:
- vk.com/vasya_medved
- vk.com/paulinedesu
- vk.com/bogdanr5000
- vk.com/pasdoor
- vk.com/tanya_veks
- vk.com/aturbidflow
- vk.com/schwarzytron

Видео собрал:
kubikami ( vk.com/unseeniverse )

Палитра, в которой рисовался весь коллаб:
AAP-64 ( lospec.com/palette-list/aap-64 )

---

—

IMPORTANT:
All rights are reserved to Gorillaz.
There is no copyright infringement intended for the music used for the remix OR for the video used for the remake itself. If you believe that we have infringed on your rights to any of the music or video material on this channel, please contact us at Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript. and we'll take it down immediately (please provide verification that you are the owner of this content). Thank you!

Круто получилось!) Еще бы знать, что такой Di.H
Наверное, хотелось бы побольше оригинальных кадров, ибо мне показалось 1 в 1 с клипом, ну да ладно.

Aiaz Marx пишет: Круто получилось!) Еще бы знать, что такой Di.H
Наверное, хотелось бы побольше оригинальных кадров, ибо мне показалось 1 в 1 с клипом, ну да ладно.

вот rpgmaker.ru/social/mypage/9190dimoninhell , создатель phantasy-star-20ty-years-past , художник swag and sorcery , иногда постит художества в теме на нейтралке
на светлой не помню постил ли рисунки

Ну круто. Вижу, годнота.

получилось впечатляюще!
но они обвели весь клип покадрово, а потом превратили в пиксели? это скорее кропотливо нежели сложно? пиксель-арт в игре www.swagandsorcery.com выглядит сложнее, чем клип. и как относятся к тем,кто обводит а потом пикселизует?
я не высказываю претензии, просто просветляюсь

Iri пишет: получилось впечатляюще!
но они обвели весь клип покадрово, а потом превратили в пиксели? это скорее кропотливо нежели сложно? пиксель-арт в игре www.swagandsorcery.com выглядит сложнее, чем клип.

не могу сказать всех, наверное по-разному) а то что и кропотливо и сложно -это 100%

и как относятся к тем,кто обводит а потом пикселизует?
я не высказываю претензии, просто просветляюсь

я отношусь нормально, почему бы и нет, если результат в итоге хороший, а автору важен именно результат. другое дело что научиться таким способом можно только рисунку контуров да работе с цветом. а нарисовать персонажа сходу вряд ли сможешь

ПОКОДИЛ

понемногу возвращаюсь в мукер, например в субботу кодил около пяти часов! это рекорд - из-за личных обстоятельств более 5 месяцев не мукерил больше часов двух в неделю. дополнительный стимул - теперь программирую на большом 34-дюймовой мониторе



пока переключился на создание на канвасе простеньких игр с нуля - наконец-то к этому готов. опять же подобные игры затем легко вставить в мейкер как мини-игры. когда разбираешься в устройстве подобных игрулек, то наконец-то начинаешь видеть картину в целом. об это картине и попробую рассказать, а начну с самого базового

ГАЛАГА с нуля

начать решил с галаги - не особо сложная и при этом от нее легко оттолкнуться к другим играм. в ней у меня три класса - два вспомогательных и основа - Script

1. Вспомогательный класс Helper

Здесь вспомогательные функции,которые по сути никак не относятся, к логике игры. Пока она одна:

Рандом в интервале двух чисел.

Подробнее:
Math.random()- функция, которая возвращается рандомное число от 0 до 1.
Умножаем ее на интервал минимального и максимального числа: Math.random()*(max-min)
Оно обычно с кучей знаков после запятой, поэтому округляем через Math.floor(): Math.floor(Math.random()*(max-min))
Так как Math.floor() округляет "вниз", то к интервалу прибавляем единичку: Math.floor(Math.random()*(max-min+1))
Прибавляем минимальное число, так как мы нашли рандом в интервале между минимумо и максимумом: Math.floor(Math.random()*(max-min+1))+min

2. Вспомогательный класс Images

Картинки, используемые в игре. Чтоб не было зависимостей и не приходилось качать картинки и вставлять их в папку своей игры чтоб пощупать плагин, они сделаны через "base 64 To Img", т.е. каждая картинка записана кодом. Плюс это помогает оптимизировать память.

Например берем картинку звездолета в формате ПНГ, вставляем в этот сайт и получаем здоровенный код.
Cоздаем объект Image: let img= new Image()
А тот здоровенный код указываем в свойство src: img.src = "data:image/png;base64,здоровенный код в кавычках";

Итого:
То же самое для спрайтов врагов:
куча одинакового кода поэтому создаем фукцию:

а наши функции звездолета и врагов просто вызывают его:

Затем добавляем картинки для повер-апов, титульного экрана, экрана гейм-овера, спрайт врагов

Итого:

3. Основной класс Script

Здесь происходит вся логика игры, плюс хранятся данные.

В первую очередь заполняем конструктор класса, в котором находится запоминаемая игрой информация:

1) создание объекта "канвас" - HTML элемента, использующийся для рисования графики.

this.canvas = document.querySelector("#canvas");
this.context = canvas.getContext("2d");

2) Вызов класса "Хэлпер"

this.helper = new Helper();

3) Вызов класса "Имаджес"

this.images = new Images();

4) Массив с клавишами клаиватуры. Пока это стрелки для управления звездолетом и пробел для выстрелов:

5) Объект с нажатыми кнопками:

this.keyState = {};

6) Объект с объектами игры:

this.data

7) В нем у нас находятся переменные-переключатели, говорящие программе стартовала игра или же гейм овер:

start: false,
end: false,

Размеры экрана игры:

canvas: { width: 360, height: 680 },

9) размеры титульника, его координаты (x,y), картинка, которую мы берем из класса "имаджес"

10) То же самое для гейм овера

11) Звездолет: спрайт, ширина, высота, коорднаты х и у, направление выстрелов, текущая и максимальная скорость, жизни, очки и наконец объект "снарядов " fire.
В объекте снарядов также есть шрина, длина, цвет, напарвление, текущая и амксимальная скорость, максимальное чисто выпущенных снарядов и наконец массив со список всех выпущенных снарядов

12) Враги, у которых есть имя спрайта, ширина, высота, цвет, скорость, жизни, тип, массив со списком всех врагов на экране

ИТОГО:

Пока наш код такой. По сути это просто база данных с кратинками, база данных с объектами игры и функция рандома. Все конечно не предусмотришь, поэтому скорее всего эта база будет дополняться или наоборот какие-то ее элементы будут убраны.
Пока все.

ДАЛЕЕ

В следующем уроке мы:
- нарисуем наш экран игры и корабль, создав для этого функцию "рендер"
- научимся обновлять экран игры
- научимся упарвлять этим нашим звездолет

Уау!
По-моему, этому место в Академии, а не в дневнике, или не только в дневнике. Рад, что в этом уроке затронуты такие вещи, как Канвас и изображения. Спасибо! Очень жду остальных уроков в данном направлении, и готового кода, чтобы посмотреть, как оно будет работать в мукере!
Юриол - молодец! Продолжай в том же духе!

Noxmils пишет: По-моему, этому место в Академии, а не в дневнике, или не только в дневнике.

спасибо,приятно! тут скорее дневник о том, как я пишу урок) не знаю с чего начинать поэтому выходит путанно.

Итак, мы написали базу, но у результата не видно на экране - база да база. Для того, чтобы певратить базу в игру сделаем несколько шагов.

Добавления Canvas

В классе "скрипт" у нас есть строчки

Первая строка записывает в переменную HTML-объект с id равному Canvas, поэтому мы должны создать этот самый объект в HTML-файле.

где:
canvas - элемент, который по своей сути будет служить экраном игры,
width="360" - ширина,
height="680" - высота,
id="canvas" - индивидуальное название элемента,
style="background: #000" - фон элемента.

Есть такой очень хороший сервис - jsfiddle.net , в котором можно писать код на HTML, JS и видеть все это в реальном времени. В нем мы пока и запишем эту строчку jsfiddle.net/ev2b5fo1/

В окне просмотра мы видим черный прямоугольник. Это и есть наш Canvas - холст/экран игры, на котором всё и будет происходить.

Перевод картинки в base64

Рисуем наш корабль (тут не урок пиксель-арта, поэтому наш корабль отстой) -



Закидываем картинку на этот сайт для перевода картинки в формат кода

И в поле base64 копируем код, который нам сгенерировали:
Теперь вместо строк "data:image/png;base64,здоровенный код в кавычках" в нашем класса Images вставлеяем этот код. Пока у нас и враги, и звездолет будут выглядеть одинаково

Итого наш код пока вот такой

Создание базы

Если посмотреть наш код повнимательней, то наша база еще не создана - класс есть, а создания объекта класса нет. Поэтому создаем его в переменную script

var script = new Script();

Для того, чтобы убедиться в том, что код работает, пишем console.log(script);
А затем если вызываете консоль разработчика клавишей f12 для Хрома и CTRL+SHIFT+C для оперы. Во вкладке console видим объект script, знаичт у нас всё хорошо

Если что-то не работает можете свериться с моим кодом

Вы можете понажимать по появившимся объектам в консоли и поизучать их. Особенно полезно будет кликнуть на canvas, затем на context, затем спуститься ниже и нажать на __proto__ и мы увидим кучу методов для рбобты с канвасом. Как-раз их-то мы и будем использовать




Рендер

Ну и остается только произвести рендер нашего звездолета. Для этого создаем метод render в нашем класса script в самый конец класса, после "конструктора"

И добавляем туда две строчки: очистку нашего канваса - первые два нуля - начало координат, вторые два числа - ширина и высота очищаемого канваса. Они у нас записаны в объекте canvas в классе "скрипт", поэтому добираемся до этих записей

где:
и затем рисование звездолета
где первый аргумент - картинка, которую мы берем из класса "имейдж", а остальные числа как у вышенаписанной функции очистки холста - начала координат , ширина и высота

Теперь нам остается только вызвать этот рендер после создания объекта скрипт. Для этого пшием в конце кода вызов метода "рендер"

И сверяемся с живым примером


На этом пока всё. Звездолет нарисован, далее научим его "летать". Подсказка - для этого будем использовать отлов событий с помощью "addEventListener" и эксперементальную функцию для анимации requestAnimationFrame, которую создали авторы Мозиллы фаирфокса, и которая надеюсь останется во всех браузерах.