No video

Учимся разрабатывать 2D realtime игры на JavaScript [GeekBrains]

  Рет қаралды 71,142

GeekBrains

GeekBrains

Күн бұрын

Начни карьеру с бесплатного курса "Основы программирования" goo.gl/jTP4nP
Учимся разрабатывать 2D realtime игры на JavaScrip.
Мы создадим простую игру на чистом JavaScript - без использования фреймворков. Зачем это нужно:
- Вы повторите, как использовать переменные, структуры, массивы, условия, циклы и функции;
- Вы на практике познакомитесь с одним из паттернов создания игр.
Фреймворки и игровые движки ускоряют разработку и ими несомненно нужно пользоваться. Но когда вы реализуете их функционал сами, вы лучше поймёте, как они устроены и как работают.
Более сложные игры делают с использованием ООП. Но чтобы в полной мере ощутить пользу и мощь объектов, нужно сначала освоить функциональное программирование, в совершенстве освоить базовые элементы языка.
Для занятия вам понадобится только браузер и удобный текстовый редактор. Вместе мы:
- создадим игровые объекты,
- научим их двигаться и взаимодействовать,
- сделаем главного персонажа и научим его стрелять,
- подготовим простую спрайтовую анимацию.
#вебинарпоразработкеигр #разработкаигр #курсыразработкиигр #игрынаjavascript #обучениесозданиюигр #geekbrains #программирование #курсыпрограммирования

