Share
I denne opplæringen lager vi en klone av det klassiske spillet, Pong, i HTML5, ved hjelp av EaselJS-biblioteket. Spillet vil ha flere skjermer, lydeffekter og en (veldig enkel) AI-motstander.
Ved å bruke pre-laget grafikk vil vi kode en underholdende pong spill i HTML5 ved hjelp av EaselJS-biblioteket, som gir et Flash-lignende grensesnitt for HTML5-lerretet. For en introduksjon til EaselJS, se denne Activetuts + artikkelen.
Spilleren vil kunne styre en padle ved hjelp av musen og spille mot motoren mot datamaskinen-kontrolleren for å få poeng.
Et enkelt grensesnitt med en neo-futuristisk stil vil bli brukt; Dette innebærer flere former, knapper, bitmaps og mer.
Grafikken som kreves for denne opplæringen finner du i vedlagte nedlastning.
EaselJS biblioteket vil bli brukt til å bygge vårt spill, sørg for at du leser Starter opplæringsprogram hvis du er ny på dette biblioteket.
Du kan laste ned den nyeste versjonen av EaselJS fra sitt offisielle nettsted. Dette kan imidlertid være uforenlig med koden her, så jeg foreslår at du bruker versjonen av biblioteket som følger med kildedownloaden.
La oss forberede vårt HTML-dokument. Vi starter med det aller grunnleggende, bare en barebones disposisjon:
pong
Vi må legge til litt CSS også, for å fjerne standard høydepunktet som brukes når du klikker på et element i en mobil nettleser. Uten dette vil mobilopplevelsen reduseres drastisk.
pong
Følgende kode legger til nødvendige javascript-biblioteker for at appen vår skal kunne fungere.
pong /
I tillegg til EaselJS bruker vi også TweenJS (for håndtering av skjermoverganger og spillsløyfen) og SoundJS (for lydeffekter).
Main.js er filen vi skal bruke for å holde vår egen JS-kode.
I de neste linjene kaller vi vår Hoved() funksjon. Dette er funksjonen som vil starte applikasjonen vår; Det vil bli opprettet senere i opplæringen, inne Main.js.
pong
Et HTML5 lerret er opprettet i denne linjen; Vi tildeler den en ID slik at vi kan referere den senere og også sette bredden og høyden.
pong
La oss starte vår spillopprettelse!
Åpne din foretrukne JavaScript-editor (noen tekstredigerer vil fungere, men du vil ikke ha syntaxutheving) og forberede deg på å skrive koden. Husk å lagre filen som Main.js i prosjektmappen din.
Vi starter med å definere alle grafiske og logiske variabler.
De neste variablene representerer HTML-lerretelementet og scenen som vil bli knyttet til den. De scene variabel vil oppføre seg på samme måte som AS3-scenen.
/ * Definer lærred * / var lerret; var scenen;
Denne variabelen lagrer tittelbakgrunnsbildet.
/ * Bakgrunn * / var bgImg = nytt bilde (); var bg;
Dette er tittelvisningen, den første interaktive skjermen som skal vises i vårt spill. Disse variablene lagrer komponentene sine.
/ * Tittelvisning * / var mainImg = nytt bilde (); var hoved; var startBImg = nytt bilde (); var startB; var creditsBImg = nytt bilde (); var creditsB; var TitleView = ny Container ();
Denne visningen vil vise kreditter, år og opphavsrett til spillet, disse variablene vil bli brukt til å lagre det.
/ * Kreditter * / var creditsViewImg = nytt bilde (); var kreditter;
De neste variablene lagrer den enkelte grafikken som vises i spillvisningen:
/ * Spillvisning * / var playerImg = nytt bilde (); var spiller; var ballImg = nytt bilde (); var ball; var cpuImg = nytt bilde (); var cpu; var winImg = nytt bilde (); var vinne; var loseImg = nytt bilde (); var miste;
Poengverdiene vil bli håndtert av de neste variablene:
/ * Score * / var playerScore; var cpuScore;
Dette er variablene vi skal bruke, les kommentarene i koden for å forstå hva de er for:
var xSpeed = 5; // Horisontal fart på ballen var ySpeed = 5; // Vertikal hastighet på ballen var gfxLoaded = 0; // brukes som en forhåndslaster, teller de allerede lastede elementene var tkr = nytt objekt; // brukt som en hendelse lytter til Ticker
Vi bruker lydeffekter for å forbedre følelsen av spillet. Lyder i dette eksemplet ble opprettet ved hjelp av det utmerkede gratis verktøyet as3sfxr og konvertert til MP3 ved hjelp av Audacity.
Lydene som kreves kan alle bli funnet i kildedownloaden. Hvis du vil lage din egen, trenger du fire:
Accentsconagua
hit.mp3: Spilt når ballen treffer en padleplayerScore.mp3: Spilt når de spiller scorerenemyScore.mp3: spilte når fienden scorerwall.mp3: Spilt når ballen treffer topp- eller bunngrensenDe Hoved() funksjonen vil være den første som skal utføres når nettsiden er lastet, fordi den er referert til i på Last attributten til HTML-dokumentet (se trinn 7).
Det vil ringe de nødvendige funksjonene for å starte spillet.
funksjon Hoved () // kode ...
Denne koden får HTML-lerret-IDen og kobler den til klassen EaselJS Stage. Dette gjør at scenevarianten oppfører seg som sceneklassen i AS3. Legg til dette til Hoved().
/ * Link Canvas * / canvas = document.getElementById ('Pong'); scene = nytt scenen (lerret); Mushendelser er deaktivert som standard i EaselJS for å forbedre ytelsen. Siden vi trenger de i spillet, legger vi til følgende linje. Legg til dette til Hoved().
stage.mouseEventsEnabled = true;
Vi bruker SoundJS for å legge til lyder i spillet vårt; skriv følgende kode for å importere lydene vi skal bruke. Legg til dette til Hoved().
/ * Lyd * / SoundJS.addBatch ([navn: 'hit', src: 'hit.mp3', forekomster: 1, navn: 'playerScore', src: 'playerScore.mp3', forekomster: 1 name: 'enemyScore', src: 'enemyScore.mp3', forekomster: 1, navn: 'vegg', src: 'wall.mp3', forekomster: 1]);
Denne koden brukes til å forhåndsinstallere grafikken, ved hjelp av en funksjon som vi skal skrive senere. Den setter bildobjektene vi opprettet før, for å peke på de relevante kilde-PNG-filene i dokumentmappen vår.
Et navn er gitt til hver, slik at vi kan oppdage hvilket bilde som lastes inn senere, og endelig fungerer funksjonen som håndterer de lastede bildene..
Legg til dette til Hoved().
/ * Legg inn GFX * / bgImg.src = 'bg.png'; bgImg.name = 'bg'; bgImg.onload = loadGfx; mainImg.src = 'main.png'; mainImg.name = 'main'; mainImg.onload = loadGfx; startBImg.src = 'startB.png'; startBImg.name = 'startB'; startBImg.onload = loadGfx; creditsBImg.src = 'creditsB.png'; creditsBImg.name = 'creditsB'; creditsBImg.onload = loadGfx; creditsViewImg.src = 'credits.png'; creditsViewImg.name = 'credits'; creditsViewImg.onload = loadGfx; playerImg.src = 'paddle.png'; playerImg.name = 'player'; playerImg.onload = loadGfx; ballImg.src = 'ball.png'; ballImg.name = 'ball'; ballImg.onload = loadGfx; cpuImg.src = 'paddle.png'; cpuImg.name = 'cpu'; cpuImg.onload = loadGfx; winImg.src = 'win.png'; winImg.name = 'win'; winImg.onload = loadGfx; loseImg.src = 'lose.png'; loseImg.name = 'lose'; loseImg.onload = loadGfx;
Ticker-klassen gir en sentral tikk eller hjerteslag kringkastet med et angitt intervall. Dette kan brukes til å utløse spillsløyfen.
Følgende kode angir bildefrekvensen til 30 og definerer scenen som lytteren til flåttene.
TweenJS-klassen vil lytte til dette krysset for å utføre animasjonene. Legg til dette til Hoved().
/ * Ticker * / Ticker.setFPS (30); Ticker.addListener (trinn);
Hver gang en grafikk er lastet, kjører denne funksjonen. Det vil tildele hvert bilde til en bitmap-objekt og kontrollere at alle elementene lastes inn før du fortsetter.
funksjon loadGfx (e) if (e.target.name = 'bg') bg = ny Bitmap (bgImg); hvis (e.target.name = 'main') main = ny Bitmap (mainImg); hvis (e.target.name = 'startB') startB = nytt Bitmap (startBImg); hvis (e.target.name = 'creditsB') creditsB = nytt Bitmap (creditsBImg); hvis (e.target. navn = 'kreditter') credits = ny Bitmap (creditsViewImg); hvis (e.target.name = 'player') spiller = ny Bitmap (playerImg); hvis (e.target.name = 'ball') ball = ny Bitmap (ballImg); hvis (e.target.name = 'cpu') cpu = ny Bitmap (cpuImg); hvis (e.target.name = 'win') win = new Bitmap winImg); hvis (e.target.name = 'lose') lose = new Bitmap (loseImg); gfxLoaded ++; hvis (gfxLoaded == 10) // husk å endre dette hvis du legger til flere bilder addTitleView ();
Når alle grafikkene er lastet, blir tittelvisningen lagt til scenen ved hjelp av følgende funksjon:
funksjon addTitleView () 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 ();
Denne funksjonen legger til de nødvendige lytterne til TitleView knapper (det er en del av addTitleView ()):
startB.onPress = addGameView; creditsB.onPress = showCredits;
De studiepoeng skjermen vises når brukeren klikker på kredittknappen; En muselytter er lagt til hele bildet for å fjerne det.
funksjon showCredits () // Vis Credits credits.x = 480; stage.addChild (sp); stage.update (); Tween.get (kreditter) .to (x: 0, 300); credits.onPress = hideCredits;
Når studiepoeng skjermen er klikket den vil bli tweened tilbake og fjernet fra scenen.
// Skjul Credits funksjon hideCredits (e) Tween.get (credits) .to (x: 480, 300) .call (rmvCredits); // Fjern Credits-funksjonen rmvCredits () stage.removeChild (credits);
La oss stoppe her for å teste hva vi har gjort hittil. Klikk her for en milepæl demo.
Husk at noen linjer har blitt kommentert da noen funksjoner ikke er opprettet ennå.
Husk at milepælen er inkludert i kildefilene, så hvis filmen din av en eller annen grunn ikke etterligner denne, sammenlign din kilde til min for å se hva som kan forårsake det.
Følgende linjer fjerner TitleView fra scenen og legger til GameView elementer til scenen. En muselytter legges til bakgrunnen for å starte spillet når det klikkes.
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.maxWidth = 1000; // fikse for Chrome 17 playerScore.x = 211; playerScore.y = 20; cpuScore = ny tekst ('0', 'fet 20px Arial', '# A3FF24'); cpuScore.maxWidth = 1000; // fikse for Chrome 17 cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, spiller, cpu, ball); stage.update (); // Start Listener bg.onPress = startGame; Spilleren vil bevege seg sammen med musens vertikale posisjon:
funksjon movePaddle (e) // Mouse Movement player.y = e.stageY;
Denne koden kjøres når spilleren klikker spillbakgrunnen, den legger til muselytteren som utløser funksjonen i forrige trinn, og legger til en ticker for å kontrollere spillsløyfen.
Vær oppmerksom på måten ticker er opprettet på: Det er ekvivalent med en Timer-hendelse i AS3.
funksjonstartGame (e) bg.onPress = null; stage.onMouseMove = movePaddle; Ticker.addListener (tkr, false); tkr.tick = update;
Når et poeng er scoret (av spilleren eller datamaskinen), vil padlene og ballen returnere til sine opprinnelige posisjoner og spillet vil bli satt på pause:
funksjon reset () ball.x = 240 - 15; ball.y = 160-15; player.y = 160 - 37.5; cpu.y = 160 - 37,5; stage.onMouseMove = null; // slutte å lytte til musen Ticker.removeListener (tkr); // pause spillet bg.onPress = startGame;
Hvis spillet ikke er stoppet, vil ballen flyttes hver ramme ved hjelp av variablene vi opprettet før.
funksjon oppdatering () // Ball bevegelse ball.x = ball.x + xSpeed; ball.y = ball.y + ySpeed;
Denne koden styrer datamaskinens bevegelse; padleen er flyttet på en måte at den vil følge ballen mens den fortsatt har noen feilmargin.
if (cpu.y < ball.y) cpu.y = cpu.y + 2.5; else if(cpu.y > ball.y) cpu.y = cpu.y - 2.5;
Her kontrollerer vi om ballen er på toppen eller bunnen av lerretet; I så fall reverseres den vertikale hastigheten og en lyd spilles.
if ((ball.y) < 0) ySpeed = -ySpeed; SoundJS.play('wall');;//Up if((ball.y + (30)) > 320) ySpeed = -ySpeed; SoundJS.play ( 'vegg');; // ned Nå venstre og høyre side. Denne koden endrer også poengsummen, kaller tilbakestillingsfunksjonen og spiller en annen lyd avhengig av hvilken side ballen berørte.
/ * 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'); Følgende kode kontrollerer om ballen kolliderer med en padle, ved å sammenligne padleposisjonen til ballens koordinater. Hvis grenseboksene til de to skjærer, er det en kollisjon, så vi reverserer kulehastigheten og spiller en lyd.
/ * 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'); Du kan endre sluttvilkårene i de neste linjene - den er satt til 10 poeng som standard.
/ * Check for Win * / if (playerScore.text == '10') alert ('win'); / * Sjekk for spill over * / hvis (cpuScore.text == '10') alert ('lose'); Denne funksjonen stopper spillet og viser et varsel, hvis innhold er avhengig av spillresultatet.
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);
Lagre arbeidet ditt (hvis du ikke har det) og åpne HTML-filen i nettleseren for å se spillet ditt!
Prøv å endre spillets variabler for å lage din egen versjon av spillet!
Jeg håper du likte denne opplæringen, takk for å lese!
