La oss starte med en grunnleggende HTML-fil (index.html), sourcing "gamepad.js" (en blank Javascript-fil)

indeksen.. html
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title > Introduksjon til Gamepad API < /title > < /head > < body > < h1 > Gamepad API < /h1 > < script src = "gamepad.js" > < /script > < /body > < /html >

Tilkobling av en gamepad oppdages med en enkel Javascript hendelse lytteren, hendelsen sparken kalles "MozGamepadConnected". Så det første vi må gjøre er å legge til en hendelse lytteren til vinduet for å oppdage den hendelsen.

Jeg er også å legge en tilbakeringingsfunksjonen som vil logge detaljene i hendelsen til Firebug konsoll. Dette er informasjon vi er mest interessert i, og hva som faktisk vil fortelle oss at vi har koblet en gamepad vellykket
funksjon gamepadConnected (evt) {console.log (evt.); } window.addEventListener ('MozGamepadConnected', gamepadConnected);.

Kjør index.html i Nightly og åpne opp Firebug konsollen, her vi vil være i stand til å se logging av hendelsen fra vår tilbakeringingsfunksjonen
< p> Sørg for at kontrolleren er slått av og ikke er koblet trådløst til en spillkonsoll. Koble den til datamaskinen via USB og strøm på kontrolleren, se hendelsesloggen i konsollen.

Great, har vi en gamepad kobler til en nettleser, ingen ekstra plugins eller drivere ! påkrevd

Det er like viktig å vite om en gamepad er koblet i tillegg, så la oss se på hendelsen, "MozGamepadDisconnected"

I likhet med trinn én, legge til en hendelse lytteren for en frakobling hendelse og en tilbakeringingsfunksjonen til å logge hendelsesdetaljene
funksjon gamepadDisconnected (evt) {console.log (evt.); } window.addEventListener ('MozGamepadDisconnected', gamepadDisconnected);

Hvis du er gamepad er fortsatt koblet til, oppdatere siden din (som du vil se tilkoblet hendelse være logget inn), og deretter koble gamepad ved å ta ut den fra USB-porten . Du bør få en hendelseslogg som denne.

Nå vet vi når en gamepad er tilkoblet og frakoblet, er det sannsynligvis en god idé å ta opp tilstanden inne i en variabel og gjør deg klar til å oppdage knappe hendelser
Var gamepadActive = false;! funksjon gamepadConnected (evt) {console.log (evt); gamepadActive = true;} funksjon gamepadDisconnected (evt) {console.log (evt); gamepadActive = false;} window.addEventListener ('MozGamepadConnected', gamepadConnected); window.addEventListener ('MozGamepadDisconnected', gamepadDisconnected);

knappetrykk, igjen, bruke en hendelse lytteren og tilbakeringingsfunksjonen med to hendelsene, "MozGamepadButtonDown" og "MozGamepadButtonUp".

Jeg vil foreslå å logge hele arrangementet fra knappetrykk selv å se hva som skjer, men viktig informasjon vi trenger å komme fra denne hendelsen er evt.button. Dette er den numeriske id på knappen som ble trykket.

Den tilbakeringingsfunksjonen denne gangen tar en andre parameter, til en boolsk verdi teste om ble trykket eller sluppet knappen. . Vi setter dette oss i tilbakeringing funksjoner av hendelsen lyttere
funksjon buttonPressed (evt, trykket) {console.log (evt.button, trykket); } window.addEventListener ("MozGamepadButtonDown", funksjon (evt) {buttonPressed (evt, true);}); window.addEventListener ("MozGamepadButtonUp", funksjon (evt) {buttonPressed (evt, false);});

Dette skal nå sende ut IDer av knappene som er presset, og om de ble presset eller sluppet (gjelder for knappen ned, falsk for knapp opp).

Neste vi vil opprette en matrise . med alle PlayStation 3 knapper i Indeksene i matrisen vil kartlegge de IDer som brukes på denne gamepad, med verdiene blir navnet på knappen
Var gamepadActive = false, ps3Buttons = new Array ();. ps3Buttons [ ,,,0],12] = "trekanten", ps3Buttons [15] = 'firkantet', ps3Buttons [14] = 'kors', ps3Buttons [13] = 'sirkel', ps3Buttons [4] = 'up', ps3Buttons [7] = 'venstre ', ps3Buttons [6] = "ned", ps3Buttons [5] = "rett", ps3Buttons [10] =' L1 ', ps3Buttons [8] =' L2 ', ps3Buttons [11] =' R1 ', ps3Buttons [9 ] = 'R2', ps3Buttons [1] = 'L3', ps3Buttons [2] = 'R3, ps3Buttons [16] =' PS ', ps3Buttons [0] =' velger ', ps3Buttons [3] = "Start";.

