Создание 2D игры на чистом JavaScript ES5 на HTML5 Canvas (Таймлапс)
HTML-код
- Опубликовано: 25 авг 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
фигасе, и ты тут)
В кои-то веки в рекомендованных действительно интересный контент))) Молодец, удачи тебе в кодинге и развити, а то смотрю набежали тут суперпрогеры-самцы свое ЧСВ потешить в коментах))
и не только ЧВС....
лампово и прям мастер-класс) С этого надо начинать любое обучение - с примера для подражания)
Русская девушка фуллстек разработчик вебгеймдева, теперь я видел все!!!!
@@HOME-nx8mn да какая разница, щас бы срач устраивать по поводу фуллстек или фуллстак, 2 псевдоинтеллектуала
@@user-hi6fo1ky8k ты и он - 2 псевдоинтеллектуала
@@user-hi6fo1ky8k я никого не оскорблял. Начинать не советую.
@@HOME-nx8mn сразу школьника агрессивного видно, все понятно..
@@HOME-nx8mn я тебя удиалю, но в слове stack a произноситься ближе к aa (две а), чем э.
хорошо рисует но больше всего мне понравилось что все в бесплатных программах и на линуксе
Ну она сама мне понравилась😍
Это потрясающе, уже неделю делаю игру на js, слабо получается, а тут... Такие люди меня вдохновляют не сдаваться!
Лайк, подписка
Ей, наткнулся на твой комент, стало интересно, как там твоя игра?
@@batyazh видимо не очень
Безжалостное, хладнокровное убийство мирнопасущегося орка?!! Общество защиты орков возмущено и глубоко скорбит!!!
хахахахаххаха
Вот я тоже не понял, чего вредного в орке было? Он даже траву не притоптал
Когда-то меня учили писать код как раз на простеньких игрушках. Это наверно был самый правильный подход к обучению. Именно благодаря тем урокам меня иногда тянет написать какую-то программку, хотя это и не связанно напрямую с моей работой.
Влюблена 😍😍 Умничка ❤❤❤ Мотивация прибавилась :3 Спасибо 💕
У тебя очень круто получается, как то все акуратно и простенько. Я сейчас только перехожу на JavaScript, и твои видео очень мотивируют создать что то свое. Не знаю будет ли что то получатся или нет, но есть большое желание попробовать. Спасибо тебе за такие видео, удачи тебе)
А не скажешь как ты учишся javascript всмысле какие то курсы, видео или сайты?
@@arleenlasleur кодить не зная языка-исходника... это со словарём сидеть постоянно?
Как результат?
ахуеть, насилие на канале... я рыдал за смерть орка...сейчас молимся за его душу... жестокий у тебя канал
на аватарке крест за упокой орка?
@@andrewmendela9065 на аватарке крест на котором белье сушу, орка кремировали
орк пал ради контента на канале, так бы скучно было вовсе :D
а это жестокое обращение с животными или терроризм (он же даже не ударил, а если бы ударил, то урона не нанёс бы (на сколько я могу судить))?
очень лампово, еще радует то, что звук и картинка отличного качества!
Очень красивая и голос приятный! Молодец, что можешь и кодить и рисовать и со звуком. За сайт с генерацией спрайтов перса отдельное спасибо! ;)
Очень интересно было посмотреть на процесс создания игры. Классное видео!
Вот это анимация! Я для своих 'игр' пишу просто квадратики, кружочки на канвасе, тк сам нормально рисовать не умею.
Наконец-то что-то годное в рекомендациях. Человек, которого приятно слушать и который создаёт интересный контент. Подписка
Мля, как же лампово
Молодец! Четко, понятно и наглядно. Спасибо за труд! Подписка однозначно! :)
За что орка убила... Непонятно...
просто показала как игра делается. это мотивация некоторым и даже для меня )
"Наконец убить вредного орка". Т.е. орка убили просто за то что он вредный. Это ужасно.
за Альянс!! xDD
Алексей Кондратьев это был её бывший)))
Не попросил прощения)
только сегодня подписалась на ваш канал и уже влюбилась) с нетерпением жду еще видяшек)
Мне понравилось запись звуков из подручных предметов. Я знаю, что это довольно нормально, но всё же по моему гениально.
Круто, большая молодец!!!Вдохновляет садиться и кодить, интересный формат которым можно разбавлять туториалы :)
просто найти рабочий код в интернете и снять об этом видео, очень умно...
Круто, что вы показываете сам процесс. Многие програмиисты-ютуберы делают что-то, не показывая, и не понятно, что вообще происходит, и как это работает. Но вы молодец. Все получилось очень круто!
Это так мило
Спасибо Вам за данное видео. Подписываюсь, ставлю лайк 👍
У тебя круто получается)0) Спасибо за видео)))
Спасибо за познавательные видео! все хорошо рассказываешь и показываешь что и как надо делать! будем ждать от тебя еще видео!
надеюсь это был сарказм? Я просто ничего не понял, видео как писть 2д без библиотек, а на нем девушка что-то на ноуте делает, а что за код хз, код бы скинула. Вообще видео бессмысленное, я могу так же сделать на юнити, а сказать что это в css, один фиг никто ничего не увидит
Безжалостная орка жалко
очень круто и вдохновляет)) молодец
Оч классно, я как человек занимающийся веб проектированием, ставлю здоровенный царский лайк. Оч круто
Пиздато сработано, Ковальски!
красивая девушка! прекрасно, что увлекается таким делом. успехов в развитии и достижении своих целей. С наступающими!
Я пойду плакать, обняв себя за колени. Вы молодец
Это потрясающе! Ты такая умница!
Какая молодец, Кристина. Лайкос тебе ))
Как я счастлив, что вижу разработчиков без недо МакБуков)
@Misha Dovhiy Не Про, наверное.
у меня никогда не было мака, но судя по вашей реплике - это банальная зависть
у маков один из лучших экранов на рынке.
время автономности отличное ... Да, они не такое как были раньше. Но я вот купил за пару тысяч из америки MSI и экран мне не шибко нравится.
Не надо превращать бренд в фетиш ...
У меня много знакомых дизайнеров и программистов работают на макбуке, и у каждого есть свои взгляды на его пользу.
а ваш "недо" выглядит как банальная зависить ... на уровне школьника
Ну для Web маки очень даже хорошо подходят, потому что на них nix система и аккумулятор они держут отлично. На ходу работать - самое то.
@Timur Gavrilov Обоснуйте
@@programisli Конкуренты давно научились держать батарею больше мака. Mac OS становится легко на любой Windows - ноутбук. Но я юзаю Linux MINT который не уступает по функционалу. И я веб дев
Хоорооошшшш)))) Оч кпуто получилось...
Продолжай
Вау! Просто, вау! Респект)))
Блет,бесит,когда кто-то умеет что-то чего не умеешь ты,но и мотивирует,могёшь,удачи тебе )
Как классно, что в рекомендациях попадаются такие интересные видео, мне как нубу было интересно(хоть я и учу C++, а не JS). Спасибо за мотивацию, удачи вам.
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.
было интересно посмотреть, спасибо!) удачи в развитии канала
Ты заслуживаешь лайк. Молодец.
Пол часа показывать как рисуешь, а потом не показать большую часть кода. Молодец)
Рисование интереснее в таймлапсе смотреть. А код выложила (см. в описании под видео)
@@WebGirlKristina Нужно было на гитхаб или битбакет выкладывать. ВК не нужон!
@@W_0_W Ну спасибо хоть не в Одноклассники :/
@@slovoagainst а ты знаком с его уровнем? Или просто подпездываешь везде, где тебя не просят?
Информативность видео 0%. Ни слова о коде, алгоритме. Код кстати тоже нуждается в рефакторинге
Такое ощущение, что цель видео - попозировать как я тыкаю по клаве, типа умею. Дизлойс
ну так месяц на бумаге рисовала.потом пару месяцев писала. ну и видео сделала что все это за 5 минут . потом работодатели офигевают , чего ты плохо работаешь , на это у других 5 минут уходит )))
Необычно! Лайк!👍
Красиво сделала видео) не нудное как у парней) прям будто рядом с тобой сидел составлял всё) заставила и меня это пережить)) прикольно)
отличный таймлапс, удачи с контентом!
Спасибо за познавательное видео) теперь будем чем занять мозг
Просто офигительно
Очень интересно, продолжай в том же духе!
Молодец! Крутой проект =)
Спасибо большое, интересное видео!
Теперь вам нужно все снять в подробностях)Очень интересно
Афигеть, девушка которая может все))) Круто!
Это просто нереально круто!
Девушка вы очень симпатичны и сразу не подумаешь что увидишь в видео девушку кодера. Молодчина, классное видео, однозначно лайк за старания
Очень здорово! Вдохновляет
Что сказать очень интересно )
Орк говорил: "Мама, я не хочу умирать!!!"
Орк рыдал, но принцесса Диснея оказалась убийцей!
ты крутая, первый раз зашел на твой канал и сразу лайк, такая умная и красивая, удачи в новых проектах)
Наконец-то хоть что-то интересное
Ваауууу,я подписываюсь!!! И больше всего на свете боюсь что такие крутые каналы вдруг закроются,так вот не закрывайся никогда 😁😁😁😀
все супер! выглядит лучше, чем мой курсач в политехе по программированию 🌚
Прикольно получилось Понравилось. Есть идея для игры.
Возможно ли после отрисовки карти изменять "спрайты"?? Подбирать стену получая компонент для Крафта ( менять изображение стена на изображение проем в стене) или ставить стену там где ее не было???
Идея построить мир.. и перестраивать его по собственному желанию защищаясь от зомби. Строить ловушки преграды и ТП. Крафт предметов с ингредиентов розобраних стен.. ( розобрав шкаф получаеш 4 деревянных мебельных щита + 16 болтов) а етим деревяним щитом мебельном можно забить дверь чтоб зомби немог пройти у етой конструкции своя прочность.. ведь зомби может ломать...
Годно, ты молодец! Настоящий, инди-разработчик))
да это шедевр
Русское видео с интересным контентом, и вроде бы даже неплохо снято. Но потом ты спускаешься в камменты, и всё становится на свои места.
Очень интересное видео, пожалуй подпишусь
Подписка не глядя
@@user-ey7rd9ih4g все мы в какой та степени баборабы)
ты и детей так будешь делать?
Кристина, молодец)
Ммм необычный контент, понравилось пожалуй подпишусь )
Кристина, ты невероятная, умничка.++++
Блин, очень даже классно, а я все еще в блакнотиках делаю кодинг...
Зап год есть прогресс?
@@neokanal АХХПХПХПХАХА НАСМЕШИЛ Я ЭТИМ НЕ ЗАНИМАЮСЬ УЖЕ КАК ГОД ПЭВЭЭВЫЭЫЭ СОРЯН
@@xxxarizmaa .. это жизнь
какая же ты умничка
горжусь такими девушками
Лайк и подписка не глядя))
Клааасс! Я теперь тоже хочу создать платформер :3
Спасибо ютубу что рекомендует такую годноту! Подписался!)
Молодчинка, лёгкий формат )
Спасибо за видео! Хотелось бы объяснений что зачем и почему
Красотка, умничка.
Молодец ) чего бы я добавил , дэк это больше эмоций в голос Кристины ) а в целом умница , так держать 😉
Круто! Лайк и подписка
Вау, крутость зашкаливает . Эффект достигнут
Великолепно!!!
Потрясающе!
Какая молодец)
Прикольно!)👍😉
Привет, это потрясающе!
Офигеть ты крутая! Лайк, подписка и репост.
Молодчинка!
Универсальный солдат. Заслуживаешь лайка за самодостаточность.
ты крутая, держи лайк и подписку!
Продолжай в том же духе!
я работаю на юнити и голова болит только от мысли сделать новую игру для себя - это же так много работы
и хоть это простейшая игра, но так круто видеть законченную работу
молодец
Зачет, круто.Удивился когда увидел девушку в геймдеве.
Какая хорошая девушка. Умничка.
Одним прекрасным летним деньком,милая девушка в платьеце вышла проверить свой лук...результат один погибший орк..!!!девушки, вы бываете так жестоки ))))))
очень понравилось видео!)
Тебе тёлочка понравилась
Умница, что сказать.....