Создание 2D игры на чистом JavaScript ES5 на HTML5 Canvas (Таймлапс)

В этом видео (Таймлапс) создадим небольшую 2D игру на чистом JavaScript ES5 без использования фреймворков и библиотек.
Исходный код игры Elven Scout с ресурсами:
webgirl...
♡ Где меня найти?!
Instagram: / webgirlkristina
Twitter: / webgirlkristina
VK: webgirl...
FB: / webgirlkristina
Сотрудничество/collaboration: [e-mail]
Игра Elven Scout на ES6:
1. Настройка webpack и babel.: • Создаем игру Elven Sco...
2. Игровой цикл, основная структура.: • Создаем игру Elven Sco...
3. Создание графики.: • Создаем игру Elven Sco...
4. Загрузка графики, управление сценами.: • Создаем игру Elven Sco...
5. Управление клавиатурой.: • Создаем игру Elven Sco...
6. Спрайты и анимация.: • Создаем игру Elven Sco...
7. Тайловая карта.: • Создаем игру Elven Sco...
8. Анимация персонажа.: • Создаем игру Elven Sco...
9. Игровой персонаж.: • Создаем игру Elven Sco...
10. Камера. : • Создаем игру Elven Sco...
11. Коллизия: • Создаем игру Elven Sco...
12. Враг: • Создаем игру Elven Sco...
13. Оружие: • Создаем игру Elven Sco...
14. Стрелы: • Создаем игру Elven Sco...
Создание 2D игры на чистом JavaScript ES5 на HTML5 Canvas (Таймлапс): • Создание 2D игры на чи...
Базовые возможности ES6 для начинающих.: • Базовые возможности ES...
Фоновая музыка/Background Music: "Let Me In" by Alex Stoner (taketones.com/...)
Licensed under Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)
License taketones.com/...
#gamedev #2dgame #javascript #html5 #canvas

[@user-df4kb1io9l]

Щас я понял как делали Фаллаут 76))

[@user-yq6vc3mn9l]

+++

[@alexanderivanov9160]

Максим Х на самом деле нет.

[@TheMufinv]

@@alexanderivanov9160 козел , испортил шутку

[@diabetescheesecake]

его не делали, просто взяли фаллаут 4 и вместо 4, написали 76.

[@asket1]

@@TheMufinv только лучше сделал. без его коммента - шутка не смешная и очень тупая

[@dmitriiG2603]

Это потрясающе, уже неделю делаю игру на js, слабо получается, а тут... Такие люди меня вдохновляют не сдаваться!
Лайк, подписка

[@batyazh]

Ей, наткнулся на твой комент, стало интересно, как там твоя игра?

[@ZELEBOBA11]

@@batyazh видимо не очень

[@Al-Mas3000]

В кои-то веки в рекомендованных действительно интересный контент))) Молодец, удачи тебе в кодинге и развити, а то смотрю набежали тут суперпрогеры-самцы свое ЧСВ потешить в коментах))

[@denwww74]

и не только ЧВС....

[@n1ckyrush]

Годный контентик!
Давай еще :)

[@mkoe6462]

Шо ты тут делаешь :o

[@pupok90]

фигасе, и ты тут)

[@HOME-nx8mn]

Русская девушка фуллстек разработчик вебгеймдева, теперь я видел все!!!!

[@user-hi6fo1ky8k]

@@HOME-nx8mn да какая разница, щас бы срач устраивать по поводу фуллстек или фуллстак, 2 псевдоинтеллектуала

[@HOME-nx8mn]

@@user-hi6fo1ky8k ты и он - 2 псевдоинтеллектуала

[@HOME-nx8mn]

@@user-hi6fo1ky8k я никого не оскорблял. Начинать не советую.

[@user-hi6fo1ky8k]

@@HOME-nx8mn сразу школьника агрессивного видно, все понятно..

[@ddd7386]

@@HOME-nx8mn я тебя удиалю, но в слове stack a произноситься ближе к aa (две а), чем э.

[@SuprunAlexey]

Круто получилось👍🏻👍🏻👍🏻👍🏻👍🏻

[@vourlake1780]

+

[@djAbyssRT]

лампово и прям мастер-класс) С этого надо начинать любое обучение - с примера для подражания)

[@user-tv1kt8tu4r]

Влюблена 😍😍 Умничка ❤❤❤ Мотивация прибавилась :3 Спасибо 💕