Hvis du bruker en annen kontroller, ta deg tid til å finne ut hvilken indeks går med hvilken knapp, og lagre som info i en lignende rekke

Hvis vi nå endrer buttonPressed () -funksjonen aldri så litt, kan vi enkelt finne ut hvilken knapp på kontrolleren har blitt trykket
funksjon buttonPressed (evt, trykket) {console.log (ps3Buttons [evt.button] + 'ble trykket');}.

Gi det en go! Trykke på knappene på kontrolleren skal nå logge navnet på trykk på knappen. Dette vil være mye lettere å forstå enn "-knappen 5" (som i mitt tilfelle, er på D-pad)

Oppdager akse hendelser er i utgangspunktet å holde styr på hvor de venstre og høyre analoge spakene på gamepad er plassert ved hjelp av "MozGamepadAxisMove" event.

Legg til den nye hendelsesbehandling og tilbakeringingsfunksjonen.
funksjons moveAnalogSticks (evt) { console.log (evt.axis, evt.value);} window.addEventListener ("MozGamepadAxisMove", moveAnalogSticks);?

Dette er hva vi får - forvirrende, rett

Det er bare én hendelse avfyrt av både analoge spakene; hver hendelse gir oss en av fire mulige akse og en verdi mellom -1,0 og 1,0. Axis 0 og 1 tilhører venstre analoge spaken og akse 2 og 3 tilhører høyresiden.

I diagrammet ovenfor ser du akse 0 og 2 tilsvarer x-aksen, og 1 og 3 svarer til y-aksen. Ved å bruke både x- og y-aksen for hver enkelt analoge spaken, kan du finne ut hvilken vei den analoge spaken står overfor!

På forskjellige gamepads, du kan ha andre akser. For eksempel utløser skulderen på en Xbox-kontrolleren er også analog

Som dekker alle hendelsene som vi i dag kan ta fra en gamepad , så la oss sette det vi har lært i praksis.

Nå, jeg ønsker ikke å gå for tungt inn i spillet utvikling siden av ting, som vi fokuserer på hva vi bruker til å styre spillene selv. En av de viktigste tingene å se på, selv om, er å bytte kontrollordninger. Som ikke alle vil ha en gamepad klar for hånden, må vi sørge for at vi gir kontroller for både tastaturet og gamepad

For å få en liten demo oppe og går, skape et lerret element i html-fil med en id av "spillet" og angi bredden til 600 og høyden til 540. Som du kanskje vet, er lerretet element som vanligvis brukes til å gjengi HTML-spill på.

Du vil også være lurt å kopiere "ship.png" og "space.jpg" bilder fra kilden nedlastingen på arbeidsmappe som disse er hva vi skal gjengi til lerretet. Alternativt finne noen grafikk av din egen å ha en lek med
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title > Introduksjon til Gamepad API < /title > < /head > < body > < h1 > Gamepad API < /h1 > < lerret id = "game" width = "600" height = "540" > < /lerret > < script src = "gamepad.js" > < /script > < /body > < /html >

Nå som lerretet element er i vår DOM, ønsker vi å lage et spill sløyfe for å gjengi spillet vårt

. Jeg bruker et mellomlegg for "requestAnimationFrame" av Paul irsk som vil være grunnlaget for vår loop. Deretter får vi 2D sammenheng med lerretet som vi skal bruke til å tegne på og opprette to nye bildeobjekter, en for bakgrunnen og en for våre romskip.
//Http://paulirish.com/2011/requestanimationframe-for-smart-anime /window.requestAnimFrame = (function () {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || funksjon (/* funksjon * /tilbakeringing, /* DOMElement * /element) {window.setTimeout (tilbakeringing, 1000-1060);};}) (); Var lerret = document.getElementById ("spillet"), ctx = canvas.getContext ('2d') Skips = new Image (), plass = new Image (); space.src = "space.jpg"; ship.src = "ship.png";

Deretter spilleren objekt. Den har x og y-koordinater som holder styr på hvor det skal vises på lerretet; fire retnings stater (opp, ned, venstre og høyre), slik at vi kan vite hvilken vei skipet er i bevegelse; en render () -funksjonen, som først kaller updatePosition () og deretter trekker bildet av skipet på lerretet basert på x- og y-koordinater, og til slutt updatePosition () -funksjonen i seg selv, hvilke tester for å se hvilken vei skipet er stilt å flytte og oppdaterer sin posisjon tilsvar
Var spiller = {x:. 200, y: 250, opp: falsk, ned: false, venstre: false, høyre: false, render: function () {this.updatePosition (); ctx.drawImage (skip, this.x, this.y); } UpdatePosition: function () {this.up? this.y--: false; this.down? this.y ++: false; this.left? this.x--: false; this.right? this.x ++: false; }}

