Создание игры на чистом JavaScript за 20 минут!

[@margaritakrasovskaya4141]

круто! я писала за вами, то есть сама писала код повторяла за вами - и все получилось! ушло правда не 20 мин, а где-то час.. но для новичка без опыта в js (базовые знания) - это прекрасно!)) спасибо! сейчас такая эйфория, я написала свою первую игру!))

[@semyondyachenko4183]

переписала*

[@relaxedevil5310]

@@semyondyachenko4183 дай женщине порадовать себя,она написала все таки

[@wowgames_]

Как же круто сделать игру чисто на JavaScript, не используя движки) Благодарим за видео. Очень информативно

[@ЯрославПоляков-д2з]

Ага)

[@ОлександрКовальчук-й9е]

Словли... Від темпу твого пояснення, сам почав думати, що я кудись спізнююсь!) Хороший інформативний відос!

[@evdokimovm]

fly.pause() fly.currentTime = 0 fly.play()

[@blackstardg]

Спасибо только что об этом подумал.

[@evdokimovm]

​@BACKOB LOX коды на гытыа

[@T.a.n.y.a.10]

Это для паузы? А где его писать какая строчка кода

[@evdokimovm]

@@T.a.n.y.a.10 На 20:30. 30 строка. Это для того чтобы звук взлета не накладывался один на другой когда на кнопку нажимаешь, а проигрывался при нажатии каждый раз с начала.

[@TheBestSurvival]

Мне зашло, все понятно и интересно! Но совсем новичкам будет трудно!

[@delight2229]

на learn.javascript надо изучиьь основы джс , и теги верстки понимать хотя бы. Не так трудно будет

[@ilnev3738]

Ну я новичок , и мне чета было все понятно

[@anyka-6823]

Интересно было ещё на использование объектов посмотреть. И рисовку в скрипте напрямую. (интересно какие тут плюсы по сравнению с использованием файла css)

[@lolashepota4050]

Short and talented lesson! Well done!

[@Александр-ю9о2ш]

Действительно, всё гениальное - просто!

[@anyka-6823]

Ещё была добавлено условие очистки массива. Чтобы он не стремился к бесконечности. if (pipe.length > 2){ pipe.shift() }

[@Олег1927]

Супер! Давно ждал подобных видео! Так держать

[@PrototypeZZ]

Хорошо что без воды. Не серьёзно - только самое главное. Вот так надо туториалы делать.

[@dreamernum1792]

братан тебе огромное спс у мня сработала!! Я изменил параметры, и все готово! (я писал коды на Visual Studio Code) больше таких видосов! с меня подписка и лайк. ПРИВЕТ ИЗ УЗБЕКИСТАНА!

[@РамазанМагомедов-ы6ж]

Тебе привет из Дагестана.)))

[@indigo607]

Мне кажется, что все (ну или почти все) кто попытался поворить за автором на самом деле имели одну и ту же проблему - не загружалась графика. А те, кто писали, что видео крутое - просто его посмотрели, но повторить не пытались.

[@Kolabrod]

pipeBottom.onload = setInterval(() => { draw(); }, 100);

[@yaroslavyarmysh5553]

Это самый точьный овет. Я с групо питался повторить,

[@alexd4103]

@@yaroslavyarmysh5553 в HTML файле вместо DIV поставь тег CANVAS

[@skazochnik4268]

Все норм работает

[@puolchen2632]

@@Kolabrod Спасибо Вам огромное! У меня всё получилось. Ещё раз СПАСИБО!!!!

[@kennymccormic7578]

Спасибо за видео! Я ни разу не сталкивался с графикой, было очень интересно ознакомиться с основными принципами!

[@sprstrg]

молодчага, ответил на множество вопросов в одном видео))) спасибо!

[@АндрейКравченко-е9щ]

Спасибо за видео, я новичок в программировании мне понравилось.

[@ДенисОррлов]

Спасибо, помогли мне сдать экзамен по информатике

[@ПростоГуля-в4н]

kzbin.info/www/bejne/gmGammedYt-beqM - оригинал. Но за перевод, спасибо.

[@МирланМамыралиев-е2ы]

)))))))))))))). Он вечно занимается плагиатом.

[@strel9]

когда смотрел, как раз об этом подумал, плагиат или сам придумал)

[@Red1ska]

Вы еще скажите что тот парень из оригинала сплагиатил с разработчика игры

[@saidamir6538]

@@Red1ska +

[@Mykhailo_Vdovychenko]

