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

  Рет қаралды 300,462

WebGirl Kristina

WebGirl Kristina

5 жыл бұрын

В этом видео (Таймлапс) создадим небольшую 2D игру на чистом JavaScript ES5 без использования фреймворков и библиотек.
Исходный код игры Elven Scout с ресурсами:
webgirlkristina?w=wall...
♡ Где меня найти?!
Instagram: / webgirlkristina
Twitter: / webgirlkristina
VK: webgirlkristina
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/track/let-me-in)
Licensed under Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)
License taketones.com/license/1
#gamedev #2dgame #javascript #html5 #canvas

Пікірлер: 825
@user-df4kb1io9l
@user-df4kb1io9l 5 жыл бұрын
Щас я понял как делали Фаллаут 76))
@user-yq6vc3mn9l
@user-yq6vc3mn9l 5 жыл бұрын
+++
@alexanderivanov9160
@alexanderivanov9160 5 жыл бұрын
Максим Х на самом деле нет.
@TheMufinv
@TheMufinv 5 жыл бұрын
@@alexanderivanov9160 козел , испортил шутку
@diabetescheesecake
@diabetescheesecake 5 жыл бұрын
его не делали, просто взяли фаллаут 4 и вместо 4, написали 76.
@asket1
@asket1 5 жыл бұрын
@@TheMufinv только лучше сделал. без его коммента - шутка не смешная и очень тупая
@user-tv1kt8tu4r
@user-tv1kt8tu4r 5 жыл бұрын
Влюблена 😍😍 Умничка ❤❤❤ Мотивация прибавилась :3 Спасибо 💕
@marinaurrey5246
@marinaurrey5246 5 жыл бұрын
Очень интересно было посмотреть на процесс создания игры. Классное видео!
@celestian_gaming
@celestian_gaming 5 жыл бұрын
Очень красивая и голос приятный! Молодец, что можешь и кодить и рисовать и со звуком. За сайт с генерацией спрайтов перса отдельное спасибо! ;)
@MAIVSHOW
@MAIVSHOW 5 жыл бұрын
У тебя круто получается)0) Спасибо за видео)))
@D_o_m_i_n_u_S
@D_o_m_i_n_u_S 5 жыл бұрын
Молодец! Четко, понятно и наглядно. Спасибо за труд! Подписка однозначно! :)
@djAbyssRT
@djAbyssRT 5 жыл бұрын
лампово и прям мастер-класс) С этого надо начинать любое обучение - с примера для подражания)
@cicuta_verde
@cicuta_verde 5 жыл бұрын
Это потрясающе! Ты такая умница!
@cheesecheese5790
@cheesecheese5790 5 жыл бұрын
только сегодня подписалась на ваш канал и уже влюбилась) с нетерпением жду еще видяшек)
@SuprunAlexey
@SuprunAlexey 5 жыл бұрын
Круто получилось👍🏻👍🏻👍🏻👍🏻👍🏻
@vourlake1780
@vourlake1780 3 жыл бұрын
+
@user-ej2sh2df7w
@user-ej2sh2df7w 5 жыл бұрын
было интересно посмотреть, спасибо!) удачи в развитии канала
@mkstlz
@mkstlz 5 жыл бұрын
очень круто и вдохновляет)) молодец
@elenazueva1039
@elenazueva1039 5 жыл бұрын
очень лампово, еще радует то, что звук и картинка отличного качества!
@user-ev5lb5wp9l
@user-ev5lb5wp9l 5 жыл бұрын
Круто, большая молодец!!!Вдохновляет садиться и кодить, интересный формат которым можно разбавлять туториалы :)
@shkrv6
@shkrv6 5 жыл бұрын
отличный таймлапс, удачи с контентом!
@n1ckyrush
@n1ckyrush 5 жыл бұрын
Годный контентик! Давай еще :)
@mkoe6462
@mkoe6462 5 жыл бұрын
Шо ты тут делаешь :o
@pupok90
@pupok90 5 жыл бұрын
фигасе, и ты тут)
@user-cu8rh8nk5u
@user-cu8rh8nk5u 5 жыл бұрын
Какая молодец, Кристина. Лайкос тебе ))
@lukashdroppshow2607
@lukashdroppshow2607 5 жыл бұрын
Молодец! Крутой проект =)
@GennadyDryomin
@GennadyDryomin 5 жыл бұрын
Очень интересно, продолжай в том же духе!
@Alexander.D.
@Alexander.D. 5 жыл бұрын
Очень здорово! Вдохновляет
@user-ce1mz3en9j
@user-ce1mz3en9j 5 жыл бұрын
Необычно! Лайк!👍
@andreinakonex2501
@andreinakonex2501 2 жыл бұрын
Спасибо Вам за данное видео. Подписываюсь, ставлю лайк 👍
@arturstadnix
@arturstadnix 5 жыл бұрын
Наконец-то что-то годное в рекомендациях. Человек, которого приятно слушать и который создаёт интересный контент. Подписка
@dmitriiG2603
@dmitriiG2603 4 жыл бұрын
Это потрясающе, уже неделю делаю игру на js, слабо получается, а тут... Такие люди меня вдохновляют не сдаваться! Лайк, подписка
@batyazh
@batyazh 2 жыл бұрын
Ей, наткнулся на твой комент, стало интересно, как там твоя игра?
@ZELEBOBA11
@ZELEBOBA11 2 жыл бұрын
@@batyazh видимо не очень
@base-color
@base-color 5 жыл бұрын
Привет, это потрясающе!
@Meinerdi
@Meinerdi 3 жыл бұрын
Это просто нереально круто!
@sergiyrudenko905
@sergiyrudenko905 5 жыл бұрын
Спасибо большое, интересное видео!
@user-np2cu5qv7x
@user-np2cu5qv7x 5 жыл бұрын
Как классно, что в рекомендациях попадаются такие интересные видео, мне как нубу было интересно(хоть я и учу C++, а не JS). Спасибо за мотивацию, удачи вам.
@islam_in_the_west
@islam_in_the_west 5 жыл бұрын
Ты заслуживаешь лайк. Молодец.
@user-sv5zr2it9b
@user-sv5zr2it9b 5 жыл бұрын
У тебя очень круто получается, как то все акуратно и простенько. Я сейчас только перехожу на JavaScript, и твои видео очень мотивируют создать что то свое. Не знаю будет ли что то получатся или нет, но есть большое желание попробовать. Спасибо тебе за такие видео, удачи тебе)
@davidarsenyan1425
@davidarsenyan1425 5 жыл бұрын
А не скажешь как ты учишся javascript всмысле какие то курсы, видео или сайты?
@MrTurkish1988
@MrTurkish1988 5 жыл бұрын
@@arleenlasleur кодить не зная языка-исходника... это со словарём сидеть постоянно?
@vitali.graphic
@vitali.graphic 2 жыл бұрын
Как результат?
@user-br9ql3ug8o
@user-br9ql3ug8o 5 жыл бұрын
Вау! Просто, вау! Респект)))
@frogwarg
@frogwarg 4 жыл бұрын
Круто, что вы показываете сам процесс. Многие програмиисты-ютуберы делают что-то, не показывая, и не понятно, что вообще происходит, и как это работает. Но вы молодец. Все получилось очень круто!
@user-qd7tu7zl3c
@user-qd7tu7zl3c 5 жыл бұрын
Спасибо за познавательные видео! все хорошо рассказываешь и показываешь что и как надо делать! будем ждать от тебя еще видео!
@nullnull295
@nullnull295 5 жыл бұрын
надеюсь это был сарказм? Я просто ничего не понял, видео как писть 2д без библиотек, а на нем девушка что-то на ноуте делает, а что за код хз, код бы скинула. Вообще видео бессмысленное, я могу так же сделать на юнити, а сказать что это в css, один фиг никто ничего не увидит
@user-fy4vs7sy4k
@user-fy4vs7sy4k 4 жыл бұрын
Безжалостная орка жалко
@vladimirzhulin
@vladimirzhulin 5 жыл бұрын
Лайк и подписка не глядя))
@Nix_46
@Nix_46 5 жыл бұрын
Красиво сделала видео) не нудное как у парней) прям будто рядом с тобой сидел составлял всё) заставила и меня это пережить)) прикольно)
@monohydrate1105
@monohydrate1105 5 жыл бұрын
Очень интересное видео, пожалуй подпишусь
@toshadrakosha8141
@toshadrakosha8141 5 жыл бұрын
Теперь вам нужно все снять в подробностях)Очень интересно
@demuzinc.2420
@demuzinc.2420 5 жыл бұрын
Потрясающе!
@alexariy3878
@alexariy3878 5 жыл бұрын
красивая девушка! прекрасно, что увлекается таким делом. успехов в развитии и достижении своих целей. С наступающими!
@romansharpe1131
@romansharpe1131 5 жыл бұрын
Отличное видео)
@Al-Mas3000
@Al-Mas3000 5 жыл бұрын
В кои-то веки в рекомендованных действительно интересный контент))) Молодец, удачи тебе в кодинге и развити, а то смотрю набежали тут суперпрогеры-самцы свое ЧСВ потешить в коментах))
@denwww74
@denwww74 5 жыл бұрын
и не только ЧВС....
@bitcoin4ever864
@bitcoin4ever864 5 жыл бұрын
ты крутая, держи лайк и подписку! Продолжай в том же духе!
@ecl1pse101
@ecl1pse101 5 жыл бұрын
ты крутая, первый раз зашел на твой канал и сразу лайк, такая умная и красивая, удачи в новых проектах)
@user-oz3wx9uk7b
@user-oz3wx9uk7b 5 жыл бұрын
очень понравилось видео!)
@anton5988
@anton5988 5 жыл бұрын
Тебе тёлочка понравилась
@stas2040
@stas2040 5 жыл бұрын
Безжалостное, хладнокровное убийство мирнопасущегося орка?!! Общество защиты орков возмущено и глубоко скорбит!!!
@griwopr6015
@griwopr6015 3 жыл бұрын
хахахахаххаха
@PenzaSaratov
@PenzaSaratov 2 жыл бұрын
Вот я тоже не понял, чего вредного в орке было? Он даже траву не притоптал
@MsGrooveOn
@MsGrooveOn 5 жыл бұрын
Какая молодец)
@user-xb9ux2ed7m
@user-xb9ux2ed7m 5 жыл бұрын
Клааасс! Я теперь тоже хочу создать платформер :3
@BoomBitGang
@BoomBitGang 5 жыл бұрын
Что сказать очень интересно )
@user-bl9wx1qy8x
@user-bl9wx1qy8x 5 жыл бұрын
Когда-то меня учили писать код как раз на простеньких игрушках. Это наверно был самый правильный подход к обучению. Именно благодаря тем урокам меня иногда тянет написать какую-то программку, хотя это и не связанно напрямую с моей работой.
@construct2-796
@construct2-796 5 жыл бұрын
Годно, ты молодец! Настоящий, инди-разработчик))
@SmkaShka
@SmkaShka 5 жыл бұрын
Оч классно, я как человек занимающийся веб проектированием, ставлю здоровенный царский лайк. Оч круто
@elinaomurkulova3213
@elinaomurkulova3213 5 жыл бұрын
Спасибо за познавательное видео) теперь будем чем занять мозг
@OleksiiBZ
@OleksiiBZ 5 жыл бұрын
Молодчинка, лёгкий формат )
@cerdek9190
@cerdek9190 5 жыл бұрын
Просто офигительно
@roboshop3741
@roboshop3741 5 жыл бұрын
Офигеть ты крутая! Лайк, подписка и репост.
@paljm345
@paljm345 3 жыл бұрын
Хоорооошшшш)))) Оч кпуто получилось... Продолжай
@catweb666
@catweb666 5 жыл бұрын
Круто! Лайк и подписка
@user-mw4og6kb2o
@user-mw4og6kb2o 5 жыл бұрын
Прикольно!)👍😉
@ennuy3use483
@ennuy3use483 5 жыл бұрын
Наконец-то хоть что-то интересное
@beskonechno
@beskonechno 5 жыл бұрын
Кристина, молодец)
@AOBykov
@AOBykov 5 жыл бұрын
Молодец! Круто!
@manul74
@manul74 5 жыл бұрын
Великолепно!!!
@user-eq1bl3xt5c
@user-eq1bl3xt5c 5 жыл бұрын
Ммм необычный контент, понравилось пожалуй подпишусь )
@hikaro_top
@hikaro_top 5 жыл бұрын
Что сказать, круто)
@tinirzloto7021
@tinirzloto7021 5 жыл бұрын
Прикольно, ну ты крутая) рили
@arttur1672
@arttur1672 5 жыл бұрын
Ты просто огонь!
@AlekseyInogamov
@AlekseyInogamov 5 жыл бұрын
с новым годом!!!
@S0A0W0
@S0A0W0 5 жыл бұрын
Я пойду плакать, обняв себя за колени. Вы молодец
@alexmat7937
@alexmat7937 5 жыл бұрын
Привет! Это было отличное утро)
@unitedwestand251
@unitedwestand251 5 жыл бұрын
Четко, могете!
@user-wc5jd3gi4s
@user-wc5jd3gi4s 5 жыл бұрын
Вау, крутость зашкаливает . Эффект достигнут
@Маленькая_сосна
@Маленькая_сосна 5 жыл бұрын
Красотка, умничка.
@goodmoment4643
@goodmoment4643 5 жыл бұрын
Молодец ) чего бы я добавил , дэк это больше эмоций в голос Кристины ) а в целом умница , так держать 😉
@user-gu5ir3zs4v
@user-gu5ir3zs4v 5 жыл бұрын
Ваауууу,я подписываюсь!!! И больше всего на свете боюсь что такие крутые каналы вдруг закроются,так вот не закрывайся никогда 😁😁😁😀
@phir9255
@phir9255 5 жыл бұрын
Мне понравилось запись звуков из подручных предметов. Я знаю, что это довольно нормально, но всё же по моему гениально.
@user-hd5oe8dj5l
@user-hd5oe8dj5l 5 жыл бұрын
О, прикольный канальчик! подписка
@GameShowTV001
@GameShowTV001 5 жыл бұрын
Прикольно получилось! Ты прям мозг!
@nikitap.2140
@nikitap.2140 5 жыл бұрын
Умница! Подписался.
@user-dr2mh7cv9q
@user-dr2mh7cv9q 5 жыл бұрын
Это так мило
@nikolasivanov6337
@nikolasivanov6337 5 жыл бұрын
Кристина, ты невероятная, умничка.++++
@jefersonmedeiros7677
@jefersonmedeiros7677 5 жыл бұрын
Very nice...congrats from Brasil ;)
@leviafanux
@leviafanux 5 жыл бұрын
ахуеть, насилие на канале... я рыдал за смерть орка...сейчас молимся за его душу... жестокий у тебя канал
@andrewmendela9065
@andrewmendela9065 5 жыл бұрын
на аватарке крест за упокой орка?
@leviafanux
@leviafanux 5 жыл бұрын
@@andrewmendela9065 на аватарке крест на котором белье сушу, орка кремировали
@user-gb1ff7mg4t
@user-gb1ff7mg4t 5 жыл бұрын
орк пал ради контента на канале, так бы скучно было вовсе :D
@doragonsoul9186
@doragonsoul9186 5 жыл бұрын
а это жестокое обращение с животными или терроризм (он же даже не ударил, а если бы ударил, то урона не нанёс бы (на сколько я могу судить))?
@user-dc2su5zb3o
@user-dc2su5zb3o 5 жыл бұрын
Молодчинка!
@philmirez
@philmirez 5 жыл бұрын
I love the KZfaq 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-gl3md9ud3h
@user-gl3md9ud3h 5 жыл бұрын
какая же ты умничка горжусь такими девушками
@qi943
@qi943 5 жыл бұрын
Здорово!
@godofarms1069
@godofarms1069 5 жыл бұрын
Вот это анимация! Я для своих 'игр' пишу просто квадратики, кружочки на канвасе, тк сам нормально рисовать не умею.
@dodtoo4473
@dodtoo4473 5 жыл бұрын
cпасибо за прогу audacity, не знал про такую)
@danterage636
@danterage636 4 жыл бұрын
да это шедевр
@libcheet
@libcheet 5 жыл бұрын
Хорошее видео. Было приятно посмотреть. Пару вопросов. Ты рисовала все при помощи мышки? И где бы так научиться? )
@dzidzoful
@dzidzoful 5 жыл бұрын
просто найти рабочий код в интернете и снять об этом видео, очень умно...
@tonynice3007
@tonynice3007 5 жыл бұрын
Мля, как же лампово
@user-cp9ri4cr4h
@user-cp9ri4cr4h 5 жыл бұрын
Блет,бесит,когда кто-то умеет что-то чего не умеешь ты,но и мотивирует,могёшь,удачи тебе )
@stoprocentovstoprocentov4351
@stoprocentovstoprocentov4351 5 жыл бұрын
крутяк!
@sosochka_nerealochka
@sosochka_nerealochka 5 жыл бұрын
Пиздато сработано, Ковальски!
@alex90aaa
@alex90aaa 5 жыл бұрын
хорошо рисует но больше всего мне понравилось что все в бесплатных программах и на линуксе
@ruzzifer
@ruzzifer 3 жыл бұрын
Ну она сама мне понравилась😍
@jasonborn5413
@jasonborn5413 5 жыл бұрын
Чистая магия!
@gigaevil132
@gigaevil132 5 жыл бұрын
Спасибо за видео! Хотелось бы объяснений что зачем и почему
@vrazovsky
@vrazovsky 5 жыл бұрын
Умница, что сказать.....
@aladinmovies
@aladinmovies 5 жыл бұрын
Девушка вы очень симпатичны и сразу не подумаешь что увидишь в видео девушку кодера. Молодчина, классное видео, однозначно лайк за старания
Рисование на HTML5 Canvas 1. Базовые знания.
20:04
Can You Draw A PERFECTLY Dotted Circle?
00:55
Stokes Twins
Рет қаралды 45 МЛН
DEFINITELY NOT HAPPENING ON MY WATCH! 😒
00:12
Laro Benz
Рет қаралды 51 МЛН
A clash of kindness and indifference #shorts
00:17
Fabiosa Best Lifehacks
Рет қаралды 77 МЛН
Игра Змейка на чистом JavaScript и HTML5 за 45 минут!
44:02
HTML5 canvas: изучаем основные свойства, рисуем графики | HTML, CSS, JS
21:23
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 16 М.
Модальное окно на ЧИСТОМ JS + CSS. Урок 1
48:34
Владилен Минин
Рет қаралды 239 М.
JavaScript Tetris
1:14:37
Derek Banas
Рет қаралды 58 М.
How games are made | All the stages of making games - in detail
33:46
Cyberstars - Как создать игру
Рет қаралды 2,6 МЛН
Create and publish your NPM package.
9:13
WebGirl Kristina
Рет қаралды 7 М.
Can You Draw A PERFECTLY Dotted Circle?
00:55
Stokes Twins
Рет қаралды 45 МЛН