[@user-sv5zr2it9b]

У тебя очень круто получается, как то все акуратно и простенько. Я сейчас только перехожу на JavaScript, и твои видео очень мотивируют создать что то свое. Не знаю будет ли что то получатся или нет, но есть большое желание попробовать. Спасибо тебе за такие видео, удачи тебе)

[@davidarsenyan1425]

А не скажешь как ты учишся javascript всмысле какие то курсы, видео или сайты?

[@MrTurkish1988]

@@arleenlasleur кодить не зная языка-исходника... это со словарём сидеть постоянно?

[@vitali.graphic]

Как результат?

[@elenazueva1039]

очень лампово, еще радует то, что звук и картинка отличного качества!

[@user-bl9wx1qy8x]

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

[@arturstadnix]

Наконец-то что-то годное в рекомендациях. Человек, которого приятно слушать и который создаёт интересный контент. Подписка

[@stas2040]

Безжалостное, хладнокровное убийство мирнопасущегося орка?!! Общество защиты орков возмущено и глубоко скорбит!!!

[@griwopr6015]

хахахахаххаха

[@PenzaSaratov]

Вот я тоже не понял, чего вредного в орке было? Он даже траву не притоптал

[@alex90aaa]

хорошо рисует но больше всего мне понравилось что все в бесплатных программах и на линуксе

[@ruzzifer]

Ну она сама мне понравилась😍

[@celestian_gaming]

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

[@leviafanux]

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

[@andrewmendela9065]

на аватарке крест за упокой орка?

[@leviafanux]

@@andrewmendela9065 на аватарке крест на котором белье сушу, орка кремировали

[@user-gb1ff7mg4t]

орк пал ради контента на канале, так бы скучно было вовсе :D

[@doragonsoul9186]

а это жестокое обращение с животными или терроризм (он же даже не ударил, а если бы ударил, то урона не нанёс бы (на сколько я могу судить))?

[@marinaurrey5246]

Очень интересно было посмотреть на процесс создания игры. Классное видео!

[@frogwarg]

Круто, что вы показываете сам процесс. Многие програмиисты-ютуберы делают что-то, не показывая, и не понятно, что вообще происходит, и как это работает. Но вы молодец. Все получилось очень круто!

[@godofarms1069]

Вот это анимация! Я для своих 'игр' пишу просто квадратики, кружочки на канвасе, тк сам нормально рисовать не умею.

[@D_o_m_i_n_u_S]

Молодец! Четко, понятно и наглядно. Спасибо за труд! Подписка однозначно! :)

[@user-ev5lb5wp9l]

Круто, большая молодец!!!Вдохновляет садиться и кодить, интересный формат которым можно разбавлять туториалы :)

[@phir9255]

Мне понравилось запись звуков из подручных предметов. Я знаю, что это довольно нормально, но всё же по моему гениально.

[@tonynice3007]

Мля, как же лампово

[@SmkaShka]

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

[@user-cp9ri4cr4h]

Блет,бесит,когда кто-то умеет что-то чего не умеешь ты,но и мотивирует,могёшь,удачи тебе )

[@paljm345]

Хоорооошшшш)))) Оч кпуто получилось...
Продолжай

[@cheesecheese5790]

только сегодня подписалась на ваш канал и уже влюбилась) с нетерпением жду еще видяшек)

[@dzidzoful]

просто найти рабочий код в интернете и снять об этом видео, очень умно...

[@andreinakonex2501]

Спасибо Вам за данное видео. Подписываюсь, ставлю лайк 👍

[@user-np2cu5qv7x]

Как классно, что в рекомендациях попадаются такие интересные видео, мне как нубу было интересно(хоть я и учу C++, а не JS). Спасибо за мотивацию, удачи вам.

[@sosochka_nerealochka]

Пиздато сработано, Ковальски!

[@alexariy3878]

красивая девушка! прекрасно, что увлекается таким делом. успехов в развитии и достижении своих целей. С наступающими!

[@S0A0W0]

Я пойду плакать, обняв себя за колени. Вы молодец

[@user-dr2mh7cv9q]

Это так мило

[@user-cu8rh8nk5u]

Какая молодец, Кристина. Лайкос тебе ))

[@philmirez]

I love the TH-cam algorithm. The only language in this video that I understand is JavaScript and the algorithm knew that was enough to suggest it to me. Thank you for sharing your workflow.

[@user-qd7tu7zl3c]

