Affina le tue abilità JavaScript con questi 9 divertenti video tutorial del progetto di gioco

Il fatto che il 98,4% di tutti i siti Web utilizzi JavaScript è il motivo per cui dovresti saperlo come sviluppatore. In retrospettiva, creare un gioco con JavaScript non solo ti aiuta a imparare velocemente. Ti consente inoltre di padroneggiare come applicare i suoi concetti semplici a quelli complessi in diverse situazioni sul lavoro, che tu sia un principiante o un ripasso.

Se impari meglio con le dimostrazioni visive, questi tutorial di giochi basati su JavaScript su YouTube valgono il tuo tempo.

1. Gioco di carte con JavaScript

Questo gioco di carte JavaScript con Gavin Lon ti mostra come girare le carte con oltre 600 righe di codice JavaScript. Sebbene l'obiettivo principale sia insegnare JavaScript, imparerai anche a combinare il potere di progettazione dei CSS con la strutturazione DOM dell'HTML per ottenere reattività con JavaScript.

L'obiettivo finale del progetto è girare un paio di carte e il giocatore indovina l'asso quando le carte finalmente cambiano posto. Ogni carta è un'immagine di quattro diversi ruoli delle carte. Quindi, anche se non disegnerai tu stesso le carte, imparerai a manipolare le loro posizioni in modo reattivo, incrementare i round di gioco, aggiungere o rimuovere punteggi man mano che i livelli cambiano e memorizzare i punteggi di gioco nel

memoria locale del browser—tutto usando JavaScript.

Il tutorial è graduale e facile da seguire nonostante il lavoro pesante che farai dietro le quinte. È perfetto per principianti e rinfrescanti. Sebbene si tratti di costruire un gioco di carte, ti espone alla maggior parte delle tecniche di cablaggio di JavaScript in situazioni di vita reale. Inoltre, svela la tua capacità di riflessione.

2. Gioco di breakout 2D con JavaScript

​​​

Se vuoi imparare a controllare gli intervalli di azione e spostare gli elementi DOM in modo dinamico utilizzando JavaScript, Ania Kubów mostra quanto sia divertente con questo tutorial di breakout game utilizzando JavaScript. Inoltre, il video mostra anche come ospitare e mostrare il tuo progetto a potenziali datori di lavoro.

Pensa a ogni possibilità in un gioco di breakout; una piattaforma mobile con una palla che colpisce i muri tangenzialmente per rompere i mattoni sopra di essa. E codificherai il sistema di ricompensa anche in questo. Nel complesso, vale la pena considerare questo tutorial di breakout game se si desidera creare qualcosa da zero senza utilizzare agenti di terze parti o immagini di provenienza.

Mentre colleghi la tua logica all'interno delle funzioni, il video insegna di più sui concetti di classe e oggetto JavaScript in semplici passaggi, incluso migliori pratiche di dichiarazione condizionale come il quadro elettrico.

3. Gioco del serpente JavaScript

Svela la nostalgia del gioco Snake II del tuo Nokia 3310 costruendo questo gioco serpente JavaScript con Kyle. Probabilmente l'hai già giocato e probabilmente lo giocherai molte più volte nella vita poiché ne codificherai uno usando JavaScript vanilla.

Mentre ti insegna a collegare il DOM in modo dinamico, questo video mostra come creare e utilizzare moduli personalizzati in JavaScript. Quindi ti offre l'opportunità di imparare a separare le preoccupazioni usando il principio di non ripeterti (DRY).

Dietro le quinte, padroneggerai concetti JavaScript più avanzati. Compiti, inclusa la creazione di una griglia del giocatore, il posizionamento del cibo, la costruzione del corpo del serpente, l'allungamento del serpente, la codifica del la logica di navigazione, la creazione di uno schema di premi e penalità e il controllo della velocità del serpente ti esporranno al nucleo javascript.

4. Gioco Tic Tac Toe con JavaScript

​​​​​

Forse il tuo gameplay di Tic Tac Toe si affina mentre ne crei uno con JavaScript in un altro video con Kyle. Questo è un semplice ma prezioso progetto per principianti di JavaScript da sgranocchiare mentre risolverai problemi complessi.

Il video non termina solo con JavaScript. Dimostra anche come afferrare il design dell'interfaccia utente utilizzando i CSS. Con costanza e impegno, in questo video puoi apprendere quasi tutte le tecniche necessarie per iniziare il tuo percorso di sviluppo web.

Durante la manipolazione del DOM con JavaScript, il video avvolge il lavoro pesante attorno alla codifica delle decisioni di vittoria e patta, alla decisione dei turni dei giocatori e all'allineamento degli oggetti. Le funzioni, i loop e le condizioni JavaScript sono alcuni dei concetti avanzati che imparerai in questo video tutorial di JavaScript Tic tac Toe.

5. Far scorrere il gioco di puzzle con JavaScript

I puzzle possono essere impegnativi. Ma crearne uno con JavaScript vanilla sembra un modo divertente per esplorare la tua creatività e apprendere concetti JavaScript di base e complessi.

Vuoi codificare in questo tutorial, se ti piace vedere come utilizzare i concetti JavaScript, inclusi gli interruttori condizionali e la manipolazione dinamica della posizione DOM utilizzando funzioni personalizzate e integrate.