Тай хорошо что перевел, ато на английском не всегда все понятно, так что Гоша красавчик 👍👍👍

[@devvvycs1424]

Прошу помогите,я делал все,как говорил автор,но у меня проблема с картинками я,когда делаю фон,то нечего нет просто пустота как и был белый фон так и остался,что делать?

[@flyyye]

+

[@user_kott3]

Вы правильно указали название изображения?

[@Mercblck]

Если изображение не появляется то вы не так веди названия картинки, или не в той папке

[@Aaa-iq7fp]

чувак getContext замени на ctx = cvs.getContext

[@ilnev3738]

Посмотри какой фон если он пустой то сделай его не пустым, также проверь правильно ли ты прописал путь к картинке

[@provseiobovseh]

В игре есть БАГ. После прохождения первого препятствия, если птичка падает то она падает за "экран" при этом очки начисляются дальше и игра продолжается. Т.е нет срабатывания припятствия "земли"

[@ВладимирЛеденёв-э6г]

УРА! Хоть кто-то написал..У меня такая же проблема.

[@ПавелКорнилов-й7б]

смотришь на эти формулы, и чувствуешь себя "дриопитеком из полиозойской эры" 🙉🦴

[@ЧеловексТопором]

Благодарю, было очень интересно.

[@ИванПринцев]

Рекламу лучше делать в начале или конце ролика с мысли сбивает.

[@elijahatlas5203]

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]

@Elijah Atlas instablaster =)

[@elijahatlas5203]

@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]

@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]

@Elijah Atlas no problem :D

[@НанаСерова]

Очень прикольно :) спасибо за разбор. Надо попробовать повторить)

[@Vostorg94]

спасибо за урок я тоже навичок 7 лет вот прем5ерно три месецасмотрю уроки😊😊😊

[@crawd9296]

Нихуя не понял,но очень интересно

[@davidelbakian6399]

)))

[@Арсенат24-е9д]

Такая же фигня, чувак)

[@oraclevb5430]

ахах

[@ДанилЧернов-щ3р]

а ты хотя бы учил язык?

[@crawd9296]

@@ДанилЧернов-щ3р да

[@Rondmeo]

Классный урок! Жаль, что можно поставить только один лайк - я бы поставил тысячу лайков)

[@ChelovekVeka]

Я ещё добавил птице 99 HP (от колонок и земли получает FPS*HP/С, то есть за tick теряется 1 HP, за секунду теряет 30 HP)

[@ВикторияХолмс-к5т]

Отличное видео и все получилось!

[@sevdev9374]

Исламов походу всем забашлял за рекламу)

[@mudirol4871]

Спасибо тебе большое, учу JS и вот решил посмотреть про веб-игры! Класс всё супер это крута! Хочу свою разработать!🥰🥰

[@AndriiMarusiak]

привіт і як воно? є лінк на Git?

[@denisgoncearuc7167]

Да нормальный видосик, мне понравилось, для тех кто только учит Js намного понятнее смьреть ьакую практику нежели какие то максимальнл нудные уроки где тупо считают циферки Я бы хотел уаидеть еще таких видосиков но немножко по сложнее

[@myster1ousdemon]

Идиот.

[@NazarTropanets]

Dmitry Morozov ты идиот

[@rayni6389]

С такими целями ты так и останешься не зная этот язык.

[@avanejust4257]

Надо было ускорение свободного падения реализовать) птичка с одинаковой скоростью падает

[@dimanarizhnyi391]

Подскажите какие плагины использовать для всплывающих команд как указано на 9:46 - 9:49 на примере requestAnimationFrame

[@Хтоя-ы9о]

Написал свою игрушку , очень рад!

[@semyondyachenko4183]

списал*

[@vbsgfb9000]

Круто！Давай больше игрушек

[@dan-3268]

Базара нет, брат. Достойно всё пояснил мне за жизнь. теперь я лучше понимаю как жить грамотно. От души!

[@lkllmjjn8654]

фарту масти д.ж.с жава скрипту .вечно

[@Amkonax]

а проехавшие пайпы не надо из массива удалять?

[@megalodon1052]

Смысла нет, игра очень простая и это не жрет много ресурсов компа.

[@parrotsarenice]

@@megalodon1052 ну как сказать, лучше всё таки удалять)

[@angrycatstudio2816]

А как это сделать

[@megalodon1052]

@@angrycatstudio2816 pop()

[@kiwii2539]

