Создание игры на чистом JavaScript за 20 минут!
Рет қаралды 333,402
6 жыл бұрынРегистрация на урок: vk.cc/83Osiw
Создание игр на JavaScript и HTML стало возможным с приходом HTML5. В этом видео мы создадим небольшую 2D игру на подобии игры Flappy Bird всего за 20 минут. При этом мы будем использовать лишь чистый JavaScript код!
Статья со всеми материалами к игре: itproger.com/news/104
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #GoshaDudar 👨🏼💻
- Все уроки по хештегу #GoshaLessons
@kennymccormic7578 5 жыл бұрын
Спасибо за видео! Я ни разу не сталкивался с графикой, было очень интересно ознакомиться с основными принципами!
@user-gk8zn8nx9z 6 жыл бұрын
Супер! Давно ждал подобных видео! Так держать
@sprstrg 3 жыл бұрын
молодчага, ответил на множество вопросов в одном видео))) спасибо!
@user-tr8xi3ik3c 6 жыл бұрын
Благодарю, было очень интересно.
@user-zg4ef9in6s 2 жыл бұрын
Очень прикольно :) спасибо за разбор. Надо попробовать повторить)
@user-ed7ty4ov6x 6 жыл бұрын
Действительно, всё гениальное - просто!
@lolashepota4050 3 жыл бұрын
Short and talented lesson! Well done!
@user-fb1ec5rw3q 6 жыл бұрын
спасибо, все очень интересно и понятно)
@blumSng 6 жыл бұрын
очень полезно! спасибо)
@user-xh5vh9rg9f 5 жыл бұрын
Отличное видео и все получилось!
@user-me6vz4nj8q 5 жыл бұрын
Спасибо за видео, я новичок в программировании мне понравилось.
@user-fd1np4pt7y 2 жыл бұрын
Словли... Від темпу твого пояснення, сам почав думати, що я кудись спізнююсь!) Хороший інформативний відос!
@margaritakrasovskaya4141 5 жыл бұрын
круто! я писала за вами, то есть сама писала код повторяла за вами - и все получилось! ушло правда не 20 мин, а где-то час.. но для новичка без опыта в js (базовые знания) - это прекрасно!)) спасибо! сейчас такая эйфория, я написала свою первую игру!))
@semyondyachenko4183 4 жыл бұрын
переписала*
@relaxedevil5310 2 жыл бұрын
@@semyondyachenko4183 дай женщине порадовать себя,она написала все таки
@TheBestSurvival 5 жыл бұрын
Мне зашло, все понятно и интересно! Но совсем новичкам будет трудно!
@delight2229 5 жыл бұрын
на learn.javascript надо изучиьь основы джс , и теги верстки понимать хотя бы. Не так трудно будет
@ilnev3738 4 жыл бұрын
Ну я новичок , и мне чета было все понятно
@anyka-6823 2 жыл бұрын
Интересно было ещё на использование объектов посмотреть. И рисовку в скрипте напрямую. (интересно какие тут плюсы по сравнению с использованием файла css)
@PrototypeZZ 2 жыл бұрын
Хорошо что без воды. Не серьёзно - только самое главное. Вот так надо туториалы делать.
@mishasv1490 5 жыл бұрын
Отличное видео!
@user-qj2yg1rn3j 6 жыл бұрын
Спасибо. Интересно!
@vbsgfb9000 6 жыл бұрын
Круто！Давай больше игрушек
@iNikelas 3 жыл бұрын
Круто, спасибо!
@user-pc7wk4rl6e 3 жыл бұрын
Спасибо, помогли мне сдать экзамен по информатике
@user-vb5ck8ml3b 6 жыл бұрын
Круто!!!)))
@mudirol4871 2 жыл бұрын
Спасибо тебе большое, учу JS и вот решил посмотреть про веб-игры! Класс всё супер это крута! Хочу свою разработать!🥰🥰
@user-gc1up4yy2h Жыл бұрын
привіт і як воно? є лінк на Git?
@jurijkermach4086 3 жыл бұрын
отличный материал))
@dromich 6 жыл бұрын
Мега спасибо, давно интересуюсь етой темой, все никак руки не доходили. Все просто и понятно базис задан дальше просто розвивать напрвление.
@LobanovSpace 6 жыл бұрын
Спасибо за видео
@anyka-6823 2 жыл бұрын
Ещё была добавлено условие очистки массива. Чтобы он не стремился к бесконечности. if (pipe.length > 2){ pipe.shift() }
@Pashka818 2 жыл бұрын
Круто!!
@oleg-kd7172 6 жыл бұрын
Блин чувак спасибо , ты топ
@wowgames_ 3 жыл бұрын
Как же круто сделать игру чисто на JavaScript, не используя движки) Благодарим за видео. Очень информативно
@user-ub9wv4vo9x 3 жыл бұрын
Ага)
@user-dn5df3zn4b 5 жыл бұрын
Сделай движение дива по документу(область экрана) с препятствием.
@Rondmeo 6 жыл бұрын
Классный урок! Жаль, что можно поставить только один лайк - я бы поставил тысячу лайков)
@user-uv9zz7hu7c 4 жыл бұрын
Огромное спасибо, все подробно пояснил, а на сайте суховато это было описано. Всё работает
@nikitanedelcu3102 4 жыл бұрын
Все делаю как в уроке,но картинки не появляются на странице
@user-ih6mn6ee9c 4 жыл бұрын
@@nikitanedelcu3102 тоже самое,уже зае*ало
@mirondmitrievich5735 5 жыл бұрын
спасибо)!!
@provseiobovseh 4 жыл бұрын
В игре есть БАГ. После прохождения первого препятствия, если птичка падает то она падает за "экран" при этом очки начисляются дальше и игра продолжается. Т.е нет срабатывания припятствия "земли"
@user-vg1sr9ye5s 3 жыл бұрын
УРА! Хоть кто-то написал..У меня такая же проблема.
@user-qh8br1hx6e 4 жыл бұрын
Написал свою игрушку , очень рад!
@semyondyachenko4183 4 жыл бұрын
списал*
@user-sh8bl3ij9v 6 жыл бұрын
Вау, это круто.
@cakeistrue 6 жыл бұрын
А видосики у тебя классные. Хоть Я и не смотрю все, но лайки всегда ставлю)
@LobanovSpace 6 жыл бұрын
Ценный подписчик)
@sevdev9374 6 жыл бұрын
Исламов походу всем забашлял за рекламу)
@user-he4fk6jf6c 6 жыл бұрын
Гоша, пожалуйста, расскажи по больше про юнити
@kostikmakesgames3279 3 жыл бұрын
Норм получилось, наверно это одна из тех что надо написать, есть даже челлендж флэпиберд за 25строк кода)
@user-xy3xd8vh6n 5 жыл бұрын
отличный урок
@evdokimovm 6 жыл бұрын
fly.pause() fly.currentTime = 0 fly.play()
@blackstardg 4 жыл бұрын
Спасибо только что об этом подумал.
@evdokimovm 3 жыл бұрын
@BACKOB LOX коды на гытыа
@T.a.n.y.a.10 2 жыл бұрын
Это для паузы? А где его писать какая строчка кода
@evdokimovm 2 жыл бұрын
@@T.a.n.y.a.10 На 20:30. 30 строка. Это для того чтобы звук взлета не накладывался один на другой когда на кнопку нажимаешь, а проигрывался при нажатии каждый раз с начала.
@indigo607 4 жыл бұрын
Мне кажется, что все (ну или почти все) кто попытался поворить за автором на самом деле имели одну и ту же проблему - не загружалась графика. А те, кто писали, что видео крутое - просто его посмотрели, но повторить не пытались.
@Kolabrod 4 жыл бұрын
pipeBottom.onload = setInterval(() => { draw(); }, 100);
@yaroslavyarmysh5553 4 жыл бұрын
Это самый точьный овет. Я с групо питался повторить,
@alexd4103 4 жыл бұрын
@@yaroslavyarmysh5553 в HTML файле вместо DIV поставь тег CANVAS
@skazochnik4268 4 жыл бұрын
Все норм работает
@puolchen2632 4 жыл бұрын
@@Kolabrod Спасибо Вам огромное! У меня всё получилось. Ещё раз СПАСИБО!!!!
@mishanya920 2 жыл бұрын
Вот спасибо!
@dan-3268 5 жыл бұрын
Базара нет, брат. Достойно всё пояснил мне за жизнь. теперь я лучше понимаю как жить грамотно. От души!
@lkllmjjn8654 3 жыл бұрын
фарту масти д.ж.с жава скрипту .вечно
@dreamernum1792 3 жыл бұрын
братан тебе огромное спс у мня сработала!! Я изменил параметры, и все готово! (я писал коды на Visual Studio Code) больше таких видосов! с меня подписка и лайк. ПРИВЕТ ИЗ УЗБЕКИСТАНА!
@user-hq2xv1zb7g 2 жыл бұрын
Тебе привет из Дагестана.)))
@datikken5327 6 жыл бұрын
Крассавчик
@user-lt5rs3np3x 4 жыл бұрын
Я все понял спасибо!
@3dzbot 5 жыл бұрын
большое спасибо
@avanejust4257 6 жыл бұрын
Надо было ускорение свободного падения реализовать) птичка с одинаковой скоростью падает
@user-fi6ue2sq4v 4 жыл бұрын
Я новичок. Пока что прохожу переменные. Но очень интересно было для меня
@user-gj4xf7uv6j 4 жыл бұрын
Рекламу лучше делать в начале или конце ролика с мысли сбивает.
@elijahatlas5203 2 жыл бұрын
I know im asking randomly but does anybody know a trick to get back into an instagram account? I was stupid forgot the account password. I would love any assistance you can give me.
@rylandtrenton5919 2 жыл бұрын
@Elijah Atlas instablaster =)
@elijahatlas5203 2 жыл бұрын
@Ryland Trenton I really appreciate your reply. I found the site through google and Im in the hacking process now. Looks like it's gonna take quite some time so I will get back to you later with my results.
@elijahatlas5203 2 жыл бұрын
@Ryland Trenton It worked and I actually got access to my account again. I am so happy! Thank you so much, you saved my account!
@rylandtrenton5919 2 жыл бұрын
@Elijah Atlas no problem :D
@Vostorg94 Жыл бұрын
спасибо за урок я тоже навичок 7 лет вот прем5ерно три месецасмотрю уроки😊😊😊
@user-ho4xb3lb3v Жыл бұрын
смотришь на эти формулы, и чувствуешь себя "дриопитеком из полиозойской эры" 🙉🦴
@kocho5917 3 жыл бұрын
спасибо у меня вышло!
@juliaweinstein3133 2 жыл бұрын
Прикольно
@dimanarizhnyi391 5 жыл бұрын
Подскажите какие плагины использовать для всплывающих команд как указано на 9:46 - 9:49 на примере requestAnimationFrame
@kablehack1643 6 жыл бұрын
Круто
@killgame4683 4 жыл бұрын
Привет с 2020 видео нереально крутое
@kkut8933 4 жыл бұрын
Просто вау
@user-pf5pb2uv8x 5 жыл бұрын
kzfaq.info/get/bejne/gpZnnJeYkuDMdHU.html - оригинал. Но за перевод, спасибо.
@user-fm1lv5um4s 4 жыл бұрын
)))))))))))))). Он вечно занимается плагиатом.
@strel9 4 жыл бұрын
когда смотрел, как раз об этом подумал, плагиат или сам придумал)
@Red1ska 4 жыл бұрын
Вы еще скажите что тот парень из оригинала сплагиатил с разработчика игры
@saidamir6538 3 жыл бұрын
@@Red1ska +
@Mykhailo_Vdovychenko 3 жыл бұрын
Тай хорошо что перевел, ато на английском не всегда все понятно, так что Гоша красавчик 👍👍👍
@devvvycs1424 6 жыл бұрын
Прошу помогите,я делал все,как говорил автор,но у меня проблема с картинками я,когда делаю фон,то нечего нет просто пустота как и был белый фон так и остался,что делать?
@flyyye 4 жыл бұрын
+
@user_kott3 4 жыл бұрын
Вы правильно указали название изображения?
@Mercblck 4 жыл бұрын
Если изображение не появляется то вы не так веди названия картинки, или не в той папке
@Aaa-iq7fp 4 жыл бұрын
чувак getContext замени на ctx = cvs.getContext
@ilnev3738 4 жыл бұрын
Посмотри какой фон если он пустой то сделай его не пустым, также проверь правильно ли ты прописал путь к картинке
@sense1416 6 жыл бұрын
Реклама на 1 минуту! Сильно.
@staskob5502 2 жыл бұрын
Отличный видеоурок Есть какая-то проблема, в хроме птичка через раз уходит за текстуру fg В браузере сафари все работает без какого-либо бага как можно было бы исправить ситуацию?
@forgiveness_denied 4 жыл бұрын
благодарочка
@funroom4367 4 жыл бұрын
Лучше все время изменять переменную grav на -1, а в момент прыжка ставить пременной grav значение 10. Тогда игра будет больше похожа на Flappy Bird.
@xyz_viz6604 Жыл бұрын
можешь написать кодом? хочу так сделать
@user-bb4qy9li4z 3 жыл бұрын
Спасибо
@Livanskiy_tv 3 жыл бұрын
Спасибо, интересно. Немного устарело, вместо вар юзают const/let, а обращаться можно через querySelector. То сути не меняет.
@anyka-6823 2 жыл бұрын
Можно и querySelector но через id быстрее.
@crawd9296 5 жыл бұрын
Нихуя не понял,но очень интересно
@davidelbakian6399 4 жыл бұрын
)))
@user-cn6gs7hp4j 4 жыл бұрын
Такая же фигня, чувак)
@oraclevb5430 4 жыл бұрын
ахах
@user-wg5gp4tg3v 3 жыл бұрын
а ты хотя бы учил язык?
@crawd9296 3 жыл бұрын
@@user-wg5gp4tg3v да
@user-ic9tf4nz4p 6 жыл бұрын
Благодарю.
@forkidstales 4 жыл бұрын
то есть при вызове pipeBottom у тебя вызывается в браузере bg?
@ver_v71 4 жыл бұрын
Очень познавательно, хотелось бы узнать можно ли создать ссылку таким же образом? Чтоб например при нажатии на картинку переходило на другую страницу? Спасибо
@ver_v71 4 жыл бұрын
Можно, но там немного другое. Канвас браузером воспринимается как просто набор пикселей, а не картинок или слов, да и я уже разобралась
@Bear-_- 3 жыл бұрын
Бро, а где можно посмотреть, как скачать среду, ну там где нужно писать игры, прост только начал заниматься?
@user-lm8py5rb4m 3 жыл бұрын
Unity
@nurjamalalmazkyzy5526 5 жыл бұрын
Вы картину 3:40 минуте копировали это получается таблица td tr ?
@denisgoncearuc7167 6 жыл бұрын
Да нормальный видосик, мне понравилось, для тех кто только учит Js намного понятнее смьреть ьакую практику нежели какие то максимальнл нудные уроки где тупо считают циферки Я бы хотел уаидеть еще таких видосиков но немножко по сложнее
@myster1ousdemon 5 жыл бұрын
Идиот.
@user-pn7gq3gk1m 5 жыл бұрын
Dmitry Morozov ты идиот
@rayni6389 5 жыл бұрын
С такими целями ты так и останешься не зная этот язык.
@aonai 6 жыл бұрын
А можно самому картинки нарисовать и свои звуки добавить и отправить другу поиграть?
@maksje7380 6 жыл бұрын
Давай новые уроки по Unity!!!!
@user-dv4eq7tv3c 3 жыл бұрын
В любом случае кланяюсь трижды.
@neproger3494 6 жыл бұрын
Очень интересно! Подскажи пожалуйста, как сделать вывод информации на странице сайта в виде дерева (иерархия). Чтобы по этому дереву можно было перещаться масштабировать как навигация на карте.
@psevdonim753 Жыл бұрын
Ставишь с помощью тега а якорь на что нибудь, и эти теги вместе как нибудь собираешь
@Ilya-ku7jp 5 жыл бұрын
у меня атом не выделяет переменные красным цветом ,не могу понять в чем проблема
@kirillsemenov6583 3 жыл бұрын
у тебя реактор другой похоже
@eugengordeychik7370 6 жыл бұрын
Может кто подскажет! в общем пробовал этот пример и в хроме показывает ошибку "изображение не определено" в чем может быть проблема???
@user-nq8th4ol3m 4 жыл бұрын
Можете скинуть ссылку для скачивания спрайтов
@Amkonax 5 жыл бұрын
а проехавшие пайпы не надо из массива удалять?
@megalodon1052 4 жыл бұрын
Смысла нет, игра очень простая и это не жрет много ресурсов компа.
@parrotsarenice 4 жыл бұрын
@@megalodon1052 ну как сказать, лучше всё таки удалять)
@angrycatstudio2816 4 жыл бұрын
А как это сделать
@megalodon1052 4 жыл бұрын
@@angrycatstudio2816 pop()
@kiwii2539 4 жыл бұрын
@@angrycatstudio2816 пропишите условие if что когда координаты ровны n числу вы могли использовать pop() let clearEl ==...) If(cordinate == clearEl) { Масив.pop() }
@mrisid 5 жыл бұрын
Есть ещё какой-то способ что бы при прикосновении к трубе игра рестарталась?
@Rb-ur5em 3 жыл бұрын
Добрый день. Георгий Подскажите можно ли найти что-то подобное в принципе? Как лучше поступить ? Писать игру с нуля не получится точно! Простая карточная игра (качество и сложность не важно. лучше что-то по проще..) HTML, CSS, JS, MySQL Описание: Регистрация игрока, Минимум два участника Спасибо
@user-vi3ur8bw8k 4 жыл бұрын
Хотел сделать свою анимацию, мне просто надо было посмотреть, как отрисовать объекты в canvas, но если делать точно по видео, то не работает даже это
@mmdcrw 2 жыл бұрын
Руки из задницы у тебя.
@vladimirsmolyakov2963 5 жыл бұрын
Как ты сделал // Позиция птички?
@pandalove6795 6 жыл бұрын
А будет ли польза если допустим птичка пролетела 10 труб и самая первая удаляется из массива?
@mediafile9995 3 жыл бұрын
А добавить анимацию нельзя? Ну, чтоб птичка вверх и вниз опускалась как в игре оригинальной?
@smm_media 3 жыл бұрын
Как сделать что бы страница не перезагружалась, а приостанавливалось движение блоков (игра замирала)?
@bitByte109 5 жыл бұрын
файл не подключается скопировал с cайта html и js коды, названия уазано правильно файл находиться в той же папке всё как у автора www index.html js audio img game.js вот так располагаются файлы но всё равно ни чего не работает в чём может быть проблема?
@Alexey-Balashov 5 жыл бұрын
Добрый вечер! А какой редактор когда Вы используете? На Adobe Dreamweaver вроде не похоже.
@Alexey-Balashov 5 жыл бұрын
P.s. порекомендуйте, пожалуйста, хороший редактор кода для js. У меня Windows.
@eucliwoodscythe 5 жыл бұрын
@@Alexey-Balashov Atom
@Alexey-Balashov 5 жыл бұрын
@@eucliwoodscythe Спасибо за ответ.
@pandalove6795 5 жыл бұрын
А как сделать такой же массив на C#??? Подскажите пожалуйста.
@komronpulatov6785 5 жыл бұрын
Есть вопрос стоит ли смотреть видеокурсы по JS от автора за 2015 год ?
@MrBadbolt 5 жыл бұрын
Основы начнёшь понимать , но лучше конечно сразу JQuery
@aderxa7218 6 жыл бұрын
Делай игру на движке Unreal Engine!! Очень нравится
@gosha_dudar 6 жыл бұрын
Эти видео будут, они в процессе записи
@aderxa7218 6 жыл бұрын
Гоша Дударь буду ждать ) ти лудший)))))
@dimmix_ua 6 жыл бұрын
Прикольно, а как ты ее залил в пм? И сколько заработал?
@user-pp1yx4tq1i 5 жыл бұрын
@@gosha_dudar Подскажите плагины для создания такого же формата игр или программ.Пожалуйста.
@user-rj4oy2ku5h 5 жыл бұрын
на каком программе вы набираете коды. просто блокнот или какая то программа
@Drago-pq2pl 5 жыл бұрын
через atom
@vbsgfb9000 6 жыл бұрын
А можно это перенести на андроид или ios?
@lexxarbelov5548 4 жыл бұрын
Все делаю как в уроке,но картинки не появляются на странице(((
@user-ev7vm2yl6e 4 жыл бұрын
тоже самое. Еще не решил проблему?
@daniilyasnohorskyi3810 4 жыл бұрын
@@user-ev7vm2yl6e решил)
@user-ev7vm2yl6e 4 жыл бұрын
@@daniilyasnohorskyi3810 а как, если не секрет?)
@wolfenstein5163 4 жыл бұрын
Переименовать картинки и создать папку img
@ZipOfficial 3 жыл бұрын
@@daniilyasnohorskyi3810 как
@FlyHigh1313 6 жыл бұрын
Когда выйдет Pygame 6?
@chaussures2940 2 жыл бұрын
Често не знаю нечего в программировании, но мне понравилось, а ёще я хочу ДИНОЗАВРИКА
@StepaAan_Official_youtube 2 жыл бұрын
Есть, и такая обучалка!
@chaussures2940 2 жыл бұрын
@@StepaAan_Official_youtube Класс, а можешь научишь как делать бота? в какой-то игре думаю всем будет интересно и вам тоже
ZProger [ IT ]
Рет қаралды 103 М.
Гоша Дударь
Рет қаралды 168 М.
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 71 М.
Pomazkov JS
Рет қаралды 253 М.