Пікірлер: 102
@user-ii3hy8el2w
@user-ii3hy8el2w 6 жыл бұрын
В начале - для новичков. В процессе - Ошибку словили, а нет времени разбираться... Отличный подход к обучению
@andron8122
@andron8122 5 жыл бұрын
Александр Вовк там вместо console cosole написал, онж поправил....
@iuriiankudinov9131
@iuriiankudinov9131 5 жыл бұрын
Очень простой и понятный урок! Автор, спасибо!!!
@gamerrus1431
@gamerrus1431 4 жыл бұрын
Качественно и без воды, спасибо
@user-vs8cs8fk4g
@user-vs8cs8fk4g 6 жыл бұрын
а собственно где папка с изображениями и исходниками?
@alexterkov6050
@alexterkov6050 5 жыл бұрын
Очень круто! Спасибо за подробный разбор)
@user-go2ln4jd4u
@user-go2ln4jd4u 4 жыл бұрын
В целом интересно, нашла для себя новое, но в начале очень затянуто. И еще - человек, который не знает, как объявлять переменные точно не поймет того, что объясняется дальше. Ну т.е. какое-то странное сочетание совсем простых вещей в начале урока и более сложных далее.
@user-fm5lf3ho2x
@user-fm5lf3ho2x 6 жыл бұрын
Cупер! !Автор молодец!! А можете пример с какой нибудь бродилкой ?
@user-rx4bi4ks4o
@user-rx4bi4ks4o 2 жыл бұрын
Супер, голос хороший, все очень понятно и доступно
@vladproger2093
@vladproger2093 5 жыл бұрын
Дайте исходник пожалуйста (код)
@LEG1ONER
@LEG1ONER Жыл бұрын
Было бы не плохо скинуть сами файлы куда нибудь!
@user-vn2nx1yq9e
@user-vn2nx1yq9e 5 жыл бұрын
голос приятный.
@user-br9ql3ug8o
@user-br9ql3ug8o 5 жыл бұрын
Исходник остался?
@norde_5741
@norde_5741 6 жыл бұрын
Как добавить паузу ребята?
@user-px4ux6jy5z
@user-px4ux6jy5z 5 жыл бұрын
Кому нужна логика столкновения корабля с астероидом: for (i in astero) { if (ship.x < astero[i].x + (ширина корабля) && ship.x + (ширина корабля) > astero[i].x && ship.y < astero[i].y + (высота корабля) && ship.y + (высота корабля) > astero[i].y) { // do something } }
@admenmod
@admenmod 5 жыл бұрын
Это не правильная формула)
@zeus5844
@zeus5844 5 жыл бұрын
@@admenmod +
@saintpahar9720
@saintpahar9720 5 жыл бұрын
по моему там так же как с выстрелом в астероид,проверяем каждый астероид на столкновение с кораблем
@user-bw7ov8ip5w
@user-bw7ov8ip5w 5 жыл бұрын
Можно ссылки на источники и ресурсы игры?
@user-px4ux6jy5z
@user-px4ux6jy5z 5 жыл бұрын
Конечно не удаляет, потому что slice создаёт новый массив копию, а не удаляет :) Нужен splice =)
@dailydaily4522
@dailydaily4522 3 жыл бұрын
по id можно сразу писать переменную без document.querySelector("#..")
@user-nw8ik2wx7x
@user-nw8ik2wx7x 6 жыл бұрын
Потрясно..
@Dikiyi
@Dikiyi 6 жыл бұрын
)
@user-gx3ri5vy4x
@user-gx3ri5vy4x 6 жыл бұрын
Можете написать, что надо добавить к игре, чтобы появился подсчет очков и конец игры в случае столкновения корабля с астероидами?
@user-fr4sr6xj8w
@user-fr4sr6xj8w 5 жыл бұрын
Рецепты простой и вкусной кулинарии добавить функцию score задать ему условие и добавить score к переменной астероида и задать положение подсчету очков!
@user-tp5jh1vd3s
@user-tp5jh1vd3s 5 жыл бұрын
@@user-fr4sr6xj8w или же создать переменную очки и в функции удаления астероидов добавлять +1
@codingcat9375
@codingcat9375 3 жыл бұрын
Where can I find the start files?
@WEBSTART-LIVE
@WEBSTART-LIVE 4 жыл бұрын
какой классный урок
@neon8940
@neon8940 6 жыл бұрын
Исходник с картинками не скачиваются(
@Morrroh
@Morrroh 3 ай бұрын
А где ссылки?
@iamdan8203
@iamdan8203 3 жыл бұрын
Кто бы ни читал этот комментарий, знай, что *ГОСПОДЬ ИИСУС ХРИСТОС ЛЮБИТ ТЕБЯ!* Whoever reads this comment, know that *LORD JESUS CHRIST LOVES YOU!*
@user-vh8tg4cr2f
@user-vh8tg4cr2f 4 жыл бұрын
Да видим, видим, давай уже. Не дал пожрать...
@lobanovdrive
@lobanovdrive 5 жыл бұрын
структура? что? это же объект обычный объект, а { a: 1, b: 2 } просто свойства объекта а получая значение x.a , вы получаете просто свойство объекта. это же не совсем переменная . зачем усложнять то?
@parkersquare8995
@parkersquare8995 5 жыл бұрын
Тоже уши резануло. Вроде уже устоявшийся термин, зачем велосипед придумывать? Надеюсь, что это только в этом видео, и на сайте они тему ООП нормально раскрывают.
@clickabelno
@clickabelno 3 жыл бұрын
Лайк!
@ganjackal
@ganjackal 3 жыл бұрын
Все, круто пока получается все картинки качал сам другие с инета, но вот на постере видоса типа другая игруля, а как такую попробовать сделать!?
@user-mj1oq1mm9z
@user-mj1oq1mm9z 6 жыл бұрын
Скажите плиз, как называется цветовая схема редактора
@user-ig4lq2ts8b
@user-ig4lq2ts8b 3 жыл бұрын
очень круто
@artemvp6426
@artemvp6426 4 жыл бұрын
42:46 - splice
@darksgamechannel5484
@darksgamechannel5484 3 жыл бұрын
скинте плиз код на установку щита, буду очень благодарен
@rostov_papa161rus
@rostov_papa161rus 2 жыл бұрын
ну и как убрать эту ошибку 1:07:39?
@masterlamaster998
@masterlamaster998 3 жыл бұрын
А что означает d?
@seand5565
@seand5565 5 жыл бұрын
где скачать java skript
@dollar70rubley
@dollar70rubley 5 жыл бұрын
мда
@seand5565
@seand5565 5 жыл бұрын
@@dollar70rubley и что мда
@Jeffwingchun
@Jeffwingchun 5 жыл бұрын
Для создания приложений на javascript не нужен компилятор, т.к. это интерпретируемый язык. Интерпретатор встроен в любой браузер.
@user-bw7ov8ip5w
@user-bw7ov8ip5w 5 жыл бұрын
Его скачивать не надо, oн есть в каждом браузере.
@user-vn2nx1yq9e
@user-vn2nx1yq9e 5 жыл бұрын
@@user-bw7ov8ip5w ему нужен на компьютер а не в браузер. незнаешь молчи.
@lobanovdrive
@lobanovdrive 5 жыл бұрын
если на ваших курсах учат так же..это как то зашкварно.
@DreamWasTaken-rc5ed
@DreamWasTaken-rc5ed 4 жыл бұрын
У тебя бокс на канале)) ты бокСЁР))
@jojomajo
@jojomajo 4 жыл бұрын
так и есть, сделал пару таких игр и все ты геймдизайнер))
@hamster.tomsksirotin6100
@hamster.tomsksirotin6100 6 жыл бұрын
У меня вопрос, автор видео из Северска? Если да, то следующий вопрос, если не секрет, где в данный момент на жизнь зарабатываете?
@user-cg1pq2kh6t
@user-cg1pq2kh6t 5 жыл бұрын
странные вопросы в комментаХ
@dilylim730
@dilylim730 6 жыл бұрын
*Если не сложно ,то можете скинуть : фон, и рисунки*
@progliveru
@progliveru 6 жыл бұрын
Картинки в архиве с игрой game.vseverske.ru/game.zip или можете использовать любые свои
@ivanenzhaev2373
@ivanenzhaev2373 6 жыл бұрын
Ссылка перестала быть актуальной. Скиньте, пожалуйста, ещё раз. Хочется посмотреть размеры и сначала попробовать с вашим контентом, чтобы потом найти свой такими же размерами, или подогнать под него.
@hamster.tomsksirotin6100
@hamster.tomsksirotin6100 6 жыл бұрын
Если нужны картинки, зайди на сайт game.vseverske.ru/ Там через панель разработчика можно добраться до всех нужных файлов. Я так делал)
@ivanenzhaev2373
@ivanenzhaev2373 6 жыл бұрын
Спасибо! Я сейчас разглядел, что ссылка автора видео не работает, потому что в ссылку включился лишний текст. Вот рабочая ссылка: game.vseverske.ru/game.zip
@Max-kr4ie
@Max-kr4ie 5 жыл бұрын
@@ivanenzhaev2373 спасибо
@alipro2132
@alipro2132 3 жыл бұрын
Super
@dilylim730
@dilylim730 6 жыл бұрын
Блин, не успел :(
@KLikAlex
@KLikAlex 5 жыл бұрын
А разве не нужно создание canvas и context внутри цикла ставить? Чтобы каждый раз создавался новый кадр т.к. у нас все отрисовывается в одном канвасе, наслаиваясь кадр на кадр, и если без фона , то будут видны все кадры?
@vladproger2093
@vladproger2093 5 жыл бұрын
Alexey Klik Нет, канваса создаётся один раз и прописывается единожды в html
@vladproger2093
@vladproger2093 5 жыл бұрын
Я понял твой вопрос. Ответ: нет, так как в канвасе нет объектов, это просто набор точек, каждая из которых имеет свой цвет, если ты эту точку прорисовываешь ещё раз, то "нижний слой", как ты сказал в этой точке удаляется
@KLikAlex
@KLikAlex 5 жыл бұрын
Просто забугорный урок как-то смотрел по анимации (не мог найти сейчас) , так в нем как раз делался канвас и контекст внутри цикла, т.е. объект канваса перезаписывался в каждом новом кадре, поэтому и возник вопрос , что в итоге правильно, но если как говорите просто точку нарисовал на экране и забыл, то наверно так правильно)
@chernigamaxim4646
@chernigamaxim4646 5 жыл бұрын
@@KLikAlex Правильно использовать метод clearRect(); в самом начале функции отрисовки нашего канвас контекста. в этот метод по традиции передаем нулевые координаты и ширину и высоту канвас холста. в этом случае не будет "шлейфа"
@KLikAlex
@KLikAlex 5 жыл бұрын
@@chernigamaxim4646 Спасибо за совет, попробую.
@SanyaMangust
@SanyaMangust 2 жыл бұрын
удалить через shift
@anonymoustv1630
@anonymoustv1630 5 жыл бұрын
А этот канал заброшенный или здесь все ещё выходят уроки???
@user-yt3ip4kw2t
@user-yt3ip4kw2t 4 жыл бұрын
@Eriks Verobejs иди гакуй
@awenn2015
@awenn2015 3 жыл бұрын
Noted++ серьёзно?))
@rikardofle2210
@rikardofle2210 4 жыл бұрын
Ничего не понял((
@ivanenzhaev2373
@ivanenzhaev2373 6 жыл бұрын
Вы не могли бы дать ссылку на B4W пример? Я пытался найти на их сайте среди демок, но там такого примера не нашёл.
@Max-kr4ie
@Max-kr4ie 5 жыл бұрын
что за сайт с демками?
@user-cg1pq2kh6t
@user-cg1pq2kh6t 5 жыл бұрын
это обьект, зачем называть структурой это
@iiiiii7451
@iiiiii7451 5 жыл бұрын
да не привычно для js. Но в c++, например, это тип-структура, а в js нет типов - всё объекты, даже null. Видимо автор привык к "нормальным" языкам программирования ;))
@lobanovdrive
@lobanovdrive 5 жыл бұрын
бляя...масив структур. geekbrains же . вы че?
@user-ic4dk4sp3y
@user-ic4dk4sp3y 4 жыл бұрын
Г**но! я кликнул по картинке платформера с интерфейсом , а тут такое(
@yuriiya7752
@yuriiya7752 3 жыл бұрын
шут он и в Африке шут
@resfall2777
@resfall2777 4 жыл бұрын
+
@user-qu6zj2ri4o
@user-qu6zj2ri4o 5 жыл бұрын
что за браузер с консолью
@admenmod
@admenmod 5 жыл бұрын
Chrome
@Max-kr4ie
@Max-kr4ie 5 жыл бұрын
любой?
@awenn2015
@awenn2015 3 жыл бұрын
На превью крутая игра тут г какое то
@aavezel
@aavezel 4 жыл бұрын
e5urt
@aavezel
@aavezel 4 жыл бұрын
ттт
@user-jc6pl2xj7k
@user-jc6pl2xj7k 3 жыл бұрын
_
@user-nv1mg7xl3c
@user-nv1mg7xl3c Жыл бұрын
Ребят, а что за редактор, в котором он пишет код?
@user-dontes
@user-dontes Жыл бұрын
Pain
@user-po1ez6ke6m
@user-po1ez6ke6m Жыл бұрын
Очень хочу создать игры, но знаю только js, спасибо
@ChiyukiTyan
@ChiyukiTyan 6 жыл бұрын
Можете написать, что надо добавить к игре, чтобы появился подсчет очков и конец игры в случае столкновения корабля с астероидами?
@vladproger2093
@vladproger2093 5 жыл бұрын
Nekomata, добавь в HTML файле divс конкретный id, погугли, как в него выводить значения JavaScript переменной
@lamanturm1701
@lamanturm1701 Жыл бұрын
context.fillText(count, 10, 40); переменная count инкрементируется при удалении астероида, 10,40 - координаты надписи. текст можно предворительно стилизовать: context.fillStyle = "white";//белый цвет context.font = "40px Arial";//размер и шрифт
@user-kl2kt6ze5j
@user-kl2kt6ze5j 3 жыл бұрын
+
ООП в JavaScript. Мифы, наследование, полиморфизм, абстракции, наследованиеи,
1:01:03
Nurse's Mission: Bringing Joy to Young Lives #shorts
00:17
Fabiosa Stories
Рет қаралды 4,8 МЛН
Schoolboy Runaway в реальной жизни🤣@onLI_gAmeS
00:31
МишАня
Рет қаралды 4 МЛН
Blue Food VS Red Food Emoji Mukbang
00:33
MOOMOO STUDIO [무무 스튜디오]
Рет қаралды 20 МЛН
Игра Змейка на чистом JavaScript и HTML5 за 45 минут!
44:02
JavaScript Паттерны. Шаблоны проектирования. 17 Примеров
1:54:30
Создаем игру за 1 час на JavaScript с нуля: Warfare
1:16:53
Программисты-самоучки... Слушайте внимательно.
22:45
Евгений Афанасьев
Рет қаралды 46 М.
Nurse's Mission: Bringing Joy to Young Lives #shorts
00:17
Fabiosa Stories
Рет қаралды 4,8 МЛН