@@angrycatstudio2816 пропишите условие if что когда координаты ровны n числу вы могли использовать pop() let clearEl ==...) If(cordinate == clearEl) { Масив.pop() }

[@kostikmakesgames3279]

Норм получилось, наверно это одна из тех что надо написать, есть даже челлендж флэпиберд за 25строк кода)

[@Alexey-Balashov]

Добрый вечер! А какой редактор когда Вы используете? На Adobe Dreamweaver вроде не похоже.

[@Alexey-Balashov]

P.s. порекомендуйте, пожалуйста, хороший редактор кода для js. У меня Windows.

[@Alexey-Balashov]

@@eucliwoodscythe Спасибо за ответ.

[@Livanskiy_tv]

Спасибо, интересно. Немного устарело, вместо вар юзают const/let, а обращаться можно через querySelector. То сути не меняет.

[@anyka-6823]

Можно и querySelector но через id быстрее.

[@АлександрКотляров-к1ю]

спасибо, все очень интересно и понятно)

[@mishasv1490]

Отличное видео!

[@iNikelas]

Круто, спасибо!

[@Profococ]

очень полезно! спасибо)

[@Тимур-у8и8к]

Сделай движение дива по документу(область экрана) с препятствием.

[@lilokino94]

До 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--;

[@lilokino94]

length - ошибка в слове была, сравнение текста онлайн помогло

[@lilokino94]

ну и !рабочий оригинал кода на сайте вашем =-)

[@alishkaali6708]

@@lilokino94 почему тогда когда я скопировал и вставил к себе у меня ничего не изменилось?

[@lilokino94]

@@alishkaali6708 Такое будет всегда. Все сноси и перезапускай заного, ковыряйся в символах, думой на каком этапе могло пойти не так. Должен быть здравый азарт на сам поиск ошибки, иначе ты пока не созрел для коденга. Я слышал парикмахеры неплохо зарабатывают.

[@alishkaali6708]

@@lilokino94 молодец, очень остроумно с твоей стороны послать кого-то, интересно у тебя самого получилось, или как?) Ты даже не можешь правильно написать заново, а мне затираешь про программирование)

[@lexxarbelov5548]

Все делаю как в уроке,но картинки не появляются на странице(((

[@АннаБекренева-я3ы]

тоже самое. Еще не решил проблему?

[@daniilyasnohorskyi3810]

@@АннаБекренева-я3ы решил)

[@АннаБекренева-я3ы]

@@daniilyasnohorskyi3810 а как, если не секрет?)

[@wolfenstein5163]

Переименовать картинки и создать папку img

[@ZipOfficial]

@@daniilyasnohorskyi3810 как

[@jurijkermach4086]

отличный материал))

[@валармаргулис-г9и]

Я новичок. Пока что прохожу переменные. Но очень интересно было для меня

[@АлексейАкимов-щ8т]

В любом случае кланяюсь трижды.

[@staskob5502]

Отличный видеоурок Есть какая-то проблема, в хроме птичка через раз уходит за текстуру fg В браузере сафари все работает без какого-либо бага как можно было бы исправить ситуацию?

[@Bear-_-]

Бро, а где можно посмотреть, как скачать среду, ну там где нужно писать игры, прост только начал заниматься?

[@СергейЦветов-н4н]

Unity

[@cakeistrue]

А видосики у тебя классные. Хоть Я и не смотрю все, но лайки всегда ставлю)

[@LobanovSpace]

Ценный подписчик)

[@SergiiVoroniuk-m5v]

Огромное спасибо, все подробно пояснил, а на сайте суховато это было описано. Всё работает

[@nikitanedelcu3102]

Все делаю как в уроке,но картинки не появляются на странице

[@УверенныйДядя]

@@nikitanedelcu3102 тоже самое,уже зае*ало

[@ya.yung.danny1]

Подскажи пожалуста. Я после написания draw. У меня ничего не появляеться, в чём может быть дело?

[@marki8951]

У меня тоже

[@FrankMatrix]

@@marki8951 скопируйте с сайте код и будет вам счастье

[@marki8951]

@@FrankMatrix спасибо сроботало

[@catto88]

И у меня.

[@kollaps2006]

@@catto88 У меня работает только если пнг

[@forkidstales]

то есть при вызове pipeBottom у тебя вызывается в браузере bg?

[@funroom4367]

Лучше все время изменять переменную grav на -1, а в момент прыжка ставить пременной grav значение 10. Тогда игра будет больше похожа на Flappy Bird.

[@xyz_viz6604]

можешь написать кодом? хочу так сделать

