Share
Il web si muove velocemente, così veloce che il nostro tutorial EaselJS originale è già obsoleto! In questo tutorial, imparerai come utilizzare la nuovissima suite CreateJS creando un semplice clone Pong.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Clicca per giocare
Questo tutorial si basa sul gioco Create a Pong di Carlos Yanez in HTML5 con EaselJS, che a sua volta si basa sulla guida introduttiva di EaselJS. La grafica e gli effetti sonori sono tutti presi dal precedente tutorial.
Accentsconagua
index.html Questo sarà il nostro principale index.html file:
pong
Come puoi vedere, è piuttosto breve e consiste principalmente nel caricare le librerie di CreateJS.
Dal rilascio di CreateJS (che raggruppa sostanzialmente tutte le librerie EaselJS separate) non è più necessario scaricare i file JS e ospitarli sul nostro sito Web; i file sono ora collocati in una rete CDN (Content Delivery Network) che ci consente di caricare questi file da remoto il più rapidamente possibile.
Rivediamo il codice:
Questa linea rimuove l'evidenziazione mobile che può apparire quando si tenta di giocare sul cellulare. (L'evidenziazione mobile fa in modo che l'oggetto canvas venga evidenziato e quindi ignora i movimenti delle dita.)
Quindi, abbiamo il caricamento delle librerie di CreateJS:>
Questo codice carica i file JS dal CDN di CreateJS e sostanzialmente ci consente di utilizzare qualsiasi funzione di CreateJS nel nostro codice
Successivamente, verrà caricato il plug-in SoundJS Flash, che fornisce supporto audio per i browser che non supportano l'audio HTML5. Questo viene fatto usando un SWF (un oggetto Flash) per caricare i suoni.
In questo caso non useremo il CDN; invece, scaricheremo la libreria SoundJS da http://createjs.com/#!/SoundJS/download e posizioneremo il soundjs.flashplugin-0.2.0.min.js e FlashAudioPlugin.swf file in una cartella locale di nome risorse.
Ultimo tra i file JS, verrà caricato il file main.js file che conterrà tutto il codice del nostro gioco:
Infine, posizioniamo un oggetto Canvas sul nostro palco.
Ora possiamo iniziare a lavorare sul codice del gioco.
Il nostro codice di gioco sarà all'interno di un file chiamato main.js, quindi crea e salva questo ora.
Prima di tutto, definiamo le variabili per tutti gli oggetti grafici nel gioco:
tela var; // sarà collegato alla tela nella nostra pagina index.html var stage; // È l'equivalente di stage in AS3; aggiungeremo "figli" ad esso // Grafica // [Sfondo] var bg; // Il grafico sullo sfondo // [Vista Titolo] var main; // Lo sfondo principale var startB; // Il pulsante Start nel menu principale var creditsB; // Il pulsante crediti nel menu principale // [Crediti] var credits; // Lo schermo dei crediti // [Game View] var player; // Il giocatore pagaia grafica palla var; // Il grafico della palla var cpu; // Il paddle CPU var vince; // Il popup vincente var perde; // Il popup perdente
Ho aggiunto un commento per ogni variabile in modo che tu sappia cosa caricheremo in quella variabile
Avanti, i punteggi:
// [Score] var playerScore; // Il punteggio giocatore principale var cpuScore; // Il punteggio CPU var cpuSpeed = 6; // La velocità della paddle della CPU; più velocemente è il più difficile è il gioco
Avremo bisogno di variabili per la velocità della palla:
// Variabili var xSpeed = 5; var ySpeed = 5;
Puoi modificare questi valori in qualsiasi modo desideri, se desideri rendere il gioco più facile o più difficile.
Se sei uno sviluppatore Flash, sai che Flash onEnterFrame è molto utile quando si creano giochi, poiché ci sono cose che devono accadere in ogni fotogramma dato. (Se non hai familiarità con questa idea, dai un'occhiata a questo articolo sul Game Loop.)
Abbiamo un equivalente per onEnterFrame in CreateJS, e questo è il telescrivente oggetto, che può eseguire il codice ogni frazione di secondo. Creiamo la variabile che si collegherà ad essa:
var tkr = new Object;
Successivamente abbiamo il preloader, che utilizzerà i nuovi metodi PreloadJS.
// preloader var preloader; var manifest; var totalLoaded = 0;
preloader - conterrà l'oggetto PreloadJS.manifesto - terremo l'elenco dei file che dobbiamo caricare.totalLoaded - questa variabile manterrà il numero di file già caricati.Ultimo ma non meno importante nel nostro elenco di variabili, abbiamo TitleView, che conterrà diversi elementi grafici all'interno per visualizzarli insieme (come un Flash DisplayObjectContainer).
var TitleView = new Container ();
Passiamo alla funzione principale ...
Questa funzione è la prima funzione che viene eseguita dopo tutti i file JS dal index.html sono caricati Ma come si chiama questa funzione?
Bene, ricorda questa linea dal index.html file?
Questo snippet di codice indica che una volta caricate le librerie HTML (e JS), il file Principale la funzione dovrebbe essere eseguita.
Rivediamo:
funzione Main () / * Link Canvas * / canvas = document.getElementById ('PongStage'); stage = new Stage (canvas); stage.mouseEventsEnabled = true; / * Imposta Flash Plugin per i browser che non supportano SoundJS * / SoundJS.FlashPlugin.BASE_PATH = "assets /"; if (! SoundJS.checkPlugin (true)) alert ("Errore!"); ritorno; manifest = [src: "bg.png", id: "bg", src: "main.png", id: "main", src: "startB.png", id: "startB" , src: "creditsB.png", id: "creditsB", src: "credits.png", id: "credits", src: "paddle.png", id: "cpu", src: "paddle.png", id: "player", src: "ball.png", id: "ball", src: "win.png", id: "win", src : "lose.png", id: "lose", src: "playerScore.mp3 | playerScore.ogg", id: "playerScore", src: "enemyScore.mp3 | enemyScore.ogg", id: " enemyScore ", src:" hit.mp3 | hit.ogg ", id:" hit ", src:" wall.mp3 | wall.ogg ", id:" wall "]; preloader = new PreloadJS (); preloader.installPlugin (SoundJS); preloader.onProgress = handleProgress; preloader.onComplete = handleComplete; preloader.onFileLoad = handleFileLoad; preloader.loadManifest (manifesto); / * Ticker * / Ticker.setFPS (30); Ticker.addListener (fase); Analizziamo ogni parte:
canvas = document.getElementById ('PongStage'); stage = new Stage (canvas); stage.mouseEventsEnabled = true; Qui colleghiamo il PongStage Tela oggetto dal index.html file sulla variabile canvas, quindi creare un oggetto Stage da tale canvas. (Il palco ci permetterà di posizionarci sopra degli oggetti).
mouseEventsEnabled ci consente di utilizzare gli eventi del mouse, in modo da poter rilevare i movimenti e i clic del mouse.
/ * Imposta Flash Plugin per i browser che non supportano SoundJS * / SoundJS.FlashPlugin.BASE_PATH = "assets /"; if (! SoundJS.checkPlugin (true)) alert ("Errore!"); ritorno; Qui configuriamo dove risiede il plug-in audio di Flash per quei browser in cui l'audio HTML5 non è supportato
manifest = [src: "bg.png", id: "bg", src: "main.png", id: "main", src: "startB.png", id: "startB" , src: "creditsB.png", id: "creditsB", src: "credits.png", id: "credits", src: "paddle.png", id: "cpu", src: "paddle.png", id: "player", src: "ball.png", id: "ball", src: "win.png", id: "win", src: "lose.png", id: "lose", src: "playerScore.mp3 | playerScore.ogg", id: "playerScore", src: "enemyScore.mp3 | enemyScore.ogg", id: "enemyScore ", src:" hit.mp3 | hit.ogg ", id:" hit ", src:" wall.mp3 | wall.ogg ", id:" wall "];
Nella variabile manifest posizioniamo una serie di file che vogliamo caricare (e fornire un ID univoco per ognuno). Ogni suono ha due formati - MP3 e OGG - perché i diversi browser sono (in) compatibili con diversi formati.
preloader = new PreloadJS (); preloader.installPlugin (SoundJS); preloader.onProgress = handleProgress; preloader.onComplete = handleComplete; preloader.onFileLoad = handleFileLoad; preloader.loadManifest (manifesto);
Qui configuriamo l'oggetto preloader usando PreloadJS. PreloadJS è una nuova aggiunta alle librerie di CreateJS e piuttosto utile.
Creiamo un nuovo oggetto PreloadJS e lo inseriamo nel preloader variabile, quindi assegnare un metodo a ciascun evento (onProgress, onComplete, onFileLoad). Finalmente usiamo il preloader per caricare il manifest che abbiamo creato in precedenza.
Ticker.setFPS (30); Ticker.addListener (fase);
Qui aggiungiamo l'oggetto Ticker allo stage e impostiamo la frequenza fotogrammi su 30 FPS; lo useremo più avanti nel gioco per il enterFrame funzionalità.
function handleProgress (event) // usa event.loaded per ottenere la percentuale della funzione load handleComplete (event) // triggered when all loading is complete function handleFileLoad (event) // attivato quando un singolo file completa il caricamento switch (event.type) case PreloadJS.IMAGE: // immagine caricata var img = new Image (); img.src = event.src; img.onload = handleLoadComplete; window [event.id] = new Bitmap (img); rompere; case PreloadJS.SOUND: // sound loaded handleLoadComplete (); rompere;
Rivediamo le funzioni:
handleProgress - In questa funzione sarai in grado di seguire la percentuale di avanzamento del caricamento usando questo parametro: event.loaded. Si potrebbe usare questo per creare ad esempio una barra di avanzamento.handleComplete - Questa funzione viene chiamata quando tutti i file sono stati caricati (nel caso in cui si desideri posizionare qualcosa lì).handleFileLoad - Poiché cariciamo due tipi di file: immagini e suoni, abbiamo questa funzione che gestirà ciascuno separatamente. Se si tratta di un'immagine, creiamo un'immagine bitmap e la posizioniamo in una variabile (il cui nome è uguale all'ID dell'immagine caricata) e quindi chiamiamo il handleLoadComplete funzione (che scriverò in seguito); se è un suono, chiamiamo semplicemente il handleLoadComplete subito.Ora parliamo del handleLoadComplete funzione che ho appena menzionato:
function handleLoadComplete (event) totalLoaded ++; if (manifest.length == totalLoaded) addTitleView ();
È una funzione piuttosto semplice; aumentiamo il totalLoaded variabile (che contiene il numero di risorse caricate finora) e quindi controlliamo se il numero di elementi nel nostro manifest è uguale al numero di risorse caricate, e in tal caso, andare alla schermata del menu principale.
function addTitleView () //console.log("Add Title View "); 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 (); // Button Listeners startB.onPress = tweenTitleView; creditsB.onPress = showCredits; Niente di speciale qui. Posizioniamo le immagini sullo sfondo, sul pulsante Start e sul pulsante Crediti sul palco e sul link onPress gestori di eventi ai pulsanti Start e Crediti.
Ecco le funzioni che visualizzano e rimuovono la schermata dei crediti e il tweenTitleView che inizia il gioco:
function showCredits () // Mostra crediti credits.x = 480; stage.addChild (crediti); stage.update (); Tween.get (crediti) .to (x: 0, 300); credits.onPress = hideCredits; // Nascondi funzione Credits hideCredits (e) Tween.get (credits) .to (x: 480, 300) .call (rmvCredits); // Remove Credits function rmvCredits () stage.removeChild (credits); // Funzione Tween Title View tweenTitleView () // Avvia Game Tween.get (TitleView) .to (y: -320, 300) .call (addGameView);
Abbiamo raggiunto la parte principale di questo tutorial che è il codice del gioco stesso.
Prima di tutto, dobbiamo aggiungere tutte le risorse necessarie allo stage, quindi lo facciamo nel addGameView funzione:
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.x = 211; playerScore.y = 20; cpuScore = new Text ('0', 'grassetto 20px Arial', '# A3FF24'); cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, player, cpu, ball); stage.update (); // Inizia listener bg.onPress = startGame; Ancora una volta, una funzione piuttosto semplice che posiziona gli oggetti sullo schermo e aggiunge un mouse all'immagine di sfondo, in modo che quando l'utente fa clic, il gioco inizierà (chiameremo il inizia il gioco funzione).
Rivediamo il inizia il gioco funzione:
function startGame (e) bg.onPress = null; stage.onMouseMove = movePaddle; Ticker.addListener (tkr, false); tkr.tick = aggiornamento;
Qui, come puoi vedere, oltre ad aggiungere un onMouseMove evento che muoverà la nostra pagaia. Aggiungiamo il zecca evento, che chiamerà il aggiornare funzione in ogni frame.
Rivediamo il movePaddle e reset funzioni:
function movePaddle (e) // Mouse Movement player.y = e.stageY; / * Reset * / function reset () ball.x = 240 - 15; ball.y = 160 - 15; player.y = 160 - 37,5; cpu.y = 160 - 37,5; stage.onMouseMove = null; Ticker.removeListener (TKR); bg.onPress = startGame;
Nel movePaddle, in pratica posizioniamo la paddle dell'utente sulla coordinata y del mouse.
Nel reset, facciamo qualcosa di simile a addGameView, eccetto qui non aggiungiamo alcun elemento grafico poiché sono già sullo schermo.
Usando il mettere in guardia funzione mostreremo il popup vincente e perdente:
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);
Ora, per l'ultima parte del nostro tutorial lavoreremo su aggiornare funzione (che si verifica in ogni fotogramma del gioco - simile a quella di Flash onEnterFrame):
function update () // Ball Movement ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed; // Cpu Movement if (cpu.y < ball.y) cpu.y = cpu.y + 4; else if(cpu.y > ball.y) cpu.y = cpu.y - 4; // Wall Collision if ((ball.y) < 0) ySpeed = -ySpeed; SoundJS.play('wall'); ;//Up if((ball.y + (30)) > 320) ySpeed = -ySpeed; SoundJS.play ('wall');; // down / * CPU Score * / if ((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'); / * Cpu collision * / 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'); /* Stop Paddle from going out of canvas */ if(player.y >= 249) player.y = 249; / * Controlla per Win * / if (playerScore.text == '10') alert ('vinci'); / * Verifica Game Over * / if (cpuScore.text == '10') alert ('lose'); Sembra spaventoso, vero? Non preoccuparti, esamineremo ogni parte e ne discuteremo.
// Ball Movement ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed;
In ogni fotogramma, la pallina si muoverà in base ai suoi valori di velocità xey
// Cpu Movement if ((cpu.y + 32) < (ball.y-14)) cpu.y = cpu.y + cpuSpeed; else if((cpu.y+32) > (ball.y + 14)) cpu.y = cpu.y - cpuSpeed;
Qui abbiamo l'IA di base del computer, in cui la pagaia del computer segue semplicemente la palla senza alcuna logica speciale. Confrontiamo semplicemente la posizione del centro della paletta (che è il motivo per cui aggiungiamo 32 pixel al valore Y della cpu) alla posizione della palla, con un piccolo offset, e spostiamo la paletta verso l'alto o verso il basso, secondo necessità.
if ((ball.y) < 0) //top ySpeed = -ySpeed; SoundJS.play('wall'); ; if((ball.y + (30)) > 320) // bottom ySpeed = -ySpeed; SoundJS.play ( 'muro'); ; Se la palla colpisce il bordo superiore o il bordo inferiore dello schermo, la palla cambia direzione e riproduciamo il suono del Wall Hit.
/ * 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'); L'accesso al punteggio è semplice: se la palla supera i bordi sinistro o destro aumenta rispettivamente il punteggio del giocatore o della CPU, riproduce un suono e reimposta la posizione degli oggetti utilizzando il reset funzione che abbiamo discusso in precedenza.
/ * Collisione 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'); Qui ci occupiamo delle collisioni della palla con i paddle; ogni volta che la palla colpisce uno dei paddle, la palla cambia direzione e viene riprodotto un suono
se (player.y> = 249) player.y = 249;
Se la paletta del giocatore va fuori dai limiti, la rimettiamo nei limiti.
/ * Controlla per Win * / if (playerScore.text == '10') alert ('vinci'); / * Verifica Game Over * / if (cpuScore.text == '10') alert ('lose'); In questo frammento, controlliamo se uno dei punteggi dei giocatori ha raggiunto 10 punti, e in tal caso visualizziamo il popup vincente o perdente per il giocatore (in base al suo stato di vincita).
È così, hai creato un intero gioco pong usando CreateJS. Grazie per aver dedicato del tempo a leggere questo tutorial.