Etter at vi har vår "renderGame" -funksjon som trekker plass bakgrunnsbildet på lerretet først, deretter trekker våre romskip på toppen av det.

Og til slutt, vår loop. Denne funksjonen kaller seg igjen og igjen, hver gang du ringer vår "renderGame" -funksjonen
funksjon renderGame () {ctx.drawImage (plass, 0,0).; player.render ();}; (funksjon animloop () {requestAnimFrame (animloop); renderGame ();}) ();

Din lerretet skal nå ha en fin plass ute bakgrunn med et romskip satt i midten av det - ikke altfor spennende, jeg vet. Så la oss legge til noen kontroller

I vår spillerkode vi kåret de fire knappene som vi ønsker å kontrollere våre skip med. Disse matche opp til navnene på knappene inne i ps3Buttons [] array. Så, er alt vi trenger å gjøre å endre vår buttonPressed () -funksjonen aldri så litt, og vi skal flytte
Var spiller = {... opp. Falsk, ned: false, venstre: false, høyre: falsk, ...}

Nå når en gamepad knappen trykkes eller slippes det vil sette sin stat i spilleren objekt, så når den "opp" -knappen, player.up = true /false vil bli satt. Anmeldelser funksjon buttonPressed (evt, trykket) {console.log (evt.button, trykket); spiller [ps3Buttons [evt.button]] = trykket? sant: false;}

Leder tilbake over til demo og du bør være i stand til å flytte skipet ditt rundt

Som ikke alle spille spillet vil ha en gamepad, vil du sannsynligvis fortsatt vil tillate dem å spille spillet med et tastatur.

Lar først opprette en nye nøkler [] array, og kartlegge piltastene på tastaturet 'keycode egenskaper til tilsvarende knappene på gamepad. Dette vil gi oss mulighet til å gjenbruke buttonPressed () -funksjonen at gamepad benytter
Var gamepadActive = false, ps3Buttons = new Array (), nøkler = new Array ();. Ps3Buttons [12] = "trekanten", ps3Buttons [15] = "torget", ps3Buttons [14] = 'kors', ps3Buttons [13] = 'sirkel', ps3Buttons [4] = 'up', ps3Buttons [7] = "venstre", ps3Buttons [6] = "ned", ps3Buttons [5] = 'riktige', ps3Buttons [10] = "L1", ps3Buttons [8] = 'L2', ps3Buttons [11] = 'R1', ps3Buttons [9] = 'R2', ps3Buttons [1] = "L3", ps3Buttons [2] = 'R3', ps3Buttons [16] = 'PS', ps3Buttons [0] = 'velger', ps3Buttons [3] = 'start'; nøkler [38] = 4; tastene [37 ] = 7; tastene [40] = 6; tastene [39] = 5;

Nå trenger vi en "onkeyup" og "onkeydown" hendelse lytteren for piltastene. Når du trykker en tast eller utgitt, sørger vi for at en gamepad ikke er i bruk. Da hindrer vi piltasten fra å gjøre sin vanlige oppgave (rulle nettleservinduet opp eller ned i dette tilfellet), og deretter ringe det samme buttonPressed () -funksjonen at gamepad samtaler.

For å gjøre dette, en falsk hendelses objekt er gått med nøkkelen er "nøkkelkode" tilordnet til et element i tastene [] array, som i sin tur sender tilsvar gamepad knappen ID.
window.onkeydown = function (evt) {if (gamepadActive == false) {evt.preventDefault (); buttonPressed ({button: keys [evt.keyCode]}, true); }} Window.onkeyup = function (evt) {if (gamepadActive == false) {evt.preventDefault (); buttonPressed ({button: keys [evt.keyCode]}, false); }}

Dette bør nå la deg bruke piltastene for å styre skipet da en gamepad ikke er plugget i, mens de fortsatt la gamepad ta over når det er til stede.

Så vi har dekket det grunnleggende å koble en gamepad til datamaskinen, lærte å koble inn de hendelsene som de gamepad branner, og deretter bruke dem i praksis. For ikke å glemme, den avgjørende fall-back støtte for tastaturet

En rask utfordring for de av dere med en annen styring enn en PS3 Dual Shock:!. Justere knappen kartlegging basert på hvilken kontrolleren er plugget inn

Takk for at du tar deg tid til å lære om Gamepad API. Hvis du har spørsmål, kan du la dem i kommentarfeltet. Anmeldelser