Share
Nettverket beveger seg raskt - så fort at vår opprinnelige EaselJS opplæring allerede er utdatert! I denne opplæringen lærer du hvordan du bruker den nyeste CreateJS-pakken ved å lage en enkel Pong-klon.
La oss se på det endelige resultatet vi vil jobbe for:
Klikk for å spille
Denne opplæringen er basert på Carlos Yanez 'Create a Pong Game i HTML5 med EaselJS, som igjen bygger på sin Komme i gang med EaselJS guide. Grafikken og lydeffekter er tatt fra den tidligere opplæringen.
Accentsconagua
index.html Dette vil være vår viktigste index.html fil:
pong
Som du ser, er det ganske kort og består hovedsakelig av lasting av CreateJS-bibliotekene.
Siden utgivelsen av CreateJS (som i utgangspunktet bunter alle de separate EaselJS-bibliotekene), trenger vi ikke lenger å laste ned JS-filene og hoste dem på nettstedet vårt. filene er nå plassert i et CDN (Content Delivery Network) som lar oss laste disse filene eksternt så raskt som mulig.
La oss se på koden:
Denne linjen fjerner det mobile høydepunktet som kan vises når du prøver å spille spillet på mobilen. (Det mobile høydepunktet gjør at lerretobjektet blir merket og dermed ignorerer fingerbevegelsene dine.)
Deretter har vi lasting av CreateJS-bibliotekene:>
Denne koden laster JS-filene fra CreateJS CDN, og det gir oss i utgangspunktet mulighet til å bruke noen av CreateJS-funksjonene i vår kode
Deretter vil vi laste inn SoundJS Flash-plugin, som gir lydsupport for nettlesere som ikke støtter HTML5 Audio. Dette gjøres ved å bruke en SWF (et Flash-objekt) for å laste lydene.
I dette tilfellet vil vi ikke bruke CDN; I stedet vil vi laste ned SoundJS-biblioteket fra http://createjs.com/#!/SoundJS/download og plassere soundjs.flashplugin-0.2.0.min.js og FlashAudioPlugin.swf filer i en lokal mappe som heter eiendeler.
Sist blant JS-filene, laster vi inn Main.js fil som vil inneholde all koden til spillet vårt:
Til slutt, la oss plassere et lærerobjekt på vår scene.
Nå kan vi begynne å jobbe med spillkoden.
Vår spillkode vil være inne i en fil som heter Main.js, så lag 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 side var scenen; // Er tilsvarer scenen i AS3; vi legger til "barn" til det // Grafikk // [Bakgrunn] var bg; // Bakgrunnsfilmen // [Tittelvisning] var hoved; // Hovedbakgrunnen var startB; // Startknappen i hovedmenyen var creditsB; // Kredittknappen i hovedmenyen // [Credits] var credits; // Credits skjermbildet // [Game View] var player; // Spilleren padle grafikk var ball; // Ball grafikk var cpu; // CPU-padlen var vinner; // Den vinnende popupen mistet; // Den tapende popupen
Jeg har lagt til en kommentar for hver variabel slik at du vet hva vi skal laste inn i den variabelen
Neste opp, poengene:
// [Score] var playerScore; // Hovedspilleren scorer var cpuScore; // CPU-verdien var cpuSpeed = 6; // Hastigheten til CPU-padlen; Jo raskere det er, desto vanskeligere er spillet
Vi vil trenge variabler for ballens hastighet:
// Variabler var xSpeed = 5; var ySpeed = 5;
Du kan endre disse verdiene til det du vil, hvis du vil gjøre spillet enklere eller vanskeligere.
Hvis du er en Flash-utvikler, vet du at Flash er onEnterFrame er veldig nyttig når du lager spill, da det er ting som må skje i hver gitt ramme. (Hvis du ikke er kjent med denne ideen, sjekk ut denne artikkelen på Game Loop.)
Vi har en ekvivalent for onEnterFrame i CreateJS, og det er ticker objekt, som kan kjøre kode hver brøkdel av et sekund. La oss lage variabelen som vil koble til den:
var tkr = nytt objekt;
Neste har vi preloader, som vil bruke de nye PreloadJS-metodene.
// preloader var preloader; var åpenbar; var totaltLadet = 0;
preloader - vil inneholde PreloadJS-objektet.manifest - vil holde listen over filer vi trenger å laste.totalLoaded - Denne variabelen vil inneholde antall filer som allerede er lastet inn.Sist men ikke minst i vår liste over variabler, har vi TitleView, som vil holde flere grafikk inne for å vise dem sammen (som en Flash Display).
var TitleView = ny Container ();
La oss gå videre til hovedfunksjonen ...
Denne funksjonen er den første funksjonen som kjører etter alle JS-filene fra index.html er lastet. Men hva kaller denne funksjonen?
Vel, husk denne linjen fra index.html fil?
Denne kodestykket angir at når HTML- og JS-bibliotekene er lastet, vil Hoved funksjonen skal løpe.
La oss se gjennom det:
funksjon Main () / * Link Canvas * / canvas = document.getElementById ('PongStage'); scene = nytt scenen (lerret); stage.mouseEventsEnabled = true; / * Sett Flash plugin for nettlesere som ikke støtter SoundJS * / SoundJS.FlashPlugin.BASE_PATH = "assets /"; hvis (! SoundJS.checkPlugin (true)) alert ("Error!"); 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: "win", src : "lose.png", id: "lose", src: "playerScore.mp3 | playerScore.ogg", id: "playerScore", src: "enemyScore.mp3 | enemyScore.ogg", id: " fiendtlig score ", src:" hit.mp3 | hit.ogg ", id:" hit ", src:" wall.mp3 | wall.ogg ", id:" wall "]; preloader = ny PreloadJS (); preloader.installPlugin (SoundJS); preloader.onProgress = handleProgress; preloader.onComplete = handleComplete; preloader.onFileLoad = handleFileLoad; preloader.loadManifest (manifest); / * Ticker * / Ticker.setFPS (30); Ticker.addListener (trinn); La oss slå ned hver del:
lerret = document.getElementById ('PongStage'); scene = nytt scenen (lerret); stage.mouseEventsEnabled = true; Her knytter vi linken til PongStage Lerret objekt fra index.html filen til lerretvariabelen, og opprett deretter et Stage-objekt fra det lerretet. (Fasen vil tillate oss å plassere objekter på den.)
mouseEventsEnabled gjør det mulig for oss å bruke mushendelser, slik at vi kan oppdage musebevegelser og klikk.
/ * Sett Flash plugin for nettlesere som ikke støtter SoundJS * / SoundJS.FlashPlugin.BASE_PATH = "assets /"; hvis (! SoundJS.checkPlugin (true)) alert ("Error!"); komme tilbake; Her konfigurerer vi hvor Flash-lydpluggen er plassert for de 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: "win", src: "lost.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 "];
I manifestvariabelen plasserer vi en rekke filer vi vil laste inn (og gi en unik ID for hver enkelt). Hver lyd har to formater - MP3 og OGG - fordi forskjellige nettlesere er kompatible med forskjellige formater.
preloader = ny PreloadJS (); preloader.installPlugin (SoundJS); preloader.onProgress = handleProgress; preloader.onComplete = handleComplete; preloader.onFileLoad = handleFileLoad; preloader.loadManifest (manifest);
Her konfigurerer vi forhåndslasterobjektet ved hjelp av PreloadJS. PreloadJS er et nytt tillegg til CreateJS-bibliotekene og ganske nyttig.
Vi lager et nytt PreloadJS objekt og legger det i preloader variabel, deretter tilordne en metode til hver hendelse (onProgress, onComplete, onFileLoad). Til slutt bruker vi preloader å laste manifestet vi opprettet tidligere.
Ticker.setFPS (30); Ticker.addListener (trinn);
Her legger vi Ticker-objektet til scenen og setter rammen til 30 FPS; Vi bruker den senere i spillet for enterframe funksjonalitet.
funksjonshåndtakProgress (hendelse) // bruk event.loaded for å få prosentandelen av lasten funksjonhåndtakKomplett (hendelse) // utløste når alt lasting er fullført funksjonshåndtakFileLoad (hendelse) // utløst når en enkelt fil fullfører lasting bytt (event.type) tilfelle PreloadJS.IMAGE: // bilde lastet var img = nytt bilde (); img.src = event.src; img.onload = handleLoadComplete; vindu [event.id] = ny Bitmap (img); gå i stykker; tilfelle PreloadJS.SOUND: // lydbelastet handleLoadComplete (); gå i stykker;
La oss se gjennom funksjonene:
handleProgress - I denne funksjonen kan du følge prosentandelen av belastningsfremdriften ved hjelp av denne parameteren: event.loaded. Du kan bruke dette til å lage for eksempel en fremdriftslinje.handleComplete - Denne funksjonen kalles når alle filene er lastet (hvis du vil plassere noe der).handleFileLoad - Siden vi laster to typer filer - bilder og lyder - har vi denne funksjonen som håndterer hver enkelt separat. Hvis det er et bilde, lager vi et bitmapbilde og plasserer det i en variabel (hvis navn er det samme som ID for det lastede bildet) og deretter ringe til handleLoadComplete funksjon (som vi skal skrive neste); hvis det er en lyd så ringer vi bare handleLoadComplete umiddelbart.La oss nå diskutere handleLoadComplete funksjon jeg nettopp nevnte:
funksjonshåndtakLad Komplet (hendelse) totalLoaded ++; hvis (manifest.length == totalLoaded) addTitleView ();
Det er en ganske enkel funksjon; vi øker totalLoaded variabel (som inneholder antall eiendeler lastet så langt) og så sjekker vi om antall elementer i manifestet er det samme som antall lastede eiendeler, og i så fall gå til hovedmenyskjermbildet.
funksjon addTitleView () //console.log("Add Title View "); startB.x = 240 - 31.5; startB.y = 160; startB.name = 'startB'; kreditterB.x = 241 - 42; kreditterB.y = 200; TitleView.addChild (main, startB, creditsB); stage.addChild (bg, TitleView); stage.update (); // Button Lyttere startB.onPress = tweenTitleView; creditsB.onPress = showCredits; Ikke noe spesielt her. Vi plasserer bildene av knappen Bakgrunn, Startknapp og Kreditt på scenen og lenken onPress hendelseshåndterer til start- og kreditt-knappene.
Her er de funksjonene som viser og fjerner kreditts skjermen og tweenTitleView som starter spillet:
funksjon showCredits () // Vis Credits credits.x = 480; stage.addChild (sp); stage.update (); Tween.get (kreditter) .to (x: 0, 300); credits.onPress = hideCredits; // Hide Credits funksjon hideCredits (e) Tween.get (credits) .to (x: 480, 300) .call (rmvCredits); // Fjern Credits-funksjonen rmvCredits () stage.removeChild (credits); // Tween Tittel Vis funksjon tweenTitleView () // Start spillet Tween.get (TitleView) .to (y: -320, 300) .call (addGameView);
Vi har nådd hoveddelen av denne opplæringen som er koden til selve spillet.
Først av alt, må vi legge til alle nødvendige eiendeler til scenen, så gjør vi det i addGameView funksjon:
funksjon addGameView () // Destroy Menu & Credits skjerm scene.removeChild (TitleView); TitleView = null; kreditter = null; // Legg til spillvisning 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 = ny tekst ('0', 'fet 20px Arial', '# A3FF24'); cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, spiller, cpu, ball); stage.update (); // Start Listener bg.onPress = startGame; Igjen, en ganske enkel funksjon som plasserer objektene på skjermen og legger til en mouseEvent på bakgrunnsbildet, slik at når brukeren klikker på startet spillet (vi vil ringe start spill funksjon).
La oss se gjennom start spill funksjon:
funksjonstartGame (e) bg.onPress = null; stage.onMouseMove = movePaddle; Ticker.addListener (tkr, false); tkr.tick = update;
Her, som du kan se, i tillegg til å legge til en onMouseMove arrangement som vil flytte vår padle. Vi legger til sett kryss arrangement som vil ringe til Oppdater Fungerer i hver ramme.
La oss se gjennom movePaddle og tilbakestille funksjoner:
funksjon movePaddle (e) // Mouse Movement player.y = e.stageY; / * Tilbakestill * / funksjon 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;
I movePaddle, Vi legger i utgangspunktet brukerens padle på musens y-koordinat.
I tilbakestille, vi gjør noe som ligner på addGameView, bortsett fra her legger vi ikke til noen grafiske elementer siden de allerede er på skjermen.
Bruker varsling funksjon vi viser den vinnende og tapende popupen:
funksjonalarm (e) Ticker.removeListener (tkr); stage.onMouseMove = null; bg.onPress = null hvis (e == 'win') win.x = 140; win.y = -90; stage.addChild (Win); Tween.get (seier) .to (y: 115, 300); ellers lose.x = 140; lose.y = -90; stage.addChild (tape); Tween.get (tap) .to (y: 115, 300);
Nå, for den siste delen av opplæringen vår, jobber vi på Oppdater funksjon (som forekommer i alle rammer av spillet - ligner på Flash onEnterFrame):
funksjon oppdatering () // Ball bevegelse ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed; // Cpu Movement hvis (cpu.y < ball.y) cpu.y = cpu.y + 4; else if(cpu.y > ball.y) cpu.y = cpu.y - 4; // Veggkollisjon hvis ((ball.y) < 0) ySpeed = -ySpeed; SoundJS.play('wall'); ;//Up if((ball.y + (30)) > 320) ySpeed = -ySpeed; SoundJS.play ('wall');; // ned / * CPU-poengsum * / hvis ((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); tilbakestille(); SoundJS.play ( 'playerScore'); / * Cpu kollisjon * / hvis (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; / * Check for Win * / if (playerScore.text == '10') alert ('win'); / * Sjekk for spill over * / hvis (cpuScore.text == '10') alert ('lose'); Ser skummelt ut, ikke sant? Ikke bekymre deg, vi vurderer hver del og diskuterer det.
// Ball Bevegelse ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed;
I hver ramme vil ballen bevege seg i henhold til sine x- og y-hastighetsverdier
// Cpu Movement hvis ((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 på datamaskinen, hvor datamaskinens padle bare følger ballen uten spesiell logikk. Vi sammenligner bare plasseringen av sentrum av padleen (som er grunnen til at vi legger til 32 piksler til cpu Y-verdien) til posisjonen til ballen, med en liten forskyvning, og flytte padle opp eller ned etter behov.
if ((ball.y) < 0) //top ySpeed = -ySpeed; SoundJS.play('wall'); ; if((ball.y + (30)) > 320) // bunn ySpeed = -ySpeed; SoundJS.play ( 'vegg'); ; Hvis ballen rammer øverste kant eller nederste kant på skjermen, endrer ballen retningen og vi spiller Wall Hit-lyden.
/ * CPU Score * / hvis ((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); tilbakestille(); SoundJS.play ( 'playerScore'); Poengsummen er enkel: Hvis ballen passerer til venstre eller høyre kant, øker det poengsummen til spilleren eller CPUen, spiller en lyd og tilbakestiller plasseringen av objektene ved hjelp av tilbakestille funksjonen vi har diskutert tidligere.
/ * CPU kollisjon * / hvis (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'); Her behandler vi kollisjoner med ballen med padlene. hver gang ballen rammer en av padlene, endrer ballen retningen og en lyd spilles
hvis (player.y> = 249) player.y = 249;
Hvis spillerens padle går ut av grensen, plasserer vi den tilbake innenfor grensene.
/ * Check for Win * / if (playerScore.text == '10') alert ('win'); / * Sjekk for spill over * / hvis (cpuScore.text == '10') alert ('lose'); I denne utgaven sjekker vi om en av spillernes poeng har nådd 10 poeng, og i så fall viser vi vinnende eller tapende popup til spilleren (i henhold til hans vinnende status).
Det er det, du har laget et helt pong spill ved hjelp av CreateJS. Takk for at du tok deg tid til å lese denne opplæringen.
