- 9
- 174 021
Yura Koch
Czechia
เข้าร่วมเมื่อ 22 พ.ย. 2020
Здесь я делюсь своим опытом и знаниями о создании игр на JavaScript.
Тут вы найдете множество видео о создании игр на JavaScript без использования фреймворков.
Я стремлюсь создавать контент, который помогает начинающим разработчикам и тем, кто уже имеет определенный опыт, развиваться и достигать новых высот в своей карьере. Присоединяйтесь к моему каналу, и мы вместе создадим крутые игры!
Тут вы найдете множество видео о создании игр на JavaScript без использования фреймворков.
Я стремлюсь создавать контент, который помогает начинающим разработчикам и тем, кто уже имеет определенный опыт, развиваться и достигать новых высот в своей карьере. Присоединяйтесь к моему каналу, и мы вместе создадим крутые игры!
Flappy Bird за 25 мин на JS – Подробный курс
Flappy Bird - это идеальный проект для начинающих разработчиков, так как он легко реализуем и позволяет изучить все важные концепции. В этом видео я подробно объясню, как создать игру с нуля за 30 минут. Смотрите, учитесь и практикуйтесь.
Ссылка на игру
yurakoch.ru/flappy-bird
Ссылка на код
github.com/YuraKoch/flappy-bird
Мой телеграмм канал
t.me/kochinism
Использую хостинг
sprinthost.ru/s40938
Поддержать меня и мой канал вы можете по ссылке ниже
Юмани - yoomoney.ru/to/4100118604365846
00:00 План урока
00:40 Верстка
02:10 Рисуем трубы
08:50 Добавляем фон
11:18 Картинки труб
13:13 Движущаяся земля
15:40 Создаем птичку
18:50 Учим летать
19:55 Столкновения
23:37 Подсчет очков
25:17 Запуск игры
26:25 Лайк и подписка
Ссылка на игру
yurakoch.ru/flappy-bird
Ссылка на код
github.com/YuraKoch/flappy-bird
Мой телеграмм канал
t.me/kochinism
Использую хостинг
sprinthost.ru/s40938
Поддержать меня и мой канал вы можете по ссылке ниже
Юмани - yoomoney.ru/to/4100118604365846
00:00 План урока
00:40 Верстка
02:10 Рисуем трубы
08:50 Добавляем фон
11:18 Картинки труб
13:13 Движущаяся земля
15:40 Создаем птичку
18:50 Учим летать
19:55 Столкновения
23:37 Подсчет очков
25:17 Запуск игры
26:25 Лайк и подписка
มุมมอง: 601
วีดีโอ
Три в ряд на JavaScript - Разработка игры с подробным объяснением
มุมมอง 3.1K6 หลายเดือนก่อน
На первый взгляд, игра Три в ряд кажется простой, но логика её создания достаточно сложна. Поэтому это идеальный проект для разработчиков, которые хотят попробовать свои силы в чем-то по-настоящему интересном. Ссылка на игру yurakoch.ru/match-three/ Ссылка на код github.com/YuraKoch/match-three/ Мой телеграмм канал t.me/kochinism Использую хостинг sprinthost.ru/s40938 Поддержать меня и мой кана...
MORTAL KOMBAT на JavaScript с детальным разбором!
มุมมอง 3.6K8 หลายเดือนก่อน
В этом видео вы узнаете, как создать игру Mortal Kombat с использованием JavaScript, HTML и Canvas. Мы начнем с написания базовых механик для этого файтинга, а затем научимся асинхронно подгружать файлы с сервера и обучим бойцов всем ударам и движениям. Вы сможете следовать шаг за шагом и создать свою собственную версию этой игры, используя современные веб-технологии. Ссылка на игру yurakoch.ru...
ОНЛАЙН Крестики Нолики на JavaScript и WebSocket
มุมมอง 3K11 หลายเดือนก่อน
В этом видео мы вместе создадим игру "Крестики-Нолики" на JavaScript с использованием WebSocket. Я подробно объясню каждый этап, начиная от создания игрового поля до логики проверки на победу. Мы также добавим многопользовательскую функциональность через WebSocket. Урок подходит как новичкам, так и опытным разработчикам, и поднимет ваши навыки в создании многопользовательских игр на JavaScript....
Тетрис на JavaScript с пошаговым объяснением
มุมมอง 10Kปีที่แล้ว
В этом видео мы вместе создадим игру Тетрис на JavaScript. Я буду объяснять каждый шаг подробно и простым языком. Мы начнем с создания игрового поля, научимся добавлять фигуры, управлять ими, добавим проверку на заполненные линии. Но это еще не все! Мы также сделаем адаптацию игры под мобильные телефоны и добавим возможность играть с помощью тачскрина. Этот урок будет интересен как новичкам, та...
Судоку на JavaScript разработка игры
มุมมอง 5Kปีที่แล้ว
Создаем игру Судоку на JavaScript с автоматической генерацией поля, подсветкой строк и столбцов, анимацией, адаптацией игры под мобильные устройства и возможностью ввода с клавиатуры. В этом уроке мы сделаем не только классическую головоломку Судоку, но и добавим множество интересных функций, которые сделают игру еще более увлекательной. Ссылка на игру yurakoch.ru/sudoku Ссылка на код github.co...
GTA 2 на JavaScript за 50 минут! Полный гайд с пошаговым объяснением
มุมมอง 72Kปีที่แล้ว
В этом полном 50-минутном гайде мы создадим игру в стиле GTA 2 на JavaScript с нуля! Я покажу как начать проект, определить необходимые элементы и написать код для создания 2D-игры. За время просмотра я расскажу, как добавлять объекты на карту, управлять персонажем, обрабатывать столкновения и многое другое. Мы покроем все необходимые шаги, чтобы создать свою собственную игру на JavaScript и по...
2048 на JavaScript разработка игры
มุมมอง 70Kปีที่แล้ว
2048 - на первый взгляд простая игра, но логика, необходимая для ее создания, весьма сложная. Поэтому это идеальный проект по созданию игры для разработчика, который хочет сделать что-то по-настоящему интересное. Ссылка на игру yurakoch.ru/2048 Ссылка на код github.com/YuraKoch/2048 Мой телеграмм канал t.me/kochinism Использую хостинг sprinthost.ru/s40938 Поддержать меня и мой канал вы можете п...
Эффект Матрицы на JavaScript
มุมมอง 6Kปีที่แล้ว
Скопировать код из видео урока можно у меня на Гитхабе github.com/YuraKoch/matrix const CHARACTERS = "アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトホモヨョロヲゴゾドボポヴッン"; Посмотреть готовый результат можно тут yurakoch.ru/matrix Мой телеграмм канал t.me/kochinism Использую хостинг sprinthost.ru/s40938 Поддержать меня и мой канал вы можете по ссылке ниже Юмани - yoomoney.ru/to/41...
Удалять трубы, особенно через shift неэффективно, лучше переиспользовать/переставлять их, меняя позицию А так, прикольно всё
Тут в массиве всего 3 трубы. Думаю, что можно в таком случае не переживать об эффективности. Но ваша идея очень хорошая, я о ней сам не подумал. Спасибо)
а у вас есть какой то набор иструментов по типу класса вектора и т.п.? (я имею ввиду собственные)
Нет Просто в свободное время пишу игры
@yurakoch а как давно?
Пару лет
можно было бы инвертировать scale вместо дублирования всех спрайтов)
Это правда) Но я решил, что для ролика проще будет так)
Очень интересно и вдохновляете делать качественные продукты . Например такой вопрос могу ли использовать в планах заработка ? Если благодаря Вам научился и попробовать на этом заработать . А ещё думаю крестики нолики сделать как крипто проект будет очень увлекательно но это планы на будущее . Жду ещё по больше полезного контента .
Спасибо. Все мои уроки и весь код в открытом доступе. Вы можете их использовать как захотите)
@@yurakoch СПАСИБО тогда подумаю как из простых крестиков ноликов сделать прибыльное хобби .
Желаю успеха в этом начинании) буду рад, если мои уроки вам помогут)
Не хватает только ускорения движения труб)
Можно увеличивать значение SPEED, тогда трубы и земля будут двигаться быстрее
@@yurakoch за место труб например ферму можно сделать благодаря коду ? Добавить курей , петуха , индюков , коров , барашек пчел и так далее ? Или тут что-то другое потребуется ?. То-есть взять основы Вашего кода но добавить свои идеи .
@Dzhambek если вы хотите игру Ферму, то нужен совсем другой код. А если хотите эту игру визуально изменить, то можете просто картинки поменять
@@yurakoch Спасибо думаю идеи есть больше стараюсь освоить в крипто индустрии новые навыки . И просто для начало игровой контент попробовать научиться сделать . Спасибо ещё раз .
спасибо за интересное и понятное видео!
Автор, большая к тебе просьба: Задумайся над тем, чтобы сделать полное текстовое описание созданных тобою (имею ввиду подкапотное функционирование всех функций, обрращений и модулей) игр и в целом перевести все твои ролики в текстовые курсы. Размести их на Stepik, назначь любую цену (я готов и за 5k купить и за 10k, причём каждый по отдельности)
Не знал про это ничего. Можете, пожалуйста, подробнее рассказать про это? Мой телеграм yurakoch
спасибо за ваши уроки. Мне интересно, как закодировать игру Connections из New York Times.
Посмотрю эту игру Может сделаю ее позже
Я в шоке! Почему у тебя не миллион просмотров, видео огонь просто🎉
Спасибо) тоже надеялся, что просмотров побольше будет)
У меня браузер сам добавляет к hsl знак процнента в конце, и по етому цвет плиточек такой как у cell, как исправить?
Знак процента не должен ломать цвет. Может ошибка в чем-то другом?
пишет вот так в браузере: background-color: hsl(25, 60%, var(-bg-lightness %)); - проблема в том, что в style.css я не добавлял знак процента, и у js пробовал удалять знак процента но он появляется в браузере + эти свойства у (тоже в браузере) отображаются как не рабочие, то есть эти цвета даже не работают, и я не знаю почему, с RGB все работало и с RGBa тоже а hsl не роботает.
У css переменной должно быть два знака тире вначале. -bg-lightness Попробуйте так
@@yurakoch у меня 2
Можете прислать мне свой код архивом в телеграм. Я его проверю.
Привет из Польши! Я в айти уже 10 лет, был фулл-стек синьором в продуктовой компании, последнее время начал пилить свой продукт (хочу уйти в бизнес). Код уже пишу редко. Наткнулся на видео когда искал игры сделанные на JS, и я тебе скажу круто! Я хоть и понимаю все что ты делал в видео, но я далек от игр, как-то не был никогда фаном, а сейчас стало интересно как все устроено изнутри. Вообщем спасибо за видео! Не забрасывай канал, подпишусь.
Привет. Спасибо. У меня поменьше опыта в айти. Ролики буду и дальше делать. Сейчас не хватает времени. Но все дела доделаю и займусь новым роликом)
Ваш код удивительные когда я его читаю я думаю что его придумал гений!
Можем ли мы сделать такую же адаптивную игру только на канвасе?
Можете сделать на канвасе
@@yurakoch чтоб добиться адаптивности нужно на ивент resize вешать колбек и перерисовывать канвас каждый раз? или можно как-то попроще сделать, вы не в курсе?
@nikita_suiazov я бы сделал так. Resize происходит очень редко, поэтому это решение хорошее.
@@yurakoch спасибо!
file:///C:/Users/turbo/Desktop/tetris/index.html
Я не могу открыть ваш файл с компьютера
Привет! Спасибо , Огонь! И вопрос : как и что мне сделать, чтобы вылечить?
Вылечить что?
Суперский урок
Вроде бы не нашёл какого-то иного решения с setInterval, по этому предложу описание своего: Создаём интервал, который будет работать до нажатия клавиши игроком, в ином случае перезапускаем интервал, получится что-то вроде: function initGame(){ let intervalID = setInterval(moveDown, tetris.speed); } function moveDown(isAutoMove){ tetris.moveDown(); if(!isAutoMove){ clearInterval(ID); setTimeout(() => { intervalID = setInterval(moveDown, tetris.speed), tetris.speed}; } } Немного грубовато написано, но суть должны уловить
А для чего это? Я уже подзабыл свой код…
@@yurakoch У вас каждое движение в низ перезапускало анимацию, путём stopLoop(); startLoop(); для того что бы при нажатии кнопки игроком, фигурка не падала по истечению времени. Я предложил свой вариант, где анимация проигрывается в интервале, и перезапускается только когда игрок нажимает на кнопку
Помогать! При желании открыть индекс игра остаётся в вечном лодинге... И так и не запускается
Не понял вопроса…
Отличный урок!
Спасибо)
Хорошая подача. Но использовать в качестве графики дивы - как-то неправильно, имхо. Есть же канва, если не нравятся пиксели - svg, а для управления svg - библиотеку d3.
Не понимаю, чем канва лучше… и чем плохо дивы
Молодец! А можешь нечто подобное на React JS сделать?
Я пробовал, но не придумал хорошего решения для анимаций. В итоге с реактом вышло бы в разы сложнее и непонятнее…
@@yurakoch Хорошо. А можешь просто что-нибудь на React сделать? Можно даже без анимации. То что тебе самому нравится.
@@yurakoch а потом и на Typescript чего-нибудь сделай! Минут на 40-50 учебного времени. Ибо если больше, то тяжело держать концентрацию. Спасибо
Скорее всего, позже сделаю игру Алхимия на Реакте.
Можно на TS, но в 40 минут на нем что-то очень простое уложится… Пока по плану в следующем ролике сделать что-то с нейронными сетями.
Классный ролик) спс
Спасибо большое, очень подробные объяснения!
Через какое-то количество убранных линий (12-16), они просто перестают убираться, чё делать?
Попробуйте посмотреть ошибки в консоли, может там что-то будет
@@yurakoch Ошибок нет в консоли
Я через пару дней буду у компьютера, посмотрю код. Попробую подсказать. Сейчас можете поставить дебаггер там, где высчитывается логика удаления строки. Может быть сможете найти ошибку…
@@yurakoch Ок, япасибо
А можете мне в телеграмм скинуть архив с кодом или ссылку на гитхаб с кодом? Я посмотрю и скажу, где у вас ошибка
Спасибо, получилось очень интересно. Хотелось бы как-то игру закончить, когда, например, больше нет вариантов или если ошибочно выбираешь неправильно и есть ограничение по допустимому количеству ошибок. Тоже интересно, если здесь можно сделать подсказки.
Можно дописать логику для проверки наличия ходов. Я не стал этого делать, т к ролик был бы слишком долгим… можете попробовать это реализовать самостоятельно, должно быть не особо сложно)
Очень интересно учиться по твоим видео, помогает лучше понимать язык, структуру кода, помогает в учебе, спасибо большое!
Очень рад. Это была основная идея. Т к сам в университете хотел делать игры, а приходилось делать скучные графики…
Спасибо есть мотивация для изучения GameDev for javascript
Отличный контент, не бросай.
Спасибо. Буду дальше делать)
Отличный видос. Игра оказалась не такой простой в реализации чем казалась. Интересно было бы узнать как ты пришел к решениям механик работы игры, как дошел до формул нужных и комбинаций циклов.
Я тоже попался на ее внешнюю простоту, поэтому она заняла у меня больше времени, чем ожидал. Формулы придумывал, рисуя кружочки на листочках. Т к это небыстрый процесс, то не знаю, как его хорошо передать в ролике.
Всегда очень интересно смотреть твои видео. Спс!
Спасибо)
Выглядит несложно, почему в превью написано "только сеньор" 😅?
В надежде на то, что привлечет внимание))
Гугл пишет «сеньор»
@kamen583 , получается, ты сеньор))
👍👍👍👍👍
👍👍👍👍👍
Спасибо Вам больше за урок, у вас все понятно, без воды и лишнего кода.
Спасибо) Через 5 мин выложу новый ролик, может быть, он вам тоже понравится)
Что делать если пишет uncaught SyntaxError: Cannot use import statement outside a module и указывает на script.js:1. Так же после открытия html у меня просто чёрный экран
Когда вы подключаете scripts.js, то нужно обязательно указать type="module". Без этого нельзя будет использовать import и export. Чтобы код заработал, то его нужно запускать через LiveServer. Если вы просто откроете файл index.html, то работать не будет.
0:57 как сделать этот пробел?
не понял вопрос...
@@yurakochвторая полоска
Почему-то больше всего было интересно, как реализуешь именно алгоритм выигрыша и когда досмотрел, расстроился, что там просто перечисление😅
Я думал сделать сложно или просто, в итоге поленился и сделал просто)
Очень интересное видео! видео такого содержания я никогда не видел в ютубе, спасибо автору за все его труды
Спасибо) рад, что ролик вам понравился
может streets of rage от той же сеги? типа как мк но с 3 координатой и чтобы можно было использовать не только клаву но и джойстик а на джаваскрипте слабые игры получаются? или просто надо больше кода сделать чтобы как оригинал был?
Streets of rage будет потяжелее написать. Ролик еще больше будет. На JS можно писать игры, только не совсем понятно зачем) И еще есть готовые игровые движки на JS, с ними в разы проще игры создавать. Просто моя цель роликов - дать интересные примеры практики на JS. Я хотел такое делать в универе, но приходилось строить скучные графики.
Твой подход мотивирует изучать js ещё глужбе, чем базовые фреймворки, спс!
Мне бы самому базовые фреймворки изучить)
Коммент удалился, для воспроизведения, нужно нужно нажать и немгого задержать оба шифта. Либо я накосячил с кодом, 6 часов делал.
yurakoch.ru/mortal-kombat/ пробую у себя воспроизвести и не выходит. может у вас где-то опечатка в коде? попробуйте посмотреть консоль, может там отображаются ошибки? если ошибок нет, то можно попробовать подебажить. если воспроизводится по моей ссылке, то я сам продебажу)
@@yurakoch Проверил по твоей ссылке, и теперь с сабзиро)
@@yurakoch Если надо могу записать как этот момент.
@@mcoxotnik странно. А в каком браузере и в какой системе (windows или mac os)?
@@mcoxotnik смог воспроизвести на Windows. Разберусь в причине) спасибо)
Супер круто)
Ето очень крутое видео. А если можно задать вопрос, кем вы работаете? Фулстак для приложений или просто веб?
Спасибо) просто веб, но если интересно, то в профиле есть ссылка на линкедин
Невероятно круто и последовательно объясняешь! Редко такое встречаю
Спасибо) рад, что мои комментарии к коду понятны
пишу на 1с. Но все максимально понятно. И даже не сложно) если только все расчеты за тебя сделают
Значит получилось объяснить. Спасибо)
@@yurakoch ну даже повторить вышло) правда непривычно что из за разницы регистра ошибки выходят. но в целом все получилось. Никогда не писал не яве. В целом все языки похожи если ооп понимать.
отдельный лайк за выбор игры. все дество играл. X Z X Z Z X Z X Z C A. бруталити на память, вот только у какого героя забыл) 86.г.р.
Тоже все детство играл, а когда учился на программиста, то хотел сам написать подобную игру. Вот только добрался) Если найти в интернете картинки для бруталити, то можно будет добавить это в игру)
Спасибо Вам, что находите силы и мотивацию для создания таких длинных структурированных видео! Очень нравится Ваш канал и подача, желаю дальнейших успехов во всех начинаниях!
Спасибо)
Очень интересный мануал, буду повторять step by step! 🔥
дааа ладно?!)
Спасибо за отличное видео ! Я для прошлого вашего видео «крестики - нолики» серверную часть на с# повторил для интереса - работает 😅 Тут тоже для меня много интересного - буду повторять !
Ого. Я на C# только в университете писал, уже все забыл и серверную часть без гугла не напишу)