[@Ilya-ku7jp]

у меня атом не выделяет переменные красным цветом ,не могу понять в чем проблема

[@kirillsemenov6583]

у тебя реактор другой похоже

[@Rb-ur5em]

Добрый день. Георгий Подскажите можно ли найти что-то подобное в принципе? Как лучше поступить ? Писать игру с нуля не получится точно! Простая карточная игра (качество и сложность не важно. лучше что-то по проще..) HTML, CSS, JS, MySQL Описание: Регистрация игрока, Минимум два участника Спасибо

[@ver_v71]

Очень познавательно, хотелось бы узнать можно ли создать ссылку таким же образом? Чтоб например при нажатии на картинку переходило на другую страницу? Спасибо

[@ver_v71]

Можно, но там немного другое. Канвас браузером воспринимается как просто набор пикселей, а не картинок или слов, да и я уже разобралась

[@МаксимНырков-у6г]

Спасибо. Интересно!

[@impisigmatus]

Здравствуйте, я раньше писал графику на c++ + opengl и там все более низкоуровнево. Я решил отклониться от хода урока и попробовать возможности. В итоге столкнулся с проблемой, что птички не перерисовываються в новом месте, а остаються на старом+рисуется на новом. С чем это может быть связано? В опен гл мы вручную всегда чистем буфер картинки, и рисуем ее сначала. Тут я таких функций не заметил(в вашем уроке). В чем может быть проблемма?

[@impisigmatus]

вот функция отрисовки function draw() { context.drawImage(img, x, y); requestAnimationFrame(draw); } img.onload = draw;

[@The14Some1]

Фона нет? Видимо тут тоже нужно каждый раз строить изображение по слоям перед реквестом.

[@Pashka818]

Круто!!

[@komronpulatov6785]

Есть вопрос стоит ли смотреть видеокурсы по JS от автора за 2015 год ?

[@MrBadbolt]

Основы начнёшь понимать , но лучше конечно сразу JQuery

[@oleg-kd7172]

Блин чувак спасибо , ты топ

[@nurjamalalmazkyzy5526]

Вы картину 3:40 минуте копировали это получается таблица td tr ?

[@fikys5310]

Я делал всё, как показывал автор, но со страницей ничего не происходит. Посмотрел коменты поменял на pipeBottom.onload = setInterval(() => { draw(); }, 100); draw(); Но ничего не произошло. Помогите пожалуйста.

[@bitByte109]

файл не подключается скопировал с cайта html и js коды, названия уазано правильно файл находиться в той же папке всё как у автора www index.html js audio img game.js вот так располагаются файлы но всё равно ни чего не работает в чём может быть проблема?

[@Shader_eq]

Подскажите пожалуйста какой язык программирования учить новичку?

[@РамазанМагомедов-ы6ж]

Не надо акцентировать на язык программирования в начале. Надо определиться кем ты хочешь стать, заниматься. Андроид разработчиком? Ios разработчиком? Веб приложения делать? Сайты делать? ПО для ПК делать? FrontEnd или Backend? Есть куча направлений. Надо свое направление выбрать, а потом уже смотреть на каком языке программировать. А так для начала, чтобы научится можно пайтон выбрать. У него синтаксис простой.

[@ГошаЭверстов-с6э]

Можете скинуть ссылку для скачивания спрайтов

[@chaussures2940]

Често не знаю нечего в программировании, но мне понравилось, а ёще я хочу ДИНОЗАВРИКА

[@StepaAan_Official_youtube]

Есть, и такая обучалка!

[@chaussures2940]

@@StepaAan_Official_youtube Класс, а можешь научишь как делать бота? в какой-то игре думаю всем будет интересно и вам тоже

[@dromich]

Мега спасибо, давно интересуюсь етой темой, все никак руки не доходили. Все просто и понятно базис задан дальше просто розвивать напрвление.

[@killgame4683]

Привет с 2020 видео нереально крутое

[@LobanovSpace]

Спасибо за видео

[@ВячеславНОСАЛЬСКИЙ-к3ц]

Круто!!!)))

[@sense1416]

Реклама на 1 минуту! Сильно.

[@eugengordeychik7370]

Может кто подскажет! в общем пробовал этот пример и в хроме показывает ошибку "изображение не определено" в чем может быть проблема???

[@РемонтРемонт-б2ж]

на каком программе вы набираете коды. просто блокнот или какая то программа

[@Drago-pq2pl]

через atom

[@TV-ce2dc]

