Share
Web-ul se misca repede - atat de repede incat tutorialul nostru original de la EaselJS este deja dat afara! În acest tutorial, veți învăța cum să utilizați cea mai nouă suită CreateJS creând o clonă Pong simplă.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Faceți clic pentru a juca
Acest tutorial se bazează pe jocul Crearea unui joc de pong de la Carlos Yanez în HTML5 cu EaselJS, care, la rândul său, a fost construit pe ghidul lui Getting Started with Guide. Grafica și efectele sonore sunt luate din primul tutorial.
Accentsconagua
index.html Aceasta va fi principala noastra index.html fişier:
pong
După cum puteți vedea, este destul de scurt și constă în principal în încărcarea bibliotecilor CreateJS.
De la lansarea lui CreateJS (care în mod obișnuit bundle toate bibliotecile separate EaselJS) nu mai trebuie să descărcăm fișierele JS și să le găzduim pe site-ul nostru; fișierele sunt acum plasate într-o rețea CDN (Content Delivery Network), care ne permite să încărcăm aceste fișiere de la distanță cât mai repede posibil.
Să examinăm codul:
Această linie elimină evidențiarea mobilă care poate apărea atunci când încercați să redați jocul pe mobil. (Evidențiarea mobilă determină evidențierea obiectelor de panza și, astfel, ignorarea mișcărilor degetelor.)
În continuare, avem încărcarea bibliotecilor CreateJS:>
Acest cod incarca fisierele JS din CreateJS CDN si practic ne permite sa folosim oricare din functiile CreateJS din codul nostru
Apoi, vom încărca pluginul SoundJS Flash, care oferă suport de sunet pentru browserele care nu acceptă Audio HTML5. Acest lucru se face folosind un SWF (un obiect Flash) pentru încărcarea sunetelor.
În acest caz, nu vom folosi CDN; în schimb, vom descărca biblioteca SoundJS din http://createjs.com/#!/SoundJS/download și plasăm soundjs.flashplugin-0.2.0.min.js și FlashAudioPlugin.swf fișiere într-un folder local numit bunuri.
Ultima dintre fișierele JS o vom încărca Main.js fișier care va conține tot codul în jocul nostru:
În sfârșit, să punem un obiect Canvas pe scena noastră.
Acum putem începe să lucrăm la codul de joc.
Codul nostru de joc se va afla în interiorul unui fișier numit Main.js, așa că creați și salvați-l acum.
Mai întâi, să definim variabilele pentru toate obiectele grafice din joc:
vopsea var; // va fi legat de pânză în pagina index.html var etapă; // echivalează cu stadiul din AS3; vom adăuga "copii" la el // Graphics // [Background] var bg; // Grafica de fundal // [Title View] var principal; // Contextul principal var startB; // Butonul Start din meniul principal var creditsB; // butonul Credite din meniul principal // [Credit] var credite; // ecranul Credite // [Game View] var player; // Jucătorul cu lopată grafică minge; // Ball grafic var cpu; // CPU paddle var win; // Popul câștigător var pierde; // Popupul pierdut
Am adăugat un comentariu pentru fiecare variabilă, astfel încât să știți ce vom încărca în acea variabilă
În continuare, scorurile:
// [Scor] var playerScore; // Scorul jucătorului principal cpuScore; // Scorul CPU var cpuSpeed = 6; // Viteza paddle-ului CPU; cu cât este mai rapid jocul este mai greu
Vom avea nevoie de variabile pentru viteza mingii:
// Variabile var xSpeed = 5; var ySpeed = 5;
Puteți modifica aceste valori oricui doriți, dacă doriți să faceți jocul mai ușor sau mai greu.
Dacă sunteți un dezvoltator Flash, știți că Flash este onEnterFrame este foarte util atunci când creați jocuri, deoarece există lucruri care trebuie să se întâmple în fiecare cadru dat. (Dacă nu sunteți familiarizat cu această idee, consultați acest articol pe jocul Loop.)
Avem un echivalent pentru onEnterFrame în CreateJS, și anume ceas de buzunar obiect, care poate rula cod fiecare fracțiune de secundă. Să creăm variabila care va face legătura cu ea:
var tkr = obiect nou;
Apoi avem preloader, care va folosi noile metode PreloadJS.
// preloader var preloader; var manifest; var totalLoaded = 0;
preloader - va conține obiectul PreloadJS.manifesta - va păstra lista fișierelor pe care trebuie să le încărcăm.totalLoaded - această variabilă va păstra numărul de fișiere deja încărcate.Nu în ultimul rând, în lista noastră de variabile, avem TitleView, care va păstra mai multe grafice în interior pentru a le afișa împreună (ca Flash DisplayObjectContainer).
var TitleView = Container nou ();
Să trecem la funcția principală ...
Această funcție este prima funcție care rulează după toate fișierele JS din index.html sunt încărcate. Dar ceea ce numim această funcție?
Ei bine, amintiți-vă această linie de la index.html fişier?
Acest fragment de cod afirmă că odată ce sunt încărcate HTML (și bibliotecile JS), Principal ar trebui să funcționeze.
Să examinăm:
funcția principală () / * Link Canvas * / canvas = document.getElementById ('PongStage'); etapa = etapa nouă (panza); stage.mouseEventsEnabled = true; / * Setați pluginul Flash pentru browserele care nu acceptă SoundJS * / SoundJS.FlashPlugin.BASE_PATH = "active /"; dacă (! SoundJS.checkPlugin (true)) alert ("Eroare!"); întoarcere; src: "startB.png", id: "startB", id: "startB", "src" , src: "paddle.png", id: "cpu", src: "crediteB.png", id: src: "paddle.png", id: "player", src: "ball.png", id: "ball", src: : "lose.png", id: "pierde", src: "playerScore.mp3 | playerScore.ogg", id: "playerScore", src: "enemyScore.mp3 | enemyScore.ogg" "src:" hit.mp3 | hit.ogg ", id:" hit ", src:" wall.mp3 | wall.ogg ", id:" wall "]; preloader = nou PreloadJS (); preloader.installPlugin (SoundJS); preloader.onProgress = handleProgress; preloader.onComplete = handleComplete; preloader.onFileLoad = handleFileLoad; preloader.loadManifest (manifest); / * Ticker * / Ticker.setFPS (30); Ticker.addListener (etapa); Să distrugem fiecare parte:
canvas = document.getElementById ("PongStage"); etapa = etapa nouă (panza); stage.mouseEventsEnabled = true; Aici le conectăm PongStage Obiectul canvas din index.html fișier la variabila canvas și apoi creați un obiect Stage din acea pânză. (Scena ne va permite să plasăm obiecte pe ea.)
mouseEventsEnabled ne permite să folosim evenimentele mouse-ului, astfel încât să putem detecta mișcările mouse-ului și clicurile.
/ * Setați pluginul Flash pentru browserele care nu acceptă SoundJS * / SoundJS.FlashPlugin.BASE_PATH = "active /"; dacă (! SoundJS.checkPlugin (true)) alert ("Eroare!"); întoarcere; Aici configuram unde se află pluginul de sunet Flash pentru acele browsere în care HTML5 Audio nu este acceptat
manifest = src: "bg.png", id: "startB", src: "main.png", id: "principal", src: "startB.png" src: "paddle.png", id: "cpu", src: "crediteB.png", id: "crediteB" src: "paddle.png", id: "player", src: "ball.png", id: "ball", src: "pier_png", id: "pierde", src: "playerScore.mp3 | playerScore.ogg", id: "playerScore", src: "enemyScore.mp3 | enemyScore.ogg", id: "enemyScore ", src:" hit.mp3 | hit.ogg ", id:" lovit ", src:" wall.mp3 | wall.ogg ", id:" wall "];
În variabila manifestă vom plasa o serie de fișiere pe care dorim să le încărcăm (și vom furniza un ID unic pentru fiecare). Fiecare sunet are două formate - MP3 și OGG - deoarece diferite browsere sunt (in) compatibile cu diferite formate.
preloader = nou PreloadJS (); preloader.installPlugin (SoundJS); preloader.onProgress = handleProgress; preloader.onComplete = handleComplete; preloader.onFileLoad = handleFileLoad; preloader.loadManifest (manifest);
Aici configuram obiectul preloader folosind PreloadJS. PreloadJS este o nouă adăugare a bibliotecilor CreateJS și este destul de utilă.
Creăm un nou obiect PreloadJS și îl plasăm în preloader variabilă, apoi aloca o metodă pentru fiecare eveniment (pe progresul, onComplete, onFileLoad). În cele din urmă, folosim preloader pentru a încărca manifestul pe care l-am creat mai devreme.
Ticker.setFPS (30); Ticker.addListener (etapa);
Aici adăugăm obiectul Ticker în scenă și setăm rata cadrelor la 30 FPS; o vom folosi ulterior în joc pentru enterFrame funcționalitate.
funcția handleProgress (eveniment) // utilizează event.loaded pentru a obține procentul de încărcare handleComplete (eveniment) // declanșat când toată încărcarea este completă funcția handleFileLoad (event) // declanșată atunci când un fișier individual completează încărcarea comutator (event.type) caz PreloadJS.IMAGE: // imaginea încărcată var img = new Image (); img.src = event.src; img.onload = handleLoadComplete; fereastra [event.id] = Bitmap nou (img); pauză; caz PreloadJS.SOUND: // sunet încărcat handleLoadComplete (); pauză;
Să analizăm funcțiile:
handleProgress - În această funcție veți putea urmări procentajul progresului de încărcare utilizând acest parametru: event.loaded. Ați putea folosi acest lucru pentru a crea, de exemplu, o bară de progres.handleComplete - Această funcție se numește odată ce toate fișierele au fost încărcate (în cazul în care doriți să plasați ceva acolo).handleFileLoad - Din moment ce încărcăm două tipuri de fișiere - imagini și sunete - avem această funcție care se va ocupa de fiecare dintre ele separat. Dacă este o imagine, creați o imagine bitmap și plasați-o într-o variabilă (al cărei nume este identic cu ID-ul imaginii încărcate) și apoi apelați handleLoadComplete funcție (pe care o vom scrie în continuare); dacă e un sunet, sunăm doar handleLoadComplete imediat.Acum, să discutăm handleLoadComplete funcție pe care tocmai am menționat-o:
funcția handleLoadComplete (eveniment) totalLoaded ++; dacă (manifest.length == totalLoaded) addTitleView ();
Este o funcție destul de simplă; noi crestem totalLoaded (care conține numărul de elemente încărcate până acum) și apoi verificăm dacă numărul de elemente din manifestul nostru este același cu numărul de elemente încărcate și, dacă da, mergeți la ecranul Meniul principal.
funcția addTitleView () //console.log("Adăugați vizualizarea titlului "); 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 (); // Butoanele ascultătorilor startB.onPress = tweenTitleView; creditsB.onPress = showCredit; Nimic special aici. Plasăm imaginile butoanelor Fundal, Buton de pornire și Credite pe scenă și pe legătură onPress manipulatoare de evenimente la butoanele Start și Credite.
Iată funcțiile care afișează și elimină ecranul de credite și tweenTitleView care începe jocul:
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; // Ascunde funcția Credite ascundeCredite (e) Tween.get (credite) .to (x: 480, 300) .call (rmvCredits); // Eliminați funcția Credite rmvCredits () stage.removeChild (credite); // Funcția Tween Title View tweenTitleView () // Începeți jocul Tween.get (TitleView) .to (y: -320, 300) .call (addGameView);
Am ajuns la partea principală a acestui tutorial, care este codul jocului propriu-zis.
Mai întâi de toate, trebuie să adăugăm toate dotările necesare la etapă, așa că facem asta în addGameView funcţie:
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.x = 211; playerScore.y = 20; cpuScore = text nou ('0', 'bold 20px Arial', '# A3FF24'); cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, player, cpu, ball); stage.update (); // Start Listener bg.onPress = startGame; Din nou, o functie destul de simpla care plaseaza obiectele pe ecran si adauga mouseEvent la imaginea de fundal, astfel incat atunci cand utilizatorul da click pe ea jocul va incepe (vom apela incepe jocul funcţie).
Să revedem incepe jocul funcţie:
funcția startGame (e) bg.onPress = null; stage.onMouseMove = mutaPaddle; Ticker.addListener (tkr, fals); tkr.tick = actualizare;
Aici, după cum puteți vedea, pe lângă adăugarea unui onmousemove eveniment care ne va misca paleta. Adăugăm căpușă eveniment, care va apela Actualizați funcție în fiecare cadru.
Să revedem movePaddle și restabili funcţii:
funcția movePaddle (e) // Mouse Movement player.y = e.stageY; / * Resetare * / resetare functie () 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;
În movePaddle, noi practic plasăm paleta utilizatorului la coordonatele y ale mouse-ului.
În restabili, facem ceva similar addGameView, cu excepția cazului în care nu adăugăm elemente grafice, deoarece acestea sunt deja pe ecran.
Utilizarea alerta vom afișa caseta de câștig și pierdere:
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);
Acum, pentru ultima parte a tutorialului nostru vom lucra la Actualizați (care apare în fiecare cadru al jocului - similar cu Flash-ul onEnterFrame):
actualizare funcție () // Ball Movement ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed; // Cpu Miscarea daca (cpu.y < ball.y) cpu.y = cpu.y + 4; else if(cpu.y > minge.y) cpu.y = cpu.y - 4; // Coliziunea peretelui dacă ((ball.y) < 0) ySpeed = -ySpeed; SoundJS.play('wall'); ;//Up if((ball.y + (30)) > 320) ySpeed = -ySpeed; SoundJS.play ('wall'); // jos / * Scor 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'); / * 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'); /* Stop Paddle from going out of canvas */ if(player.y >= 249) player.y = 249; / * Verificați dacă Win * / if (playerScore.text == '10') alert ('win'); / * Verificați dacă jocul este peste * / dacă (cpuScore.text == '10') alert ('lose'); Arată înfricoșător, nu-i așa? Nu vă faceți griji, vom examina fiecare parte și o vom discuta.
// Mingea de minge ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed;
În fiecare cadru, mingea se va deplasa în funcție de valorile sale de viteză x și y
// Cpu Miscarea daca ((cpu.y + 32) < (ball.y-14)) cpu.y = cpu.y + cpuSpeed; else if((cpu.y+32) > (mingi + 14)) cpu.y = cpu.y - cpuSpeed;
Aici avem AI-ul de bază al calculatorului, în care paleta computerului urmează pur și simplu mingea fără nici o logică specială. Doar comparăm locația centrului paletei (de aceea adăugăm 32 pixeli la valoarea cpu Y) la locația mingii, cu un mic decalaj, și deplasăm paleta în sus sau în jos, după cum este necesar.
if ((ball.y) < 0) //top ySpeed = -ySpeed; SoundJS.play('wall'); ; if((ball.y + (30)) > 320) // jos ySpeed = -ySpeed; SoundJS.play ( 'perete'); ; Dacă mingea atinge marginea superioară sau marginea inferioară a ecranului, mingea schimbă direcția și reda sunetul Wall Hit.
/ * 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'); Înregistrarea scorului este simplă: dacă mingea trece prin marginea stângă sau dreaptă, crește scorul jucatorului sau respectiv al procesorului, redă un sunet și resetează locația obiectelor folosind restabili funcția pe care am discutat-o mai devreme.
/ * Coliziune CPU * / 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'); Aici avem de-a face cu ciocnirile mingii cu padelele; de fiecare dată când mingea lovește una din palete, mingea schimbă direcția și se aude un sunet
dacă (player.y> = 249) player.y = 249;
Dacă paleta jucătorului iese din limite, plasăm-o în limite.
/ * Verificați pentru Win * / if (playerScore.text == '10') alert ('win'); / * Verificați dacă jocul este peste * / dacă (cpuScore.text == '10') alert ('lose'); În acest fragment, verificăm dacă unul dintre scorurile jucătorilor a atins 10 puncte și, dacă da, vom afișa pop-ul câștigător sau pierdut jucătorului (în funcție de statutul său câștigător).
Asta e, ai creat un joc de pong întreg folosind CreateJS. Vă mulțumim că ați avut timp să citiți acest tutorial.
