круто! я писала за вами, то есть сама писала код повторяла за вами - и все получилось! ушло правда не 20 мин, а где-то час.. но для новичка без опыта в js (базовые знания) - это прекрасно!)) спасибо! сейчас такая эйфория, я написала свою первую игру!))
Интересно было ещё на использование объектов посмотреть. И рисовку в скрипте напрямую. (интересно какие тут плюсы по сравнению с использованием файла css)
@@T.a.n.y.a.10 На 20:30. 30 строка. Это для того чтобы звук взлета не накладывался один на другой когда на кнопку нажимаешь, а проигрывался при нажатии каждый раз с начала.
В игре есть БАГ. После прохождения первого препятствия, если птичка падает то она падает за "экран" при этом очки начисляются дальше и игра продолжается. Т.е нет срабатывания припятствия "земли"
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.
@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.
братан тебе огромное спс у мня сработала!! Я изменил параметры, и все готово! (я писал коды на Visual Studio Code) больше таких видосов! с меня подписка и лайк. ПРИВЕТ ИЗ УЗБЕКИСТАНА!
Прошу помогите,я делал все,как говорил автор,но у меня проблема с картинками я,когда делаю фон,то нечего нет просто пустота как и был белый фон так и остался,что делать?
Мне кажется, что все (ну или почти все) кто попытался поворить за автором на самом деле имели одну и ту же проблему - не загружалась графика. А те, кто писали, что видео крутое - просто его посмотрели, но повторить не пытались.
@@angrycatstudio2816 пропишите условие if что когда координаты ровны n числу вы могли использовать pop() let clearEl ==...) If(cordinate == clearEl) { Масив.pop() }
Да нормальный видосик, мне понравилось, для тех кто только учит Js намного понятнее смьреть ьакую практику нежели какие то максимальнл нудные уроки где тупо считают циферки Я бы хотел уаидеть еще таких видосиков но немножко по сложнее
Я делал всё, как показывал автор, но со страницей ничего не происходит. Посмотрел коменты поменял на pipeBottom.onload = setInterval(() => { draw(); }, 100); draw(); Но ничего не произошло. Помогите пожалуйста.
файл не подключается скопировал с cайта html и js коды, названия уазано правильно файл находиться в той же папке всё как у автора www index.html js audio img game.js вот так располагаются файлы но всё равно ни чего не работает в чём может быть проблема?
Отличный видеоурок Есть какая-то проблема, в хроме птичка через раз уходит за текстуру fg В браузере сафари все работает без какого-либо бага как можно было бы исправить ситуацию?
Господа, это полноценная игра! Её изначальный автор зарабатывал 55 000$ США в день на встроенной рекламе! Только в этой реализации старые Pipe из массива нужно удалять, чтобы память не забить.
Здравствуйте! Ребята у меня такая проблема что bg, fg, bird, pipeUp, pipeBottom в редакторе не выделяютса цветом и когда хочу посмотреть что получилось то в браузере ничего не показывает, об'ясните в чём причина. P.S. я в этом деле новый. Зарание спасибо!
Добрый день. Георгий Подскажите можно ли найти что-то подобное в принципе? Как лучше поступить ? Писать игру с нуля не получится точно! Простая карточная игра (качество и сложность не важно. лучше что-то по проще..) HTML, CSS, JS, MySQL Описание: Регистрация игрока, Минимум два участника Спасибо
@@alishkaali6708 Такое будет всегда. Все сноси и перезапускай заного, ковыряйся в символах, думой на каком этапе могло пойти не так. Должен быть здравый азарт на сам поиск ошибки, иначе ты пока не созрел для коденга. Я слышал парикмахеры неплохо зарабатывают.
@@lilokino94 молодец, очень остроумно с твоей стороны послать кого-то, интересно у тебя самого получилось, или как?) Ты даже не можешь правильно написать заново, а мне затираешь про программирование)
Не надо акцентировать на язык программирования в начале. Надо определиться кем ты хочешь стать, заниматься. Андроид разработчиком? Ios разработчиком? Веб приложения делать? Сайты делать? ПО для ПК делать? FrontEnd или Backend? Есть куча направлений. Надо свое направление выбрать, а потом уже смотреть на каком языке программировать. А так для начала, чтобы научится можно пайтон выбрать. У него синтаксис простой.
Очень познавательно, хотелось бы узнать можно ли создать ссылку таким же образом? Чтоб например при нажатии на картинку переходило на другую страницу? Спасибо
Здравствуйте, я раньше писал графику на c++ + opengl и там все более низкоуровнево. Я решил отклониться от хода урока и попробовать возможности. В итоге столкнулся с проблемой, что птички не перерисовываються в новом месте, а остаються на старом+рисуется на новом. С чем это может быть связано? В опен гл мы вручную всегда чистем буфер картинки, и рисуем ее сначала. Тут я таких функций не заметил(в вашем уроке). В чем может быть проблемма?
Переписал на Java, но ничего не работает! Так и знал что все дело в цикле. Цикл получается бесконечным и конечно же он очень быстрый! Срабатывает исключение
Народ помогите пожалуйста, написал похожую игру на базе этого кода, когда ставишь таймер, прописываешь после какого то времени в два раза быстрее анимацию, то один из 4рех-5ти раз ничего не прогружается, ошибки нету, как быть, может знаете другие способы ускорить ?
круто! я писала за вами, то есть сама писала код повторяла за вами - и все получилось! ушло правда не 20 мин, а где-то час.. но для новичка без опыта в js (базовые знания) - это прекрасно!)) спасибо! сейчас такая эйфория, я написала свою первую игру!))
переписала*
@@semyondyachenko4183 дай женщине порадовать себя,она написала все таки
Ещё была добавлено условие очистки массива. Чтобы он не стремился к бесконечности.
if (pipe.length > 2){
pipe.shift()
}
Short and talented lesson! Well done!
Словли... Від темпу твого пояснення, сам почав думати, що я кудись спізнююсь!)
Хороший інформативний відос!
Мне зашло, все понятно и интересно! Но совсем новичкам будет трудно!
на learn.javascript надо изучиьь основы джс , и теги верстки понимать хотя бы. Не так трудно будет
Ну я новичок , и мне чета было все понятно
Интересно было ещё на использование объектов посмотреть. И рисовку в скрипте напрямую. (интересно какие тут плюсы по сравнению с использованием файла css)
fly.pause()
fly.currentTime = 0
fly.play()
Спасибо только что об этом подумал.
@BACKOB LOX коды на гытыа
Это для паузы?
А где его писать какая строчка кода
@@T.a.n.y.a.10 На 20:30. 30 строка. Это для того чтобы звук взлета не накладывался один на другой когда на кнопку нажимаешь, а проигрывался при нажатии каждый раз с начала.
Как же круто сделать игру чисто на JavaScript, не используя движки)
Благодарим за видео. Очень информативно
Ага)
Действительно, всё гениальное - просто!
В игре есть БАГ. После прохождения первого препятствия, если птичка падает то она падает за "экран" при этом очки начисляются дальше и игра продолжается. Т.е нет срабатывания припятствия "земли"
УРА! Хоть кто-то написал..У меня такая же проблема.
Рекламу лучше делать в начале или конце ролика с мысли сбивает.
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
Хорошо что без воды. Не серьёзно - только самое главное. Вот так надо туториалы делать.
молодчага, ответил на множество вопросов в одном видео))) спасибо!
братан тебе огромное спс у мня сработала!! Я изменил параметры, и все готово! (я писал коды на Visual Studio Code) больше таких видосов! с меня подписка и лайк. ПРИВЕТ ИЗ УЗБЕКИСТАНА!
Тебе привет из Дагестана.)))
Я ещё добавил птице 99 HP (от колонок и земли получает FPS*HP/С, то есть за tick теряется 1 HP, за секунду теряет 30 HP)
Супер! Давно ждал подобных видео! Так держать
Спасибо за видео! Я ни разу не сталкивался с графикой, было очень интересно ознакомиться с основными принципами!
Спасибо за видео, я новичок в программировании мне понравилось.
Прошу помогите,я делал все,как говорил автор,но у меня проблема с картинками я,когда делаю фон,то нечего нет просто пустота как и был белый фон так и остался,что делать?
+
Вы правильно указали название изображения?
Если изображение не появляется то вы не так веди названия картинки, или не в той папке
чувак getContext замени на ctx = cvs.getContext
Посмотри какой фон если он пустой то сделай его не пустым, также проверь правильно ли ты прописал путь к картинке
Мне кажется, что все (ну или почти все) кто попытался поворить за автором на самом деле имели одну и ту же проблему - не загружалась графика. А те, кто писали, что видео крутое - просто его посмотрели, но повторить не пытались.
pipeBottom.onload = setInterval(() => {
draw();
}, 100);
Это самый точьный овет. Я с групо питался повторить,
@@yaroslavyarmysh5553 в HTML файле вместо DIV поставь тег CANVAS
Все норм работает
@@Kolabrod Спасибо Вам огромное! У меня всё получилось. Ещё раз СПАСИБО!!!!
Спасибо, помогли мне сдать экзамен по информатике
спасибо за урок я тоже навичок 7 лет вот прем5ерно три месецасмотрю уроки😊😊😊
Очень прикольно :) спасибо за разбор. Надо попробовать повторить)
Отличное видео и все получилось!
Благодарю, было очень интересно.
смотришь на эти формулы, и чувствуешь себя "дриопитеком из полиозойской эры" 🙉🦴
Надо было ускорение свободного падения реализовать) птичка с одинаковой скоростью падает
th-cam.com/video/L07i4g-zhDA/w-d-xo.html - оригинал. Но за перевод, спасибо.
)))))))))))))). Он вечно занимается плагиатом.
когда смотрел, как раз об этом подумал, плагиат или сам придумал)
Вы еще скажите что тот парень из оригинала сплагиатил с разработчика игры
@@Red1ska +
Тай хорошо что перевел, ато на английском не всегда все понятно, так что Гоша красавчик 👍👍👍
Спасибо тебе большое, учу JS и вот решил посмотреть про веб-игры! Класс всё супер это крута! Хочу свою разработать!🥰🥰
привіт і як воно? є лінк на Git?
Все делаю как в уроке,но картинки не появляются на странице(((
тоже самое. Еще не решил проблему?
@@АннаБекренева-я3ы решил)
@@daniilyasnohorskyi3810 а как, если не секрет?)
Переименовать картинки и создать папку img
@@daniilyasnohorskyi3810 как
Классный урок! Жаль, что можно поставить только один лайк - я бы поставил тысячу лайков)
а проехавшие пайпы не надо из массива удалять?
Смысла нет, игра очень простая и это не жрет много ресурсов компа.
@@megalodon1052 ну как сказать, лучше всё таки удалять)
А как это сделать
@@angrycatstudio2816 pop()
@@angrycatstudio2816 пропишите условие if что когда координаты ровны n числу вы могли использовать pop()
let clearEl ==...)
If(cordinate == clearEl) {
Масив.pop()
}
Спасибо, интересно. Немного устарело, вместо вар юзают const/let, а обращаться можно через querySelector. То сути не меняет.
Можно и querySelector но через id быстрее.
Сделай движение дива по документу(область экрана) с препятствием.
Норм получилось, наверно это одна из тех что надо написать, есть даже челлендж флэпиберд за 25строк кода)
спасибо, все очень интересно и понятно)
Круто！Давай больше игрушек
Да нормальный видосик, мне понравилось, для тех кто только учит Js намного понятнее смьреть ьакую практику нежели какие то максимальнл нудные уроки где тупо считают циферки
Я бы хотел уаидеть еще таких видосиков но немножко по сложнее
Идиот.
Dmitry Morozov ты идиот
С такими целями ты так и останешься не зная этот язык.
Исламов походу всем забашлял за рекламу)
Базара нет, брат. Достойно всё пояснил мне за жизнь. теперь я лучше понимаю как жить грамотно. От души!
фарту масти д.ж.с жава скрипту .вечно
Отличное видео!
Круто, спасибо!
у меня атом не выделяет переменные красным цветом ,не могу понять в чем проблема
у тебя реактор другой похоже
очень полезно! спасибо)
Я делал всё, как показывал автор, но со страницей ничего не происходит.
Посмотрел коменты поменял на
pipeBottom.onload = setInterval(() => {
draw();
}, 100);
draw();
Но ничего не произошло. Помогите пожалуйста.
Я новичок. Пока что прохожу переменные. Но очень интересно было для меня
Круто!!
Подскажите какие плагины использовать для всплывающих команд как указано на 9:46 - 9:49 на примере requestAnimationFrame
отличный материал))
Нихуя не понял,но очень интересно
)))
Такая же фигня, чувак)
ахах
а ты хотя бы учил язык?
@@ДанилЧернов-щ3р да
Лучше все время изменять переменную grav на -1, а в момент прыжка ставить пременной grav значение 10. Тогда игра будет больше похожа на Flappy Bird.
можешь написать кодом? хочу так сделать
файл не подключается скопировал с cайта html и js коды, названия уазано правильно файл находиться в той же папке всё как у автора
www
index.html
js
audio
img
game.js
вот так располагаются файлы но всё равно ни чего не работает в чём может быть проблема?
Отличный видеоурок
Есть какая-то проблема, в хроме птичка через раз уходит за текстуру fg
В браузере сафари все работает без какого-либо бага
как можно было бы исправить ситуацию?
Написал свою игрушку , очень рад!
списал*
Спасибо. Интересно!
у меня не получается объединить эти папки. Я не знаю что дальше делать(
то есть при вызове pipeBottom у тебя вызывается в браузере bg?
Бро, а где можно посмотреть, как скачать среду, ну там где нужно писать игры, прост только начал заниматься?
Unity
Добрый вечер! А какой редактор когда Вы используете? На Adobe Dreamweaver вроде не похоже.
P.s. порекомендуйте, пожалуйста, хороший редактор кода для js. У меня Windows.
@@eucliwoodscythe Спасибо за ответ.
Огромное спасибо, все подробно пояснил, а на сайте суховато это было описано. Всё работает
Все делаю как в уроке,но картинки не появляются на странице
@@nikitanedelcu3102 тоже самое,уже зае*ало
Подскажи пожалуста. Я после написания draw. У меня ничего не появляеться, в чём может быть дело?
У меня тоже
@@marki8951 скопируйте с сайте код и будет вам счастье
@@FrankMatrix спасибо сроботало
И у меня.
@@catto88 У меня работает только если пнг
В любом случае кланяюсь трижды.
Можете скинуть ссылку для скачивания спрайтов
Господа, это полноценная игра! Её изначальный автор зарабатывал 55 000$ США в день на встроенной рекламе! Только в этой реализации старые Pipe из массива нужно удалять, чтобы память не забить.
Често не знаю нечего в программировании, но мне понравилось, а ёще я хочу ДИНОЗАВРИКА
Есть, и такая обучалка!
@@StepaAan_Official_youtube Класс, а можешь научишь как делать бота? в какой-то игре думаю всем будет интересно и вам тоже
Мега спасибо, давно интересуюсь етой темой, все никак руки не доходили. Все просто и понятно базис задан дальше просто розвивать напрвление.
Здравствуйте! Ребята у меня такая проблема что bg, fg, bird, pipeUp, pipeBottom в редакторе не выделяютса цветом и когда хочу посмотреть что получилось то в браузере ничего не показывает, об'ясните в чём причина. P.S. я в этом деле новый. Зарание спасибо!
скорее всего ты файл назвал после точки не правильно
Почему у меня в getContext("2d"); ошибка null ?
Такова судьба🤣
может cnvs.getContext("2d")
Добрый день. Георгий
Подскажите можно ли найти что-то подобное в принципе? Как лучше поступить ?
Писать игру с нуля не получится точно!
Простая карточная игра (качество и сложность не важно. лучше что-то по проще..)
HTML, CSS, JS, MySQL
Описание: Регистрация игрока, Минимум два участника
Спасибо
Спасибо за видео
Блин чувак спасибо , ты топ
А видосики у тебя классные. Хоть Я и не смотрю все, но лайки всегда ставлю)
Ценный подписчик)
До 11:38 работает, дальше не отрисовываются блоки, гайд мусорный
for(var i = 0; i < pipe.lenght; i++) {
ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);
ctx.drawImage(pipeBottom, pipe[i].x , pipe[i].y + pipeUp.height + gap);
pipe[i].x--;
length - ошибка в слове была, сравнение текста онлайн помогло
ну и !рабочий оригинал кода на сайте вашем =-)
@@lilokino94 почему тогда когда я скопировал и вставил к себе у меня ничего не изменилось?
@@alishkaali6708 Такое будет всегда. Все сноси и перезапускай заного, ковыряйся в символах, думой на каком этапе могло пойти не так.
Должен быть здравый азарт на сам поиск ошибки, иначе ты пока не созрел для коденга. Я слышал парикмахеры неплохо зарабатывают.
@@lilokino94 молодец, очень остроумно с твоей стороны послать кого-то, интересно у тебя самого получилось, или как?) Ты даже не можешь правильно написать заново, а мне затираешь про программирование)
Круто!!!)))
Эй я сделал чисто как на видео. Почему даже не вивел на страницу png фигуры!!!
Есть два способа не использовать чистый js для использования анимации через css или через библиотеку jquery там все намного проще
Да можно но этот вариант хорош для изучения js так же его можно адаптировать к изучению css
Как сделать что бы страница не перезагружалась, а приостанавливалось движение блоков (игра замирала)?
не понятно(((( Я всё повтаряю как на видио но нечего не получается(((( Пиши всё вручную пж
Основы хотя бы выучи, прежде чем в канвас лезть...
Подскажите пожалуйста какой язык программирования учить новичку?
Не надо акцентировать на язык программирования в начале. Надо определиться кем ты хочешь стать, заниматься. Андроид разработчиком? Ios разработчиком? Веб приложения делать? Сайты делать? ПО для ПК делать? FrontEnd или Backend? Есть куча направлений. Надо свое направление выбрать, а потом уже смотреть на каком языке программировать.
А так для начала, чтобы научится можно пайтон выбрать. У него синтаксис простой.
Может кто подскажет!
в общем пробовал этот пример и в хроме показывает ошибку "изображение не определено"
в чем может быть проблема???
Привет с 2020 видео нереально крутое
Очень познавательно, хотелось бы узнать можно ли создать ссылку таким же образом? Чтоб например при нажатии на картинку переходило на другую страницу? Спасибо
Можно, но там немного другое. Канвас браузером воспринимается как просто набор пикселей, а не картинок или слов, да и я уже разобралась
подскажите как уже готовую игру изменять данные? спасибо
bu igrani to'liq kodi yoqmi
bolsa yuboring iltimos plith
А добавить анимацию нельзя? Ну, чтоб птичка вверх и вниз опускалась как в игре оригинальной?
А можно самому картинки нарисовать и свои звуки добавить и отправить другу поиграть?
Видео ускорено чтоли ?
Cannot read property 'getContext' of null
Есть вопрос стоит ли смотреть видеокурсы по JS от автора за 2015 год ?
Основы начнёшь понимать , но лучше конечно сразу JQuery
Реклама на 1 минуту! Сильно.
отличный урок
А будет ли польза если допустим птичка пролетела 10 труб и самая первая удаляется из массива?
Вот спасибо!
Зависает в браузере игра, запускаешь и сразу страница не прогружается
Здравствуйте, я раньше писал графику на c++ + opengl и там все более низкоуровнево. Я решил отклониться от хода урока и попробовать возможности. В итоге столкнулся с проблемой, что птички не перерисовываються в новом месте, а остаються на старом+рисуется на новом. С чем это может быть связано? В опен гл мы вручную всегда чистем буфер картинки, и рисуем ее сначала. Тут я таких функций не заметил(в вашем уроке). В чем может быть проблемма?
вот функция отрисовки
function draw()
{
context.drawImage(img, x, y);
requestAnimationFrame(draw);
}
img.onload = draw;
Фона нет? Видимо тут тоже нужно каждый раз строить изображение по слоям перед реквестом.
Переписал на Java, но ничего не работает! Так и знал что все дело в цикле. Цикл получается бесконечным и конечно же он очень быстрый! Срабатывает исключение
Вы картину 3:40 минуте копировали это получается таблица td tr ?
Вау, это круто.
возможно залить эту игру на сайт, что бы играть можно было всем и без моего компьютера, если да то как это сделать???
Залить сайт с игрой на хост
Народ помогите пожалуйста, написал похожую игру на базе этого кода, когда ставишь таймер, прописываешь после какого то времени в два раза быстрее анимацию, то один из 4рех-5ти раз ничего не прогружается, ошибки нету, как быть, может знаете другие способы ускорить ?
а как поставить двойные палочки? эти палочки в между 58 и 59 строкой в js