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