Share
In questo tutorial creeremo un clone del gioco classico, Pong, in HTML5, usando la libreria EaselJS. Il gioco avrà più schermi, effetti sonori e un (molto semplice) avversario IA.
Usando la grafica pre-creata codificheremo un divertente pong gioco in HTML5 usando la libreria EaselJS, che fornisce un'interfaccia simile a Flash per il canvas HTML5. Per un'introduzione a EaselJS, consulta questo articolo di Activetuts +.
Il giocatore sarà in grado di controllare una pagaia usando il mouse e giocare contro l'avversario del controllore del computer per ottenere punti.
Verrà utilizzata una semplice interfaccia con uno stile neo-futuristico; questo comporta più forme, pulsanti, bitmap e altro ancora.
La grafica richiesta per questo tutorial è disponibile nel download allegato.
La libreria EaselJS verrà utilizzata per costruire il nostro gioco, assicurati di leggere il Iniziare tutorial se sei nuovo in questa libreria.
Puoi scaricare l'ultima versione di EaselJS dal suo sito ufficiale. Tuttavia, questo potrebbe essere incompatibile con il codice qui, quindi suggerisco di usare la versione della libreria che è inclusa nel download del codice sorgente.
Prepariamo il nostro documento HTML. Inizieremo con le nozioni di base, solo uno schema essenziale:
pong
Dobbiamo aggiungere anche un po 'di CSS, per rimuovere l'evidenziazione predefinita che viene applicata quando si tocca un elemento in un browser mobile. Senza questo, l'esperienza mobile diminuirebbe drasticamente.
pong
Il codice seguente aggiunge le librerie javascript necessarie affinché la nostra app funzioni.
pong /
Oltre a EaselJS, utilizzeremo anche TweenJS (per gestire le transizioni dello schermo e il loop di gioco) e SoundJS (per gli effetti sonori).
main.js è il file che useremo per contenere il nostro codice JS.
Nelle linee successive chiamiamo il nostro Principale() funzione. Questa è la funzione che avvierà la nostra applicazione; verrà creato in seguito nel tutorial, all'interno main.js.
pong
Una tela HTML5 viene creata in questa linea; assegniamo un ID in modo che possiamo fare riferimento in seguito e impostare anche la sua larghezza e altezza.
pong
Iniziamo la nostra creazione del gioco!
Apri il tuo editor JavaScript preferito (qualsiasi editor di testo funzionerà, ma non avrai l'evidenziazione della sintassi) e preparati a scrivere il codice. Ricordarsi di salvare il file come main.js nella cartella del tuo progetto.
Inizieremo definendo tutte le variabili grafiche e logiche.
Le successive variabili rappresentano l'elemento canvas HTML e lo stage che sarà collegato ad esso. Il palcoscenico la variabile si comporterà in modo simile allo stadio AS3.
/ * Definisci canvas * / var canvas; palco var;
Questa variabile memorizza l'immagine di sfondo del titolo.
/ * Sfondo * / var bgImg = nuova immagine (); var bg;
Questa è la Vista Titolo, la prima schermata interattiva a comparire nel nostro gioco. Queste variabili memorizzano i suoi componenti.
/ * Vista titolo * / var mainImg = nuova immagine (); var principale; var startBImg = new Image (); var startB; var creditsBImg = new Image (); var creditsB; var TitleView = new Container ();
Questa vista mostrerà i crediti, l'anno e il copyright del gioco, queste variabili saranno utilizzate per memorizzarlo.
/ * Credits * / var creditsViewImg = new Image (); var credits;
Le prossime variabili memorizzano le singole immagini che appaiono nella vista di gioco:
/ * Vista di gioco * / var playerImg = new Image (); giocatore di var; var ballImg = new Image (); palla var; var cpuImg = new Image (); var cpu; var winImg = new Image (); var vince; var loseImg = new Image (); var perdere;
I valori del punteggio saranno gestiti dalle seguenti variabili:
/ * Punteggio * / var playerScore; var cpuScore;
Queste sono le variabili che useremo, leggere i commenti nel codice per capire a cosa servono:
var xSpeed = 5; // Velocità orizzontale della palla var ySpeed = 5; // Velocità verticale della palla var gfxLoaded = 0; // usato come preloader, conta gli elementi già caricati var tkr = new Object; // usato come listener di eventi per il Ticker
Useremo effetti sonori per migliorare la sensazione del gioco. I suoni in questo esempio sono stati creati usando l'eccellente strumento gratuito as3sfxr e convertito in MP3 usando Audacity.
I suoni richiesti possono essere trovati nel download sorgente. Se vuoi crearne uno, avrai bisogno di quattro:
Accentsconagua
hit.mp3: giocato quando la palla colpisce una pagaiaplayerScore.mp3: giocato quando il giocatore segnaenemyScore.mp3: giocato quando il nemico segnawall.mp3: giocato quando la palla colpisce il limite superiore o inferioreIl Principale() la funzione sarà la prima ad essere eseguita quando la pagina web viene caricata, perché viene indicata nel file onload attributo del documento HTML (vedi passaggio 7).
Chiamerà le funzioni necessarie per iniziare il gioco.
function Main () // code ...
Questo codice ottiene l'ID canvas HTML e lo collega alla classe Stage di EaselJS. Questo farà sì che la variabile stage si comporti come la stage class di AS3. Aggiungi questo a Principale().
/ * Link Canvas * / canvas = document.getElementById ('Pong'); stage = new Stage (canvas); Gli eventi del mouse sono disabilitati per impostazione predefinita in EaselJS per migliorare le prestazioni. Dal momento che abbiamo bisogno di quelli nel gioco, aggiungiamo la seguente riga. Aggiungi questo a Principale().
stage.mouseEventsEnabled = true;
Useremo SoundJS per aggiungere suoni al nostro gioco; scrivi il seguente codice per importare i suoni che useremo. Aggiungi questo a Principale().
/ * Sound * / SoundJS.addBatch ([name: 'hit', src: 'hit.mp3', istanze: 1, nome: 'playerScore', src: 'playerScore.mp3', istanze: 1, name: 'enemyScore', src: 'enemyScore.mp3', istanze: 1, nome: 'wall', src: 'wall.mp3', istanze: 1]);
Questo codice è usato per precaricare la grafica, con l'aiuto di una funzione che scriveremo in seguito. Imposta gli oggetti immagine che abbiamo creato in precedenza per puntare ai file PNG sorgente rilevanti nella nostra cartella documenti.
A ciascuno viene dato un nome, in modo che possiamo rilevare quale immagine viene caricata in seguito, e infine viene chiamata la funzione che gestisce le immagini caricate.
Aggiungi questo a Principale().
/ * Carica GFX * / bgImg.src = 'bg.png'; bgImg.name = 'bg'; bgImg.onload = loadGfx; mainImg.src = 'main.png'; mainImg.name = 'main'; mainImg.onload = loadGfx; startBImg.src = 'startB.png'; startBImg.name = 'startB'; startBImg.onload = loadGfx; creditsBImg.src = 'creditsB.png'; creditsBImg.name = 'creditsB'; creditsBImg.onload = loadGfx; creditsViewImg.src = 'credits.png'; creditsViewImg.name = 'crediti'; creditsViewImg.onload = loadGfx; playerImg.src = 'paddle.png'; playerImg.name = 'player'; playerImg.onload = loadGfx; ballImg.src = 'ball.png'; ballImg.name = 'palla'; ballImg.onload = loadGfx; cpuImg.src = 'paddle.png'; cpuImg.name = 'cpu'; cpuImg.onload = loadGfx; winImg.src = 'win.png'; winImg.name = 'vinci'; winImg.onload = loadGfx; loseImg.src = 'lose.png'; loseImg.name = 'perdere'; loseImg.onload = loadGfx;
La classe Ticker fornisce una frequenza centralizzata di tick o heartbeat a intervalli regolari. Questo può essere usato per attivare il ciclo di gioco.
Il codice seguente imposta il frame rate su 30 e definisce lo stage come listener per i tick.
La classe TweenJS ascolterà questo segno di spunta per eseguire le animazioni. Aggiungi questo a Principale().
/ * Ticker * / Ticker.setFPS (30); Ticker.addListener (fase);
Ogni volta che viene caricato un grafico, questa funzione verrà eseguita. Assegna ogni immagine a un oggetto bitmap e controlla che tutti gli elementi siano caricati prima di procedere.
function loadGfx (e) if (e.target.name = 'bg') bg = new Bitmap (bgImg); if (e.target.name = 'main') main = new Bitmap (mainImg); if (e.target.name = 'startB') startB = new Bitmap (startBImg); if (e.target.name = 'creditsB') creditsB = new Bitmap (creditsBImg); if (e.target. name = 'credits') credits = new Bitmap (creditsViewImg); if (e.target.name = 'player') player = new Bitmap (playerImg); if (e.target.name = 'ball') ball = new Bitmap (ballImg); if (e.target.name = 'cpu') cpu = new Bitmap (cpuImg); if (e.target.name = 'win') win = new Bitmap ( winImg); if (e.target.name = 'lose') lose = new Bitmap (loseImg); gfxLoaded ++; if (gfxLoaded == 10) // ricorda di cambiare questo se aggiungi altre immagini addTitleView ();
Quando tutti i grafici sono stati caricati, la Vista Titolo viene aggiunta allo stage con la seguente funzione:
function addTitleView () startB.x = 240 - 31,5; startB.y = 160; startB.name = 'startB'; creditsB.x = 241 - 42; creditiB.y = 200; TitleView.addChild (main, startB, creditsB); stage.addChild (bg, TitleView); stage.update ();
Questa funzione aggiunge gli ascoltatori necessari a TitleView pulsanti (fa parte di addTitleView ()):
startB.onPress = addGameView; creditsB.onPress = showCredits;
Il Titoli di coda la schermata viene visualizzata quando l'utente fa clic sul pulsante dei crediti; un ascoltatore del mouse viene aggiunto all'immagine completa per rimuoverlo.
function showCredits () // Mostra crediti credits.x = 480; stage.addChild (crediti); stage.update (); Tween.get (crediti) .to (x: 0, 300); credits.onPress = hideCredits;
Quando il Titoli di coda viene cliccato sullo schermo, verrà interrotto e rimosso dallo stage.
// Nascondi la funzione Credits hideCredits (e) Tween.get (credits) .to (x: 480, 300) .call (rmvCredits); // Remove Credits function rmvCredits () stage.removeChild (credits);
Fermiamoci qui per testare ciò che abbiamo fatto finora. Clicca qui per una demo milestone.
Tieni presente che alcune righe sono state commentate perché alcune funzioni non sono ancora state create.
Ricorda che la milestone è inclusa nei file sorgente, quindi se per qualche motivo il tuo file non imita questo, confronta la tua sorgente con la mia per vedere cosa potrebbe causare.
Le seguenti righe rimuovono il TitleView dal palco e aggiunge il GameView oggetti sul palco. Un ascoltatore del mouse viene aggiunto allo sfondo, per avviare il gioco quando si fa clic.
function addGameView () // Destroy Menu & Credits screen stage.removeChild (TitleView); TitleView = null; crediti = null; // Aggiungi Game View player.x = 2; player.y = 160 - 37,5; cpu.x = 480 - 25; cpu.y = 160 - 37,5; ball.x = 240 - 15; ball.y = 160 - 15; // Score playerScore = new Text ('0', 'bold 20px Arial', '# A3FF24'); playerScore.maxWidth = 1000; // fix per Chrome 17 playerScore.x = 211; playerScore.y = 20; cpuScore = new Text ('0', 'grassetto 20px Arial', '# A3FF24'); cpuScore.maxWidth = 1000; // correzione per Chrome 17 cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, player, cpu, ball); stage.update (); // Inizia listener bg.onPress = startGame; Il giocatore si muoverà insieme alla posizione verticale del mouse:
function movePaddle (e) // Mouse Movement player.y = e.stageY;
Questo codice viene eseguito quando il giocatore fa clic sullo sfondo del gioco, aggiunge l'ascoltatore del mouse che attiva la funzione nel passaggio precedente e aggiunge un Ticker per controllare il ciclo di gioco.
Presta attenzione al modo in cui viene creato il ticker: è l'equivalente di un evento Timer in AS3.
function startGame (e) bg.onPress = null; stage.onMouseMove = movePaddle; Ticker.addListener (tkr, false); tkr.tick = aggiornamento;
Quando viene segnato un punto (dal giocatore o dal computer), i paddle e la palla ritornano alle loro posizioni originali e il gioco sarà sospeso:
function reset () ball.x = 240 - 15; ball.y = 160 - 15; player.y = 160 - 37,5; cpu.y = 160 - 37,5; stage.onMouseMove = null; // smettere di ascoltare il mouse Ticker.removeListener (tkr); // mette in pausa il gioco bg.onPress = startGame;
Se il gioco non è in pausa, la palla verrà spostata su ogni fotogramma usando le variabili che abbiamo creato prima.
function update () // Ball Movement ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed;
Questo codice controlla il movimento del computer; la pagaia viene spostata in modo che segua la palla pur mantenendo un margine di errore.
if (cpu.y < ball.y) cpu.y = cpu.y + 2.5; else if(cpu.y > ball.y) cpu.y = cpu.y - 2.5;
Qui controlliamo se la palla si trova sul bordo superiore o inferiore della tela; in tal caso, la velocità verticale viene invertita e viene riprodotto un suono.
if ((ball.y) < 0) ySpeed = -ySpeed; SoundJS.play('wall');;//Up if((ball.y + (30)) > 320) ySpeed = -ySpeed; SoundJS.play ( 'muro');; // giù Ora i lati sinistro e destro. Questo codice modifica anche il punteggio, chiama la funzione di ripristino e riproduce un suono diverso a seconda del lato toccato dalla palla.
/ * Punteggio CPU * / se ((ball.x) < 0) xSpeed = -xSpeed; cpuScore.text = parseInt(cpuScore.text + 1); reset(); SoundJS.play('enemyScore'); /* Player Score */ if((ball.x + (30)) > 480) xSpeed = -xSpeed; playerScore.text = parseInt (playerScore.text + 1); reset(); SoundJS.play ( 'playerScore'); Il seguente codice controlla se la palla è in collisione con una pagaia, confrontando la posizione della pagaia con le coordinate della palla. Se i riquadri di delimitazione dei due si intersecano, c'è una collisione, quindi invertiamo la velocità x della palla e suoniamo un suono.
/ * Collisione della CPU * / if (ball.x + 30> cpu.x && ball.x + 30 < cpu.x + 22 && ball.y >= cpu.y && ball.y < cpu.y + 75) xSpeed *= -1; SoundJS.play('hit'); /* Player collision */ if(ball.x <= player.x + 22 && ball.x > player.x && ball.y> = player.y && ball.y < player.y + 75) xSpeed *= -1; SoundJS.play('hit'); È possibile modificare la condizione finale nelle righe successive: è impostata su 10 punti per impostazione predefinita.
/ * Controlla per Win * / if (playerScore.text == '10') alert ('vinci'); / * Verifica Game Over * / if (cpuScore.text == '10') alert ('lose'); Questa funzione interrompe il gioco e mostra un avviso, il cui contenuto dipende dal risultato del gioco.
funzione alert (e) Ticker.removeListener (tkr); stage.onMouseMove = null; bg.onPress = null if (e == 'win') win.x = 140; win.y = -90; stage.addChild (vittoria); Tween.get (win) .to (y: 115, 300); else lose.x = 140; lose.y = -90; stage.addChild (perdere); Tween.get (perde) .to (y: 115, 300);
Salva il tuo lavoro (se non lo hai) e apri il file HTML nel browser per vedere come funziona il tuo gioco!
Prova a modificare le variabili del gioco per creare la tua versione del gioco!
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
