Учимся разрабатывать 2D realtime игры на JavaScript [GeekBrains]
HTML-код
- Опубликовано: 25 авг 2024
- Начни карьеру с бесплатного курса "Основы программирования" goo.gl/jTP4nP
Учимся разрабатывать 2D realtime игры на JavaScrip.
Мы создадим простую игру на чистом JavaScript - без использования фреймворков. Зачем это нужно:
- Вы повторите, как использовать переменные, структуры, массивы, условия, циклы и функции;
- Вы на практике познакомитесь с одним из паттернов создания игр.
Фреймворки и игровые движки ускоряют разработку и ими несомненно нужно пользоваться. Но когда вы реализуете их функционал сами, вы лучше поймёте, как они устроены и как работают.
Более сложные игры делают с использованием ООП. Но чтобы в полной мере ощутить пользу и мощь объектов, нужно сначала освоить функциональное программирование, в совершенстве освоить базовые элементы языка.
Для занятия вам понадобится только браузер и удобный текстовый редактор. Вместе мы:
- создадим игровые объекты,
- научим их двигаться и взаимодействовать,
- сделаем главного персонажа и научим его стрелять,
- подготовим простую спрайтовую анимацию.
#вебинарпоразработкеигр #разработкаигр #курсыразработкиигр #игрынаjavascript #обучениесозданиюигр #geekbrains #программирование #курсыпрограммирования
![Easy mode. Простые инструменты для несложных приложений [GeekBrains]](http://i.ytimg.com/vi/0-r5VuHV6Ng/mqdefault.jpg)
![Easy mode. Простые инструменты для несложных приложений [GeekBrains]](/img/tr.png)
![Пишем HTML5 арканоид на чистом JavaScript и Canvas [GeekBrains]](http://i.ytimg.com/vi/Y5_ZgpiI6jI/mqdefault.jpg)
Очень простой и понятный урок! Автор, спасибо!!!
Качественно и без воды, спасибо
В начале - для новичков.
В процессе - Ошибку словили, а нет времени разбираться...
Отличный подход к обучению
Александр Вовк там вместо console cosole написал, онж поправил....
а собственно где папка с изображениями и исходниками?
Очень круто! Спасибо за подробный разбор)
В целом интересно, нашла для себя новое, но в начале очень затянуто. И еще - человек, который не знает, как объявлять переменные точно не поймет того, что объясняется дальше. Ну т.е. какое-то странное сочетание совсем простых вещей в начале урока и более сложных далее.
Cупер! !Автор молодец!! А можете пример с какой нибудь бродилкой ?
Супер, голос хороший, все очень понятно и доступно
Дайте исходник пожалуйста (код)
Как добавить паузу ребята?
Потрясно..
)
голос приятный.
Кому нужна логика столкновения корабля с астероидом:
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 +
по моему там так же как с выстрелом в астероид,проверяем каждый астероид на столкновение с кораблем
Исходник остался?
Было бы не плохо скинуть сами файлы куда нибудь!
по id можно сразу писать переменную без document.querySelector("#..")
Where can I find the start files?
Конечно не удаляет, потому что slice создаёт новый массив копию, а не удаляет :) Нужен splice =)
А где ссылки?
какой классный урок
Исходник с картинками не скачиваются(
Лайк!
Можете написать, что надо добавить к игре, чтобы появился подсчет очков и конец игры в случае столкновения корабля с астероидами?
Рецепты простой и вкусной кулинарии добавить функцию score задать ему условие и добавить score к переменной астероида и задать положение подсчету очков!
@@user-fr4sr6xj8w или же создать переменную очки и в функции удаления астероидов добавлять +1
очень круто
42:46 - splice
Да видим, видим, давай уже. Не дал пожрать...
Все, круто пока получается все картинки качал сам другие с инета, но вот на постере видоса типа другая игруля, а как такую попробовать сделать!?
скинте плиз код на установку щита, буду очень благодарен
Скажите плиз, как называется цветовая схема редактора
Можно ссылки на источники и ресурсы игры?
структура? что? это же объект обычный объект, а { a: 1, b: 2 } просто свойства объекта а получая значение x.a , вы получаете просто свойство объекта. это же не совсем переменная . зачем усложнять то?
Тоже уши резануло. Вроде уже устоявшийся термин, зачем велосипед придумывать? Надеюсь, что это только в этом видео, и на сайте они тему ООП нормально раскрывают.
Кто бы ни читал этот комментарий, знай, что *ГОСПОДЬ ИИСУС ХРИСТОС ЛЮБИТ ТЕБЯ!*
Whoever reads this comment, know that *LORD JESUS CHRIST LOVES YOU!*
где скачать java skript
мда
@@dollar70rubley и что мда
Для создания приложений на javascript не нужен компилятор, т.к. это интерпретируемый язык. Интерпретатор встроен в любой браузер.
Его скачивать не надо, oн есть в каждом браузере.
@@user-bw7ov8ip5w ему нужен на компьютер а не в браузер. незнаешь молчи.
Super
если на ваших курсах учат так же..это как то зашкварно.
У тебя бокс на канале)) ты бокСЁР))
так и есть, сделал пару таких игр и все ты геймдизайнер))
ну и как убрать эту ошибку 1:07:39?
А что означает d?
Блин, не успел :(
А разве не нужно создание canvas и context внутри цикла ставить? Чтобы каждый раз создавался новый кадр т.к. у нас все отрисовывается в одном канвасе, наслаиваясь кадр на кадр, и если без фона , то будут видны все кадры?
Alexey Klik Нет, канваса создаётся один раз и прописывается единожды в html
Я понял твой вопрос. Ответ: нет, так как в канвасе нет объектов, это просто набор точек, каждая из которых имеет свой цвет, если ты эту точку прорисовываешь ещё раз, то "нижний слой", как ты сказал в этой точке удаляется
Просто забугорный урок как-то смотрел по анимации (не мог найти сейчас) , так в нем как раз делался канвас и контекст внутри цикла, т.е. объект канваса перезаписывался в каждом новом кадре, поэтому и возник вопрос , что в итоге правильно, но если как говорите просто точку нарисовал на экране и забыл, то наверно так правильно)
@@KLikAlex Правильно использовать метод clearRect(); в самом начале функции отрисовки нашего канвас контекста. в этот метод по традиции передаем нулевые координаты и ширину и высоту канвас холста. в этом случае не будет "шлейфа"
@@chernigamaxim4646 Спасибо за совет, попробую.
*Если не сложно ,то можете скинуть : фон, и рисунки*
Картинки в архиве с игрой game.vseverske.ru/game.zip или можете использовать любые свои
Ссылка перестала быть актуальной. Скиньте, пожалуйста, ещё раз. Хочется посмотреть размеры и сначала попробовать с вашим контентом, чтобы потом найти свой такими же размерами, или подогнать под него.
Если нужны картинки, зайди на сайт game.vseverske.ru/
Там через панель разработчика можно добраться до всех нужных файлов.
Я так делал)
Спасибо! Я сейчас разглядел, что ссылка автора видео не работает, потому что в ссылку включился лишний текст. Вот рабочая ссылка: game.vseverske.ru/game.zip
@@ivanenzhaev2373 спасибо
У меня вопрос, автор видео из Северска? Если да, то следующий вопрос, если не секрет, где в данный момент на жизнь зарабатываете?
странные вопросы в комментаХ
А этот канал заброшенный или здесь все ещё выходят уроки???
@Eriks Verobejs иди гакуй
Noted++ серьёзно?))
удалить через shift
Ничего не понял((
Вы не могли бы дать ссылку на B4W пример? Я пытался найти на их сайте среди демок, но там такого примера не нашёл.
что за сайт с демками?
это обьект, зачем называть структурой это
да не привычно для js. Но в c++, например, это тип-структура, а в js нет типов - всё объекты, даже null. Видимо автор привык к "нормальным" языкам программирования ;))
+
бляя...масив структур. geekbrains же . вы че?
Г**но! я кликнул по картинке платформера с интерфейсом , а тут такое(
шут он и в Африке шут
что за браузер с консолью
Chrome
любой?
На превью крутая игра тут г какое то
e5urt
_
ттт
Ребят, а что за редактор, в котором он пишет код?
Pain
Очень хочу создать игры, но знаю только js, спасибо
Можете написать, что надо добавить к игре, чтобы появился подсчет очков и конец игры в случае столкновения корабля с астероидами?
Nekomata, добавь в HTML файле divс конкретный id, погугли, как в него выводить значения JavaScript переменной
context.fillText(count, 10, 40); переменная count инкрементируется при удалении астероида, 10,40 - координаты надписи.
текст можно предворительно стилизовать: context.fillStyle = "white";//белый цвет
context.font = "40px Arial";//размер и шрифт
+