Share
În acest tutorial, vom crea o clonă a jocului clasic, Pong, în HTML5, utilizând biblioteca EaselJS. Jocul va avea mai multe ecrane, efecte sonore și un adversar (foarte simplu) AI.
Folosind grafice pre-fabricate vom codifica o distracție pong joc în HTML5 folosind biblioteca EaselJS, care oferă o interfață Flash-like pentru panza HTML5. Pentru o introducere în programul EaselJS, consultați acest articol Activetuts +.
Jucătorul va putea controla o paletă folosind mouse-ul și va juca împotriva adversarului computer-ului pentru a obține puncte.
O interfață simplă cu un stil neo-futurist va fi utilizată; acest lucru implică mai multe forme, butoane, bitmap-uri și multe altele.
Grafica necesară pentru acest tutorial poate fi găsită în descărcarea atașată.
Biblioteca EaselJS va fi utilizată pentru a construi jocul nostru, asigurați-vă că citiți Noțiuni de bază tutorial dacă sunteți nou în această bibliotecă.
Puteți descărca ultima versiune a programului EaselJS de pe site-ul său oficial. Cu toate acestea, acest lucru poate fi incompatibil cu codul de aici, așa că vă sugerez să folosiți versiunea bibliotecii care este inclusă la sursa de descărcare.
Să pregătim documentul HTML. Vom începe cu foarte multe lucruri de bază, doar o schiță barebones:
pong
Trebuie să adăugăm și un pic de CSS, pentru a elimina evidența implicită aplicată când atingeți un element dintr-un browser mobil. Fără aceasta, experiența mobilă ar scădea drastic.
pong
Următorul cod adaugă bibliotecile javascript necesare pentru ca aplicația noastră să funcționeze.
pong /
Pe lângă programul EaselJS, vom folosi și TweenJS (pentru manipularea tranzițiilor pe ecran și bucla de joc) și SoundJS (pentru efectele sonore).
Main.js este fișierul pe care îl vom folosi pentru a ne păstra propriul cod JS.
În liniile următoare, numim noi Principal() funcţie. Aceasta este funcția care va începe aplicarea noastră; acesta va fi creat mai târziu în tutorial, în interior Main.js.
pong
Un panou HTML5 este creat în această linie; îi atribuim un ID, astfel încât să îl putem referi mai târziu și, de asemenea, să-i stabilim lățimea și înălțimea.
pong
Să începem crearea jocului nostru!
Deschideți editorul JavaScript preferat (orice editor de text va funcționa, dar nu veți avea o evidențiere a sintaxei) și vă pregătiți să scrieți codul. Nu uitați să salvați fișierul ca Main.js în dosarul proiectului.
Vom începe prin definirea tuturor variabilelor grafice și logice.
Următoarele variabile reprezintă elementul HTML canvas și stadiul care va fi legat la acesta. etapă variabilă se va comporta în mod similar cu etapa AS3.
/ * Definiți Canvas * / var canvas; var etapă;
Această variabilă stochează imaginea de fundal a titlului.
/ * Fundal * / var bgImg = Imagine nouă (); var bg;
Acesta este Titlul Vizual, primul ecran interactiv care apare în jocul nostru. Aceste variabile stochează componentele sale.
/ * Vizualizare titlu * / var mainImg = imagine nouă (); var principal; var startBImg = imagine nouă (); var startB; var crediteBImg = imagine nouă (); var creditsB; var TitleView = Container nou ();
Această vizualizare va afișa creditele, anul și drepturile de autor ale jocului, aceste variabile vor fi utilizate pentru a fi stocate.
/ * Credite * / var creditsViewImg = imagine nouă (); credite de var;
Următoarele variabile stochează grafica individuală care apare în Vizualizarea jocului:
/ * Vizualizare joc * / var playerImg = imagine nouă (); var jucător; var ballImg = imagine nouă (); var ball; var cpuImg = imagine nouă (); var cpu; var winImg = imagine nouă (); var câștiga; var loseImg = imagine nouă (); var pierde;
Valorile scorului vor fi tratate de următoarele variabile:
/ * Scor * / var jucătorScore; var cpuScore;
Acestea sunt variabilele pe care le vom folosi, citiți comentariile din cod pentru a înțelege ce sunt pentru:
var xSpeed = 5; // Viteza orizontală a bilei var ySpeed = 5; // Viteza verticală a bilei var gfxLoaded = 0; // folosit ca preloader, numără elementele deja încărcate var tkr = Object new; // folosit ca participant la eveniment la Ticker
Vom folosi efecte sonore pentru a spori sentimentul jocului. Sunetele din acest exemplu au fost create folosind instrumentul excelent free as3sfxr și convertite în format MP3 folosind Audacity.
Sunetele necesare pot fi găsite în descărcarea sursei. Dacă doriți să creați propriul dvs., veți avea nevoie de patru:
Accentsconagua
hit.mp3: jucat atunci când mingea lovește o paletăplayerScore.mp3: jucat când scorurile jucătoruluienemyScore.mp3: jucat când scorurile inamiculuiwall.mp3: jucat atunci când mingea atinge limita superioară sau inferioară Principal() funcția va fi prima care se execută atunci când pagina web este încărcată, deoarece este menționată în onload atributul documentului HTML (a se vedea Pasul 7).
Se va numi funcțiile necesare pentru a începe jocul.
funcția principal () // cod ...
Acest cod primește ID-ul canalului HTML și îl leagă de clasa EaselJS Stage. Aceasta va face ca variabila de stadiu sa se comporte ca si clasa de scena in AS3. Adăugați acest lucru la Principal().
/ * Canvas Link * / canvas = document.getElementById ('Pong'); etapa = etapa nouă (panza); Evenimentele mouse-ului sunt dezactivate implicit în programul EaselJS pentru a îmbunătăți performanța. Deoarece avem nevoie de cei din joc, adăugăm următoarea linie. Adăugați acest lucru la Principal().
stage.mouseEventsEnabled = true;
Vom folosi SoundJS pentru a adăuga sunete la jocul nostru; scrieți următorul cod pentru a importa sunetele pe care le vom folosi. Adăugați acest lucru la Principal().
/ * Sound * / SoundJS.addBatch ([nume: 'hit', src: 'hit.mp3', instanțe: 1, name: 'playerScore', src: 'playerScore.mp3' name: 'enemyScore', src: 'enemyScore.mp3', instanțe: 1, name: 'wall', src: 'wall.mp3', instanțe: 1]);
Acest cod este folosit pentru a preîncărca grafica, cu ajutorul unei funcții pe care o vom scrie ulterior. Setează obiectele de imagine pe care le-am creat înainte pentru a indica fișierele PNG sursă relevante din dosarul nostru de documente.
Un nume este dat fiecăruia, astfel încât să putem detecta ce imagine este încărcată mai târziu și, în fine, funcția care manipulează imaginile încărcate este numită.
Adăugați acest lucru la Principal().
/ * Încărcați GFX * / bgImg.src = 'bg.png'; bgImg.name = 'bg'; bgImg.onload = loadGfx; mainImg.src = 'main.png'; mainImg.name = 'principal'; mainImg.onload = loadGfx; startBImg.src = 'startB.png'; startBImg.name = 'startB'; startBImg.onload = loadGfx; crediteBImg.src = 'creditsB.png'; crediteBImg.name = 'creditsB'; crediteBImg.onload = loadGfx; crediteViewImg.src = 'credite.png'; crediteViewImg.name = 'credite'; crediteViewImg.onload = loadGfx; jucatorImg.src = 'paddle.png'; playerImg.name = 'jucător'; playerImg.onload = loadGfx; ballImg.src = 'ball.png'; ballImg.name = "minge"; ballImg.onload = loadGfx; cpuImg.src = 'paddle.png'; cpuImg.name = 'cpu'; cpuImg.onload = loadGfx; winImg.src = 'win.png'; winImg.name = 'câștiga'; winImg.onload = loadGfx; pierImg.src = 'pier.png'; loseImg.name = 'pierde'; loseImg.onload = loadGfx;
Clasa Ticker oferă o difuzare centralizată a biciului sau a inimii la un interval de timp stabilit. Acest lucru poate fi folosit pentru a declanșa bucla de joc.
Următorul cod stabilește rata cadrelor la 30 și definește etapa ca ascultător pentru căpușe.
Clasa TweenJS va asculta această bifă pentru a realiza animațiile. Adăugați acest lucru la Principal().
/ * Ticker * / Ticker.setFPS (30); Ticker.addListener (etapa);
De fiecare dată când este încărcat un grafic, această funcție va funcționa. Acesta va atribui fiecare imagine unui obiect bitmap și va verifica dacă toate elementele sunt încărcate înainte de a continua.
funcția loadGfx (e) if (e.target.name = 'bg') bg = Bitmap nou (bgImg); dacă (e.target.name = 'main' dacă (e.target.name = 'startB') startB = Bitmap nou (startBImg); dacă (e.target.name = 'creditsB') creditsB = Bitmap nou; nume = 'credite') credits = new Bitmap (creditsViewImg); dacă (e.target.name = 'player') player = new Bitmap (playerImg) (eTarget.name = 'cpu') cpu = Bitmap nou (cpuImg); dacă (e.target.name = 'win') win = Bitmap nou winImg); dacă (e.target.name = 'pierde') lose = nou Bitmap (loseImg); gfxLoaded ++; dacă (gfxLoaded == 10) // nu uitați să schimbați acest lucru dacă adăugați mai multe imagini addTitleView ();
Când toate graficele sunt încărcate, Titlu View este adăugat la etapă prin următoarea funcție:
funcția addTitleView () startB.x = 240 - 31.5; startB.y = 160; startB.name = 'startB'; crediteB.x = 241 - 42; creditsB.y = 200; TitleView.addChild (principal, startB, crediteB); etapa.addChild (bg, TitleView); stage.update ();
Această funcție adaugă ascultătorilor necesari TitleView butoane (este parte din addTitleView ()):
startB.onPress = addGameView; creditsB.onPress = showCredit;
credite ecranul este afișat când utilizatorul face clic pe butonul credite; un ascultător de mouse este adăugat la imaginea completă pentru ao elimina.
funcția showCredits () // Afișați creditele credits.x = 480; stage.addChild (credite); stage.update (); Tween.get (credite) .to (x: 0, 300); credits.onPress = ascundeCredite;
Cand credite ecranul este apăsat pe ecran, va fi readus înapoi și scos din scenă.
// Ascunde Funcția Credite ascundeCredite (e) Tween.get (credite) .to (x: 480, 300) .call (rmvCredits); // Eliminați funcția Credite rmvCredits () stage.removeChild (credite);
Să ne oprim aici pentru a testa ceea ce am făcut până acum. Faceți clic aici pentru un demo de piatră de hotar.
Rețineți că unele linii au fost comentate, deoarece unele funcții nu au fost încă create.
Amintiți-vă că piatra de hotar este inclusă în fișierele sursă, deci dacă dintr-un anumit motiv fișierul dvs. nu imită acest lucru, comparați-vă sursa cu a mea pentru a vedea ce ar putea fi cauza.
Următoarele linii elimină TitleView din scenă și adaugă GameView elemente la scena. Un ascultător de mouse este adăugat în fundal, pentru a porni jocul atunci când se face clic.
funcția addGameView () // Distruge ecranul Meniu și credite stage.removeChild (TitleView); TitleView = null; credite = nula; // Adauga joc Vizualizare 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; // scorul playerScore = text nou ('0', 'bold 20px Arial', '# A3FF24'); playerScore.maxWidth = 1000; // fix pentru Chrome 17 playerScore.x = 211; playerScore.y = 20; cpuScore = text nou ('0', 'bold 20px Arial', '# A3FF24'); cpuScore.maxWidth = 1000; // fix pentru Chrome 17 cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, player, cpu, ball); stage.update (); // Start Listener bg.onPress = startGame; Jucătorul se va deplasa împreună cu poziția verticală a mouse-ului:
funcția movePaddle (e) // Mouse Movement player.y = e.stageY;
Acest cod rulează atunci când playerul face clic pe fundalul jocului, adaugă ascultătorul mouse-ului care declanșează funcția din pasul anterior și adaugă un Ticker pentru a controla jocul.
Acordați atenție modului în care este creat: este echivalentul unui eveniment Timer în AS3.
funcția startGame (e) bg.onPress = null; stage.onMouseMove = mutaPaddle; Ticker.addListener (tkr, fals); tkr.tick = actualizare;
Când un punct este marcat (de către jucator sau computer), padelele și mingea se vor întoarce la pozițiile lor inițiale, iar jocul va fi întrerupt:
resetarea funcției () ball.x = 240 - 15; ball.y = 160 - 15; player.y = 160 - 37,5; cpu.y = 160 - 37,5; stage.onMouseMove = null; // nu mai ascultați mouse-ul Ticker.removeListener (tkr); // întrerupeți jocul bg.onPress = startGame;
Dacă jocul nu este întrerupt, mingea va fi mutată la fiecare cadru utilizând variabilele create anterior.
actualizare funcție () // Ball Movement ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed;
Acest cod controlează mișcarea computerului; paleta este mișcată astfel încât să urmeze mingea în timp ce are încă o anumită marjă de eroare.
în cazul în care (cpu.y < ball.y) cpu.y = cpu.y + 2.5; else if(cpu.y > minge.y) cpu.y = cpu.y - 2,5;
Aici verificăm dacă mingea se află la marginea superioară sau inferioară a pânzei; dacă da, viteza verticală este inversată și este redat un sunet.
if ((ball.y) < 0) ySpeed = -ySpeed; SoundJS.play('wall');;//Up if((ball.y + (30)) > 320) ySpeed = -ySpeed; SoundJS.play ( 'perete');; // în jos Acum, partea stângă și cea dreaptă. Acest cod modifică de asemenea scorul, cheamă funcția de resetare și redă un sunet diferit, în funcție de partea pe care o atinge mingea.
/ * Scorul CPU * / 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'); Următorul cod verifică dacă mingea se ciocnește cu o paletă, comparând poziția paletei cu coordonatele mingii. Dacă cutiile de margine ale celor două se intersectează, există o coliziune, deci inversăm viteza x a mingii și jucăm un sunet.
/ * Cpu coliziune * / dacă (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'); Puteți modifica starea de încheiere în liniile următoare - este setată la 10 puncte în mod implicit.
/ * Verificați pentru Win * / if (playerScore.text == '10') alert ('win'); / * Verificați dacă jocul este peste * / dacă (cpuScore.text == '10') alert ('lose'); Această funcție va opri jocul și va afișa o alertă, al cărei conținut depinde de rezultatul jocului.
alertă de funcționare (e) Ticker.removeListener (tkr); stage.onMouseMove = null; bg.onPress = null dacă (e == 'câștiga') win.x = 140; win.y = -90; stage.addChild (câștig); Tween.get (câștiga) .to (y: 115, 300); altceva lose.x = 140; lose.y = -90; stage.addChild (pierd); Tween.get (pierde) .to (y: 115, 300);
Salvați-vă munca (dacă nu ați făcut-o) și deschideți fișierul HTML din browser pentru a vedea că jocul dvs. funcționează!
Încercați să modificați variabilele jocului pentru a vă crea propria versiune a jocului!
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
