Скачать "#2. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Анимируем дерево, создаем паузу)"
Скачайте это видео через UDL Client
- Видео mp4 HD+ со звуком
- Mp3 в максимальном качестве
- Файлы любого размера
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FrQfNdCJmbqM%252Fmaxresdefault.jpg&w=1139&q=75)
Похожие ролики из нашего каталога
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FA99a81yeb_M%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FAECzntY3Fl8%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FBZ2Ee3HgIVY%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FCCBH8UQHCW4%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FQEDBpuOVP6g%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FRfZd2tjDa8U%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FUMNYGQz9MCo%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FZBgH6fenExA%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FmqsXRxWvR3o%252Fsddefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FwIOygRAoAdA%252Fmaxresdefault.webp&w=1139&q=75)
Теги видео
Субтитры
00:00:02
надеюсь что вы не будет слышно но мы00:00:04
продолжаем работать с нашей машинкой00:00:06
сегодня наша задача заключается в том00:00:08
чтобы анимировать вот эти деревья00:00:10
поэтому сразу переходим в наш файлик00:00:12
gingers давайте откроем нашу консоль что00:00:15
было удобней работать и для начала нам00:00:17
нужно запустить нашу игру наша игра00:00:20
будет находиться в некой функции который00:00:23
мы назовем ну давайте например просто00:00:25
game но и здесь мы будем описывать00:00:27
логику нашей игры первым делом мы00:00:30
конечно же нашу игру запустим и у нас00:00:33
получается таким образом что весь код00:00:35
нашей игры будет находиться внутри нашей00:00:38
функции game за пределами этой функции00:00:40
мы больше делать нечего не будем ну и в00:00:42
таком случае мы в принципе можем сделать00:00:44
сама вызывающий ся функцию поэтому имя у00:00:47
этой функции мы можем удалить завернуть00:00:50
функцию скобочки и потом здесь в конце00:00:53
написать еще одни круглые скобочки00:00:55
получилась самая вызывающая функция00:00:57
которой я ранее рассказывал в принципе00:01:00
вы можете использовать вариант который я00:01:01
показал чуть ранее одно и то же почему00:01:04
же мы всю логику нашей игры будем писать00:01:06
внутри какой-то функции ну потому что00:01:08
это правило хорошего кода потому что00:01:11
если мы заведем еще один файлик . джесс00:01:13
чтобы они просто своими переменами друг00:01:16
друга не перри затирали ну об этом я00:01:18
тоже рассказывал останавливаться на этом00:01:20
долго не будем и так что нам понадобится00:01:22
для нашей игры для начала нам надо найти00:01:25
наши элементы мы найдем нашу машину00:01:28
через документ к вере селектор the00:01:30
quarry selector и указываем что у нас00:01:32
есть элемент с классом корр так же нам00:01:36
нужно найти наши деревья тут можем00:01:38
воспользоваться двумя вариантами либо мы00:01:40
и найдем наши деревья как-то по00:01:42
отдельности через документ к вере00:01:44
селектор как мы делали это с нашей00:01:45
машиной мы же знаем что у нас несколько00:01:48
деревьев поэтому мы найдем их через00:01:50
квали селектору у у каждого нашего00:01:52
дерева есть класс 3 с которым мы будем00:01:55
работать то есть теперь тут в в00:01:57
переменной тряс лежит несколько00:02:00
элементов но и давайте выведем эти00:02:01
переменные и убедимся что мы00:02:03
действительно нашли наши элементы00:02:06
выведи в нашу машинку и выведем наши00:02:09
деревья обновим страничку и посмотрим00:02:11
нашу машинка нашлась но наши деревья это00:02:14
наш массив принципе можно сделать опять00:02:17
же как я говорил вот таким образом00:02:19
дерево там один дерево 1 ну и так далее00:02:23
1 2 3 4 5 6 но вот такой вариант будет00:02:26
намного лучше потому что деревьев у нас00:02:28
с вами может быть как одно так и 10000000:02:31
далее давайте найдем вот этот элемент у00:02:33
нас эта кнопка который имеет класс game00:02:36
батон поэтому нашу кнопку так и назовем00:02:38
game батон00:02:40
документ опять же к вере00:02:43
selector и находим элемент с этим00:02:46
классом теперь давайте повесим сразу на00:02:48
эту кнопку события и будем менять ее00:02:50
если мы на нее нажимаем вешаем на нее00:02:52
событий через и дэвин леснар нас00:02:55
интересует события клика если этот клик00:02:58
происходит тогда мы вызываем вот эту00:03:00
функцию которую мы сюда передали ну и00:03:03
что же мы тут будем делать но самый00:03:05
простой вариант это внутри нашего00:03:07
баттона завести еще одну картинку00:03:10
которую мы назовем play png давайте00:03:13
поставим классы для наших элементов00:03:16
например это пауз а это класс получается00:03:20
play нам понадобятся наши стили00:03:23
открываем файлик styles.css00:03:25
и переходим вниз и так у нас тут есть00:03:28
наш game батон у которого есть на00:03:32
давайте так и сделаем мы говорим что в00:03:34
гейм батон есть еще один класс например00:03:37
play который по умолчанию у нас будет00:03:40
дисплей в значении но он то есть мы00:03:42
кнопку плей скрываем сейчас ничего не00:03:45
поменяется так и должно быть переходим00:03:47
сюда давайте заведем некую переменную00:03:50
который мы назовем из пауз по умолчанию00:03:53
это будет значение фолз эта переменная00:03:55
на в принципе сейчас понадобится здесь00:03:58
мы ставим с вами следующее условие если00:04:00
у нас сейчас игра на паузе иначе00:04:03
получается по умолчанию нас игра не на00:04:06
паузе то есть если игра не на паузе00:04:08
тогда мы делаем следующее давайте мы00:04:13
сначала через консоль der мы видим наш и00:04:16
батоны посмотрим что у него есть там00:04:18
будут и но если мы посмотрим то мы00:04:20
вспомним что есть такое свойство как00:04:22
чудра это дети нашего элемента у нас тут00:04:26
всего 2 ребенка это две картинки00:04:28
картинка с паузой и картинка play то00:04:31
есть тут мы можем обратиться к какому-то00:04:35
конкретному ребенку эдак логика00:04:37
следующее если мы находимся на паузе то00:04:40
мы обращаемся к нашему game баттону00:04:42
обращаемся к чудом итак если мы на паузе00:04:45
то мы должны картинку с паузой закрыть а00:04:49
картинку play показать поэтому картинку00:04:52
с паузой мы достаем через нулевой00:04:54
элемент так как эта картинка имеет00:04:56
нулевой индекс обращаемся к свойству00:04:59
style дальше к свойству дисплей и00:05:01
устанавливаем значения но он и так00:05:04
получается если мы на паузе то картинку00:05:06
с паузы мы скрываем а картинку play мы с00:05:10
вами показываем дисплей и нишу и точно00:05:13
также делаем только наоборот если мы00:05:15
находимся не на паузе то картинку с00:05:19
паузами показываем а картинку play00:05:22
скрываем примерно такая логика но и00:05:25
далее нам надо нашу переменную из полос00:05:27
просто поменять на какое-то значение то00:05:29
есть по умолчанию нас falls как только00:05:31
мы на эту кнопку нажимаем мы должны00:05:34
поменять значение этой переменной на00:05:36
противоположное поэтому обращаемся к00:05:39
этой переменной и говорим что мы кладем00:05:41
туда тоже самое только ставим ! впереди00:05:45
то есть мы говорим что мы кладем то же00:05:47
самое но в обратное значение получается00:05:50
изначально была фолз мы нажали сюда на00:05:52
кнопку паузы у нас фолз меняется натру и00:05:55
мы кладем сюда true получается у нас00:05:58
отрабатывает это условие получается у00:06:00
нас рисуется наша вот эта кнопка потом00:06:03
второй раз у нас тут лежит уже true мы00:06:06
снова кликаем сюда у нас вот это тру00:06:09
меняется на фолс записывается в00:06:11
переменную spouse отрабатывает элс и мы00:06:14
получаем вторую картинку и теперь наша00:06:17
пауза работает хорошо давайте теперь00:06:20
займемся секции за нашей игрой в00:06:23
принципе вот это мы можем вот так00:06:25
объединить и там где-то оставить что по00:06:27
нотам где-то вместе слитно было итак00:06:29
теперь займёмся нашей игрой у нас будет00:06:32
функция которая называется start game00:06:35
самая обычная функция ничего интересного00:06:37
только вызывать эту функцию мы будем не00:06:40
совсем обычным способом мы ее будем00:06:42
вызывать внутри другой дополнительные00:06:45
функции эта функция request они мишин00:06:47
фрейм сюда мы как раз таки нашу функцию00:06:50
и передаем зачем нам нужен некий00:06:53
посредник вот эта функция request00:06:55
анимешных фрейм позволяет рисовать нам в00:06:57
браузере анимацию и делать это00:06:59
достаточно эффективно потому что при00:07:01
помощи этой функции у нас браузер00:07:03
автоматически следит за тем как нагружен00:07:06
процессор пользователя осталась ли у00:07:08
него зарядка потому что если у него00:07:10
зарядки достаточно мало-то вот эта00:07:12
функция будет пропускать пару00:07:13
перерисовок нашей игры и таким образом у00:07:16
пользователя будет игра немножко лагать00:07:18
но она хотя бы будет работать в00:07:21
противном случае она у нас может вообще00:07:22
вылететь потому что у нас перерасчеты00:07:25
нашей логике не будут успевать за тем00:07:28
что происходит на экране и просто00:07:30
пользователь будет вообще получать00:07:31
какой-то кошмар но вот эта функция нам00:07:34
поможет хотя бы с лагами но нашу игру00:07:36
запустить поэтому через нее мы запускаем00:07:39
нашу функцию start game вот эта функция00:07:41
возвращает некий идентификатор который00:07:44
мы будем класть в отдельную переменную00:07:46
эту переменную мы назовем и не мишин00:07:48
айди и по умолчанию это они мыши найди00:07:51
будет нал и так когда вы выполнится вот00:07:55
эта функция она а свой идентификатор00:07:57
положат вот в эту переменную ну и в00:08:00
принципе давайте мы здесь запихнем00:08:02
какой-нибудь консоли log давайте просто00:08:05
слова теста выведем и посмотрим если мы00:08:08
сейчас обновим страничку вот мы получили00:08:10
наш консоль лак который был вызван00:08:12
использую вот эту request они машин00:08:14
фрейм мы можем также вывести они мишин00:08:17
айди и посмотреть какой идентификатор00:08:19
сформировался 0 здесь циферка 1 хорошо00:08:22
теперь так как это анимация она должна00:08:25
быть зациклена мы должны сделать00:08:27
примерно следующее внутри нашей функции00:08:30
start game мы должны произвести все то00:08:33
же самое то есть зациклить нашу функцию00:08:35
старт ге то есть изначально наша функция00:08:37
start game вызывается на восьмой строчке00:08:40
дальше когда тело нашей функции00:08:42
отработает мы снова при помощи request00:08:45
они машин фрейм вызовем нашу функцию00:08:47
start game и кстати теперь мы можем00:08:49
следить у нас они меньше найди будет00:08:51
меняться ну и как мы видим наша функция00:08:53
вызывается кучу раз давайте пока00:08:56
закомментируем и раскомментируем снова00:08:59
то есть остановим наши вот эти консоли00:09:00
логе бесконечные и так с этим думаю00:09:03
понятно то есть при помощи request00:09:05
занимаешь на фрейм мы добиваемся некой00:09:07
оптимизации от браузера и плюс мы еще00:09:10
подсказываем браузер что мы собираемся00:09:12
работать с анимацией и скорее всего он00:09:13
тут какие-то дополнительные оптимизации00:09:15
нам накрутят но и зачем нам вот этот00:09:17
идентификатор у нас вот эта штука будет00:09:20
вызывать нашу функцию старт и бесконечно00:09:23
и по сути внутри вот этой функции star00:09:25
game у нас будет рассчитываться логика00:09:27
нашей игры но и когда мы ставим игру на00:09:30
паузу мы должны также приостановить00:09:33
расчет вот этой всей логике который было00:09:35
внутри start game как мы можем это00:09:37
сделать при помощи вот этого они меньше00:09:39
найди у нас есть дополнительная функция00:09:42
которая называется console они michelin00:09:45
фрейм куда мы передаем идентификатор и00:09:48
мы эту функцию будем вызывать если у нас00:09:51
игра находится на паузе то есть внутри00:09:53
нашего еда вент леснара но и давайте00:09:56
посмотрим получается обновляем страничку00:09:59
нас пошли вот эти консоли логе и теперь00:10:01
мы нажимаем на кнопку паузы и все логика00:10:04
нашей игры приостанавливается вот у нас00:10:06
успела сработать 400 консоль логов то00:10:09
есть еще раз когда мы запускаем нашу00:10:12
функцию мы запускаем ее через request00:10:14
они мышь ему фрейм и сохраняем00:10:16
идентификатор в некую переменную когда00:10:19
тело нашей функции отрабатывает мы нашу00:10:21
функцию запускаем еще разочек и точно00:10:24
так же сохраняем новый идентификатор00:10:26
который будет сформирован00:10:28
как только мы нажмем на кнопку пауза мы00:10:30
используя этот идентификатор00:10:32
остановим работу функции start game то00:10:35
есть при остановим нашу игру в принципе00:10:37
здесь я думаю что хватит давайте00:10:40
перейдем теперь к расчету наших деревьев00:10:42
пока что мы будем работать только с00:10:44
одним деревом поэтому давайте остальные00:10:46
деревья мы закомментируем чтобы они нам00:10:48
не мешались обновим страничку осталось00:10:51
одно дерево давайте пока вот это мы тоже00:10:53
закомментируем чтоб нам не мешались тут00:10:54
кансу люди ну и давайте с этим деревом и00:10:57
работать для начала нам его надо00:10:59
вытащить это первый элемент в массиве и00:11:02
назовем мы его first давайте мы это00:11:05
дерево выведем и убедимся что она у нас00:11:07
нашлось через консоль лог но и вот оно00:11:10
наше дерево теперь наша задача в этом00:11:13
уроке просто сделать так чтобы она00:11:15
плавненько спустилась вниз ну и как мы00:11:17
будем это делать для начала нам надо00:11:19
получить координаты нашего дерева чтобы00:11:22
это сделать в внутри window есть такая00:11:26
функция которая называется get компьютер00:11:30
style то есть получи рассчитанные стиля00:11:33
мы говорим что мы хотим получить00:11:35
рассчитанный стиля нашего давайте так00:11:38
временную переменную пряди мы говорим00:11:40
что мы хотим получить все стили которые00:11:43
есть в этом дереве но нам нужно только00:11:46
лишь одно наше свойство transform00:11:48
давайте мы выведем в консоль лук и00:11:50
посмотрим что мы тут получили00:11:53
напоминаю что мы указывали координаты00:11:55
через это свойство transform как раз вот00:11:59
такие вот координаты мы с вами указали и00:12:01
теперь если мы обновим страничку там ее00:12:04
координаты и получили только мы получили00:12:06
не совсем в удобном для нас формате вот00:12:09
они наши 220 это то что мы смешали по00:12:12
оси x и вот они наши -80 это как раз00:12:16
таки вот эти -15 we аж как раз таки вот00:12:19
эти координаты вот эту последнюю циферку00:12:21
нам с вами надо вытащить чтобы это00:12:23
вытащить есть много различных вариантов00:12:26
мы с вами воспользуемся самым самым00:12:28
простым ну и возможно даже самым00:12:31
эффективным я тут не уверен но давайте00:12:34
чтобы не усложнять попробуем вытащить00:12:35
эту циферку первое что мы сделаем это00:12:38
создадим переменную которая назовем00:12:40
matrix то есть наша матрица вот это00:12:42
которые мы получим вот при помощи этой00:12:44
строчке но это предыдущая строка который00:12:47
я тут вырезал а далее мы говорим что мы00:12:50
обращаясь к нашей строке matrix давайте00:12:53
опять в конце лог у строк в java скрипте00:12:56
есть отличная функция которая называется00:12:58
сплит мы эту функцию вызываем и передаем00:13:01
сюда строчку она помогает нам разделить00:13:03
нашу строчку по каким-то символом мы тут00:13:06
видим что нашу строчку мы в принципе00:13:08
можем по запятой разделить давайте сюда00:13:10
мы в качестве параметра передадим00:13:12
строчку с запятой и таким образом мы00:13:15
получим массив наших элементов ну как вы00:13:19
можете догадаться нам нужен последний00:13:21
элемент нашего массива вот это как раз00:13:23
таки наши координаты по оси y давайте мы00:13:26
их достанем для этого мы и запихнем наше00:13:29
разделение в отдельную переменную00:13:31
давайте назовем ее просто и рэй то есть00:13:34
массив и запихнем сюда нашу строчку00:13:38
теперь нам нужно достать последний00:13:40
элемент из массива ну и чтобы достать00:13:42
последний элемент из массива делаем00:13:44
классические операции создаем переменную00:13:46
давайте назовем ее last элемент и что00:13:50
нам нужно сделать обращаемся к нашему00:13:52
массиву достаем элемент по индексу и00:13:55
указываем в качестве индекса длину00:13:58
нашего массива -1 то есть здесь длина00:14:01
нашего массива 6 последний элемент00:14:04
находится под индексом 5 то есть 6 минус00:14:06
1 получаем 5 и таким образом достаем00:14:09
последний элемент нашего массива давайте00:14:12
мы его выведем и убедимся что мы его00:14:14
получили но в принципе все только теперь00:14:17
нам мешает вот это скобочка мы ее можем00:14:19
как-то отдельно удалить но плюс ко всему00:14:22
у нас вот эта штука это строка а нам00:14:25
надо чтобы это было число есть00:14:27
замечательная функция которая называется00:14:30
парс флот она преобразовывает строчку к00:14:33
числу мы вызываем эту функцию передаем00:14:36
туда наш последний элемент массива но и00:14:39
прелесть этой функции заключается в том00:14:41
что оно отрежет все лишние части в конце00:14:43
который не относится к числу00:14:45
как раз скобочка к числу не относится00:14:47
поэтому здесь мы сохраним и получим вот00:14:50
такое вот замечательное число ну и мы00:14:52
также можем это запихнуть в какую-то00:14:54
отдельную переменную которую мы назовем00:14:56
корт y то есть эта координата по оси y00:15:00
ну и так как мы очень часто будем00:15:03
доставать координаты наших элементов00:15:05
предлагаю запихнуть это в какую-то00:15:07
отдельную функцию зовем эту функцию get00:15:10
y корт этой функции мы будем передавать00:15:13
какой-нибудь наш элемент а наша функция00:15:16
что она будет делать она будет брать00:15:18
этот элемент доставать из него стиле00:15:21
конкретное свойство transform получать00:15:24
какую-то матрицу разбивать эту матрицу00:15:26
по запятые находить последний элемент и00:15:29
последний элемент преобразовывать как00:15:32
числу ну и в конце оно это число будет00:15:34
возвращать и так для чего мы все это00:15:37
делали теперь давайте создадим еще одну00:15:40
функцию который будет отвечать за00:15:42
анимацию наших деревьев поэтому назовем00:15:45
нашу функцию турист они меньше это00:15:48
функция который будет вызвана внутри00:15:50
нашей функции start game то есть когда00:15:53
мы запускаем нашу игру мы говорим что мы00:15:56
будем анимировать наши деревья здесь00:15:58
также мы будем вызывать другие функции00:16:00
например анимировать наши монетки00:16:03
анимировать наши знаки но и так далее00:16:06
итак функция trees они меньше он будет00:16:08
заниматься анимации только для наших00:16:11
деревьев ну пока что мы работаем только00:16:13
с одним деревом это вот это наша00:16:15
переменная в будущем у нас тут будет00:16:17
цикл который будет пробегаться по всем00:16:19
деревьям но пока что давайте поработаем00:16:21
только с одним и так что нам надо00:16:23
сделать с нашим деревом нам надо00:16:26
поменять у него значения свойства00:16:28
transform обращаемся вот таким вот00:16:30
образом находим наше свойство transform00:16:32
и говорим что сюда мы будем00:16:34
останавливать какое-то новое значение00:16:36
какое значение00:16:37
ну конечно же00:16:39
translate и нам надо менять значение y00:16:42
но так как сюда мы будем подставлять00:16:44
какой-то перемены мы с вами кавычки00:16:47
поменяем на вот такие и сюда указываем00:16:51
нашу переменную нее корт эту переменную00:16:54
давайте конечно же создадим00:16:56
что будет в этой переменной для начала00:17:00
давайте создадим еще одну переменную00:17:02
которую мы назовем speed то есть00:17:05
какая-то скорость пусть это будет00:17:07
циферка 3 и получаются новые координаты00:17:09
будут иметь следующую формулу мы берем00:17:12
координаты по оси y у нашего первого00:17:15
дерева то есть те координаты которые у00:17:17
него есть сейчас плюс наша скорость но и00:17:20
давайте посмотрим сначала что это00:17:22
работает обновим страничку пока что она00:17:24
не работает давайте разбираться в чем00:17:26
проблема давайте выведем координаты00:17:28
нашего дерева для начала и посмотрим00:17:30
правильно ли они сформировались но потом00:17:33
пройдемся по всей этой логике и еще раз00:17:35
расскажу в чем ее смысл ну да видим что00:17:38
у нас координаты не совсем правильно00:17:39
меняются вот этот консоли лог с тестом00:17:42
мы в принципе можем с вами грохнуть и00:17:44
нам больше не понадобятся а но в00:17:46
принципе я не сразу заметил тут мы еще00:17:48
должны указать в пиксель значения то00:17:51
есть тут мы говорим что мы ставим новые00:17:53
из наших значения наших координат но00:17:55
обязательно они в пикселях но и теперь00:17:57
это вроде должно как сработать и до наше00:17:59
дерево анимировал оси куда-то там уехала00:18:02
но и давайте разберем еще раз как это00:18:03
все работает и будем на этом заканчивать00:18:06
мы достали наши деревом и запустили нашу00:18:10
игру при помощи request они мaшин фрейма00:18:12
что мы делаем запуская нашу игру мы00:18:15
анимируем наши деревья как мы это делаем00:18:18
мы пытаемся вычислить координаты далее00:18:21
здесь мы достаем текущие координаты00:18:23
нашего дерева допустим это будет 0 и00:18:26
прибавляем к нулю нашу скорость то есть00:18:28
три на выходе мы получаем новую00:18:31
координату это 3 и говорим что теперь мы00:18:33
перезаписываем свойства transform мы00:18:36
ставим ему translate y в значение 300:18:39
пикселя все наша функция здесь00:18:41
отработала мы переходим к этому шагу и00:18:43
снова запускаем start game start game00:18:46
снова вызывает анимацию нашего дерева00:18:48
получаем его координаты нашего дерева00:18:51
теперь тут уже лежит цифра 3 снова00:18:53
прибавляем нашу скорость и получается мы00:18:56
с вами прибавили к трем 3 и новые00:18:58
координаты это 6 указываем translite y00:19:01
что это теперь шесть пикселей ну и так00:19:04
до бесконечности потому что у нас сейчас00:19:06
наше дерево никак не зациклена а в00:19:08
будущем мы с вами будем вычислять что00:19:10
если она доходит до нижней границы она00:19:12
будет рисоваться за пределами экрана с00:19:14
нулевыми координатами его так она будет00:19:16
болтаться сначала вниз потом вверх вниз00:19:19
вверх и так далее но функция по расчету00:19:22
координат достаточно простая вроде уже00:19:24
два раза рассказал как я и сделал думаю00:19:26
с ним вопросов не возникнет а на этом я00:19:28
думаю что мы можем закончить все всем00:19:31
спасибо всем пока00:19:33
[музыка]Описание:
Поддержать автора: https://www.donationalerts.com/r/kakeitoyroki Курс по Chrome Dev Tools: https://stepik.org/course/194549/promo?referral=WzE5NDU0OSw3ODY1OTc3MzIsMTc2OTM4Mjc3MS4wODI2OTVd%3A1vk9Hn%3A-Y34yvWo9DSI_A01Q1dnF3eYEq0 Исходный код: https://github.com/R1ON/car-game/tree/main/2 ***** Таймкоды: 00:00 Введение 00:18 Подготовка JS 01:22 Находим машинку и деревья 02:32 Реализация паузу 06:30 requestAnimationFrame 09:17 cancelAnimationFrame 10:40 Ищем координаты дерева 19:36 Анимируем дерево 19:31 Всем спасибо, всем пока ***** Музыка: 1. chill. by sakura Hz https://soundcloud.com/sakurahertz Creative Commons — Attribution 3.0 Unported — CC BY 3.0 https://creativecommons.org/licenses/by/3.0/ Music promoted by Audio Library https://www.youtube.com/watch?v=pF2tXC1pXNo 2. https://www.youtube.com/playlist?list=PLsnJOHsVvrji_YI-PbuT-eYBQHOaapriV
Медиафайл доступен в форматах
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "#2. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Анимируем дерево, создаем паузу)"?
Сайт http://univideos.ru/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений.
Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "#2. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Анимируем дерево, создаем паузу)" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "#2. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Анимируем дерево, создаем паузу)"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "#2. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Анимируем дерево, создаем паузу)" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "#2. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Анимируем дерево, создаем паузу)"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "#2. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Анимируем дерево, создаем паузу)"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Как воспроизвести и скачать потоковое видео?
- в форматах видео наведите курсор мыши на "Потоковое видео**";
- правым кликом выберите "Копировать ссылку";
- откройте VLC-плеер;
- в меню выберите Медиа - Открыть URL - Сеть;
- в поле ввода вставьте скопированную ссылку;
- нажмите "Воспроизвести".
- скопируйте адрес видео (URL);
- в пункте “Медиа” проигрывателя VLC выберите “Открыть URL…” и вставьте ссылку на видео в поле ввода;
- нажмите на стрелочку на кнопке “Воспроизвести” и в списке выберите пункт “Конвертировать”;
- в строке “Профиль” выберите “Video - H.264 + MP3 (MP4)”;
- нажмите кнопку “Обзор”, чтобы выбрать папку для сохранения конвертированного видео и нажмите кнопку “Начать”;
- скорость конвертации зависит от разрешения и продолжительности видео.
Для этого понадобится VLC-плеер, скачать его можно бесплатно с официального сайта https://www.videolan.org/vlc/
Как воспроизвести потоковое видео через VLC-плеер:
Для скачивания потокового видео через VLC-плеер необходимо его конвертировать:
Внимание: данный способ скачивания больше не работает с большинством видеороликов с YouTube.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.