Пишем аналог Hamster Kombat с нуля на HTML & CSS & JavaScript
HTML-код
- Опубликовано: 7 сен 2024
- Бесплатный курс по 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
Для начинающих и тех, кто хочет подтянуть свой уровень прилагаю сразу вспомогательные ресурсы: клик
В видео с нуля, пошагово покажу создание такого кликера с деплоем в телеграм бота. На выходе у вас будет своя приложуха. Приятного просмотра!
Я в хомяка не играл, а потому решил написать свой)
А вы ждете airdrop ?)
Полезные ресурсы к видео:
Бесплатный курс по HTML & CSS + диагностика навыков: bit.ly/4687mIv
Полный Roadmap по Frontend разработке: bit.ly/3S8CNg7
Не ждем
Я тыкал немнога, но особо не жду ничего конкретно от хомяков )
@@david_yuzhakov Понимаю, я потому даже и не начинал тапать)
@@VladilenMinin вспомнился старый мемный видос с голумом.
- А я знаю, что ты тапал
- Я не тапал!
- Тапал, тапал, я всем расскажу, что ты тапал
- Неет
Мы с вами взрослые люди и понимаем, что деньги из воздуха не возьмутся. Копейка другая за просмотр рекламы это максимум, а такие системы ещё до хомяка существовали и существуют)
Знаете Владилен Минин, я до этого думал что для того чтобы создать телеграм бота, нужно особые знания, как минимум не HTML CSS и JS. Но на самом деле это совсем иначе, вы помогли мне открыть новые возможности, за это вам спасибо!!
В гугле забанили, видимо)
Это самое легкое что можно сделать)
До осталось написать бекенд и все😂
@@gfhjjbvhhhffcjj
Прикольно получилось) Если видео залетит, то можно еще добавить реферальную систему, задания и привязку кошелька
🔥 Кстати круто что ты взялся за эту идею!
...
@@useruseruseruseruser288 ?
не будет он делать
Большое спасибо, у вас отлично получается в коротком видео уместить столько полезного из разных стеков! Просто неоценимо!
Брат, годнота подъехала! Давай по возможности ещё больше подобных туториалов с упором на практику!)
А можешь снять вторую часть, как установить защиту? Хотелось бы посмотреть как защитить свой код от того, что люди могут зайти в просмотр кода и тупо настроить автокликер в консоли или делать свои автозапросы на бэк. Как этого избежать?
Было бы интересно узнать про авторизацию, систему рефералов, систему заданий
Технический контент всегда приветствую :) Правильное направление. Вот что-то такое мне и нужно
Рекомендую ознакомиться с тем, что уже есть на канале. Все актуальное
Спасибо большое. Слежу за твоими видео ряд лет. Я у тебя в закрытой группе. Это просто у меня второй аккаунт. Ярослав я. Я чуть меньше смотрел последние годы, потому что типа уже научился в целом, уже умею. Я просто ценю технологии, и хочу проголосовать +1 именно за технические материлы, чтобы ты заметил что всё же есть люди которые ценят техническую сторону дела, не ленятся посмотреть
На привьюхе - Ева тапает Владилена 😄 Контент - огонь! 👾
все получилось! спасибо! круто!
сделай вторую часть видео, где мы подключаем все системы TON , Wallet какие-нибудь игровые покупки и цены тебе не будет!
Да мы готовы за такое видео заплатить!)
очень четко!!! спасибо! задавался вопросом как они так сделали и тут видос! :)
Ух есть чем заняться сегодня ночью не сколько идей есть и огромное Вам спасибо за видео .
Спасибо, прикольное видео! Хорошо разобрал!!! Понятно очень!
Прикольно) Ждал чего-то такого от тебя! 👍
Вот, я только что ночью досмотрел на третий день. Три дня смотрел по частям. И это ещё не писал код. Но в Телеграме нашёл бота, докликал до 50. Я чувствую двойственность. С одной стороны было лень смотреть, хоть я и опытный, но уже как бы взрослый и уставший. А с другой стороны, я конечно же хотел хотя бы просто посмотреть, чтобы отдать дань уважения разумному контенту, так как всё что у нас есть в основном создано разумом, и если действовать "не разумом" то так себе получится результат. Хочу поддержать технический контент, и пожалуй повторю этот код моими руками, хоть и лень
Ток лучше использовать вместо click - touch, чтобы можно было кликать несколькими пальцами и поворот кнопки убирать не по времени, а по опусканию клика 😁
Собирался на днях написать проект,дабы закрепить знания JS, созрел на кликер в стиле "Хомяка".Захожу на ютуб и вижу ваше видео,прикольное совпадение)
На самом интересном месте на 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 дальше пока работать не смогу не знаю в чём проблема.
Спасибо за контент!) Будет ли свежее видео по настройке VS Code?
Thanks Vladilen, let's try to make our own clicker based on your video. (Спасибо, попробуем сделать свой кликер на основе видео.)
Можно урок, про авторизацию в телеграмме, систему рефералов, энергию и как где то хранить очки всех людей?)
а задания было бы вообще супер))
надо было ящерицу сделать внизу, и генерить случайных мух и жучков на которые надо кликать и кормить ящерицу - тут уже сосиской на моторчике не накликаешь)
Очень круто, но хотелось бы побольше объяснений, но понимаю, что на это уйдет много времени, а так спасибо за видео)
Мощно владиленыч 👍🔥
Шикарный канал. И наглядно, и классная речь автора, и кратко+емко.
Владиленыч на хайпе, красава)
Всем привет! Нужен совет.
Ищу платформу, которая позволяет создавать веб -приложение, в частности, игру, без обширных знаний о кодировании. Эта платформа должна иметь:
* Фронтовая разработка: Визуальный редактор для создания пользовательского интерфейса и игровых визуальных эффектов, таких как игра например игра «Хомяк».
* Бэк-энвая логика: способ определить логику, правила и действия игры, потенциально используя визуальные инструменты или простой язык сценариев.
* Дизайн базы данных: Возможность создания и управления базой данных для хранения игровых данных, таких как оценки игроков, прогресс и настройки.
* Параметры без кода / низкого кода: Возможность создавать большую часть игры без написания кода, с возможностью добавления пользовательского кода для расширенных функций.
Знаю есть такие конструкторы как bubble webflow, unity но не знаю подойдут ли они для всего, что я описал
ЛУЧШИЙИИЙЙЙЙЙЙ КАК ЖЕ ДОЛГО Я ЭТО ИСКАЛ
На codepen мог-бы поискать, я уже давно такое написал ))
давай теперь видос с бекендом для этой ящерки
он не умеет, он же фронтендер
@@user-qs6qg6jl9f ага , без авторизации и партнерки это никому не нужный хлам
А будет ролик про простые бесплатные хостинги для простеньких проектов для начинающих? По типу того же Firebase. Было бы неплохо ещё показать как работает привязка к GitHub, чтобы изменения из основной ветки автоматически отправлялись на хостинг
кажется есть versel
вот хочу на GitHub сделать он же должен дать линк.
Netlify есть
Здравствуйте выдает ошибку когда ввожу firebase init весь экран красным становится что делать 😢?
Больше всего в таких мини приложениях мне нравится именно бекенд часть), потому что легко подделывать запросы, чтобы фармить
Есть кейсы?
чтобы потом улететь в бан?
Кайф, спасибо. По базе данных для игры будет урок?
Попробовал повторить, фигуры на цент ре становятся, они показаны конвертом, и дальше не цвет фона ни смещение фигур.
Владилен здравствуйте , что у Вас за мак? можно полные характеристики/информацию , спасибо !
Проект полностью работает можете сделать урок для начинающих как " КАК ЗАХОСТИТЬ НА Firebase console " у меня выскакивает красная строка хотя всё установлено не распознано как команда лета . Спасибо очень хочу сделать даже монетку свою своей фамилией сегодня сделал а это не получается спасибо .
Привет, можешь помочь? Допустим в боте натапал, и получается большое число, а оно не помещается в экран, что делать? Как сделать так, чтоб текст подстраивался и становился меньше?
Ты можешь по сути просто вместо 1000 писать 1к.
Для этого нужно просто делить число на тысячу и на единицу (чтоб округлить), после того как оно будет больше 999 . и добавить "к"
@@flowsmiles5068 спасибо
Ахах, что? Норм контент))
Продолжение пожалуйста добавь пожалуйста главную страницу как в хомяке
Привет, а не планируешь видосы про блокчейны ?)
В частности хотелось бы про TON, может этот проект на тоне сделаешь ?
компактненько собрал! B-)
а в сторедж или через консоль в дж - мы ж можем 1000000 момент прописать себе?
красава то-что надо)
Вы открыли ящик пандоры, теперь каждый школоло задеплоит своего хомяка)
Ахахха
Спасибо большое❤
Я видел это у вас на github перед этим видео))
Продолжение модификации будет?
Владилен, спасибо за контент!
А ты какой прокси/впн используешь для копайлота? Он прям быстро предлагает промты
Настройка аналога Copilot: t.me/js_by_vladilen/844
юзай codeium. Он не хуже и бесплатный.
Вот это я удачно зашёл )
Топ 🔥
жду продолжение , действуй
Я самоучка, создал кликер на Uniti под Android.
За деплоил на комп, как в телеграм залить не понимаю, может кто подскажет?
а сделайте c контрактами на func или на tact лучше так интереснее чем просто накидывать html css
Привет Владилен! Какие расширения были активны в редакторе?
Лучше на неакте сделать что-то, полезнее будет, жду видос!;)
Реакте*
А как прроисходит адаптация размера верстки под экран в телеграм боте? Есть какое-то соотношение?
топчик!
Владилен, Спасибо за видео. Смотю много твоих информативных , обучающих видео и не могу понять почему везде где нужно написать временное значение для демонстрации , ты пишешь "42". В чем суть?
Шутишь? Просто загугли 42
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
Yes
ждём листинг)) ахха
Хейтеры скажут фотошоп, ахах, поднял 180 зеленых, Салам Алейкум с Дагестана!
Ну странная логика. Сначала получаем офсеты, далее отнимаем позицию слева и сверху,делим на 2. Далее создаем новые переменные и полученные офсеты теперь делим на ширину и высоту,и полученное умножаем на якобы градус.Я конечно знаю что js это конченый язык ,но чтоб настолько. Вот только у меня вопрос,по-моему это можно сделать гораздо легче, есть же функция получения координат, причем есть функция получить координаты изображения,и нужно будет просто создать ивент,по нажатию на определённую область,изменить наклон картинки, и не городить такой огород. Тем более нам не нужно тыкать на картинку, а на всю область, а картинке мы делаем только эффект,разве нет)
В любом случае эти "функции" работают также разница только в сахаре.
Да и логика логичная, мы берём абсолютную позицию нажатие, и чтобы наш эффект был ровно там где хотим, отнимаем ещё и относительное (наш Rect)
Вот и все логика так-то
@@x-grand-x А смысл,мы просто делаем ивент по нажатию на область,и крутим картинку,не зависимо куда кликаем,ну хз,дело каждого.
Может это ты конченый?
В конце когда открываю URL, то мне пишет: настройка хостинга завершена, вы видите это, потому что успешно настроили хостинг Firebase. Как исправить?
Нашел решение?
@@darwinsdarwins2230 да. Нужно использовать другой сайт куда можно загрузить все на хостинг.
@@SWhenты какой используешь?
Я когда слышу нашу обычную фразу "DOM дерево", я думаю что нужно построить дом и посадить дерево. Это у всех так?
Все круто, только не робит у меня функционал счетчика по клику, 10 раз пересмотрел код не могу найти проблемму
Проверь исходники
@@VladilenMinin тоже счётчик NaN, скачал исходники, запустил проект, такая же фигня NaN, а в режиме инкогнито всё работает, какое-то расширение мешает походу хз как только
Как сделать мультитач на кнопку?
Событие тач
@@VladilenMinin так вообще не работает кнопка
Можно использовать трансформ3d чуть производительней будет
А так, очень круто, спасибо за контент
На каждый клик при score >= 50 будет меняться картинка
В ротейт)
Но я такую игру уже давно написал 😁
Владилен, добавляй тайм коды пж ну пжппжпжпжпжпжжп
А где интеграция с телеграм апи? В чем смысл этого кликера, если это просто вебвью
Если просмотры будут, сделаем продолжение
А Бэк писать не нужно ?
надо было реакт добавить, делать преложеньку не в декларативном стиле уже не актуально как то
для новичков - актуально + универсально. А накой черт смотреть реакт тому, кто работает или учит вью либо ангуляр?
@@user-san-chous почти все фреймворки в декларативном стиле
и надо уметь работать в нем
Вот реакт разработчики подтянулись, а не программисты
@@krylovDev ну по комменту видно, что он пока не понимает)) но всему свое время...
Js это база, а фреймворки приходят и уходят
а в чем смысл? и зачем оно?
Спасибо за ящера )
Когда значит листинг ахахахах
А в чём прикол, если прогресс нигде не хранится, тупо картинка обмазана js кодом
Круто но сложно я бы крысу сделал бы
А что это за автодополнения года? Не похоже на еммет
В описание ссылка на урок в тг
А как же WebStorm?
Я earlybird
хэллоу
не понимаю почему hamster является кликером, там же заработок с карт а не кликов
а я один еле поставил эти обратные кавычки?
jQuery ??? шта?
👨🏫👧👋
А почему ты всё время пишешь число 42?
Сколько можно гайды с таким примитивным базовым кодом делать? Это и обезьяна накодит... Лучше бы записал, как сделать реферальную систему через mini apps, сохранение пользователей в БД, оптимизацию итд, +чтобы от наплыва народу это всё не легло
на других платформах размещаете свои видео? Ютуб болеет, как бы вовсе не упал, терять автора не хочется
Подписывайся на телегу
ХайпанутЬ решил, што курси плохо продаютса?
самый лучший ❤