Спасибо за познавательные видео! все хорошо рассказываешь и показываешь что и как надо делать! будем ждать от тебя еще видео!

[@nullnull295]

надеюсь это был сарказм? Я просто ничего не понял, видео как писть 2д без библиотек, а на нем девушка что-то на ноуте делает, а что за код хз, код бы скинула. Вообще видео бессмысленное, я могу так же сделать на юнити, а сказать что это в css, один фиг никто ничего не увидит

[@user-fy4vs7sy4k]

Безжалостная орка жалко

[@user-br9ql3ug8o]

Вау! Просто, вау! Респект)))

[@Nix_46]

Красиво сделала видео) не нудное как у парней) прям будто рядом с тобой сидел составлял всё) заставила и меня это пережить)) прикольно)

[@user-bx1pe4bp8w]

Афигеть, девушка которая может все))) Круто!

[@aladinmovies]

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

[@MAIVSHOW]

У тебя круто получается)0) Спасибо за видео)))

[@mkstlz]

очень круто и вдохновляет)) молодец

[@cicuta_verde]

Это потрясающе! Ты такая умница!

[@user-ej2sh2df7w]

было интересно посмотреть, спасибо!) удачи в развитии канала

[@cerdek9190]

Просто офигительно

[@construct2-796]

Годно, ты молодец! Настоящий, инди-разработчик))

[@Korbeus]

Пол часа показывать как рисуешь, а потом не показать большую часть кода. Молодец)

[@WebGirlKristina]

Рисование интереснее в таймлапсе смотреть. А код выложила (см. в описании под видео)

[@W_0_W]

@@WebGirlKristina Нужно было на гитхаб или битбакет выкладывать. ВК не нужон!

[@user-ub3hd4sy4e]

​@@W_0_W Ну спасибо хоть не в Одноклассники :/

[@goinside4957]

​@@slovoagainst а ты знаком с его уровнем? Или просто подпездываешь везде, где тебя не просят?
Информативность видео 0%. Ни слова о коде, алгоритме. Код кстати тоже нуждается в рефакторинге
Такое ощущение, что цель видео - попозировать как я тыкаю по клаве, типа умею. Дизлойс

[@user-wo3rx5oe1f]

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

[@user-ce1mz3en9j]

Необычно! Лайк!👍

[@grigiobasi2751]

Как я счастлив, что вижу разработчиков без недо МакБуков)

[@antonsergeev6064]

@Misha Dovhiy Не Про, наверное.

[@alexthebear]

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

[@programisli]

Ну для Web маки очень даже хорошо подходят, потому что на них nix система и аккумулятор они держут отлично. На ходу работать - самое то.

[@grigiobasi2751]

@Timur Gavrilov Обоснуйте

[@grigiobasi2751]

@@programisli Конкуренты давно научились держать батарею больше мака. Mac OS становится легко на любой Windows - ноутбук. Но я юзаю Linux MINT который не уступает по функционалу. И я веб дев

[@islam_in_the_west]

Ты заслуживаешь лайк. Молодец.

[@shkrv6]

отличный таймлапс, удачи с контентом!

[@robertodiohu7052]

Прикольно получилось Понравилось. Есть идея для игры.
Возможно ли после отрисовки карти изменять "спрайты"?? Подбирать стену получая компонент для Крафта ( менять изображение стена на изображение проем в стене) или ставить стену там где ее не было???
Идея построить мир.. и перестраивать его по собственному желанию защищаясь от зомби. Строить ловушки преграды и ТП. Крафт предметов с ингредиентов розобраних стен.. ( розобрав шкаф получаеш 4 деревянных мебельных щита + 16 болтов) а етим деревяним щитом мебельном можно забить дверь чтоб зомби немог пройти у етой конструкции своя прочность.. ведь зомби может ломать...

[@toshadrakosha8141]

Теперь вам нужно все снять в подробностях)Очень интересно

[@user-gu5ir3zs4v]

Ваауууу,я подписываюсь!!! И больше всего на свете боюсь что такие крутые каналы вдруг закроются,так вот не закрывайся никогда 😁😁😁😀

[@GennadyDryomin]

Очень интересно, продолжай в том же духе!

[@ecl1pse101]

ты крутая, первый раз зашел на твой канал и сразу лайк, такая умная и красивая, удачи в новых проектах)

[@elinaomurkulova3213]

Спасибо за познавательное видео) теперь будем чем занять мозг

