Тёмный
No video :(

Пишем аналог Hamster Kombat с нуля на HTML & CSS & JavaScript 

Владилен Минин
Подписаться 308 тыс.
Просмотров 34 тыс.
50% 1

Бесплатный курс по HTML & CSS + диагностика навыков: bit.ly/4687mIv
Полный Roadmap по Frontend разработке: bit.ly/3S8CNg7
Мой телеграм канал: t.me/js_by_vla...
Исходники тут: t.me/js_by_vla...
Настройка аналога Copilot: t.me/js_by_vla...
Полный курс по JavaScript: • JavaScript c Нуля - Ку...
Пишем свой Hamster Kombat (8/11)
Кликеры повсюду. Ловите без лишних слов гайд, как в телеграме можете создать свой аналогичный кликер на HTML & CSS & JavaScript
Для начинающих и тех, кто хочет подтянуть свой уровень прилагаю сразу вспомогательные ресурсы: клик
В видео с нуля, пошагово покажу создание такого кликера с деплоем в телеграм бота. На выходе у вас будет своя приложуха. Приятного просмотра!

Опубликовано:

 

28 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 153   
@VladilenMinin
@VladilenMinin Месяц назад
Я в хомяка не играл, а потому решил написать свой) А вы ждете airdrop ?) Полезные ресурсы к видео: Бесплатный курс по HTML & CSS + диагностика навыков: bit.ly/4687mIv Полный Roadmap по Frontend разработке: bit.ly/3S8CNg7
@david_yuzhakov
@david_yuzhakov Месяц назад
Не ждем
@hallifar
@hallifar Месяц назад
Я тыкал немнога, но особо не жду ничего конкретно от хомяков )
@VladilenMinin
@VladilenMinin Месяц назад
@@david_yuzhakov Понимаю, я потому даже и не начинал тапать)
@houston_np
@houston_np Месяц назад
@@VladilenMinin вспомнился старый мемный видос с голумом. - А я знаю, что ты тапал - Я не тапал! - Тапал, тапал, я всем расскажу, что ты тапал - Неет
@DarkzarichV2
@DarkzarichV2 Месяц назад
Мы с вами взрослые люди и понимаем, что деньги из воздуха не возьмутся. Копейка другая за просмотр рекламы это максимум, а такие системы ещё до хомяка существовали и существуют)
@zohidjonmarufov2008_
@zohidjonmarufov2008_ Месяц назад
Знаете Владилен Минин, я до этого думал что для того чтобы создать телеграм бота, нужно особые знания, как минимум не HTML CSS и JS. Но на самом деле это совсем иначе, вы помогли мне открыть новые возможности, за это вам спасибо!!
@H1roHamada
@H1roHamada Месяц назад
В гугле забанили, видимо)
@Amdusi4s
@Amdusi4s Месяц назад
Это самое легкое что можно сделать)
@gfhjjbvhhhffcjj
@gfhjjbvhhhffcjj 27 дней назад
До осталось написать бекенд и все😂
@zohidjonmarufov2008_
@zohidjonmarufov2008_ 27 дней назад
@@gfhjjbvhhhffcjj
@DanyaConcept
@DanyaConcept Месяц назад
Прикольно получилось) Если видео залетит, то можно еще добавить реферальную систему, задания и привязку кошелька 🔥 Кстати круто что ты взялся за эту идею!
@useruseruseruseruser288
@useruseruseruseruser288 Месяц назад
...
@DanyaConcept
@DanyaConcept Месяц назад
@@useruseruseruseruser288 ?
@user-pp9dk4cd6k
@user-pp9dk4cd6k Месяц назад
не будет он делать
@ziliboba73
@ziliboba73 Месяц назад
Большое спасибо, у вас отлично получается в коротком видео уместить столько полезного из разных стеков! Просто неоценимо!
@user-yr2gc3mp4y
@user-yr2gc3mp4y Месяц назад
Брат, годнота подъехала! Давай по возможности ещё больше подобных туториалов с упором на практику!)
@user-ik8sm2th7i
@user-ik8sm2th7i Месяц назад
А можешь снять вторую часть, как установить защиту? Хотелось бы посмотреть как защитить свой код от того, что люди могут зайти в просмотр кода и тупо настроить автокликер в консоли или делать свои автозапросы на бэк. Как этого избежать?
@Taiga_libertarian
@Taiga_libertarian Месяц назад
На привьюхе - Ева тапает Владилена 😄 Контент - огонь! 👾
@user-pv2oc6is9d
@user-pv2oc6is9d Месяц назад
Технический контент всегда приветствую :) Правильное направление. Вот что-то такое мне и нужно
@VladilenMinin
@VladilenMinin Месяц назад
Рекомендую ознакомиться с тем, что уже есть на канале. Все актуальное
@user-pv2oc6is9d
@user-pv2oc6is9d Месяц назад
Спасибо большое. Слежу за твоими видео ряд лет. Я у тебя в закрытой группе. Это просто у меня второй аккаунт. Ярослав я. Я чуть меньше смотрел последние годы, потому что типа уже научился в целом, уже умею. Я просто ценю технологии, и хочу проголосовать +1 именно за технические материлы, чтобы ты заметил что всё же есть люди которые ценят техническую сторону дела, не ленятся посмотреть
@Dzhambek
@Dzhambek Месяц назад
Ух есть чем заняться сегодня ночью не сколько идей есть и огромное Вам спасибо за видео .
@davida8216
@davida8216 Месяц назад
очень четко!!! спасибо! задавался вопросом как они так сделали и тут видос! :)
@It_interess777
@It_interess777 10 дней назад
Спасибо, прикольное видео! Хорошо разобрал!!! Понятно очень!
@user-oi2de8rv3n
@user-oi2de8rv3n Месяц назад
Было бы интересно узнать про авторизацию, систему рефералов, систему заданий
@momicantpause
@momicantpause 5 дней назад
все получилось! спасибо! круто! сделай вторую часть видео, где мы подключаем все системы TON , Wallet какие-нибудь игровые покупки и цены тебе не будет! Да мы готовы за такое видео заплатить!)
@hallifar
@hallifar Месяц назад
Прикольно) Ждал чего-то такого от тебя! 👍
@demigodance
@demigodance Месяц назад
Мощно владиленыч 👍🔥
@user-pv2oc6is9d
@user-pv2oc6is9d Месяц назад
Вот, я только что ночью досмотрел на третий день. Три дня смотрел по частям. И это ещё не писал код. Но в Телеграме нашёл бота, докликал до 50. Я чувствую двойственность. С одной стороны было лень смотреть, хоть я и опытный, но уже как бы взрослый и уставший. А с другой стороны, я конечно же хотел хотя бы просто посмотреть, чтобы отдать дань уважения разумному контенту, так как всё что у нас есть в основном создано разумом, и если действовать "не разумом" то так себе получится результат. Хочу поддержать технический контент, и пожалуй повторю этот код моими руками, хоть и лень
@user-zj9yp5jl5j
@user-zj9yp5jl5j Месяц назад
Владиленыч на хайпе, красава)
@Main.py7
@Main.py7 Месяц назад
ЛУЧШИЙИИЙЙЙЙЙЙ КАК ЖЕ ДОЛГО Я ЭТО ИСКАЛ
@youth991
@youth991 Месяц назад
На codepen мог-бы поискать, я уже давно такое написал ))
@youth991
@youth991 Месяц назад
Ток лучше использовать вместо click - touch, чтобы можно было кликать несколькими пальцами и поворот кнопки убирать не по времени, а по опусканию клика 😁
@user-kr3mh8ok2l
@user-kr3mh8ok2l Месяц назад
Шикарный канал. И наглядно, и классная речь автора, и кратко+емко.
@artemka_edge638
@artemka_edge638 Месяц назад
Собирался на днях написать проект,дабы закрепить знания JS, созрел на кликер в стиле "Хомяка".Захожу на ютуб и вижу ваше видео,прикольное совпадение)
@catfish_games
@catfish_games Месяц назад
Спасибо за контент!) Будет ли свежее видео по настройке VS Code?
@konjinni
@konjinni Месяц назад
надо было ящерицу сделать внизу, и генерить случайных мух и жучков на которые надо кликать и кормить ящерицу - тут уже сосиской на моторчике не накликаешь)
@stasich6917
@stasich6917 23 дня назад
Очень круто, но хотелось бы побольше объяснений, но понимаю, что на это уйдет много времени, а так спасибо за видео)
@Dzhambek
@Dzhambek Месяц назад
На самом интересном месте на 34.34 секунде не могу синхронизировать Firebase и выполнить " nitialize your project " в " Visual Studio code " у меня красная надпись вылазит версия node у меня ( v.20.15.1 ) и npm 10.7,0 и дальше 3 часа увлекательного путешествия в мире криптовалюты пролетели Вы смогли за 40 минут но у меня вышла слушать Вас приятно за 3 часа до npm install -g firebase -tools дальше пока работать не смогу не знаю в чём проблема.
@TheRainbowlandMetaverse
@TheRainbowlandMetaverse Месяц назад
Thanks Vladilen, let's try to make our own clicker based on your video. (Спасибо, попробуем сделать свой кликер на основе видео.)
@jaki4695
@jaki4695 Месяц назад
Топ 🔥
@user-mi1hq1dz2b
@user-mi1hq1dz2b Месяц назад
Ахах, что? Норм контент))
@user-bh5kq1dp8k
@user-bh5kq1dp8k Месяц назад
А будет ролик про простые бесплатные хостинги для простеньких проектов для начинающих? По типу того же Firebase. Было бы неплохо ещё показать как работает привязка к GitHub, чтобы изменения из основной ветки автоматически отправлялись на хостинг
@deshark5949
@deshark5949 Месяц назад
кажется есть versel
@alexnews8346
@alexnews8346 Месяц назад
вот хочу на GitHub сделать он же должен дать линк.
@bratik026
@bratik026 Месяц назад
Netlify есть
@elperdante
@elperdante Месяц назад
красава то-что надо)
@DerAleksey
@DerAleksey Месяц назад
компактненько собрал! B-)
@chatGpt637
@chatGpt637 25 дней назад
Кайф, спасибо. По базе данных для игры будет урок?
@armand_xD
@armand_xD Месяц назад
Можно урок, про авторизацию в телеграмме, систему рефералов, энергию и как где то хранить очки всех людей?) а задания было бы вообще супер))
@Donnie_Gifter
@Donnie_Gifter 22 дня назад
Здравствуйте выдает ошибку когда ввожу firebase init весь экран красным становится что делать 😢?
@yakut54
@yakut54 Месяц назад
Вот это я удачно зашёл )
@DailyDeveloperNews
@DailyDeveloperNews Месяц назад
Привет Владилен! Какие расширения были активны в редакторе?
@forellko8600
@forellko8600 Месяц назад
Спасибо большое❤
@mister_robot01
@mister_robot01 Месяц назад
Привет, а не планируешь видосы про блокчейны ?) В частности хотелось бы про TON, может этот проект на тоне сделаешь ?
@kraudpro6789
@kraudpro6789 Месяц назад
давай теперь видос с бекендом для этой ящерки
@user-qs6qg6jl9f
@user-qs6qg6jl9f Месяц назад
он не умеет, он же фронтендер
@user-pp9dk4cd6k
@user-pp9dk4cd6k Месяц назад
@@user-qs6qg6jl9f ага , без авторизации и партнерки это никому не нужный хлам
@mokkamokka4097
@mokkamokka4097 Месяц назад
топчик!
@kinoshorts590
@kinoshorts590 25 дней назад
Привет, можешь помочь? Допустим в боте натапал, и получается большое число, а оно не помещается в экран, что делать? Как сделать так, чтоб текст подстраивался и становился меньше?
@flowsmiles5068
@flowsmiles5068 21 день назад
Ты можешь по сути просто вместо 1000 писать 1к. Для этого нужно просто делить число на тысячу и на единицу (чтоб округлить), после того как оно будет больше 999 . и добавить "к"
@kinoshorts590
@kinoshorts590 20 дней назад
@@flowsmiles5068 спасибо
@SlavaCh
@SlavaCh Месяц назад
Вы открыли ящик пандоры, теперь каждый школоло задеплоит своего хомяка)
@VladilenMinin
@VladilenMinin Месяц назад
Ахахха
@twisterraze666
@twisterraze666 Месяц назад
Больше всего в таких мини приложениях мне нравится именно бекенд часть), потому что легко подделывать запросы, чтобы фармить
@VladilenMinin
@VladilenMinin Месяц назад
Есть кейсы?
@user-pp9dk4cd6k
@user-pp9dk4cd6k Месяц назад
чтобы потом улететь в бан?
@sarkarov_ru
@sarkarov_ru 3 дня назад
Всем привет! Нужен совет. Ищу платформу, которая позволяет создавать веб -приложение, в частности, игру, без обширных знаний о кодировании. Эта платформа должна иметь: * Фронтовая разработка: Визуальный редактор для создания пользовательского интерфейса и игровых визуальных эффектов, таких как игра например игра «Хомяк». * Бэк-энвая логика: способ определить логику, правила и действия игры, потенциально используя визуальные инструменты или простой язык сценариев. * Дизайн базы данных: Возможность создания и управления базой данных для хранения игровых данных, таких как оценки игроков, прогресс и настройки. * Параметры без кода / низкого кода: Возможность создавать большую часть игры без написания кода, с возможностью добавления пользовательского кода для расширенных функций. Знаю есть такие конструкторы как bubble webflow, unity но не знаю подойдут ли они для всего, что я описал
@RickandMortych
@RickandMortych 16 дней назад
Владилен здравствуйте , что у Вас за мак? можно полные характеристики/информацию , спасибо !
@narekhovhannisyan6362
@narekhovhannisyan6362 Месяц назад
Я видел это у вас на github перед этим видео))
@fizmatik9447
@fizmatik9447 Месяц назад
жду продолжение , действуй
@vgolde14
@vgolde14 Месяц назад
Владилен, спасибо за контент! А ты какой прокси/впн используешь для копайлота? Он прям быстро предлагает промты
@VladilenMinin
@VladilenMinin Месяц назад
Настройка аналога Copilot: t.me/js_by_vladilen/844
@user-san-chous
@user-san-chous Месяц назад
юзай codeium. Он не хуже и бесплатный.
@Sent-Arena
@Sent-Arena 15 дней назад
Продолжение модификации будет?
@Tornado-ln7fq
@Tornado-ln7fq Месяц назад
Ну странная логика. Сначала получаем офсеты, далее отнимаем позицию слева и сверху,делим на 2. Далее создаем новые переменные и полученные офсеты теперь делим на ширину и высоту,и полученное умножаем на якобы градус.Я конечно знаю что js это конченый язык ,но чтоб настолько. Вот только у меня вопрос,по-моему это можно сделать гораздо легче, есть же функция получения координат, причем есть функция получить координаты изображения,и нужно будет просто создать ивент,по нажатию на определённую область,изменить наклон картинки, и не городить такой огород. Тем более нам не нужно тыкать на картинку, а на всю область, а картинке мы делаем только эффект,разве нет)
@x-grand-x
@x-grand-x Месяц назад
В любом случае эти "функции" работают также разница только в сахаре. Да и логика логичная, мы берём абсолютную позицию нажатие, и чтобы наш эффект был ровно там где хотим, отнимаем ещё и относительное (наш Rect) Вот и все логика так-то
@Tornado-ln7fq
@Tornado-ln7fq Месяц назад
@@x-grand-x А смысл,мы просто делаем ивент по нажатию на область,и крутим картинку,не зависимо куда кликаем,ну хз,дело каждого.
@user-ty5vo7de7o
@user-ty5vo7de7o 8 дней назад
Может это ты конченый?
@pozytron-code
@pozytron-code 19 дней назад
а в сторедж или через консоль в дж - мы ж можем 1000000 момент прописать себе?
@paveloDevJourney
@paveloDevJourney Месяц назад
А как прроисходит адаптация размера верстки под экран в телеграм боте? Есть какое-то соотношение?
@LikaterStudios
@LikaterStudios 24 дня назад
ждём листинг)) ахха
@liraybe7421
@liraybe7421 Месяц назад
Лучше на неакте сделать что-то, полезнее будет, жду видос!;)
@liraybe7421
@liraybe7421 Месяц назад
Реакте*
@user-iv2zt9oy2f
@user-iv2zt9oy2f Месяц назад
Владилен, Спасибо за видео. Смотю много твоих информативных , обучающих видео и не могу понять почему везде где нужно написать временное значение для демонстрации , ты пишешь "42". В чем суть?
@user-pv2oc6is9d
@user-pv2oc6is9d Месяц назад
Шутишь? Просто загугли 42
@alexnews8346
@alexnews8346 Месяц назад
What is the significance of 42? The number 42 from Douglas Adams' 'The Hitchhiker's Guide to the Galaxy' represents all meaning ('the meaning of life, the universe, and everything') as determined by the fictional supercomputer Deep Thought. The number 42 is not a particularly significant number in base 13
@user-pv2oc6is9d
@user-pv2oc6is9d Месяц назад
Yes
@Dzhambek
@Dzhambek Месяц назад
Проект полностью работает можете сделать урок для начинающих как " КАК ЗАХОСТИТЬ НА Firebase console " у меня выскакивает красная строка хотя всё установлено не распознано как команда лета . Спасибо очень хочу сделать даже монетку свою своей фамилией сегодня сделал а это не получается спасибо .
@Sent-Arena
@Sent-Arena 12 дней назад
Попробовал повторить, фигуры на цент ре становятся, они показаны конвертом, и дальше не цвет фона ни смещение фигур.
@Йотл
@Йотл 4 дня назад
Продолжение пожалуйста добавь пожалуйста главную страницу как в хомяке
@easycrazy709
@easycrazy709 9 дней назад
А Бэк писать не нужно ?
@niorus9412
@niorus9412 25 дней назад
а в чем смысл? и зачем оно?
@bitnance
@bitnance Месяц назад
А где интеграция с телеграм апи? В чем смысл этого кликера, если это просто вебвью
@VladilenMinin
@VladilenMinin Месяц назад
Если просмотры будут, сделаем продолжение
@Sent-Arena
@Sent-Arena 13 дней назад
Я самоучка, создал кликер на Uniti под Android. За деплоил на комп, как в телеграм залить не понимаю, может кто подскажет?
@user-tz3sd3sd6d
@user-tz3sd3sd6d Месяц назад
а сделайте c контрактами на func или на tact лучше так интереснее чем просто накидывать html css
@vasiliy2396
@vasiliy2396 Месяц назад
А в чём прикол, если прогресс нигде не хранится, тупо картинка обмазана js кодом
@user-oi2de8rv3n
@user-oi2de8rv3n Месяц назад
В ротейт)
@SWhen
@SWhen 13 дней назад
В конце когда открываю URL, то мне пишет: настройка хостинга завершена, вы видите это, потому что успешно настроили хостинг Firebase. Как исправить?
@darwinsdarwins2230
@darwinsdarwins2230 12 дней назад
Нашел решение?
@SWhen
@SWhen 12 дней назад
@@darwinsdarwins2230 да. Нужно использовать другой сайт куда можно загрузить все на хостинг.
@darwinsdarwins2230
@darwinsdarwins2230 12 дней назад
@@SWhenты какой используешь?
@user-wy5bv2lw8s
@user-wy5bv2lw8s Месяц назад
самый лучший ❤
@venomemran851
@venomemran851 Месяц назад
А почему ты всё время пишешь число 42?
@yuriiyurii6656
@yuriiyurii6656 Месяц назад
А как же WebStorm?
@user-pv2oc6is9d
@user-pv2oc6is9d Месяц назад
Я когда слышу нашу обычную фразу "DOM дерево", я думаю что нужно построить дом и посадить дерево. Это у всех так?
@marus_space
@marus_space Месяц назад
На каждый клик при score >= 50 будет меняться картинка
@qad1miy
@qad1miy Месяц назад
Спасибо за ящера ) Когда значит листинг ахахахах
@youth991
@youth991 Месяц назад
Но я такую игру уже давно написал 😁
@user-gm5ri4pq5t
@user-gm5ri4pq5t Месяц назад
Все круто, только не робит у меня функционал счетчика по клику, 10 раз пересмотрел код не могу найти проблемму
@VladilenMinin
@VladilenMinin Месяц назад
Проверь исходники
@JoHimicev
@JoHimicev 25 дней назад
@@VladilenMinin тоже счётчик NaN, скачал исходники, запустил проект, такая же фигня NaN, а в режиме инкогнито всё работает, какое-то расширение мешает походу хз как только
@thelowfer1016
@thelowfer1016 Месяц назад
А что это за автодополнения года? Не похоже на еммет
@VladilenMinin
@VladilenMinin Месяц назад
В описание ссылка на урок в тг
@skeelo3157
@skeelo3157 Месяц назад
не понимаю почему hamster является кликером, там же заработок с карт а не кликов
@senails0
@senails0 Месяц назад
надо было реакт добавить, делать преложеньку не в декларативном стиле уже не актуально как то
@user-san-chous
@user-san-chous Месяц назад
для новичков - актуально + универсально. А накой черт смотреть реакт тому, кто работает или учит вью либо ангуляр?
@senails0
@senails0 Месяц назад
@@user-san-chous почти все фреймворки в декларативном стиле и надо уметь работать в нем
@krylovDev
@krylovDev Месяц назад
Вот реакт разработчики подтянулись, а не программисты
@user-san-chous
@user-san-chous Месяц назад
@@krylovDev ну по комменту видно, что он пока не понимает)) но всему свое время...
@Edgar-pu1lc
@Edgar-pu1lc Месяц назад
Js это база, а фреймворки приходят и уходят
@user-ik8sm2th7i
@user-ik8sm2th7i Месяц назад
Можно использовать трансформ3d чуть производительней будет
@user-ik8sm2th7i
@user-ik8sm2th7i Месяц назад
А так, очень круто, спасибо за контент
@morok5591
@morok5591 23 дня назад
Как сделать мультитач на кнопку?
@VladilenMinin
@VladilenMinin 23 дня назад
Событие тач
@morok5591
@morok5591 23 дня назад
@@VladilenMinin так вообще не работает кнопка
@WarpTerminal
@WarpTerminal Месяц назад
Владилен, добавляй тайм коды пж ну пжппжпжпжпжпжжп
@rus16w
@rus16w 22 дня назад
Круто но сложно я бы крысу сделал бы
@MadBlissOff
@MadBlissOff Месяц назад
Сколько можно гайды с таким примитивным базовым кодом делать? Это и обезьяна накодит... Лучше бы записал, как сделать реферальную систему через mini apps, сохранение пользователей в БД, оптимизацию итд, +чтобы от наплыва народу это всё не легло
@Double.T-vi1rs
@Double.T-vi1rs Месяц назад
ХайпанутЬ решил, што курси плохо продаютса?
@арокен
@арокен Месяц назад
Я earlybird
@VladilenMinin
@VladilenMinin Месяц назад
хэллоу
@shushanhovsepyan5657
@shushanhovsepyan5657 Месяц назад
👨‍🏫👧👋
@user-dm4yi9ch3n
@user-dm4yi9ch3n 20 дней назад
jQuery ??? шта?
@thisdaywalker5630
@thisdaywalker5630 Месяц назад
на других платформах размещаете свои видео? Ютуб болеет, как бы вовсе не упал, терять автора не хочется
@VladilenMinin
@VladilenMinin Месяц назад
Подписывайся на телегу
Далее
Кого из блогеров узнали?
00:10
Просмотров 596 тыс.
Майндсет программиста
19:16
Просмотров 13 тыс.