Господа, это полноценная игра! Её изначальный автор зарабатывал 55 000$ США в день на встроенной рекламе! Только в этой реализации старые Pipe из массива нужно удалять, чтобы память не забить.

[@djoniKage]

Почему у меня в getContext("2d"); ошибка null ?

[@user-tz3zw2ho7h]

Такова судьба🤣

[@gleb_bro8710]

может cnvs.getContext("2d")

[@Коля-з2ы2ь]

подскажите как уже готовую игру изменять данные? спасибо

[@gefest9530]

Видео ускорено чтоли ?

[@AidarNizamov]

отличный урок

[@ErokhinS]

не понял вот такую штуку, как изменить время отрисовки анимации? ну допустим птичка падает на 1px каждый 20мс или за 1секунду. Такой параметр есть? надо работать с requestAnimationFrame чтобы его поменять?

[@plevanto8205]

Сергей Ерохин заместо requestAnimationFrame поставь setInterval(функция, обновление в миллисекундах); Пример: setInterval(draw, 60);

[@thesweetlife843]

ты сам то пробовал что получилось ?? )

[@plevanto8205]

TheSweetLife Да. Может быть где-то в комментарии допустил ошибку, вы там погуглите.

[@plevanto8205]

TheSweetLife у меня все робит.

[@thesweetlife843]

Не пытался для appstor и googleplay игруху делать ??

[@АндрейАндрей-у3ц1р]

Здравствуйте! Ребята у меня такая проблема что bg, fg, bird, pipeUp, pipeBottom в редакторе не выделяютса цветом и когда хочу посмотреть что получилось то в браузере ничего не показывает, об'ясните в чём причина. P.S. я в этом деле новый. Зарание спасибо!

[@oOIMAXIOo]

скорее всего ты файл назвал после точки не правильно

[@twoypaklonick849]

Эй я сделал чисто как на видео. Почему даже не вивел на страницу png фигуры!!!

[@cotton_wool_man]

Очень интересно! Подскажи пожалуйста, как сделать вывод информации на странице сайта в виде дерева (иерархия). Чтобы по этому дереву можно было перещаться масштабировать как навигация на карте.

[@psevdonim753]

Ставишь с помощью тега а якорь на что нибудь, и эти теги вместе как нибудь собираешь

[@aonai]

А можно самому картинки нарисовать и свои звуки добавить и отправить другу поиграть?

[@aderxa7218]

Делай игру на движке Unreal Engine!! Очень нравится

[@gosha_dudar]

Эти видео будут, они в процессе записи

[@aderxa7218]

Гоша Дударь буду ждать ) ти лудший)))))

[@dimmix_ua]

Прикольно, а как ты ее залил в пм? И сколько заработал?

[@Пупок-щ3в]

@@gosha_dudar Подскажите плагины для создания такого же формата игр или программ.Пожалуйста.

[@kocho5917]

спасибо у меня вышло!

[@kodar_placdarm]

у меня не получается объединить эти папки. Я не знаю что дальше делать(

[@РоманМосолов-ы1ш]

Вау, это круто.

[@Инвокер-е3и]

Гоша, пожалуйста, расскажи по больше про юнити

[@shohruxshavkatov]

bu igrani to'liq kodi yoqmi bolsa yuboring iltimos plith

[@Half_Channel]

Есть два способа не использовать чистый js для использования анимации через css или через библиотеку jquery там все намного проще

[@anyka-6823]

Да можно но этот вариант хорош для изучения js так же его можно адаптировать к изучению css

[@mishanya920]

Вот спасибо!

[@ishtarinanna8280]

help! w chom moja problema? папка с картинками наз. "myimg" но картинка не прогружается, белый фон. var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); var bird = new Image(); var bg = new Image(); var fg = new Image(); var pipeUp = new Image(); var pipeBottom = new Image(); bird.src = "myimg/bird.png"; bg.src = "myimg/bg.png"; fg.src = "myimg/fg.png"; pipeUp.src = "myimg/pipeUp.png"; pipeBottom.src = "myimg/pipeBottom.png"; function draw() { ctx.drawImage(bg, 0, 0); } pipeBottom.onload = draw;

[@ZipOfficial]

тоже самое

[@soapewxw]

Cannot read property 'getContext' of null

[@КутманКабылуулу-в1з]

Где скачать PNG двух труб?

[@Grapeoff]

Я один смотрел видео только для того чтобы посмотреть что получится?

[@awenn2015]

Нет, я собираюсь повторить