Learn CreateJS ved å bygge en HTML5 pong spill
14
Del
45
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. . Ikke gå glipp av
Nettet går fort - så fort at vår opprinnelige EaselJS opplæringen er allerede utdatert! I denne opplæringen vil du lære hvordan du bruker den nyeste CreateJS suite ved å lage en enkel pong-klone.
Endelig resultat Forhåndsvisning
La oss ta en titt på den endelige Resultatet vi skal jobbe mot:
Klikk for å spille
Denne opplæringen er basert på Carlos Yanez oss lage en pong spill i HTML5 Med EaselJS, som igjen bygget på hans Komme i gang med EaselJS guide. Grafikken og lydeffektene er alle tatt fra den tidligere opplæringen
Trinn 1:. Opprett index.html
Dette vil være vår viktigste index.html filen:
<! DOCTYPE html > < html > < head > < title > Pong < /title > < style > /* Fjerner Mobile Høydepunkt * /* {- WebKit-tap-høydepunkt-color: RGBA (0, 0, 0, 0);} < /style > < script src = "http://code.createjs.com/easeljs-0.4.2.min.js" > < /script > < script src = "http://code.createjs.com/tweenjs-0.2.0.min.js" > < /script > < script src = "http://code.createjs.com/soundjs-0.2.0.min.js" > < /script > < script src = "http://code.createjs.com/preloadjs-0.1.0.min.js" > < /script > < script src = "http://code.createjs.com/movieclip-0.4.1.min.js" > < /script > < script src = "assets /soundjs.flashplugin-0.2.0.min.js" > < /script > < script src = "Main.js" > < /script > < /head > < body onload = "main ();" > < lerret id = "PongStage" width = "480" height = "320" > < /lerret > < /body > < /html >.
Som du ser, det er ganske kort, og består hovedsakelig av lasting av CreateJS bibliotekene
Siden utgivelsen av CreateJS (som i utgangspunktet bunter alle de separate EaselJS biblioteker ) vi ikke lenger å laste ned JS-filer og vert dem på vår hjemmeside; filene er nå plassert i en CDN (Content Delivery Network) som tillater oss å laste disse filene eksternt så raskt som mulig
La oss se koden.
< style > /* Fjerner Mobile Høydepunkt * /* {- WebKit-tap-høydepunkt-color: RGBA (0, 0, 0 0,);} < /style >
Denne linjen fjerner mobile høydepunkt som kan vises når du prøver å spille spillet på mobil . (Mobil høydepunkt fører lerretet gjenstand for å bli markert og dermed ignorere dine fingerbevegelser.)
Neste opp, har vi lasting av CreateJS bibliotekene: >
< script src = "http: //code.createjs.com/easeljs-0.4.2.min.js"></script> < script src = "http://code.createjs.com/tweenjs-0.2.0.min.js" > < /script > < script src = "http://code.createjs.com/soundjs-0.2.0.min.js" > < /script > < script src = "http://code.createjs.com/preloadjs-0.1.0.min.js" > < /script > < script src = "http://code.createjs.com/movieclip-0.4.1.min.js" > < /script >
Denne koden laster JS-filer fra CreateJS CDN og det i utgangspunktet tillater oss å bruke noen av de CreateJS funksjoner i koden vår
Deretter vil vi laste SoundJS Flash plugin, som gir lyd støtte for nettlesere som ikke støtter HTML5 Audio. Dette gjøres ved hjelp av en SWF (Flash objekt) til å laste lydene
. ≪ script src = "assets /soundjs.flashplugin-0.2.0.min.js" > < /script >
I dette tilfellet vil vi ikke bruke CDN; I stedet vil vi laste ned SoundJS biblioteket fra http://createjs.com/#!/SoundJS/download og plasser soundjs.flashplugin-0.2.0.min.js og FlashAudioPlugin.swf filer i en lokal mappe som heter eiendeler.
Sist blant JS-filer, vil vi laste Main.js fil som inneholder all koden til spillet vårt:
< script src = "Main.js" > < /script >
Til slutt, la oss plassere en Canvas objekt på scenen vår
. < body onload = "main ();" > < lerret id = "PongStage" width = "480" height = "320" > < /lerret > < /body >
Nå kan vi begynne å jobbe på spillet koden
Trinn 2: Variabler
Våre spillet koden vil være inne i en fil som heter Main.js. , så opprette og lagre dette nå
Først av alt, la oss definere variabler for alle grafiske objekter i spillet.
Var lerret; //Vil være knyttet til lerretet i vår index.html pagevar scenen; //Er tilsvarende etappe i AS3; vil vi legge til "barn" til det //Graphics //[Bakgrunn] Var bg; //Bakgrunnen grafisk //[Title View] Var viktigste; //Hoved Backgroundvar startB; //Start-knappen i hoved menuvar creditsB; //Den studiepoeng knappen i hovedmenyen //[Studiepoeng] Var studiepoeng; //De Credits screene //[Spill View] Var spiller; //Spilleren padle graphicvar ball; //Ballen graphicvar cpu; //CPU paddlevar seier; //Vinner popupvar miste; //Den tapende popup
Jeg har lagt inn en kommentar for hver variabel, slik at du vet hva vi skal lasting i den variabelen
Neste opp, resultatet:
//[ ,,,0],Score] Var playerScore; //Den viktigste spilleren scorevar cpuScore; //CPU scorevar cpuSpeed = 6; //Hastigheten på CPU padle; jo raskere det blir vanskeligere spillet er
Vi trenger variabler for hastigheten på ballen:
//Variablesvar xSpeed = 5; Var ySpeed = 5;
Du kan endre disse verdiene til uansett du vil, hvis du ønsker å gjøre spillet lettere eller vanskeligere.
Hvis du er en Flash-utvikler, vet du at Flash er onEnterFrame er svært nyttig når du lager spill, så er det ting som må skje i enhver gitt ramme. (Hvis du ikke er kjent med denne ideen, sjekk ut denne artikkelen om spillet Loop.)
Vi har en tilsvarende for onEnterFrame i CreateJS, og det er den ticker objektet, som kan kjøre kode hver brøkdel av et sekund. La oss lage den variabelen som vil lenke til det:.
Var TKR = new Object;
Neste har vi preloader, som vil bruke de nye PreloadJS metoder
//preloadervar preloader; Var manifest; Var totalLoaded = 0;
preloader - vil inneholde PreloadJS objektet
manifest - vil holde en liste over filene vi trenger å laste
totalLoaded - denne variabelen vil holde antall.. filer som allerede er lastet.
Sist, men ikke minst i vår liste over variabler, har vi TitleView, som vil holde flere grafikk innenfor for å vise dem sammen (som en Flash Display).
Div TitleView = new Container ();
La oss gå videre til hovedfunksjonen ...
Trinn 3: The Main () Funksjon
Denne funksjonen er den første funksjonen som løper etter alle JS filene fra index.html er lastet. Men hva er det som ringer denne funksjonen
Vel, husk dette linje fra index.html filen
<? Body onload = "main ();" >
Denne koden snippet sier at når HTML (og JS bibliotekene) er lastet, hovedfunksjonen bør kjøre
La oss gjennom det.
funksjonen main () {/* Link Lerret * /lerret = document.getElementById ('PongStage'); scenen = ny Stage (lerret); stage.mouseEventsEnabled = true; /* Sett Flash-plugin for nettlesere som ikke støtter SoundJS * /SoundJS.FlashPlugin.BASE_PATH = "assets /"; if (SoundJS.checkPlugin (true)) {alert ("Feil!"); komme tilbake; } 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: "vinne"}, {src : "lose.png", id: "miste"}, {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:" veggen "}]; preloader = nye PreloadJS (); preloader.installPlugin (SoundJS); preloader.onProgress = handleProgress; preloader.onComplete = handleComplete; preloader.onFileLoad = handleFileLoad; preloader.loadManifest (manifest); /* Ticker * /Ticker.setFPS (30); Ticker.addListener (scene);}
La oss bryte ned hver del:
lerret = document.getElementById ('PongStage'); scenen = ny Stage (lerret); stage.mouseEventsEnabled = true;
Her knytter vi PongStage Canvas objekt fra index.html filen til lerretet variabel, og deretter opprette en Stage objekt fra at lerretet. (Scenen vil tillate oss å plassere objekter på den.)
mouseEventsEnabled gjør oss i stand til å bruke mus hendelser, slik at vi kan oppdage musebevegelser og klikk. Twitter /* Sett Flash-plugin for nettlesere som don ' t støtte SoundJS * /SoundJS.FlashPlugin.BASE_PATH = "assets /"; if (SoundJS.checkPlugin (true)) {alert ("Feil!"); komme tilbake; }
Her er vi konfigurere hvor Flash lyden plugin bor for disse nettleserne der HTML5 Audio ikke støttes
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: "vinne"}, {src: "lose.png", id: "miste"}, {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: "veggen"}];
I manifestet variabel legger vi en rekke filer vi ønsker å laste (og gir en unik ID for hver enkelt). Hver lyd har to formater - MP3 og OGG - fordi forskjellige nettlesere er (i) kompatibel med forskjellige formater
preloader = nye PreloadJS (.); preloader.installPlugin (SoundJS); preloader.onProgress = handleProgress; preloader.onComplete = handleComplete; preloader.onFileLoad = handleFileLoad; preloader.loadManifest (manifest);
Her er vi konfigurere preloader objektet med PreloadJS. PreloadJS er et nytt tillegg til de CreateJS biblioteker og ganske nyttig en.
Vi skaper en ny PreloadJS protestere og plasserer den i preloader variable, deretter tildele en metode til hver hendelse (onProgress, onComplete, onFileLoad). Til slutt bruker vi preloader å laste manifestet vi opprettet tidligere
Ticker.setFPS (30).; Ticker.addListener (scene);
Her kan vi legge til Ticker objektet til scenen og sette bildefrekvensen til 30 FPS; vi vil bruke det senere i spillet for enterframe funksjonalitet
Trinn 4:. Opprette preloader Funksjoner
funksjon handleProgress (event) {//bruk event.loaded å få andelen lasting} funksjon handleComplete (hendelse) {//utløses når alle lastingen er fullført} funksjon handleFileLoad (hendelse) {//utløses når en enkelt fil er ferdig lastet bryteren (event.type) {case PreloadJS.IMAGE: //bilde lastet Div img = new Image (); img.src = event.src; img.onload = handleLoadComplete; vindu [event.id] = new Bitmap (img); gå i stykker; case PreloadJS.SOUND: //lyd lastet handleLoadComplete (); gå i stykker; }}
La oss gjennom funksjonene:
handleProgress - I denne funksjonen vil du være i stand til å følge den prosentandel av innlastingen bruke denne parameter: event.loaded. Du kan bruke dette til å lage for eksempel en fremdriftslinje
handleComplete -.. Denne funksjonen kalles når alle filene er lastet (i tilfelle du ønsker å plassere noe der)
handleFileLoad - Siden vi legger to typer filer - bilder og lyder - vi har denne funksjonen som vil håndtere hver for seg. Hvis det er et bilde, skaper vi et bitmap bilde og legg den i en variabel (hvis navn er det samme som ID av lastet bildet) og deretter ringe handleLoadComplete funksjonen (som vi skal skrive neste); hvis det er en lyd så vi bare ringe handleLoadComplete umiddelbart
La oss nå diskutere handleLoadComplete funksjon jeg nettopp nevnte.
funksjon handleLoadComplete (hendelse) {totalLoaded ++; if (manifest.length == totalLoaded) {addTitleView (); }}
Det er en ganske grei funksjon; vi øke totalLoaded variabel (som holder antall eiendeler lastet så langt) og deretter vi sjekke om antall elementer i vår manifest er det samme som antall lastet eiendeler, og i så fall gå til hovedmenyen.
Trinn 5: Opprette hovedmenyen
funksjon addTitleView () {//console.log("Add Tittel View "); startB.x = 240 til 31,5; startB.y = 160; startB.name = 'startB'; creditsB.x = 241-42; creditsB.y = 200; TitleView.addChild (hoved, startB, creditsB); stage.addChild (bg, TitleView); stage.update (); //Button Lyttere startB.onPress = tweenTitleView; creditsB.onPress = showCredits;
Ikke noe spesielt her. Vi legger bildene i bakgrunnen, startknapp og Credits knapp på scenen og link onPress event handlers til Start og Studiepoeng knapper.
Her er de funksjonene som viser og fjerne kredite skjermen og tweenTitleView som starter spillet:
funksjons showCredits () {//Vis Credits credits.x = 480; stage.addChild (sp); stage.update (); Tween.get (sp) .til ({x: 0}, 300); credits.onPress = hideCredits;} //skjul Creditsfunction hideCredits (e) {Tween.get (sp) .til ({x: 480}, 300) .call (rmvCredits);} //Fjern Creditsfunction rmvCredits () {scenen. removeChild (sp);} //Tween Tittel Viewfunction tweenTitleView () {//Start Game Tween.get (TitleView) .til ({y: -320}, 300) .call (addGameView);}
Trinn 6: The Game Kode
Vi har nådd den viktigste delen av denne opplæringen som er koden for selve spillet
Først av alt, må vi legge alle de nødvendige ressurser til. scenen, så vi gjør det i addGameView funksjon:
funksjon addGameView () {//Destroy meny & Studiepoeng skjerm stage.removeChild (TitleView); TitleView = null; studiepoeng = null; //Legg Spill Vis player.x = 2; player.y = 160 til 37,5; cpu.x = 480-25; cpu.y = 160 til 37,5; ball.x = 240-15; ball.y = 160-15; //Score playerScore = ny tekst ('0', 'fet 20px Arial', '# A3FF24'); playerScore.x = 211; playerScore.y = 20; cpuScore = ny tekst ('0', 'fet 20px Arial', '# A3FF24'); cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, spiller, cpu, ball); stage.update (); //Start List bg.onPress = startGame;}
Igjen, en ganske grei funksjon som plasserer objektene på skjermen og legger til en mouseEvent til bakgrunnsbildet, slik at når brukeren klikker det spillet vil starte (vi vil kaller startGame funksjon)
La oss gjennomgå startGame funksjon.
funksjon startGame (e) {bg.onPress = null; stage.onMouseMove = movePaddle; Ticker.addListener (TKR, false); tkr.tick = oppdatering;}
Her, som du kan se, i tillegg til å legge en onMouseMove hendelse som vil flytte padle. Vi legger flåtten arrangementet, som vil kalle oppdateringsfunksjonen i hver ramme
La oss gjennomgå movePaddle og reset funksjoner:.
Funksjon movePaddle (e) {//Mouse Movement player.y = e.stageY;} /* Reset * /reset funksjon () {ball.x = 240-15; ball.y = 160-15; player.y = 160 til 37,5; cpu.y = 160 til 37,5; stage.onMouseMove = null; Ticker.removeListener (TKR); bg.onPress = startGame;.}
I movePaddle, vi i utgangspunktet plasserer brukerens padle på musens y-koordinat
I reset, gjør vi noe som ligner på addGameView, bortsett fra her vi ikke legge noen grafiske elementer siden de allerede er på skjermen
Ved hjelp av varslingsfunksjonen vi vil vise vinne og tape popup:.
funksjon alert (e) {Ticker.removeListener (TKR); stage.onMouseMove = null; bg.onPress = null if (e == 'vinne') {win.x = 140; win.y = -90; stage.addChild (seier); Tween.get (seier) .til ({y: 115}, 300); } Else {lose.x = 140; lose.y = -90; stage.addChild (tape); Tween.get (miste) .til ({y: 115}, 300); }}
Trinn 7: The Game Loop
Nå, for den siste delen av vår veiledning vil vi jobbe med oppdateringsfunksjonen (som forekommer i hver ramme av spillet - lik Flash s onEnterFrame):
funksjon oppdateringen () {//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 ('vegg'); }; //Up if ((ball.y + (30)) > 320) {ySpeed = -ySpeed; SoundJS.play ('vegg');}; //ned /* CPU Score * /if ((ball.x) < 0) {xSpeed = -xSpeed; cpuScore.text = parseInt (cpuScore.text + 1); reset (); SoundJS.play ('enemyScore'); } /* Spiller Score * /if ((ball.x + (30)) > 480) {xSpeed = -xSpeed; playerScore.text = parseInt (playerScore.text + 1); reset (); SoundJS.play ('playerScore'); } /* Cpu kollisjon * /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'); } /* Spiller kollisjon * /if (ball.x < = player.x + 22 & & ball.x > player.x & & ball.y > = player.y & & ball .Y < player.y +75) {xSpeed * = 1; SoundJS.play ('hit'); } /* Stopp Paddle fra å gå ut av lerretet * /if (player.y > = 249) {player.y = 249; } /* Sjekk for Win * /if (playerScore.text == '10') {alert ('vinne'); } /* Se etter Game Over * /if (cpuScore.text == '10') {alert ('mister'); }}
Ser skummelt ut, ikke sant? Ikke bekymre deg, vil vi gjennomgå hver del og diskutere det
//Ball Movement ball.x = ball.x + xSpeed.; ball.y = ball.y + ySpeed;
I hver ramme, vil ballen beveger seg i henhold til sin x og y fartsverdier
//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; }
Her har vi den grunnleggende AI av datamaskinen, der datamaskinen padle bare følger uten noen spesiell logikk ballen. Vi bare sammenligne plasseringen av senteret av padle (som er grunnen til at vi legger 32 piksler til cpu Y verdi) til plasseringen av ballen, med en liten forskyvning, og flytte padle opp eller ned etter behov. Anmeldelser if ((ball.y) < 0) {//topp ySpeed = -ySpeed; SoundJS.play ('vegg'); }; if ((ball.y + (30)) > 320) {//bunnen ySpeed = -ySpeed; SoundJS.play ('vegg');};
Hvis ballen treffer toppen grensen eller bunnen grensen av skjermen, endrer ballen retning og vi spiller Wall Hit lyden Twitter /* CPU Score * /. if ((ball.x) < 0) {xSpeed = -xSpeed; cpuScore.text = parseInt (cpuScore.text + 1); reset (); SoundJS.play ('enemyScore'); } /* Spiller Score * /if ((ball.x + (30)) > 480) {xSpeed = -xSpeed; playerScore.text = parseInt (playerScore.text + 1); reset (); SoundJS.play ('playerScore'); }
Stillingen innlogging er enkel: hvis ballen passerer venstre eller høyre grenser det øker poengsummen for spilleren eller CPU henholdsvis spiller en lyd, og tilbakestiller plasseringen av objektene med tilbakestillingsfunksjonen vi har diskutert tidligere . Twitter /* CPU kollisjon * /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");} /* Spiller kollisjon * /if (ball.x < = player.x + 22 & & ball.x > player.x & & ball.y > = player.y & & ball.y < player.y +75) {xSpeed * = 1; SoundJS.play ('hit'); }
Her har vi avtale med kollisjoner av ballen padleårer; hver gang ballen treffer en av padleårer, ballen endrer retning og en lyd spilles
if (player.y > = 249) {player.y = 249; }
Hvis spillerens padle går ut av banen, vi plasserer den tilbake innenfor grensene Twitter /* Sjekk for Win * /if (playerScore.text == '10') {alert ('seier.'); } /* Se etter Game Over * /if (cpuScore.text == '10') {alert ('mister'); }
I denne tekstutdrag, sjekker vi om en av spillernes score har nådd 10 poeng, og hvis så viser vi vinne eller tape popup til spilleren (i henhold til hans vinnende status).
< h2> Konklusjon
Det er det, har du laget en hel pong spillet ved hjelp CreateJS. Takk for at du tok deg tid til å lese denne opplæringen. Anmeldelser