Усъвършенствайте уменията си за JavaScript с тези 9 уроци за забавни проекти за игри

Фактът, че 98,4% от всички уебсайтове използват JavaScript, е причината да го знаете като програмист. В ретроспекция създаването на игра с JavaScript не само ви помага да учите бързо. Освен това ви позволява да овладеете как да прилагате неговите прости към сложни концепции в различни ситуации на работното място - независимо дали сте начинаещ или опреснител.

Ако учите по-добре с визуални демонстрации, тези уроци за игри, базирани на JavaScript, в YouTube си заслужават вашето време.

1. Игра на карти с JavaScript

Тази игра на карти с JavaScript с Гавин Лон ви показва как да обръщате карти с над 600 реда JavaScript код. Въпреки че основният фокус е да преподавате JavaScript, вие също ще се научите да комбинирате дизайнерската мощ на CSS с DOM структурирането на HTML, за да постигнете отзивчивост с JavaScript.

Крайната цел на проекта е да се обърнат няколко карти и играчът да познае асото, когато картите най-накрая сменят местата си. Всяка карта е изображение на четири различни роли на карти. Така че, макар че няма да проектирате сами картите, ще се научите да манипулирате техните позиции отзивчиво, да увеличавате рундовете на играта, да добавяте или премахвате резултати при промяна на нивата и да съхранявате резултати от игри в

локално хранилище на браузъра— всички с помощта на JavaScript.

Урокът е поетапен и лесен за следване въпреки тежката работа, която ще вършите зад сцената. Идеален е за начинаещи и освежители. Въпреки че става въпрос за изграждане на игра с карти, тя ви излага на повечето техники за свързване на JavaScript в ситуации от реалния живот. Освен това разкрива способността ви за мислене.

2. 2D Breakout игра с JavaScript

​​​

Ако искате да се научите да контролирате интервалите на действие и да премествате DOM елементи динамично с помощта на JavaScript, Ania Kubów показва колко забавно става с този урок за игра за пробив с помощта на JavaScript. Като плюс, видеото също демонстрира как да хоствате и демонстрирате проекта си пред потенциални работодатели.

Помислете за всяка възможност в игра за пробив; движеща се платформа с топка, удряща стени тангенциално, за да чупи тухли над нея. И вие ще кодирате системата за възнаграждение и в тази. Като цяло, този урок за пробив на играта си заслужава да бъде обмислен, ако искате да изградите нещо от нулата, без да използвате агенти на трети страни или изображения с източник.

Докато свързвате логиката си във функции, видеото учи повече за концепциите за клас и обект на JavaScript в лесни стъпки, включително най-добри практики за условни изявления като превключвателя.

3. JavaScript игра змия

Разгадайте носталгията по играта Snake II на вашия Nokia 3310, като създадете тази игра на змия на JavaScript с Кайл. Вероятно сте играли това преди и вероятно ще го играете още много пъти в живота, тъй като ще кодирате такъв с помощта на ванилен JavaScript.

Докато ви учи да свързвате DOM заедно динамично, това видео демонстрира как можете да създавате и използвате персонализирани модули в JavaScript. Така че отваря възможност за вас да научите за разделянето на притесненията, като използвате принципа не се повтаряйте (DRY).

Зад кулисите ще овладеете по-напреднали концепции на JavaScript. Задачи, включително създаване на мрежа за играчи, поставяне на храна, изграждане на змийско тяло, удължаване на змията, кодиране на навигационна логика, създаване на схема за награди и наказания и контролиране на скоростта на змията, ще ви изложи на ядрото JavaScript.

4. Tic Tac Toe игра с JavaScript

​​​​​

Може би вашият геймплей на Tic Tac Toe се изостря, докато създавате такъв с 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 Mario е всичко, от което се нуждаете, за да потопите главата си в тънкостите на JavaScript. Въпреки че създаването на игра Mario с JavaScript звучи сложно, Крис, вашият учител, показва, че е повече от възможно в този видеоклип в YouTube. Така че може да искате да се забавлявате и да изследвате способността си за критично мислене, като надграждате.

Въпреки че начинаещите може да намерят урока за малко напреднал, той е брилянтен стремеж за опреснители да издигнат уменията си на JavaScript на следващото ниво.

Освен че ще научите за манипулирането на елементи, вие ще използвате силата на чистия JavaScript в изграждането на отзивчив модел на платно за интерфейса на играта, използвайки обектно-ориентирано програмиране (ООП). Тъй като играчът е активно подвижен, приложението на JavaScript контрол на клавиатурата, обработка на събития, цикли, оператори, условия и вградени и персонализирани функции са сред изживяванията между проекти, които ще имате печалба.

8. Изградете Minesweeper с JavaScript

Искате да изследвате силата на рекурсивните функции и масивни методи в умножаването на DOM елементи с JavaScript? Може да искате да започнете с този урок за JavaScript Minesweeper от Ania Kubów в Traversy Media.

Това включва много внимание към детайла. Но това е лесен за начинаещи урок и един от най-добрите, за да обхванете ръцете си около системата за оформление на мрежата с помощта на JavaScript. Крайната цел е да се създаде шаблон на мрежа, където играчите избягват да стъпват върху мина.

Колкото и просто да звучи, ще напишете много програмна логика, включваща повечето основни техники на JavaScript, за да свържете функционалността на играта зад сцената.

9. Урок за JavaScript игра Pokemon с HTML Canvas

Pokemon е един от най-сложните игрални проекти, които можете да създадете с помощта на JavaScript. Въпреки това, ако ви предстоят дълги строги часове на кодиране с JavaScript и сте готови да излезете обновени с повече увереност, по-добре скочете в този урок.

В допълнение към DOM скриптовете и анимацията с JavaScript, видеото ви учи как да премествате и изобразявате активи, включително аудио и изображения, с помощта на JavaScript. Урокът разкрива много неща за JavaScript, които ще намерите за ценни при всякакви проблеми с кодирането в реалния живот.

В допълнение към други основни техники за манипулиране на JavaScript, урокът също така използва широко концепциите на OOPs; това е ценно, ако планирате по-късно да се задълбочите в TypeScript. Един от факторите за опростяване на този урок е как преподавателят очертава задачите.

Лесно е да се оттеглите, когато си представите сложната система, която ще създадете, за да работи това. Но помислете какво ще спечелите в крайна сметка.

Научете приложенията на JavaScript за решаване на проблеми

Игрите използват някои от най-отзивчивите и интуитивни логики в програмирането. Така че си струва да научите JavaScript, като направите такъв. Въпреки че тези уроци са базирани на игри, те ви запознават с основните концепции на JavaScript, приложими към много други проблеми с кодирането, включително уеб разработка и създаване на мобилни приложения. Дори ако планирате по-късно да се обърнете към рамки, ще приложите тези концепции независимо от това.