Создание игры на чистом JavaScript за 20 минут!
ฝัง
- เผยแพร่เมื่อ 13 พ.ค. 2018
- Регистрация на урок: 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
Short and talented lesson! Well done!
Словли... Від темпу твого пояснення, сам почав думати, що я кудись спізнююсь!)
Хороший інформативний відос!
Супер! Давно ждал подобных видео! Так держать
Спасибо за видео! Я ни разу не сталкивался с графикой, было очень интересно ознакомиться с основными принципами!
круто! я писала за вами, то есть сама писала код повторяла за вами - и все получилось! ушло правда не 20 мин, а где-то час.. но для новичка без опыта в js (базовые знания) - это прекрасно!)) спасибо! сейчас такая эйфория, я написала свою первую игру!))
переписала*
@@semyondyachenko4183 дай женщине порадовать себя,она написала все таки
молодчага, ответил на множество вопросов в одном видео))) спасибо!
Благодарю, было очень интересно.
Действительно, всё гениальное - просто!
Очень прикольно :) спасибо за разбор. Надо попробовать повторить)
Мне зашло, все понятно и интересно! Но совсем новичкам будет трудно!
на learn.javascript надо изучиьь основы джс , и теги верстки понимать хотя бы. Не так трудно будет
Ну я новичок , и мне чета было все понятно
Интересно было ещё на использование объектов посмотреть. И рисовку в скрипте напрямую. (интересно какие тут плюсы по сравнению с использованием файла css)
Хорошо что без воды. Не серьёзно - только самое главное. Вот так надо туториалы делать.
Отличное видео и все получилось!
очень полезно! спасибо)
спасибо, все очень интересно и понятно)
Спасибо за видео, я новичок в программировании мне понравилось.
Круто！Давай больше игрушек
Отличное видео!
Круто, спасибо!
Спасибо, помогли мне сдать экзамен по информатике
Спасибо. Интересно!
отличный материал))
Спасибо тебе большое, учу JS и вот решил посмотреть про веб-игры! Класс всё супер это крута! Хочу свою разработать!🥰🥰
привіт і як воно? є лінк на Git?
Мега спасибо, давно интересуюсь етой темой, все никак руки не доходили. Все просто и понятно базис задан дальше просто розвивать напрвление.
Круто!!!)))
Спасибо за видео
Блин чувак спасибо , ты топ
Как же круто сделать игру чисто на JavaScript, не используя движки)
Благодарим за видео. Очень информативно
Ага)
Ещё была добавлено условие очистки массива. Чтобы он не стремился к бесконечности.
if (pipe.length > 2){
pipe.shift()
}
Написал свою игрушку , очень рад!
списал*
Круто!!
Подскажите какие плагины использовать для всплывающих команд как указано на 9:46 - 9:49 на примере requestAnimationFrame
Огромное спасибо, все подробно пояснил, а на сайте суховато это было описано. Всё работает
Все делаю как в уроке,но картинки не появляются на странице
@@nikitanedelcu3102 тоже самое,уже зае*ало
В игре есть БАГ. После прохождения первого препятствия, если птичка падает то она падает за "экран" при этом очки начисляются дальше и игра продолжается. Т.е нет срабатывания припятствия "земли"
УРА! Хоть кто-то написал..У меня такая же проблема.
fly.pause()
fly.currentTime = 0
fly.play()
Спасибо только что об этом подумал.
@BACKOB LOX коды на гытыа
Это для паузы?
А где его писать какая строчка кода
@@T.a.n.y.a.10 На 20:30. 30 строка. Это для того чтобы звук взлета не накладывался один на другой когда на кнопку нажимаешь, а проигрывался при нажатии каждый раз с начала.
отличный урок
Исламов походу всем забашлял за рекламу)
Норм получилось, наверно это одна из тех что надо написать, есть даже челлендж флэпиберд за 25строк кода)
Сделай движение дива по документу(область экрана) с препятствием.
братан тебе огромное спс у мня сработала!! Я изменил параметры, и все готово! (я писал коды на Visual Studio Code) больше таких видосов! с меня подписка и лайк. ПРИВЕТ ИЗ УЗБЕКИСТАНА!
Тебе привет из Дагестана.)))
Вау, это круто.
Классный урок! Жаль, что можно поставить только один лайк - я бы поставил тысячу лайков)
спасибо)!!
Надо было ускорение свободного падения реализовать) птичка с одинаковой скоростью падает
Я все понял спасибо!
А видосики у тебя классные. Хоть Я и не смотрю все, но лайки всегда ставлю)
Ценный подписчик)
Базара нет, брат. Достойно всё пояснил мне за жизнь. теперь я лучше понимаю как жить грамотно. От души!
фарту масти д.ж.с жава скрипту .вечно
Вот спасибо!
спасибо за урок я тоже навичок 7 лет вот прем5ерно три месецасмотрю уроки😊😊😊
спасибо у меня вышло!
Гоша, пожалуйста, расскажи по больше про юнити
Я новичок. Пока что прохожу переменные. Но очень интересно было для меня
Рекламу лучше делать в начале или конце ролика с мысли сбивает.
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.
@Elijah Atlas instablaster =)
@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.
@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!
@Elijah Atlas no problem :D
Привет с 2020 видео нереально крутое
большое спасибо
Может кто подскажет!
в общем пробовал этот пример и в хроме показывает ошибку "изображение не определено"
в чем может быть проблема???
Мне кажется, что все (ну или почти все) кто попытался поворить за автором на самом деле имели одну и ту же проблему - не загружалась графика. А те, кто писали, что видео крутое - просто его посмотрели, но повторить не пытались.
pipeBottom.onload = setInterval(() => {
draw();
}, 100);
Это самый точьный овет. Я с групо питался повторить,
@@yaroslavyarmysh5553 в HTML файле вместо DIV поставь тег CANVAS
Все норм работает
@@Kolabrod Спасибо Вам огромное! У меня всё получилось. Ещё раз СПАСИБО!!!!
Крассавчик
Отличный видеоурок
Есть какая-то проблема, в хроме птичка через раз уходит за текстуру fg
В браузере сафари все работает без какого-либо бага
как можно было бы исправить ситуацию?
Реклама на 1 минуту! Сильно.
Прошу помогите,я делал все,как говорил автор,но у меня проблема с картинками я,когда делаю фон,то нечего нет просто пустота как и был белый фон так и остался,что делать?
+
Вы правильно указали название изображения?
Если изображение не появляется то вы не так веди названия картинки, или не в той папке
чувак getContext замени на ctx = cvs.getContext
Посмотри какой фон если он пустой то сделай его не пустым, также проверь правильно ли ты прописал путь к картинке
Круто
смотришь на эти формулы, и чувствуешь себя "дриопитеком из полиозойской эры" 🙉🦴
Прикольно
то есть при вызове pipeBottom у тебя вызывается в браузере bg?
th-cam.com/video/L07i4g-zhDA/w-d-xo.html - оригинал. Но за перевод, спасибо.
)))))))))))))). Он вечно занимается плагиатом.
когда смотрел, как раз об этом подумал, плагиат или сам придумал)
Вы еще скажите что тот парень из оригинала сплагиатил с разработчика игры
@@Red1ska +
Тай хорошо что перевел, ато на английском не всегда все понятно, так что Гоша красавчик 👍👍👍
благодарочка
Просто вау
Можете скинуть ссылку для скачивания спрайтов
Вы картину 3:40 минуте копировали это получается таблица td tr ?
Спасибо, интересно. Немного устарело, вместо вар юзают const/let, а обращаться можно через querySelector. То сути не меняет.
Можно и querySelector но через id быстрее.
Как сделать что бы страница не перезагружалась, а приостанавливалось движение блоков (игра замирала)?
Спасибо
Бро, а где можно посмотреть, как скачать среду, ну там где нужно писать игры, прост только начал заниматься?
Unity
Очень познавательно, хотелось бы узнать можно ли создать ссылку таким же образом? Чтоб например при нажатии на картинку переходило на другую страницу? Спасибо
Можно, но там немного другое. Канвас браузером воспринимается как просто набор пикселей, а не картинок или слов, да и я уже разобралась
А можно самому картинки нарисовать и свои звуки добавить и отправить другу поиграть?
А как сделать такой же массив на C#??? Подскажите пожалуйста.
файл не подключается скопировал с cайта html и js коды, названия уазано правильно файл находиться в той же папке всё как у автора
www
index.html
js
audio
img
game.js
вот так располагаются файлы но всё равно ни чего не работает в чём может быть проблема?
Cannot read property 'getContext' of null
Как ты сделал // Позиция птички?
у меня атом не выделяет переменные красным цветом ,не могу понять в чем проблема
у тебя реактор другой похоже
Нихуя не понял,но очень интересно
)))
Такая же фигня, чувак)
ахах
а ты хотя бы учил язык?
@@user-wg5gp4tg3v да
Хотел сделать свою анимацию, мне просто надо было посмотреть, как отрисовать объекты в canvas, но если делать точно по видео, то не работает даже это
Руки из задницы у тебя.
Народ помогите пожалуйста, написал похожую игру на базе этого кода, когда ставишь таймер, прописываешь после какого то времени в два раза быстрее анимацию, то один из 4рех-5ти раз ничего не прогружается, ошибки нету, как быть, может знаете другие способы ускорить ?
Да нормальный видосик, мне понравилось, для тех кто только учит Js намного понятнее смьреть ьакую практику нежели какие то максимальнл нудные уроки где тупо считают циферки
Я бы хотел уаидеть еще таких видосиков но немножко по сложнее
Идиот.
Dmitry Morozov ты идиот
С такими целями ты так и останешься не зная этот язык.
У меня ошибка: TypeError: cvs is null. Я просто списывал код, но свои имена переменных ( так как хотел позже взять свои текстуры). Долго пытался разобраться в чём проблема, в конце просто скопировал код с сайта с материалами, но ошибка осталась! Я не понимаю в чём моя проблема, если код оригинальный и я ничего не менял.
В любом случае кланяюсь трижды.
а как поставить двойные палочки? эти палочки в между 58 и 59 строкой в js
подскажите как уже готовую игру изменять данные? спасибо
А как перевести старые игры flash в html5 ?
Я делал всё, как показывал автор, но со страницей ничего не происходит.
Посмотрел коменты поменял на
pipeBottom.onload = setInterval(() => {
draw();
}, 100);
draw();
Но ничего не произошло. Помогите пожалуйста.
Давай новые уроки по Unity!!!!
у меня не получается объединить эти папки. Я не знаю что дальше делать(
Лучше все время изменять переменную grav на -1, а в момент прыжка ставить пременной grav значение 10. Тогда игра будет больше похожа на Flappy Bird.
можешь написать кодом? хочу так сделать
Как задать кнопку движение вниз?
А добавить анимацию нельзя? Ну, чтоб птичка вверх и вниз опускалась как в игре оригинальной?
Очень интересно! Подскажи пожалуйста, как сделать вывод информации на странице сайта в виде дерева (иерархия). Чтобы по этому дереву можно было перещаться масштабировать как навигация на карте.
Ставишь с помощью тега а якорь на что нибудь, и эти теги вместе как нибудь собираешь
как сделать конец игры?
Благодарю.
Где скачать PNG двух труб?
Когда выйдет Pygame 6?