Пишем ИГРУ на CSS/HTML за 20 минут 🏆

Поділитися
Вставка
  • Опубліковано 29 гру 2024

КОМЕНТАРІ • 289

  • @FreelancerLifeStyle
    @FreelancerLifeStyle  4 роки тому +14

    🔴Побил мой рекорд??
    Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
    Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
    Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
    Instagram: instagram.com/freelancer.lifestyle/
    Facebook: facebook.com/freelancerlifestyle/

    • @Joe_Maputo
      @Joe_Maputo 4 роки тому +1

      :hover - это когда мышь входит в область элемента, а не наоборот. Поэтому, чтобы пройти игру надо просто сидеть и смотреть не шевеля мышью.

    • @Ghoul_in_Tokyo
      @Ghoul_in_Tokyo 4 роки тому

      Да я побил! У меня дроид и я тупо ничево не делая победил) Читр)))))

    • @kirillkhvorikov9470
      @kirillkhvorikov9470 3 роки тому

      Привет, а продолжение курса по js планируется?

  • @ВладимирЗлатомрезов

    Нифига себе ас! На css&html игру сделать это все равно что детским ведерком танк подбить но черт возьми , ты это сделал!!!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому +14

      В нете куча всякого есть, интересно находить и дорабатывать всякие штуки. Думаю будут еще игры!

    • @ЕгорНегрышев-ц7о
      @ЕгорНегрышев-ц7о 3 роки тому +1

      @@FreelancerLifeStyle Круто сделай туторы и с js чтобы можно было создавать

  • @whimelan
    @whimelan 4 роки тому +18

    Как всегда на высоте! И как всегда нашёл для себя что-то новое! Спасибо большое за твои труды)

  • @ОльгаК-ф8р
    @ОльгаК-ф8р 3 роки тому +5

    Вот это скорость!!!! Я в восторге. Хочется так же научится.... Женя, браво!!!! Очень интересно получилось, спасибо!!

  • @АлександрШвец-г4з
    @АлександрШвец-г4з 4 роки тому +41

    Ого! плавно переходим из верстки в гейм дев =)

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому +6

      развиваем навыки анимации и псевдоклассов)

  • @brodyagaPATY
    @brodyagaPATY 4 роки тому +3

    Зачёт 🔥🔥🔥 Жека как всегда коасавчик🔥 Спасибо за видосы

  • @dmitrid.317
    @dmitrid.317 4 роки тому +17

    Игра без js - крутЬ , голова фрилансера)) Смешно получилось) Очень интересная и лайтовая подача видосов!

  • @artyomvoytenko1237
    @artyomvoytenko1237 4 роки тому +103

    Игра без использования JS??!?!? Срочно смотреть и ставить лайк!)

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому +11

      Так точно!

    • @arturbier
      @arturbier 3 роки тому

      Что удивительного? Я целый платформер делаю таким способом)

    • @yasenukvlad5439
      @yasenukvlad5439 3 роки тому

      @@arturbier без js и библиотек?

    • @arturbier
      @arturbier 3 роки тому

      @@yasenukvlad5439 В данный момент уже этого не обошлось, но в целом можно и без них обойтись

    • @yasenukvlad5439
      @yasenukvlad5439 3 роки тому

      @@arturbier ну да но игра будет так себе но можно, удачи тебе в этом)

  • @taraskravchuk9139
    @taraskravchuk9139 4 роки тому +1

    Супер! А ще називають їх псевдомовами. Що ж, мрію в майбутньому і собі щось таке накодити! Дякую, Женя!

  • @dmitrykon8606
    @dmitrykon8606 4 роки тому +7

    Черт побери! Ты не фрилансер по жизни, а КРАСАВА по жизни! Спасибо за урок!

  • @sotona7105
    @sotona7105 3 роки тому +1

    Весьма хитрожопо ..!., ))) Я все ждал когда объяснишь столкновения))) Супер!

  • @alexmart6968
    @alexmart6968 4 роки тому +2

    даже из такого вроде развлекательного я узнал что то нужное и прикольное для себя, ЖЕКА ТЫ ЛУЧШИЙ

  • @disco9330
    @disco9330 3 роки тому +2

    Я fullstack разработчик, даже я бы не догадался так сделать. Обычно я все делаю через js и php. Даже разметку делаю через js не используя css. ЛАЙК ОДНОЗНАЧНО!!!

  • @alesashurkov4697
    @alesashurkov4697 4 роки тому +27

    Жека! Ты лучший!!! Всегда с удовольствием смотрю твои ролики. Но реализация игры на html и CSS - просто ВАУ!!! 👍👏👏👏

  • @ВолодимирПаньківський

    Прикольная подача материала. Обучение в виде игры. Жека, не перестаёшь удивлять. Бесподобная подборка css-ных фишек.
    P.S. Надеюсь, что после этого уроки по JS всё-таки будут … И его не постигнет судьба бутстрапа … Шутка.

  • @pushkareff
    @pushkareff 4 роки тому +18

    Поставил лайк не глядя, Потом посмотрел. Жаль, что нельзя второй поставить. За target. И знал же за него, а по привычке такие вещи JS-ом делал :). 👍👍👍👍👍👍

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому +3

      Ну JS он не заменит, но для простых штук может быть)

    • @viorelodajiu1238
      @viorelodajiu1238 3 роки тому

      У меня также. Target - вроде в теории все понятно но не использовал.

  • @olezhonnv3215
    @olezhonnv3215 4 роки тому +7

    Ну ты даёшь! Кудесник!
    Это ж додуматься еще надо, написать игру в чистом декларативном стиле!
    Уважуха!

  • @Zero_Zero_Zero
    @Zero_Zero_Zero 4 роки тому +3

    Офигеть, я такого ещё никогда не видел. Определённо лайк!

  • @anrie-f1x
    @anrie-f1x 4 роки тому +5

    *Оочень круто, большое спасибо, было очень интересно!*

  • @МихаилРазуваев-ь6л
    @МихаилРазуваев-ь6л 4 роки тому +3

    Зачётный видос! Спасибо за расширение кругозора!

  • @AlinaDotsenko-d6q
    @AlinaDotsenko-d6q 4 роки тому +2

    У меня восторг! Супер, круто! :)

  • @user-gt7ws5my9h
    @user-gt7ws5my9h 4 роки тому +35

    контент минимум на миллион просмотров.

  • @Ewok1991
    @Ewok1991 4 роки тому +3

    Просто супер. Не думал, что без js можно сделать игру

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому +1

      Можно можно!

    • @olezhonnv3215
      @olezhonnv3215 4 роки тому

      И я не думал! Я не думал даже о таком думать! А оказывается, можно вывернуть и такой фокус.

  • @Realing29
    @Realing29 4 роки тому +1

    Круто! Как всегда лайк.
    Хочется контента на сложные темы. Думаю будет интересно если видосы будут чередоваться по подкастам. Например - один видос для начинающих по основной программе, после него видос на какую нибудь новую фичу для опытных ребят(которые хотят расширить кругозор). Это привлечет больше опытных ребят к каналу.
    На ютубе полно каналов на однотипные темы, а на некоторые темы - контента на ютубе не найти, приходиться читать статьи и документацию.

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому

      Например? Что может быть сложным в то же время это будут смотреть больше 2х человек?

  • @kiwisolives
    @kiwisolives 4 роки тому +4

    Офигеть! Даже не знал, что на CSS и HTML можно такое сделать.

  • @ВиталийКабаков-ф5э
    @ВиталийКабаков-ф5э 4 роки тому +4

    Супер! Жека, хочу высказать пожелание... Порадуй нас вёрсткой макетика - давно такого не было. А ещё было-бы не плохо чтобы в этих макетах были и те элементы, о которых ты дал нам теоретические знание в рубрике "Как это сделано"

  • @jaro6700
    @jaro6700 2 роки тому +1

    Эээээээээээээээээ, ну, что сказать гений он и в Африке гений!!!

  • @yuriiyablonskyi6626
    @yuriiyablonskyi6626 4 роки тому +38

    и без java script? не верил
    думал кликбейт
    очень круто!!!

  • @energiekost
    @energiekost 4 роки тому +3

    Очень годный контент, спасибо!)))

  • @mountaineagle966
    @mountaineagle966 3 роки тому +3

    Скоро:
    Прошиваем микроконтроллеры AVR на чистом html )))

  • @chistonebovec
    @chistonebovec 11 місяців тому

    Это просто гениально! Эх, желал бы я также столько опыта писать HTMLки, так бы в колледже было попроще жить, но так возиться не хочу с этими веб-сайтами, хоть убейте!

  • @yasenukvlad5439
    @yasenukvlad5439 3 роки тому +1

    я пробовал делать игру без js, но у меня не получилось, а это уровень, определеннно лайк 👍

  • @vilrik3343
    @vilrik3343 4 роки тому +9

    Квадраты надо подписать по типу "Дедлайн", "правки" и тп)))

  • @_blaz1__532
    @_blaz1__532 4 роки тому +10

    Не знал что можно писать игры на html и css))) Спасибо за информацию.

  • @a.osethkin55
    @a.osethkin55 Рік тому

    Супер! Спасибо! Очень круто!!!

  • @d1mausxx264
    @d1mausxx264 4 роки тому

    Супер, Нет слов !👍👍👌👌

  • @VRazvedkaSPN
    @VRazvedkaSPN 4 роки тому

    ухххх) годнота подъехала!!! агонь!

  • @danil7034
    @danil7034 4 роки тому +10

    Я не понял, почему так мало подписчиков на таком крутом канале?

  • @olena3985
    @olena3985 4 роки тому

    Крутяк! Большое спасибо Вам за видео!

  • @skyreg11
    @skyreg11 4 роки тому +7

    Крутяк, оказывается на HTML/CSS можно игры делать. Лайк - 👍 и спасибо за годный контент.

  • @darkhunter777
    @darkhunter777 2 роки тому +1

    Единственный плюс html игр это возможность сетевой игры ! В общем должен был с этого и начать

  • @fidana_blog
    @fidana_blog 4 роки тому +3

    Круто! 👍👍👍 Я думала игру, счётчик и пр. можно только с использованием javascript сделать👀

  • @ruleti5347
    @ruleti5347 4 роки тому +2

    Пушка, класс

  • @ntbgaming5630
    @ntbgaming5630 4 роки тому +3

    Прикольно, Жека! Годный контент!) Рад, что случайно наткнулся на твое видео - мотивацию для Itшника, теперь смотрю - обучаюсь. А игру сам придумал или где-то подсмотрел?

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому

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

    • @ntbgaming5630
      @ntbgaming5630 4 роки тому

      @@FreelancerLifeStyle Будем ждать, посмотрел чисто для интереса, пересмотрю позже еще раз, а то еще до анимации даже не дошел, много непонятного ))

  • @rakhimsarsenbay1062
    @rakhimsarsenbay1062 3 роки тому

    Как это, это какое-то чудо юдо, это мой сон походу да или нет? Класс.

  • @deniskotov
    @deniskotov 4 роки тому +3

    Короче, это настолько круто, что заслуживает 12 тожевпринципеолегов из 10!!!

  • @Izerli88
    @Izerli88 4 роки тому +1

    Это очень круто! Офигеть!!!

  • @robmptop
    @robmptop 3 роки тому

    С меня подписка и лайк👍👍👍👍

  • @selfdevelopment3022
    @selfdevelopment3022 4 роки тому

    Нереально крутой видос!!!!

  • @Vadim-ns1kl
    @Vadim-ns1kl 4 роки тому +1

    Класс!! блин я так ржу над превью😂

  • @bigildar
    @bigildar 4 роки тому +10

    Жека, а слабо тетрис также без js написать? )) Видос огонь, лайк.

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому +3

      Сходу думаю что без JS не обойтись)

  • @tymychlyv6040
    @tymychlyv6040 Рік тому

    Эта игра, которая сделана только на html и css крутая, мне сразу пришла идея назвать эту игру "Cursor run"

  • @Dolo-ec6lh
    @Dolo-ec6lh 2 роки тому +2

    Все: html и css это не языки программирования
    Я после просмотра этого видео:🗿

  • @palinanikolaevna4232
    @palinanikolaevna4232 4 роки тому +1

    назови игру "Runinmaze" - Run in maze,что в переврде с англ.,означает бегущий в лабиринте,но лучше эти англ слова run in maze,написать вместе:Runinmaze

  • @djk.gxayzek9550
    @djk.gxayzek9550 4 роки тому +2

    Лайкос 100%

  • @АндрійНіколенко-в7ю

    Просто топ!

  • @androiddecolt11
    @androiddecolt11 2 роки тому +1

    Я не понимаю, почему при .game__body:hover реакция идет только на квадраты, а не на всё тело?

  • @OkaRinSlot
    @OkaRinSlot 3 роки тому +1

    Как тебе такое Илон Маск))))
    Респект Жека!

  • @ДмитрийСекисов-п9н
    @ДмитрийСекисов-п9н 4 роки тому +1

    Красаучег!!! Игра "кубодавка" топчик!!

  • @angelinalendel992
    @angelinalendel992 3 роки тому

    Ничего себе, это что невероятное!!!!

  • @ПростоБро
    @ПростоБро 3 роки тому

    Ты крут! Спасибо!!!

  • @RomanRachkov
    @RomanRachkov 4 роки тому +1

    Пле, лукас однозначно👍

  • @ilyaivanov9865
    @ilyaivanov9865 3 роки тому +1

    Очень круто но есть проблемка: почему когда я дописал код анимации мои блоки были не квадратом а прямоугольными и ещё они криво двигались я проверил коды но ошибок не заметил помогите пожалуйста

  • @ЮрийШигнорев
    @ЮрийШигнорев 4 роки тому +1

    Круть!

  • @AleksanderSheyko
    @AleksanderSheyko 4 роки тому +1

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

  • @medoman1833
    @medoman1833 4 роки тому +1

    После пары минут игры неосознанно огибаю курсором любые препятствия на экране?

  • @гоблинвася-п7о
    @гоблинвася-п7о 4 роки тому

    Крутяк. Уровень владения Html/Css - Чак Норрис.

  • @Roner1kk
    @Roner1kk 4 роки тому +1

    Тривиальная игра, и даже не на юнити... Браво ;)

  • @MadiX1X
    @MadiX1X 3 роки тому +1

    Назовии игру: фрилансер валит от плохих заказчиков!

  • @Салтанат-э1д
    @Салтанат-э1д 2 роки тому +1

    название: побег жеки от прямоугольников 😂

  • @photoshmell3850
    @photoshmell3850 4 роки тому

    Круто!!! Как насчет хардкора? А имено подобие Супер Марио на CSS/HTML.

  • @Stevens_tv
    @Stevens_tv 4 роки тому +1

    Интересный канал и контент. Только обычно для такого использовал canvas/js. Спасибо за видео!)

  • @Yilativ7
    @Yilativ7 4 роки тому +1

    Moving blocks!
    А вообще, я в шоке: как без JS?

  • @user-function-break
    @user-function-break 4 роки тому

    class bro👍👍👍👍✌️

  • @АёсБабиев
    @АёсБабиев 4 роки тому +1

    ххахахаха мой рекорд 2 секунды
    и кстати когда будем изучать основы js, и можешь посоветовать какой фреймворк js лучше для учебы, и на каком сейчас надо работать что-бы не было трудно?

    • @АёсБабиев
      @АёсБабиев 4 роки тому

      @@alexandershvets3250 зато есть связи который помогут тебе добиться всего!

    • @АёсБабиев
      @АёсБабиев 4 роки тому

      @@alexandershvets3250 эмм когда будешь работать там и научишься в нашем стране дяди решают всё!

    • @АёсБабиев
      @АёсБабиев 4 роки тому

      @@alexandershvets3250 сейчас я временно изучаю html css и уже много чего понимаю а мой одногруппник только начал у него есть связи. То есть смотри даже если у него будет мало знаний он быстрей надет работу чем я. А знание и практику он со временем восполнить.

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому +1

      Будем изучать. Для верстки jQuery, а в целом чистый JS

  • @GrifanoRide
    @GrifanoRide 4 роки тому +1

    6сек!!! Я в шоке)) робота стала) Ох и Женя)

  • @КонстантинЛукьянов-ю1ж

    Спасибо :)

  • @maksimkomisarenko772
    @maksimkomisarenko772 4 роки тому +1

    Крутое видео пасибо

  • @Хакохо
    @Хакохо 2 роки тому

    Вещь! Спасибо за видео. Не получилось изменить курсор у меня почему то, всё делал в деталях, уже не первы раз замечаю такое, хз может vscode что то блочит. Вопрос знатокам: как вместо бэкраунда цвета квадратов вставить изображение( backgroung-img не помогает, так же на работает как с курсором)

  • @ЕвгенийКуликов-ц2г

    Привет, Женя. Я нашел баг в игре, где 100% проходишь. Если курсор поместить в левый верхний угол(0,0), но наполовину курсор на поле а половина на панели. И прямоугольники его не замечают и время идет. Возможно нужно сделать касание по нижнему правого края курсора.

  • @sinzevsa
    @sinzevsa 6 місяців тому

    Игра будет называться:догони меня квадрат

  • @thebaglay123
    @thebaglay123 4 роки тому +1

    супер!

  • @DarkW1zard
    @DarkW1zard 4 роки тому +1

    Вот это контент! А то блин посмотрите на мой системник :)))

  • @АртемКа-в3к8й
    @АртемКа-в3к8й 4 роки тому +1

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

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому

      Пару часов. Наткнутся на подобное в нете и доработал до норм игрухи)

    • @АртемКа-в3к8й
      @АртемКа-в3к8й 4 роки тому

      @@FreelancerLifeStyle отлично получилось! больше 8 секунд не продержался пока)

    • @АлександрЛисица-ж4у
      @АлександрЛисица-ж4у 3 роки тому

      @@АртемКа-в3к8й я написал ,но не работает(

    • @АртемКа-в3к8й
      @АртемКа-в3к8й 3 роки тому

      @@АлександрЛисица-ж4у 100% ошибка в пути какого-то файла

  • @aacvswgyw_12
    @aacvswgyw_12 4 роки тому

    Сделай пожалуйста, видео по верстке писем, подключение админки

  • @umedrustamov39
    @umedrustamov39 4 роки тому

    Предлагаю назвать эту игру RFS "Run From Squares"

  • @АртемКа-в3к8й
    @АртемКа-в3к8й 4 роки тому

    Крутяк)))

  • @codfish7383
    @codfish7383 4 роки тому +1

    Прикольно)

  • @crazydream1911
    @crazydream1911 7 місяців тому

    заходишь читаешь " И сейчас я покажу как это сделать не используя языки программирования" смотришь и выключаешь это видео.

  • @BlackSky-11
    @BlackSky-11 3 роки тому

    у меня есть вопрос я когда создаю у меня не подсвечивается html но если убрать ! то будет светится.Обязательно добавлять ! ?

  • @ЕржігітНарынхан
    @ЕржігітНарынхан 3 роки тому

    Контент топчик

  • @kdannothere
    @kdannothere Рік тому

    P.S. Курсор має бути зображенням 128х128 або краще 32х32, може бути і меншим, але не більшим

  • @SaMuRaI-pv5em
    @SaMuRaI-pv5em 4 роки тому

    Как называеться программа чтоб сразу видеть что у тебя получаеться а нет бесконечно ctrl+s и ctrl+r
    это очень бесит!

  • @goodvibestebe
    @goodvibestebe 4 роки тому

    Я же говорю крутой чувак!;)

  • @umidvp
    @umidvp 3 роки тому +4

    Название игры "Беги Жека!"

  • @ДаняЯковенко-м7я
    @ДаняЯковенко-м7я 3 роки тому

    Можешь сказать какие у тебя стоят расширения?

  • @olesyudin832
    @olesyudin832 4 роки тому

    Здравствуйте, подскажите пожалуйста, как вы копируете html файл а в css вставляется только класс. Нашел расширение для VS Code "html extractor", но что-то он не работает. Подскажите как называется это расширение. Большое спасибо за ответ!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому

      Как раз готовлю выпуск по vs code там все будет!

  • @denis-ct8kv
    @denis-ct8kv 2 роки тому +1

    Круто

  • @sia4281
    @sia4281 3 роки тому +1

    Вот, а мне говорили программировать на html нельзя

  • @МиколаУстименко-ь2й

    Когда изучил JS нужно было практиковаться, но найти классную практику было трудно. Нашёл: ползунки когда двигаешь то изменяются цвета и border-radius, и "недослайдер"(пришлось самом писать слайдер "bi4huu. github. io") но недавно на ютубе появился норм слайдер и ToDo-list. Может Вы что то придумаете классное по JS?

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 роки тому

      когда дойдем до JS будет много интересных штук