Игра на JavaScript с нуля для начинающих. ОЧЕНЬ ПРОСТО!
HTML-код
- Опубликовано: 6 янв 2021
- Очень много людей сейчас учит программирование на JavaScript, а учить нужно весело. Один из способов это сделать игру на Javascript, и я покажу для начинающих как это сделать легко и быстро. Игра на JavaScript для начинающих это способ реализации возможностей js в браузере с исполнением интересных действий. JavaScript программирование по урокам дает возможность создавать игры с нуля без глубоких знаний. Мы сделаем игру с гугл динозавром, где каждый новичек js сможет попробовать написать своими руками. Если вам интересна тема уроки создания игр на JavaScript для начинающих, пишите обязательно в комментарии!
Так блэт :3
Эта территория под моим контролем, чумба.
Not today 😂😂😂👍🏻
😂
Больше нет!
Салам брат
Я прям знал что твой коммент тут будет))
Спасибо, начал ГТА писать на js.
Сними видос хочу посмотреть на неё
Kogda u tebya net urokov😂
Как успехи?
@BINANCE666BITCOIN Да это рофл че вы
😂
Чувак, это гениальный подход к изучению с наглядной мотивацией того, что делаешь! Изучение будет на примере и сразу! Молодец. Продолжай такие же веселые уроки. У всех на умных щах - это скучно таак, что спать хочется ))
спс, все очень понятно! Может еще игру на JS с canvas? Видео каждый день без потери качества, мощьно
Для совсем уж новичков нужен текстовый формат
Лайк поставил)
Ура, очень ждали! Думаю будет круто
Это хорошо
Есть ли у вас ролики, где объясняется что такое те или иные базовые коды-слова, зачем и когда ставить ковычки, с чего и с каких слов или символов начинать новый проект, и т.д. я вообще нулевый новичек в программировании. Хочу понять логику программирования. Очень интересно рассказываете🔥🔥🔥 вчера попала на ваш канал
Видео вроде год, а до сих пор актуально :) хочу написать игру на похожий мотив, доработав, конечно - Спасибо заранее за пару ответов на мои вопросы, о которых думал в процессе разработки :)
Прошло 5 месяцев, как успехи?
@@Fenix-ij8sj отлично
Переписал на канвас
Теперь планирую на реакт ))
11 месяцев прошло, как у тебя с JS?
@@armanscription1428 работаю на коммерческом проекте, пишу на реакте ☺️ спасибо за переживания
@@pavluzont Дай советы какие-то
Все очень понятно, хоть я не разу не работал с анимацией, просто лучший. Очень надеюсь, будут ещё такие игры?
Если будет актуально
@@SuprunAlexey думаю многие будут рады
@@SuprunAlexey очень актуально
@@SuprunAlexey конечно актуально
P.s. вроде бы всё понятно, а вроде бы и супер сложно)
Сделала прикольную игрушку на основе вашего видео. Добавила кнопку старт и счёт очков. А так же проплывающие тучки и пролетающих птичек сверху. Спасибо за ваше видео, не знала что на js можно такое делать☺️
джаваскрипoм можно делать такую штучку джаваскрипт очень хороший язык программирование Мне очень понравилось А вы в каком язиком владеете
Не подскажите как вы сделали кнопку старт?
@@mishanris добавь движения кактусов в класс и кнопкой старт навешивай его
@@relaxtime205 ты таджик или ребенок?
@@SNSDfOu одно с другим несовместимо?
Круто, искал недавно видео именно по дино! Огромное спасибо
Класс, должно получится
@@SuprunAlexey
А сделать игру - гонки 2d или псевдо 3d? на ванильном js через канвас?)
@@andreyVinnitskiy долго)
@@SuprunAlexey но было бы интересно что бы ты пошагово объяснял что и как)
Ну ладно, будем ждать и других выпусков!)
@@SuprunAlexey Можете, пожалуйста скинуть исходный код, просто у меня не срабатывает "jump." Я на пробел нажимал и писал очень точно, ни одной ошибки не допустил, но ничего не срабатывает (код пишу в "Sublime Text, а недавно попробовал писать на "Atom"-редакторе")
Спасибо за видео, всё чётко и понятно. Не понятно только откуда дизлайки)
Крутое видео, было оч интересно посмотреть, спасибо )) Не знала про возможность добавления события "keydown"(просто не сталкивалась еще), а все так просто для игры оказалось))
Спасибо за труды и мотивацию)Крутяк,давай усложним её,чтоб Хауди Хо ещё больше нервничал)))А то он свой код вроде не показывал,а для начинающих это не очень)
😃😃😃
Родной след раз , файлы архива из уроки скидывай в описание), чтобы люди повторили твой шедевр и был сэмпл!)
игры на js хорошая тема))
Круто, осталось только статистику писать сколько играл, подпрыгнул. Ну и главное подключить часы, чтобы счетчик шагов считать :)
Еще можно прописать для кактуса рандом.
@@Tranzin40 Интересно, как рандом и статистику сделать?
@@liliyalady7004 ну для рандом функция отдельная. Нужно сделать так что при интервале с рандомной частотой спавнится новый кактус. А счет просто
@@Tranzin40 это пока то для меня космос🙈
@@deleted1000 Можно например создать массив объектов(разные противники), и поместить их в рандом.
Это мой первый код на JS 🎉 Спасибо, учитель 👨🏫
Ура
Как там с продвижением в JS? много уже сделал за 8 месяцев ?
@@armanscription1428 пал в степях Украины
Серьезно?@@SNSDfOu
Великой Украины! повнимательнее будь!@@SNSDfOu
Блин, все, получилось, даже с др картинками! Класс:) а реально замутить типа танчиков, не те что ща все рубятся, а старые желтые, в начале 2000х рубились в школе помню
Спасибо! Я как раз js учу😇 побольше таких!
Класс
как успехи небось уже работаешь?
@@nerofighter472 а у тебя как?Работаешь?)
@@enot85 нет я попал именно в тот момент когда рынок был переполнен прогерами. Приглашали на стажировки не оплачиваемые, но сбережения заканчивались. Работаю архитектором, по профессии.
Я middle front-end dev, смотрю видео и все равно интересно :)
Очень полезно, спасибо большое🙏 я стал чуток умнее
Мужик, ты офигенен, все понятно и увлекательно, только файлы бы прикрепил с картинками)
создавай пожалуйста больше видео про игр на js
Видео очень хорошее
Хах, сделал Динозаврика из счетом, сложностью и забавной анимацией бега)
Буду ждать новую игру)
Очень нужная информация, спасибо)
Спасибо. Очень круто! Все получилось.
Хорошее видео. Сложной показалась концовка с определением Game Over. Ну, это из-за того, что не все перечисленные методы мне знакомы.
Спасибо!
Там все просто
Очень просто и понятно! Спасибо за видеоурок!
как вы добавили фото в папку img?
@@yujjjgg6453 выберите эту папку как путь сохранения фото
ура новый ролик,
но хотелось бы увидеть ролик по сложнее игрой
Сделайте для начала такую
@@SuprunAlexey ну я просто уже делал динозаврика и на мой канал нажмите там увидите какие игры я делал
@@SuprunAlexeyно до 3д и THREE JS еще не дошол
@@SuprunAlexey да вот если бы было бы видео про ИИ то очень круто было бы
Было бы неплохо сделать счётчик очков. А так изучаю сейчас js. Видео интересное.
Вооот как раз сделайте
Спасибо, интересное видео.
Спасибо, все понятно и легко
Круто, все так просто! Теперь го киберпанк делать)))
Видно что кактус появляется не всегда с точки left: 580px ,он постоянно движется и после нажатия всплывающего окна (alert) ,он появляется по таймингу по которому движется. Получается нужно дорабатывать.
Большое спасибо за информативный видеоурок
как добавить фото в папку img
Классно, как и просили! Жаль пропустил премьеру, бабушка есть заставила (
Ну посмотри как освободишься полностью, это обычное видео
Привет бабуле )
Бабушке привет
Раз бабушка, значит ты тоже ребенок😀 Удачи в программировании!
Видео огонь! Спасибо за помощь. Можно ли как то сделать так чтобы игра вплане само действие запускалось по нажатию кнопки? Спасибо
Комментарий в поддержку канала и видео про создание игр на js)
А также можете рассказать какие у Вас плагины в vs code и какие стоит установить для WEB'а?
Спасибо!
Вот видео снимал на эту тему. VS Code топ-10 плагины которые обязательно нужны. LiveServer, Html css support
Можно записать "вводное" видео о Typescript, где и для чего применяется, кому его стоит учить, дальнейшие тенденции и т.п.
Будет
TS - мастхэв на больших проэктах где есть много контрибьюторов. Я считаю стоит учить всем кто планирует двигаться вперёд и работать над крупными проэктами.
Очень круто!!!! Спасибо!!!!
Спасибо круто , все получилось кроме того что почему-то прыжок не срабатывает , хотя класс добавляется ) а так Game Over выводиться .
У меня проблема с анимацией, класс jump появляется, а анимации нет, что делать?
лайк такой видео больше надо!!
Офигеть ты спокойно крутишься))) Я бы с такими завозами уже инсульт словил))))
спасибо большое тебе за ваш труд и контент просто все супер
Спасибо было познавательно, но придумайте примеры которые могли бы объяснить вот эти объекты, функции, методы и переменные JavaScript и показывать как они взаимодействуют друг с другом
Интересно , спасибо
Как раз ждал, спасибо большое! Всего 5 дизлайков, всем зашло. Ещё будут подобные игры на js?
Ну если будут комментарии что нужны, тогда да
@@SuprunAlexey нужны! Хотим ещё игр!
спасибо большое, очень доступно и с описанием !!!
как вы добавили фото в папку img?
Про канвас пожалуст. сделай видос)) Очень нужно, не понятно как и что оно , нужно видео))
Хорошо
Я изучил Html и Css вот начал изучать JS.
Было бы круто самой сделать игру детства - шарики (там, где 5 разноцветных шаров в ряд нужно собрать), только увеличить поле)))
спасибо за урок! отличное видео
Отличный канал! Жалко времени маловато, а то все ролики просмотрел бы!!!
Спасибо за игру!
Всегда пожалуйста
Думаю тема фриланса будет интересна и актуальна, за 2020 год фриланс вырос почти на 250%. Много новичков, которые не знают как начать, что делать, как получить первый заказ и т.п.
Прикольно))) не все конечно прямо чётко понятно ну супер
Интересно!
Добрый день. Подскажите можно ли найти что-то подобное в принципе? Как лучше поступить ? Писать игру с нуля не получится точно!
Простая карточная игра (качество и сложность не важно. лучше что-то по проще..)
HTML, CSS, JS, MySQL
Описание: Регистрация игрока, Минимум два участника
Спасибо
Самое главное знание функций и их предназначений, остальное ходит как по маслу. Но классно когда у тебя память как у древней флешки, обожаю
Ага😅😂
Супер!
Вух, дождался. Думал не дожыву до премьеры (салатиков наелся).
Го ведьмака 3 сразу))
Хахаха ведьмак за 15 минут не пишется, там десятилетия нужны))
@@SuprunAlexey ведьмак не напишется, а вот ведьмачек за часик напишется )
Спасибо! Очень интересно
как добавить фото в папку img
Автор, спасибо очень четко и понятно, получилось все практически с разу.
Супер 👏🏻
как добавить фото в папку img@@SuprunAlexey
Класс продолжай 👍👍
Хмммм....Познавательно, из ничего кое-что сварганить )) Что будет дальше :)
Дальше - больше 😊
@@SuprunAlexey Я бы ещё лучше сделал, я бы сделал так что компьютер САМ посылал когда надо вместо юзера !? Это будет еще интереснее..)) Что скажешь ?
спасибо чел это моя 1 игра усовершенствовал знания дом
Круто! 🙂👍Давай тетрис!!! 😁
Игры на JS это мощь)))
Да это актуально но интересно что то по сложнее типа стратегии какой то или гонки или шутер! Ролик вышел два года назад но щас игры актуальней особенно такие как слоты или колесо фортуны и тп! давай что то свежее и интерестное , думаю не мне одному будет интересно
Спасибо большое!
как добавить фото в папку img
Хотелось-бы увидеть реализацию этой игры через canvas
Ты бы хоть подробнее объяснил как все настроить для начала.
Прикольно, ещё бы рандом на кактус прописать. Лойс.
Можно
Также было бы интересно видео о webpack, а то про Gulp целый плей лист
Буду иметь ввиду
пятнашки в студию)
Спасибо! Младшая дочка радуется, кролик прыгает через крапиву))
Сделал такое у себя на сайте портфолио, только на реакте ) и добавил счётчик и надпись внутри элемента, вместо алерта.
Классно 👍🔥 а как изменить фон? Сделать другую заливку цвета или картинку?
Добавьте эту строку в css для изменения цвета фона:
BODY {
background-color:(Цвет в формате hex);
}
@@FXUNDPLXGG так а нахрена на весь боди фон добавить?! Можно только блок .гейм добавить фон
Четвёртый день как начал изучать , сегодня написал эту игру, только не кактус а Марио)
как вы добавили фото в папку img?
Как урегулировать высоту прыжка?
урок интересный и снято хорошо(а то некоторые не понятно что бубнят) в общем грамотно вам надо бы курсы свои открыть записывать такие видео уроки
как добавить фото в папку img
@@yujjjgg6453 открыл папку да закинул картинки
Недавно написал чат на node js, хотелось бы больше узнать про взаимодействия бекенд и фронтенд
@Данил Мальков Та он вроде про PHP снимал
А можно делать 3D игры похожие на ГТА или пабг мобайл ????
Спасибо за видео Только я место Дино сделал шарик а место кактуса иголку
Идея - динозаврик-мультиплеер!
С рейтингом игроков.
Извините но я не по теме😅
Стоит ли сейчас тратить много времени изучений php что бы создавать любый интернет магазины или же cmc системы как wordpress opencardе можно сделать лучше. И на фрилансе много ли заказов и каких на cmcах илиже на php mysql. Ну что лучше для фриланса. Спс за видео
Если есть желание то почему бы и нет
а ничего,что все твои CMS перечисленные, написаны как раз таки на PHP.
PHP в любом случае нужен будет, поэтому изучай. Для фриланса лучше WordPress, а если хочешь работать на кого-нибудь, то лучше Битрикс, т.к многие крупные проекты на нем разрабатывают.
@@vitalativ-1905 только основы да php а библиотеку для фриланса
Спасибо! Поболбше таких игровых видосов на javascript!!!
Не будете ли вы учить сделать 3D игры на Javascripе? Например на (Unity), Eсть ли ещё фреймворки или библиотеки создания игр для javascript?? Хо
Может через год
@@SuprunAlexeyо пожалуйста ответьте на мой вопрос старый о фреймворках
@@aaaaaaa549 да, есть и их много, при том появляются каждый день. В гугле найдёте
@@SuprunAlexey не мне бывает трудно 1 или два появляется и ещё не на моём уровне
@@aaaaaaa549 ничего страшного
Почему то не считывается нажатие, все сделал как у вас, но всё равно не работает.
Первое знакомство с кодом случилось когда я решил помочь друзьям сделать мод к джава игре Rusted Warfare я ничего не умел, но быстро понял, что можно копировать основу и менять цифры, теперь хочу большего
Копаться в smali ради модифицирования апк тоже тема))
Создайте игру супер Марио...была бы прекрасно...вспомнили бы детство...
Подскажите, пожалуйста, как переписать на React js?
Картинки скачать надо или просто ссылка по url,почему написанно beckraund-image:url ?
Скажите, пожалуйста! Структуру вручную нужно вводить или можно сделать как-то автоматически?
! или
Круто
даже не знаю кем ты вдохновился когда выбрал пример на гугловском динозаврике
Отключением у себя интернета сегодня утром(
На практике игры не пишутся на чистых HTML/CSS/JS. Несмотря на то, что для таких простых случаев решение имеет место быть, на деле сейчас заправляет canvas и хотелось бы посмотреть на реальный и крутой подход к разработке. Просто понять принцип создания игр на canvas без использования движков - вот это вызов, а таким образом игру создать, каким пользуется автор, может почти каждый с 6+ месяцев работы во frontend.
Ну да, я это вначале видео и сказал. На канвасе тоже сделаем, не сомневайтесь)
Когда не создавал style.css и script.js, a добавил теги и )))
Крут
было бы круто ещё добавить счетчик, допустим сколько кактусов перепрыгнул динозаврик
Отлично