Share
Anul trecut, ți-am arătat cum să creezi un joc de tip "shoot-up" cu Flash și AS3. Cu creșterea popularității (și capabilităților) HTML5, să aruncăm o privire asupra modului de a face același lucru cu HTML5, JavaScript și EaselJS.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Faceți clic pentru a reda demonstrația.
Folosind sprite pre-fabricate vom codifica o distracție Space Shooter joc în HTML5 utilizând biblioteca EaselJS.
Jucătorul va putea să controleze o navă spațială și să tragă mai mulți dușmani în timp ce călătoresc în spațiu.
O interfață simplă și futuristă va fi utilizată, aceasta implică bitmap-uri și multe altele. Am folosit o mare bibliotecă sprite în demo-ul acestui tutorial, acestea fac parte din grafica gratuită a Clostronului de Clonare.
Resursele de interfață necesare pentru acest tutorial pot fi găsite î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 programul EaselJS de pe site-ul său oficial.
Să pregătim documentul HTML, este o structură HTML simplă pentru a începe să scriem aplicația noastră. Salvați ca Shooter.html.
trăgător
Să adăugăm și un pic de CSS, această linie va elimina evidența implicită când atingeți un element utilizând un browser mobil; fără aceasta, experiența mobilă ar scădea drastic.
trăgător
Următorul cod adaugă bibliotecile JavaScript necesare pentru ca aplicația noastră să funcționeze.
trăgător
Main.js este fișierul pe care îl vom folosi pentru a stoca toate funcțiile proprii pentru joc. Creați-o acum și salvați-o în același director ca și Shooter.html. De asemenea, va trebui să descărcați bibliotecile EaselJS enumerate.
În liniile următoare, numim funcția noastră principală; aceasta este funcția care va începe aplicarea, va fi creată mai târziu în codul nostru JavaScript.
trăgător
Canvasul este adăugat în această linie. Atribuiți un ID pentru ao referi mai târziu și, de asemenea, setați lățimea și înălțimea acestuia.
trăgător
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 jocul minunat. Deschide Main.js fișier creat mai devreme.
Vom începe prin definirea tuturor variabilelor grafice și logice.
Următoarele variabile reprezintă elementul HTML canvas și stadiul care va fi legat la acesta. (The etapă variabilă se va comporta în mod similar cu etapa într-un proiect AS3 Flash.)
/ * Definiți Canvas * / var canvas; var etapă;
Următoarele variabile stochează imaginile de fundal. Două imagini cu ceramică sunt folosite pentru a crea un fundal infinit de defilare.
/ * Fundal * / var bgImg = Imagine nouă (); var bg; var bg2Img = imagine nouă (); var bg2;
Aceasta este nava care va fi utilizată ca personaj de jucător sau erou.
/ * Nava * / var sImg = Imagine nouă (); vapor var;
Multi dușmani vor fi pe scenă; ei vor folosi acest lucru ca graficul sursă.
/ * Enemy * / var eImg = Imagine nouă ();
Un sef va fi prezent în joc, mai mare și cu mai multă sănătate decât ceilalți dușmani. Aceste variabile sunt folosite pentru ao instanți.
/ * Boss * / var bImg = Imagine nouă (); var șef;
Pictograma "viață". Trei vieți sunt date la început, iar tu pierzi unul când ești lovit de un inamic.
/ * Vieți * / var lImg = Imagine nouă ();
Aceasta este arma ta: gloanțe de foc la dușmani să-i omoare. Această variabilă stochează imaginea sursă.
/ * Gloanțe * / var bltImg = imagine nouă ();
Două alerte sunt folosite în joc, unul pentru când câștigi și unul pentru când pierzi. Vom vedea cum să determinăm o victorie sau o pierdere mai târziu în acest tutorial.
/ * Alertă * / var winImg = Imagine nouă (); var loseImg = imagine nouă (); var câștiga; var pierde;
Acestea sunt variabilele pe care le vom folosi, citiți comentariile din cod pentru a afla mai multe despre ele. Unele dintre numele lor sunt explicative și nu au nici un comentariu.
var vie = nou Container (); // stochează viețile gfx var bullets = container nou (); // stochează gloanțele gfx var enemies = new Container (); // stochează dușmanii gfx var bossHealth = 20; var scor; var gfxLoaded = 0; // folosită ca preloader, numără elementele deja încărcate var centerX = 160; var centerY = 240; var tkr = obiect nou (); // folosit ca un Ticker listener var timerSource; // face referire la o metodă setInterval
Vom folosi efecte sonore pentru a spori sentimentul jocului. Puteți găsi sunetele folosite în acest exemplu pe Soungle.com utilizând cuvintele cheie spaţiu, explozie și cu laser.
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 numește funcțiile necesare pentru a începe jocul. Vom crea aceste funcții în pașii următori - totul de la Pasul 19 la Pasul 23 ar trebui să meargă în interiorul acestei funcții.
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 scena sa se comporte ca si clasa de scena in AS3.
Accentsconagua
/ * Canvas Link * / canvas = document.getElementById ("Shooter"); 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.
stage.mouseEventsEnabled = true;
Vom folosi SoundJS pentru a adăuga sunete la jocul nostru. SoundJS lui addBatch metoda folosește o serie de trei parametri pentru fiecare apel:
Nume: Numele instanței pe care doriți ca sunetul să îl aibă - acesta va fi folosit pentru a reda sunetul mai târziu.src: Adresa URL a fișierului de sunet.instanțe: Numărul de instanțe care pot fi redate în același timp./ * Sound * / SoundJS.addBatch ([nume: 'boss', src: 'boss.mp3', instanțe: 1, name: 'explo', src: 'explo.mp3' name: 'shot', src: 'shot.mp3', instanțe: 10]);
Acest cod este folosit pentru a preîncărca grafica cu ajutorul unei funcții pe care o vom scrie ulterior. Ea indică fiecare obiect Imagine pe care l-am creat anterior în fișierul PNG sursă în dosarul nostru de documente. Se dă un nume pentru a detecta ce imagine este încărcată și, în fine, este apelată funcția care gestionează imaginile încărcate.
/ * Încărcați GFX * / bgImg.src = 'bg.png'; bgImg.name = 'bg'; bgImg.onload = loadGfx; bg2Img.src = 'bg2.png'; bg2Img.name = 'bg2'; bg2Img.onload = loadGfx; sImg.src = 'ship.png'; sImg.name = 'navă'; sImg.onload = loadGfx; eImg.src = 'enemy1.png'; eImg.name = "inamic"; eImg.onload = loadGfx; bImg.src = 'boss.png'; bImg.name = 'șef'; bImg.onload = loadGfx; lImg.src = 'live.png'; lImg.name = 'live'; lImg.onload = loadGfx; bltImg.src = 'bullet.png'; bltImg.name = 'bullet'; bltImg.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 "bifă" centralizată, difuzată la un interval de timp stabilit. Putem folosi tick () funcția de a rula anumite coduri la o frecvență obișnuită.
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.
/ * 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 apelul addGameView.
funcția loadGfx (e) if (e.target.name = 'bg') bg = Bitmap nou (bgImg); dacă (e.target.name = 'bg2') bg2 = Bitmap nou (bg2Img) dacă (e.target.name = 'navă') ship = Bitmap nou (sImg); gfxLoaded ++; dacă (gfxLoaded == 9) addGameView ();
Când sunt încărcate toate graficele addGameView se numește funcția. Această funcție va adăuga nava, trăiește contra, scor și fundaluri pe scenă.
funcția addGameView () ship.x = centerX - 18.5; ship.y = 480 + 34; / * Adauga Lives * / pentru (var i = 0; i < 3; i++) var l = new Bitmap(lImg); l.x = 248 + (25 * i); l.y = 463; lives.addChild(l); stage.update(); /* Score Text */ score = new Text('0', 'bold 14px Courier New', '#FFFFFF'); score.maxWidth = 1000; //fix for Chrome 17 score.x = 2; score.y = 476; /* Second Background */ bg2.y = -480; /* Add gfx to stage and Tween Ship */ stage.addChild(bg, bg2, ship, enemies, bullets, lives, score); Tween.get(ship).to(y:425, 1000).call(startGame); Nava jucătorului va fi controlată de mouse și vom folosi această funcție pentru a face față:
funcția moveShip (e) ship.x = e.stageX - 18.5;
e.stageX se referă la coordonatele x ale mouse-ului și această funcție este apelată ori de câte ori mouse-ul sa mutat.
Nava noastră va fi capabilă să tragă gloanțe pentru a distruge și a se proteja de dușmani. Această funcție va funcționa de fiecare dată când utilizatorul face clic pe scenă și va plasa un glonț în fața navei, care va fi ulterior mutat de către Actualizați() funcţie. De asemenea, redă un sunet de fotografiere.
funcția shoot () var b = Bitmap nou (bltImg); b.x = navăx + 13; b.y = navă - 20; bullets.addChild (b); stage.update (); SoundJS.play ( 'shot');
Nu ar fi un shooter fără ceva de filmat. Aici, a setInterval () este folosit pentru a crea un inamic la fiecare 1000 de milisecunde (puteți schimba această valoare în pasul următor) care este mai târziu mutat de către Actualizați() funcţie.
funcția addEnemy () var e = Bitmap nou (eImg); e.x = Math.floor (Math.random () * (320 - 50)) e.y = -50 inamici.addChild (e); stage.update ();
Aceste linii vor adăuga ascultătorii necesari la scenă și cronometru; acest lucru include evenimentele mouse-ului, evenimentele temporizate (prin setInterval) și Evenimente Ticker care vor actualiza jocul în fiecare cadru.
funcția startGame () stage.onMouseMove = moveShip; bg.onPress = trage; bg2.onPress = trage; Ticker.addListener (tkr, fals); tkr.tick = actualizare; timerSource = setInterval ('addEnemy ()', 1000); Fundalul este mutat la fiecare cadru pentru a simula călătoria spațiului; când sprite de fond inferior atinge limita de etapă, este mutat înapoi la început, creând o buclă infinită.
actualizare funcție () / * mutați fundal * / bg.y + = 5; bg2.y + = 5; dacă (bg.y> = 480) bg.y = -480; altfel dacă (bg2.y> = 480) bg2.y = -480;
Următoarele linii de cod verifică dacă există gloanțe în stadiu; dacă este așa, gloanțele sunt deplasate în sus.
/ * Mutați gloanțe * / pentru (var i = 0; i < bullets.children.length; i++) bullets.children[i].y -= 10;
Să adăugăm câteva linii pentru a detecta poziția bulletului și să folosim acest lucru pentru a distruge un glonț când nu mai este vizibil.
/ * Mutați gloanțe * / pentru (var i = 0; i < bullets.children.length; i++) bullets.children[i].y -= 10; /* Remove Offstage Bullets */ if(bullets.children[i].y < - 20) bullets.removeChildAt(i);
Vom adăuga un mare sef rău la joc. Când utilizatorul atinge un anumit punctaj, șeful va apărea:
/ * Afișați seful * / dacă (parseInt (score.text)> = 500 && boss == null) boss = Bitmap nou (bImg); SoundJS.play ( 'boss'); boss.x = centerX - 90; boss.y = -183; stage.addChild (sef); Tween.get (seful) .to (y: 40, 2000) // adăugați șeful pe zona de redare
Dușmanii, ca și gloanțele, se mișcă, de asemenea, pe fiecare cadru. Acest cod găsește toți inamicii din stadiu folosind inamici container și le mută fiecare câte 5px în jos.
/ * Deplasare Enemies * / pentru (var j = 0; j < enemies.children.length; j++) enemies.children[j].y += 5;
De asemenea, verificăm pozițiile dușmanilor pentru a le distruge atunci când nu mai sunt vizibile.
/ * Deplasare Enemies * / pentru (var j = 0; j < enemies.children.length; j++) enemies.children[j].y += 5; /* Remove Offstage Enemies */ if(enemies.children[j].y > 480 + 50) enemies.removeChildAt (j);
Gloanțele din container sunt testate pentru coliziune cu dușmanii; când se întâmplă acest lucru, ambele sunt scoase din scenă, se aude un sunet și scorul este actualizat.
pentru (var k = 0; k < bullets.children.length; k++) /* Bullet - Enemy Collision */ if(bullets.children[k].x >= copii inamici [j] .x && bullets.children [k] .x + 11 < enemies.children[j].x + 49 && bullets.children[k].y < enemies.children[j].y + 40) bullets.removeChildAt(k); enemies.removeChildAt(j); stage.update(); SoundJS.play('explo'); score.text = parseFloat(score.text + 50); Următorul cod se ocupă de ciocnirile sefului, utilizează aceeași metodă folosită în buclă de coliziune a dușmanului. Aici folosim bossHealth variabilă pentru a determina când șeful este învins.
/ * Bullet - Boss Collision * / dacă (șeful! = Null && bullets.children [k] .x> = boss.x && bullets.children [k] .x + 11 < boss.x + 183 && bullets.children[k].y < boss.y + 162) bullets.removeChildAt(k); bossHealth--; stage.update(); SoundJS.play('explo'); score.text = parseInt(score.text + 50); Aici verificăm dacă un dușman se ciocnește cu nava jucătorului; dacă se întâmplă, se aude un sunet, se elimină o viață și nava este animată.
/ * Nava - Coliziunea inamicii * / if (enemies.hitTest (ship.x, ship.y) || enemies.hitTest (nav.x + 37, ship.y)) enemies.removeChildAt (j); lives.removeChildAt (lives.length); ship.y = 480 + 34; Tween.get (navă) .to (y: 425, 500) SoundJS.play ('explo'); Jucătorul câștigă atunci când șeful își pierde toată sănătatea și pierde dacă pierd toate viețile proprii. Următoarele linii detectează acele situații și apelează o funcție de alertă utilizând parametrul corect.
/ * Verificați pentru câștig * / dacă (șeful! = Null && bossHealth <= 0) alert('win'); /* Check for lose */ if(lives.children.length <= 0) alert('lose'); Alerta afișează informațiile jucătorului despre starea jocului; este afișat când se ajunge la un eveniment de joc. Elimină ascultătorii jocului și afișează mesajul corespunzător.
funcția de alertă (e) / * Remove Listeners * / stage.onMouseMove = null; bg.onPress = null; bg2.onPress = null; Ticker.removeListener (TKR); tkr = null; timerSource = null; / * Afișarea mesajului corect * / if (e == 'win') win = Bitmap nou (winImg); win.x = centerX - 64; win.y = centerY - 23; stage.addChild (câștig); stage.removeChild (inamici, sef); altceva lose = Bitmap nou (loseImg); lose.x = centerX - 64; pier.y = centerY - 23; stage.addChild (pierd); stage.removeChild (dușmani, nave); bg.onPress = funcția () window.location.reload ();; bg2.onPress = funcția () window.location.reload ();; stage.update ();
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. HTML5 funcționează!
Ați învățat cum să creați un joc Shooter spațial cu toate caracteristicile sale de bază, încercați să îl extindeți folosind ceea ce deja știți. Un început bun ar fi ca inamicii sau șeful să tragă înapoi la jucător.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
