Создание 2D игры на чистом JavaScript ES5 на HTML5 Canvas (Таймлапс)
HTML-код
- Опубликовано: 12 сен 2024
- В этом видео (Таймлапс) создадим небольшую 2D игру на чистом JavaScript ES5 без использования фреймворков и библиотек.
Исходный код игры Elven Scout с ресурсами:
webgirl...
♡ Где меня найти?!
Instagram: / webgirlkristina
Twitter: / webgirlkristina
VK: webgirl...
FB: / webgirlkristina
Сотрудничество/collaboration: webgirlkristina@gmail.com
Игра 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
Щас я понял как делали Фаллаут 76))
+++
Максим Х на самом деле нет.
@@alexanderivanov9160 козел , испортил шутку
его не делали, просто взяли фаллаут 4 и вместо 4, написали 76.
@@TheMufinv только лучше сделал. без его коммента - шутка не смешная и очень тупая
Безжалостное, хладнокровное убийство мирнопасущегося орка?!! Общество защиты орков возмущено и глубоко скорбит!!!
хахахахаххаха
Вот я тоже не понял, чего вредного в орке было? Он даже траву не притоптал
Круто получилось👍🏻👍🏻👍🏻👍🏻👍🏻
+
Годный контентик!
Давай еще :)
Шо ты тут делаешь :o
фигасе, и ты тут)
ахуеть, насилие на канале... я рыдал за смерть орка...сейчас молимся за его душу... жестокий у тебя канал
на аватарке крест за упокой орка?
@@andrewmendela9065 на аватарке крест на котором белье сушу, орка кремировали
орк пал ради контента на канале, так бы скучно было вовсе :D
а это жестокое обращение с животными или терроризм (он же даже не ударил, а если бы ударил, то урона не нанёс бы (на сколько я могу судить))?
Влюблена 😍😍 Умничка ❤❤❤ Мотивация прибавилась :3 Спасибо 💕
Русская девушка фуллстек разработчик вебгеймдева, теперь я видел все!!!!
@@HOME-nx8mn да какая разница, щас бы срач устраивать по поводу фуллстек или фуллстак, 2 псевдоинтеллектуала
@@user-hi6fo1ky8k ты и он - 2 псевдоинтеллектуала
@@user-hi6fo1ky8k я никого не оскорблял. Начинать не советую.
@@HOME-nx8mn сразу школьника агрессивного видно, все понятно..
@@HOME-nx8mn я тебя удиалю, но в слове stack a произноситься ближе к aa (две а), чем э.
лампово и прям мастер-класс) С этого надо начинать любое обучение - с примера для подражания)
В кои-то веки в рекомендованных действительно интересный контент))) Молодец, удачи тебе в кодинге и развити, а то смотрю набежали тут суперпрогеры-самцы свое ЧСВ потешить в коментах))
и не только ЧВС....
Это потрясающе, уже неделю делаю игру на js, слабо получается, а тут... Такие люди меня вдохновляют не сдаваться!
Лайк, подписка
Ей, наткнулся на твой комент, стало интересно, как там твоя игра?
@@batyazh видимо не очень
Наконец-то что-то годное в рекомендациях. Человек, которого приятно слушать и который создаёт интересный контент. Подписка
Когда-то меня учили писать код как раз на простеньких игрушках. Это наверно был самый правильный подход к обучению. Именно благодаря тем урокам меня иногда тянет написать какую-то программку, хотя это и не связанно напрямую с моей работой.
очень лампово, еще радует то, что звук и картинка отличного качества!
У тебя очень круто получается, как то все акуратно и простенько. Я сейчас только перехожу на JavaScript, и твои видео очень мотивируют создать что то свое. Не знаю будет ли что то получатся или нет, но есть большое желание попробовать. Спасибо тебе за такие видео, удачи тебе)
А не скажешь как ты учишся javascript всмысле какие то курсы, видео или сайты?
@@arleenlasleur кодить не зная языка-исходника... это со словарём сидеть постоянно?
Как результат?
Очень красивая и голос приятный! Молодец, что можешь и кодить и рисовать и со звуком. За сайт с генерацией спрайтов перса отдельное спасибо! ;)
хорошо рисует но больше всего мне понравилось что все в бесплатных программах и на линуксе
Ну она сама мне понравилась😍
Очень интересно было посмотреть на процесс создания игры. Классное видео!
Хоорооошшшш)))) Оч кпуто получилось...
Продолжай
Молодец! Четко, понятно и наглядно. Спасибо за труд! Подписка однозначно! :)
За что орка убила... Непонятно...
просто показала как игра делается. это мотивация некоторым и даже для меня )
"Наконец убить вредного орка". Т.е. орка убили просто за то что он вредный. Это ужасно.
за Альянс!! xDD
Алексей Кондратьев это был её бывший)))
Не попросил прощения)
только сегодня подписалась на ваш канал и уже влюбилась) с нетерпением жду еще видяшек)
Мля, как же лампово
Круто, большая молодец!!!Вдохновляет садиться и кодить, интересный формат которым можно разбавлять туториалы :)
Это так мило
Круто, что вы показываете сам процесс. Многие програмиисты-ютуберы делают что-то, не показывая, и не понятно, что вообще происходит, и как это работает. Но вы молодец. Все получилось очень круто!
Вот это анимация! Я для своих 'игр' пишу просто квадратики, кружочки на канвасе, тк сам нормально рисовать не умею.
Пиздато сработано, Ковальски!
У тебя круто получается)0) Спасибо за видео)))
красивая девушка! прекрасно, что увлекается таким делом. успехов в развитии и достижении своих целей. С наступающими!
Какая молодец, Кристина. Лайкос тебе ))
Необычно! Лайк!👍
Просто офигительно
очень круто и вдохновляет)) молодец
Вау! Просто, вау! Респект)))
просто найти рабочий код в интернете и снять об этом видео, очень умно...
Это потрясающе! Ты такая умница!
было интересно посмотреть, спасибо!) удачи в развитии канала
Блет,бесит,когда кто-то умеет что-то чего не умеешь ты,но и мотивирует,могёшь,удачи тебе )
Спасибо Вам за данное видео. Подписываюсь, ставлю лайк 👍
Мне понравилось запись звуков из подручных предметов. Я знаю, что это довольно нормально, но всё же по моему гениально.
отличный таймлапс, удачи с контентом!
Пол часа показывать как рисуешь, а потом не показать большую часть кода. Молодец)
Рисование интереснее в таймлапсе смотреть. А код выложила (см. в описании под видео)
@@WebGirlKristina Нужно было на гитхаб или битбакет выкладывать. ВК не нужон!
@@W_0_W Ну спасибо хоть не в Одноклассники :/
@@slovoagainst а ты знаком с его уровнем? Или просто подпездываешь везде, где тебя не просят?
Информативность видео 0%. Ни слова о коде, алгоритме. Код кстати тоже нуждается в рефакторинге
Такое ощущение, что цель видео - попозировать как я тыкаю по клаве, типа умею. Дизлойс
ну так месяц на бумаге рисовала.потом пару месяцев писала. ну и видео сделала что все это за 5 минут . потом работодатели офигевают , чего ты плохо работаешь , на это у других 5 минут уходит )))
Как классно, что в рекомендациях попадаются такие интересные видео, мне как нубу было интересно(хоть я и учу C++, а не JS). Спасибо за мотивацию, удачи вам.
Оч классно, я как человек занимающийся веб проектированием, ставлю здоровенный царский лайк. Оч круто
Что сказать очень интересно )
Ты заслуживаешь лайк. Молодец.
ты крутая, первый раз зашел на твой канал и сразу лайк, такая умная и красивая, удачи в новых проектах)
Красиво сделала видео) не нудное как у парней) прям будто рядом с тобой сидел составлял всё) заставила и меня это пережить)) прикольно)
Это просто нереально круто!
Молодец! Крутой проект =)
Орк говорил: "Мама, я не хочу умирать!!!"
Орк рыдал, но принцесса Диснея оказалась убийцей!
Спасибо за познавательные видео! все хорошо рассказываешь и показываешь что и как надо делать! будем ждать от тебя еще видео!
надеюсь это был сарказм? Я просто ничего не понял, видео как писть 2д без библиотек, а на нем девушка что-то на ноуте делает, а что за код хз, код бы скинула. Вообще видео бессмысленное, я могу так же сделать на юнити, а сказать что это в css, один фиг никто ничего не увидит
Безжалостная орка жалко
да это шедевр
Прикольно получилось Понравилось. Есть идея для игры.
Возможно ли после отрисовки карти изменять "спрайты"?? Подбирать стену получая компонент для Крафта ( менять изображение стена на изображение проем в стене) или ставить стену там где ее не было???
Идея построить мир.. и перестраивать его по собственному желанию защищаясь от зомби. Строить ловушки преграды и ТП. Крафт предметов с ингредиентов розобраних стен.. ( розобрав шкаф получаеш 4 деревянных мебельных щита + 16 болтов) а етим деревяним щитом мебельном можно забить дверь чтоб зомби немог пройти у етой конструкции своя прочность.. ведь зомби может ломать...
Очень интересно, продолжай в том же духе!
Афигеть, девушка которая может все))) Круто!
Ваауууу,я подписываюсь!!! И больше всего на свете боюсь что такие крутые каналы вдруг закроются,так вот не закрывайся никогда 😁😁😁😀
Молодчинка!
Очень здорово! Вдохновляет
Одним прекрасным летним деньком,милая девушка в платьеце вышла проверить свой лук...результат один погибший орк..!!!девушки, вы бываете так жестоки ))))))
Девушка вы очень симпатичны и сразу не подумаешь что увидишь в видео девушку кодера. Молодчина, классное видео, однозначно лайк за старания
I love the RUclips 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.
Годно, ты молодец! Настоящий, инди-разработчик))
Круто! Лайк и подписка
Наконец-то хоть что-то интересное
Лайк и подписка не глядя))
Потрясающе!
Я пойду плакать, обняв себя за колени. Вы молодец
Молодец ) чего бы я добавил , дэк это больше эмоций в голос Кристины ) а в целом умница , так держать 😉
Хорошее видео. Было приятно посмотреть.
Пару вопросов. Ты рисовала все при помощи мышки? И где бы так научиться? )
Теперь вам нужно все снять в подробностях)Очень интересно
Как я счастлив, что вижу разработчиков без недо МакБуков)
@Misha Dovhiy Не Про, наверное.
у меня никогда не было мака, но судя по вашей реплике - это банальная зависть
у маков один из лучших экранов на рынке.
время автономности отличное ... Да, они не такое как были раньше. Но я вот купил за пару тысяч из америки MSI и экран мне не шибко нравится.
Не надо превращать бренд в фетиш ...
У меня много знакомых дизайнеров и программистов работают на макбуке, и у каждого есть свои взгляды на его пользу.
а ваш "недо" выглядит как банальная зависить ... на уровне школьника
Ну для Web маки очень даже хорошо подходят, потому что на них nix система и аккумулятор они держут отлично. На ходу работать - самое то.
@Timur Gavrilov Обоснуйте
@@programisli Конкуренты давно научились держать батарею больше мака. Mac OS становится легко на любой Windows - ноутбук. Но я юзаю Linux MINT который не уступает по функционалу. И я веб дев
Спасибо большое, интересное видео!
Прикольно!)👍😉
Молодчинка, лёгкий формат )
Спасибо за познавательное видео) теперь будем чем занять мозг
Спасибо ютубу что рекомендует такую годноту! Подписался!)
Красотка, умничка.
Какая молодец)
Привет, это потрясающе!
Великолепно!!!
Ммм необычный контент, понравилось пожалуй подпишусь )
Кристина, ты невероятная, умничка.++++
Что сказать, круто)
все супер! выглядит лучше, чем мой курсач в политехе по программированию 🌚
Очень интересное видео, пожалуй подпишусь
Русское видео с интересным контентом, и вроде бы даже неплохо снято. Но потом ты спускаешься в камменты, и всё становится на свои места.
очень понравилось видео!)
Тебе тёлочка понравилась
Кристина, молодец)
какая же ты умничка
горжусь такими девушками
Молодец! Круто!
Универсальный солдат. Заслуживаешь лайка за самодостаточность.
ты крутая, держи лайк и подписку!
Продолжай в том же духе!
Прикольно, ну ты крутая) рили
Клааасс! Я теперь тоже хочу создать платформер :3
Привет! Это было отличное утро)
Умница, что сказать.....
Умничка :)
10 из 10. Игра года. © Логвинов.
Комментарии показывают, что предрассудки и сексизм таки ого-го как существуют :)))))