JavaScript Canvas 5. Анимированный фон

  Рет қаралды 31,471

WebDev с нуля. Канал Алекса Лущенко

WebDev с нуля. Канал Алекса Лущенко

7 жыл бұрын

⏰ Курс JavaScript 2.0: itgid.info/course/javascript-2
🧠 Чат Telegram c мозголомками : t.me/itgid_info
👇 Разверни для полной информации
💎 Курс Функции в JavaScript: itgid.info/course/function-2021
🧑🏻‍💻 Сайт: itgid.info
😋 Курс Методы массивов: itgid.info/course/arraymethod
Пишем анимированный фон для сайта с помощью Canvas. Движущаяся точка в canvas
Скачать файлы урока: w3.org.ua/canvas/javascript-ca...
Мы на facebook: / w3.org.ua

Пікірлер: 51
@netztur3896
@netztur3896 4 жыл бұрын
Я смотрел много уроков, но вы объясняете лучше всех
@VVhatsoever
@VVhatsoever 5 жыл бұрын
Большое спасибо за урок! Насчёт step (то есть stepCount) = 0 - это не совсем верное решение: точка случайно принимает новое направление, которое может быть не совсем верным (например, в ту же стенку). В этом случае уместно было бы менять направление в противоположное или зеркальное. Упрощённо (без зеркального отбития) можно сделать так: if(x900){ direction = 3; } else if(y600){ direction = 4; }
@anyka-6823
@anyka-6823 2 жыл бұрын
Понравилось интереснее чем на циферках учится, и главное рассматривается взаимодействие методов( а то массив выучишь к примеру а когда надо вставить в код наступает обстракция))))
@gmmips
@gmmips 2 жыл бұрын
Со step понятно, автор ошибся, естественно там stepCount. Насчет ограничений - лучше зеркалить направление, иначе "герой" может застрять за пределами канваса. Далее, направления - их можно задавать просто углом в радианах, а потом по sin/cos находить смещение по Х и Y. Это уберет горы case и позволит герою идти реально В ЛЮБОМ направлении, а не в восьми. И при отзеркаливании на краю канваса мы просто добавляем Pi. Ну и последнее - вместо setTimeout лучше использовать requestAnimationFrame. Он специально придуман для этого. Не верите? Попробуйте при сеттаймауте переключиться на другую вкладку на минуту, а потом вернуться на вкладку с канвасом - у вас "герой" получит нехилый такой спидхак 😁 ps: лучше поздно, чем никогда. Может кому-то пригодится
@ShershulTV
@ShershulTV 4 жыл бұрын
Вы шикарно излагаете, очень нравятся ваши уроки
@romakushnir2820
@romakushnir2820 7 жыл бұрын
Чудовий урок! І правда, чим далі тим цікавіше! Дякую за труди!!!
@itgid
@itgid 7 жыл бұрын
Дякую за лайк!
@vladimirjosan6127
@vladimirjosan6127 7 жыл бұрын
ох, сегодня попробую!
@user-ho5rm7qc7q
@user-ho5rm7qc7q 4 жыл бұрын
интересный урок, спасибо
@dimageorgiev5798
@dimageorgiev5798 7 жыл бұрын
Спасибо!
@ChelovekVeka
@ChelovekVeka 2 жыл бұрын
Вау, да это целый ИИ
@soulkeeper588
@soulkeeper588 6 жыл бұрын
суперский урок. видел в олимпиадной задаче нужно было сделать несколько точек.которые соединяются линиями при клике в любую область.
@itgid
@itgid 6 жыл бұрын
Круто!
@user-pz8eh3vu3b
@user-pz8eh3vu3b 3 жыл бұрын
Без команды очистки тоже прикольно, просто ресует тонель
@user-rj6ro3mp1p
@user-rj6ro3mp1p 6 жыл бұрын
збс аднака!))
@robertodiohu7052
@robertodiohu7052 3 жыл бұрын
Круто 15:10 врем'я. Я использую ету функцию как движения вага в игре.. Типа зомби бродить хаотично туда сюда...
@artemaramma2912
@artemaramma2912 5 жыл бұрын
step - шаг count -количество stepcount- количество шагов
@user-cg4pk1hv7y
@user-cg4pk1hv7y 5 жыл бұрын
Step это для того, чтобы вы не расслаблялись, а умели находить ошибки. PS Кто часто смотрит уроки, уже должен знать, что преподаватель может специально делать ошибки
@aleksejsaleksejevs7818
@aleksejsaleksejevs7818 5 жыл бұрын
stepCount = 0 у меня так же не работает
@vvv7220
@vvv7220 5 жыл бұрын
step работает как и stepCount тоже работает. Вопрос мучает многих что такое step. Google ничего не дал.
@user-py7hm2mx7o
@user-py7hm2mx7o Жыл бұрын
Кстати, это очень интересный прием, и эффективный. Еще нравится неспешная работа, автор прекрасный педагог.
@user-oe7qb5yw3y
@user-oe7qb5yw3y 6 жыл бұрын
Что за step= 0; Вы нигде не объевляли
@denissazonov9573
@denissazonov9573 3 жыл бұрын
там опечатка, подразумевалось stepCount, я так думаю.
@paralax297
@paralax297 2 жыл бұрын
@@denissazonov9573 Js Сам допишет переменную
@marharytahlinskaya1165
@marharytahlinskaya1165 5 жыл бұрын
if (x400 || y200) step = 0; Не понимаю откуда взялся step? Объявлен был только stepCount...
@somebodyhere8620
@somebodyhere8620 5 жыл бұрын
Из-за этого она уходит за пределы канваса, это ошибка. Надо написать конечно stepCount, чтобы точка не выходила
@Max-kr4ie
@Max-kr4ie 5 жыл бұрын
@@somebodyhere8620 причем надо вычесть ширину границы иначе может долго под ней прятаться
@user-pz8eh3vu3b
@user-pz8eh3vu3b 3 жыл бұрын
хмм еще интересный момент, а почему при множественном вызове функции скорость точки увеличивается ?
@user-ho5rm7qc7q
@user-ho5rm7qc7q 4 жыл бұрын
герой ушел таки за край канваса, я тоже с этим столкнулась... выражение If (x400 || y200) не обрабатывает больше одного условия, но обработает, если заключить каждое условие в скобки - If ((x400) || (y200)), может это только в гуглгхроме так...
@aleksejsaleksejevs7818
@aleksejsaleksejevs7818 5 жыл бұрын
вместо stepCount = 0 ( типо step = 0 ) можно выставить её в начальную позицию x = 100; y = 200; или так ещё if (y > 200) { y --; } else if (y < 0) { y ++; } else if (x > 400) { x--; } else if (x < 0) { x++; }, но и тут немного с Х неясности происходят мне не ясные :((
@VVhatsoever
@VVhatsoever 5 жыл бұрын
Меняйте не х и у, а направление движения: if(x900){ direction = 3; } else if(y600){ direction = 4; }
@soulkeeper588
@soulkeeper588 6 жыл бұрын
короче,а как сделать несколько таких точек?
@user-pz8eh3vu3b
@user-pz8eh3vu3b 3 жыл бұрын
почему если создать еще одну точку, она мерцает?
@user-bd9qp5bi6t
@user-bd9qp5bi6t 2 жыл бұрын
Зачем запускать таймер?
@Wraith2401
@Wraith2401 6 жыл бұрын
придумал как регулировать скорость движения элемента, но добавить новые не хватает ума( может подскажет кто?
@itgid
@itgid 6 жыл бұрын
Создать массив точек и с ними работать.
@ernestdenisov1974
@ernestdenisov1974 6 жыл бұрын
вот написал код для нескольких точек на канвасе jsfiddle.net/dz3f1yxe/1/ просто очистку канваса надо вынести отдельно от отрисовки, а новые точки добавлять в массив
@ikammetor2349
@ikammetor2349 4 жыл бұрын
3:30
@vvv7220
@vvv7220 5 жыл бұрын
step работает как и stepCount тоже работает. Вопрос мучает многих что такое step. Google ничего не дал.
@itgid
@itgid 5 жыл бұрын
Какая строка кода?
@vvv7220
@vvv7220 5 жыл бұрын
@@itgid 59 - я строка if (x400 || y200) step = 0;
@VVhatsoever
@VVhatsoever 5 жыл бұрын
@@vvv7220 вот рабочее решение: if(x900){ direction = 3; } else if(y600){ direction = 4; }
@vvv7220
@vvv7220 5 жыл бұрын
Да оно и то рабочее. Я уже узнал. В JS можно присваивать переменным значения не объявляя их, если переменные глобальные и есле не use strict
@VVhatsoever
@VVhatsoever 5 жыл бұрын
@@vvv7220 это да, но ведь то, что левую переменную step обнулили, никак на программу не повлияет)
@gxl7757
@gxl7757 5 жыл бұрын
case 0; - не работает
@itgid
@itgid 5 жыл бұрын
Если вы подробнее опишите, смогу адекватно ответить.
@pro100rico7
@pro100rico7 6 жыл бұрын
Этот квадрат иногда уходит за рамки.
@avinean_
@avinean_ 6 жыл бұрын
В коді помилка. При виході ща рамки ми обнуляємо step, а треба обнуляти stepCount
@urbanmauglisq9554
@urbanmauglisq9554 6 жыл бұрын
Спасибо!
JavaScript Canvas 6. Анимируем график синуса
11:16
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 28 М.
JavaScript Canvas 8. Игра "Жизнь"
29:29
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 38 М.
When You Get Ran Over By A Car...
00:15
Jojo Sim
Рет қаралды 27 МЛН
Smart Sigma Kid #funny #sigma #comedy
00:25
CRAZY GREAPA
Рет қаралды 24 МЛН
THEY made a RAINBOW M&M 🤩😳 LeoNata family #shorts
00:49
LeoNata Family
Рет қаралды 37 МЛН
JavaScript Canvas 1. Основы canvas
14:20
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 101 М.
JavaScript Canvas 7. Спирограф
12:58
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 17 М.
HTML5 canvas: изучаем основные свойства, рисуем графики | HTML, CSS, JS
21:23
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 16 М.
Учим HTML5 Canvas за 30 минут!
36:56
Хауди Хо™ - Просто о мире IT!
Рет қаралды 211 М.