Создавая эти забавные игровые проекты, вы можете сделать программирование менее утомительным и в то же время отточить свои навыки.
Тот факт, что 98,4% всех веб-сайтов используют JavaScript, является причиной того, что вы должны знать его как разработчик. Оглядываясь назад, создание игры с помощью JavaScript не только помогает вам быстро учиться. Он также позволяет вам научиться применять его простые и сложные концепции в различных ситуациях на рабочем месте — независимо от того, являетесь ли вы новичком или переподготовкой.
Если вы лучше учитесь с помощью наглядных демонстраций, эти учебные пособия по играм на основе JavaScript на YouTube стоят вашего времени.
1. Карточная игра с JavaScript
Эта карточная игра на JavaScript с Гэвином Лоном покажет вам, как переворачивать карты, используя более 600 строк кода JavaScript. Хотя основное внимание уделяется обучению JavaScript, вы также научитесь сочетать возможности проектирования CSS со структурированием DOM HTML для достижения скорости отклика с помощью JavaScript.
Конечная цель проекта — перевернуть пару карт, и игрок угадывает туза, когда карты, наконец, меняются местами. Каждая карта представляет собой изображение четырех разных карточных ролей. Таким образом, хотя вы и не будете создавать карты самостоятельно, вы научитесь оперативно манипулировать их положением, увеличивать количество раундов игры, добавлять или удалять очки по мере изменения уровней и сохранять игровые очки в памяти. локальное хранилище браузера— все с использованием JavaScript.
Учебник поэтапный, и ему легко следовать, несмотря на тяжелую работу, которую вы будете делать за сценой. Это идеально подходит для начинающих и переподготовки. Хотя речь идет о создании карточной игры, она знакомит вас с большинством методов связывания JavaScript в реальных ситуациях. Кроме того, это распутывает вашу способность мыслить.
2. 2D-игра прорыва с JavaScript
Если вы хотите научиться управлять интервалами действий и динамически перемещать элементы DOM с помощью JavaScript, Аня Кубов покажет, как это весело, с помощью этого учебного руководства по игре с использованием JavaScript. Кроме того, видео также демонстрирует, как разместить и продемонстрировать ваш проект потенциальным работодателям.
Подумайте о каждой возможности в игре прорыва; движущаяся платформа с мячом, ударяющимся о стены по касательной, чтобы разбить кирпичи над ней. И вы также закодируете систему вознаграждения в этом. В целом, это учебное пособие по игре стоит рассмотреть, если вы хотите создать что-то с нуля, не используя сторонних агентов или исходные изображения.
При подключении вашей логики к функциям видео рассказывает больше о концепциях классов и объектов JavaScript в простых шагах, в том числе лучшие практики условного оператора как случай переключателя.
3. Змейка на JavaScript
Развейте ностальгию по игре Snake II для Nokia 3310, создав эту игру JavaScript с Кайлом. Вы, вероятно, играли в нее раньше и, вероятно, будете играть еще много раз в жизни, поскольку вы будете кодировать ее с помощью ванильного JavaScript.
В этом видео показано, как вы можете создавать и использовать пользовательские модули в JavaScript, обучая вас динамическому связыванию DOM. Таким образом, это открывает для вас возможность научиться разделять проблемы, используя принцип «не повторяйся» (DRY).
За кулисами вы освоите более сложные концепции JavaScript. Задачи, в том числе создание сетки игрока, размещение еды, построение тела змеи, удлинение змеи, кодирование логика навигации, создание схемы вознаграждения и штрафа, а также контроль скорости змеи откроют для вас суть JavaScript.
4. Крестики-нолики с JavaScript
Возможно, ваш игровой процесс в крестики-нолики станет отточенным, когда вы создадите его с помощью JavaScript в другом видео с Кайлом. Это простой, но ценный проект для начинающих JavaScript жевать, как вы будете решать сложные проблемы.
Видео не заканчивается только JavaScript. Он также демонстрирует, как реализовать дизайн пользовательского интерфейса с помощью CSS. С последовательностью и приверженностью вы можете изучить почти все методы, необходимые для начала вашего путешествия в веб-разработку, в этом видео.
Манипулируя DOM с помощью JavaScript, видео оборачивает тяжелую работу вокруг кодирования решений о победе и ничьей, определении хода игроков и выравнивании объектов. Функции, циклы и условия JavaScript — это некоторые из продвинутых понятий, которые вы изучите в этом обучающем видео JavaScript Tic Tac Toe.
5. Слайд-головоломка с JavaScript
Головоломки могут заставить задуматься. Но создание одного с помощью ванильного JavaScript звучит как интересный способ исследовать свои творческие способности и изучить базовые и сложные концепции JavaScript.
Вы хотите кодировать в этом руководстве, если хотите увидеть, как использовать концепции JavaScript, включая условные переключатели и динамическое управление положением DOM с использованием пользовательских и встроенных функций.
Хотя репетитор помещает JavaScript в тег скрипта в HTML-файле, вы можете поместить свой скрипт в специальный файл JavaScript и связать его с DOM в вашем случае для ясности. В любом случае, для достижения цели лучше сосредоточиться на основной логике и мыслительном процессе, в том числе на том, как применить то, что вы узнаете здесь, к более реальным сценариям.
6. Гоночная игра с JavaScript
Создание гоночной игры с использованием ванильного JavaScript может не дать наилучшего графического результата. Но создание работающей гоночной игры, следуя этому руководству, научит вас использовать функциональные возможности JavaScript в любом приложении.
В этом руководстве вы поместите две машины (красную и синюю) на гоночную трассу. Синий автомобиль появляется случайным образом с любого направления, а красный автомобиль, представляющий игрока, пытается избежать столкновения. Игра заканчивается, когда происходит контакт между обеими машинами.
Хотя это простое описание того, что вы создадите в этой статье, вы изучите некоторую расширенную логику JavaScript для манипулирования DOM и стилей. Вы также получите представление об операторах JavaScript при создании вознаграждений и штрафов для игроков.
Добавляя функциональные возможности в трек, некоторые концепции, которые вы изучите, включают события JavaScript, условия, анонимные функции, анимацию JavaScript, управление интервалами и многое другое.
7. Игра Марио с JavaScript
Это руководство по игре Марио на JavaScript — все, что вам нужно, чтобы погрузиться в азы JavaScript. Хотя создание игры про Марио с помощью JavaScript кажется сложным, Крис, ваш наставник, показывает, что это более чем возможно, в этом видео на YouTube. Таким образом, вы можете захотеть повеселиться и изучить свои способности критического мышления, работая вместе с ними.
Хотя новичкам это руководство может показаться немного продвинутым, для новичков это отличный квест, который поможет им поднять свои навыки JavaScript на новый уровень.
Помимо изучения манипуляций с элементами, вы будете использовать возможности чистого JavaScript для создания адаптивного шаблона холста для игрового интерфейса с помощью объектно-ориентированного программирования (ООП). Поскольку игрок активно двигается, применение управления клавиатурой JavaScript, обработка событий, циклы, операторы, условия, а также встроенные и настраиваемые функции — все это относится к межпроектным возможностям, которые вы прирост.
8. Создайте сапера с помощью JavaScript
Хотите изучить возможности рекурсивных функций и методы массива в умножении элементов DOM с помощью JavaScript? Вы можете начать с этого учебника JavaScript Minesweeper от Ania Kubów на Traversy Media.
Это требует большого внимания к деталям. Но это учебник для начинающих и один из лучших, чтобы освоить систему компоновки сетки с использованием JavaScript. Конечная цель — создать шаблон сетки, в котором игроки не наступят на мину.
Как бы просто это ни звучало, вы напишете много логики программирования, используя большинство основных методов JavaScript, чтобы связать функциональность игры за кулисами.
9. Учебник по игре Pokemon JavaScript с HTML Canvas
Pokemon — один из самых сложных игровых проектов, которые вы можете создать с помощью JavaScript. Однако, если вам предстоит долгие часы напряженного программирования с помощью JavaScript и вы готовы выйти обновленным с большей уверенностью, вам лучше перейти к этому руководству.
В дополнение к сценариям DOM и анимации с помощью JavaScript, видео учит вас, как перемещать и отображать активы, включая аудио и изображения, с помощью JavaScript. В этом руководстве рассказывается многое о JavaScript, что вы найдете ценным в любых реальных проблемах кодирования.
В дополнение к другим основным методам манипулирования JavaScript, в учебнике также широко используются концепции ООП; это полезно, если вы планируете позже углубиться в TypeScript. Одним из факторов, упрощающих этот учебник, является то, как преподаватель описывает задачи.
Легко отказаться, когда вы представляете сложную систему, которую вы создадите, чтобы заставить эту работу работать. Но подумайте о том, что вы получите в итоге.
Изучите приложения JavaScript для решения проблем
В играх используется одна из самых отзывчивых и интуитивно понятных логик программирования. Поэтому стоит изучить JavaScript, создав его. Хотя эти учебные пособия основаны на играх, они знакомят вас с основными концепциями JavaScript, применимыми ко многим другим проблемам кодирования, включая веб-разработку и создание мобильных приложений. Даже если вы планируете позже обратиться к фреймворкам, вы все равно будете применять эти концепции.