Sebbene il tutor inserisca il codice JavaScript all'interno di un tag di script nel file HTML, puoi inserire il tuo script in un file JavaScript dedicato e collegarlo al DOM nel tuo caso per maggiore chiarezza. Indipendentemente da ciò, è meglio concentrarsi sulla logica di base e sul processo di pensiero per raggiungere il tuo obiettivo, incluso come applicare ciò che impari qui a più scenari di vita reale.

6. Gioco di corse automobilistiche con JavaScript

Costruire un gioco di corse automobilistiche utilizzando JavaScript vanilla potrebbe non fornire il miglior risultato grafico. Ma il cablaggio di un gioco di corse automobilistiche funzionante mentre segui questo tutorial ti insegnerà a sfruttare il potere di infondere funzionalità di JavaScript in qualsiasi applicazione.

Questo tutorial prevede il posizionamento di due auto (una rossa e una blu) su una pista. L'auto blu appare in modo casuale da qualsiasi direzione e il veicolo rosso, che rappresenta il giocatore, cerca di evitare una collisione. Il gioco termina quando c'è contatto tra le due auto.

Sebbene questa sia una semplice descrizione di ciò che costruirai in questo, imparerai alcune logiche avanzate di JavaScript per la manipolazione e lo stile del DOM. Otterrai anche informazioni sugli operatori JavaScript durante la creazione di premi e penalità per i giocatori.

Mentre aggiungi funzionalità alla traccia, alcuni concetti che imparerai includono eventi JavaScript, condizioni, funzioni anonime, animazione JavaScript, controllo dell'intervallo e molti altri.

7. Gioco di Mario con JavaScript

Questo tutorial del gioco JavaScript di Mario è tutto ciò di cui hai bisogno per immergere la testa nel nocciolo di JavaScript. Sebbene creare un gioco di Mario con JavaScript sembri complesso, Chris, il tuo tutor, mostra che è più che possibile in questo video di YouTube. Quindi potresti voler catturare il divertimento ed esplorare la tua capacità di pensiero critico costruendo insieme.

Anche se i principianti potrebbero trovare il tutorial un po' avanzato, è una brillante ricerca di ripasso per portare le loro abilità JavaScript al livello successivo.

Oltre a conoscere le manipolazioni degli elementi, utilizzerai la potenza del puro JavaScript per creare un modello di tela reattivo per l'interfaccia di gioco utilizzando programmazione orientata agli oggetti (OPP). Poiché il giocatore è attivamente mobile, l'applicazione del controllo da tastiera JavaScript, la gestione degli eventi, i loop, operatori, condizioni e funzioni integrate e personalizzate sono tra le esperienze cross-project che farai guadagno.

8. Costruisci Minesweeper con JavaScript

Vuoi esplorare la potenza delle funzioni ricorsive e metodi di matrice nel moltiplicare gli elementi DOM con JavaScript? Potresti voler iniziare con questo tutorial JavaScript Minesweeper di Ania Kubów su Traversy Media.

Implica molta attenzione ai dettagli. Ma è un tutorial per principianti e uno dei migliori per mettere le mani sul sistema di layout della griglia usando JavaScript. L'obiettivo finale è creare un modello di griglia in cui i giocatori evitino di calpestare una mina.

Per quanto semplice possa sembrare, scriverai molta logica di programmazione che coinvolge la maggior parte delle tecniche di base di JavaScript per collegare le funzionalità del gioco dietro le quinte.

9. Tutorial di gioco Pokemon JavaScript con tela HTML

Pokemon è uno dei progetti di gioco più complessi che puoi creare utilizzando JavaScript. Tuttavia, se sei impegnato in lunghe e rigorose ore di codifica con JavaScript e sei pronto per uscirne rinnovato con maggiore sicurezza, è meglio che ti immergi in questo tutorial.

Oltre allo scripting DOM e all'animazione con JavaScript, il video ti insegna come spostare e rendere le risorse, inclusi audio e immagini, utilizzando JavaScript. C'è molto che il tutorial svela su JavaScript che troverai prezioso in qualsiasi problema di codifica nella vita reale.

Oltre ad altre tecniche di manipolazione JavaScript di base, il tutorial utilizza pesantemente anche i concetti OOP; questo è prezioso se prevedi di approfondire in seguito TypeScript. Uno dei fattori di semplificazione di questo tutorial è il modo in cui il tutor delinea i compiti.

È facile tirarsi indietro quando immagini il complesso sistema che creerai per far funzionare tutto questo. Ma pensa a cosa ci guadagnerai alla fine.

Scopri le applicazioni per la risoluzione dei problemi di JavaScript

I giochi utilizzano alcune delle logiche più reattive e intuitive nella programmazione. Quindi vale la pena imparare JavaScript creandone uno. Sebbene questi tutorial siano basati sui giochi, ti espongono ai concetti fondamentali di JavaScript applicabili a molti altri problemi di codifica, tra cui lo sviluppo web e la creazione di app per dispositivi mobili. Anche se prevedi di passare in seguito ai framework, applicherai questi concetti a prescindere.