[@lukashdroppshow2607]

Молодец! Крутой проект =)

[@Meinerdi]

Это просто нереально круто!

[@BoomBitGang]

Что сказать очень интересно )

[@danterage636]

да это шедевр

[@happer2009]

За что орка убила... Непонятно...

[@user-pd5xd8eh7m]

просто показала как игра делается. это мотивация некоторым и даже для меня )

[@user-td7rl3xh2k]

"Наконец убить вредного орка". Т.е. орка убили просто за то что он вредный. Это ужасно.

[@user-se7il1ry5z]

за Альянс!! xDD

[@user-lv8gz5xg4e]

Алексей Кондратьев это был её бывший)))

[@avtor1995]

Не попросил прощения)

[@dr_fap]

Орк говорил: "Мама, я не хочу умирать!!!"
Орк рыдал, но принцесса Диснея оказалась убийцей!

[@sergeyshalnov1925]

все супер! выглядит лучше, чем мой курсач в политехе по программированию 🌚

[@user-dc2su5zb3o]

Молодчинка!

[@libcheet]

Хорошее видео. Было приятно посмотреть.
Пару вопросов. Ты рисовала все при помощи мышки? И где бы так научиться? )

[@user-gl3md9ud3h]

какая же ты умничка
горжусь такими девушками

[@OleksiiBZ]

Молодчинка, лёгкий формат )

[@enrewardronkhall8340]

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

[@goodmoment4643]

Молодец ) чего бы я добавил , дэк это больше эмоций в голос Кристины ) а в целом умница , так держать 😉

[@user-wc5jd3gi4s]

Вау, крутость зашкаливает . Эффект достигнут

[@sergiyrudenko905]

Спасибо большое, интересное видео!

[@Alexander.D.]

Очень здорово! Вдохновляет

[@ennuy3use483]

Наконец-то хоть что-то интересное

[@user-eq1bl3xt5c]

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

[@mymom2328]

Универсальный солдат. Заслуживаешь лайка за самодостаточность.

[@demuzinc.2420]

Потрясающе!

[@yugo9805]

Зачет, круто.Удивился когда увидел девушку в геймдеве.

[@user-mw4og6kb2o]

Прикольно!)👍😉

[@ruslannormetov]

Спасибо ютубу что рекомендует такую годноту! Подписался!)

[@catweb666]

Круто! Лайк и подписка

[@monohydrate1105]

Очень интересное видео, пожалуй подпишусь

[@vladsa7]

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

[@Маленькая_сосна]

Красотка, умничка.

[@user-xb9ux2ed7m]

Клааасс! Я теперь тоже хочу создать платформер :3

[@xxxarizmaa]

Блин, очень даже классно, а я все еще в блакнотиках делаю кодинг...

[@neokanal]

Зап год есть прогресс?

[@xxxarizmaa]

@@neokanal АХХПХПХПХАХА НАСМЕШИЛ Я ЭТИМ НЕ ЗАНИМАЮСЬ УЖЕ КАК ГОД ПЭВЭЭВЫЭЫЭ СОРЯН

[@neokanal]

@@xxxarizmaa .. это жизнь

[@MsGrooveOn]

Какая молодец)

[@vladimirzhulin]

Лайк и подписка не глядя))

[@KonicaHexanon]

Русское видео с интересным контентом, и вроде бы даже неплохо снято. Но потом ты спускаешься в камменты, и всё становится на свои места.

[@manul74]

Великолепно!!!

[@Harharhargun]

Очень круто!! Последнее время все чаще беру задачи с js в основе.. Понимаю что стоит развиваться в этом направлении тк. это интересно и больше работы. С помощью каких книг достигла такого уровня? Посоветуешь парочку?))

[@user-bh6mc8pd8g]

найс) случайно наткнулся на вас в сети)
сколько вы уже практикуете веб ?) и как развивались?) интересно было бы узнать ваш опыт.

[@hikaro_top]

Что сказать, круто)

[@base-color]

Привет, это потрясающе!

[@nikolasivanov6337]

Кристина, ты невероятная, умничка.++++

[@alexmat7937]

Привет! Это было отличное утро)

[@bitcoin4ever864]

ты крутая, держи лайк и подписку!
Продолжай в том же духе!

[@vrazovsky]

Умница, что сказать.....

[@anuardoshchan9262]

Like! Будет ли работа с платными редакторами?