Rakenna monialainen HTML5-peli

Kirjoittaja: Randy Alexander

Luomispäivä: 28 Huhtikuu 2021

Päivityspäivä: 16 Saattaa 2024

Video: My eBay Account Got Stopped! What can we do with our registered company?

Sisältö

Vaihe 01. Varojen lataaminen
Vaihe 02. Animaatiosilmukka
Vaihe 03. Tulot
Vaihe 04. Liikkuvat näyttelijät
Vaihe 05. Ääni
Vaihe 06. Pelin skaalaus
Vaihe 07. Päätelmä
Piditkö tästä? Lue nämä!

Tarvittava tieto: Perus HTML5 ja JavaScript
Edellyttää: Perus HTML-editori ja HTML5-yhteensopiva selain
Projektin aika: 4-6 tuntia
Tukitiedosto

Tämä artikkeli ilmestyi ensimmäisen kerran .net-lehden numerossa 230 - maailman myydyimmässä verkkosivujen suunnittelijoille ja kehittäjille suunnatussa lehdessä.

HTML5-pelikehitys ei ole suora tiede. Pelien suorittaminen eri alustoilla vaatii vähän mustaa taikaa. Erilaiset pelit vaativat erilaisia tekniikoita. Kehityksen kannalta laattapohjainen peli on täysin erilainen kuin esimerkiksi nipistämällä ja zoomaamalla. Tässä opetusohjelmassa keskitymme kuitenkin peruselementteihin kaikenlaisen 2D JavaScript-pohjaisen pelin kehittämiseksi.

Keskitymme JavaScript Canvas -pohjaisiin peleihin. Tämä tarkoittaa, että renderointi perustuu uuteen HTML5-merkintäobjektiin - kankaaseen. Kangas määritellään hyvin helposti:

/ script>
var canvas = document.createElement ("kangas"); // tai asiakirja
getElementBy ### viittaa jo määriteltyyn.
kangas.leveys = 800; // määritä kankaan koko pikseleinä
kangas.korkeus = 600;
document.body.appendChild (kangas);
var ctx = canvas.getContext ("2d"); // hanki piirustuskonteksti.
ctx.fillStyle = "# f00’; // aseta punainen täyttötyyli.
ctx.fillRect (10,10,50,50); // piirtää punainen suorakulma.
/ script>

Vaihe 01. Varojen lataaminen

JavaScript on toiminnallinen kieli, joka on yksisäikeinen. Tämä tarkoittaa, että omaisuuden lataus on asynkroninen tehtävä, josta ilmoitetaan takaisinsoittotoimintojen kautta. Täydellisen omaisuuskuormaajan käyttöönotto on yksinkertainen toimenpide. Yhden yksittäisen kuvan tapauksessa menettely voi olla:

var image = uusi kuva (); // tai document.createElement ("img");
image.onload = function () {// kutsuttu, kun kuva on ladattu}
image.src = "a_valid_url / uri-arvo";

Voit yleistää tämän koodin N kuvalle, ja resurssien esikuormaaja toimii kuin viehätys. Täältä löydät myös täydellisen varojen esikuormaajan.

Vaihe 02. Animaatiosilmukka

Joidenkin resurssien / kuvien lataamisen jälkeen tarvitsemme joitain animaatiosilmukoita, jotka antavat illuusion jatkuvista näytön päivityksistä. Hallituissa JavaScript-ympäristöissä, kuten tavallisissa selaimissa, voimme käyttää valmiiksi asennettua sisäistä toimintoa nimeltä setInterval. Tämä toiminto hyväksyy takaisinkutsutoiminnon ja millisekunnin nopeuden, jonka oletat kutsuvan kyseiselle toiminnolle. Seuraava on kangaspohjainen esimerkki, joka toistaa hyvin yksinkertaisen animaation, sininen neliö kulkee linjaa 50 kertaa sekunnissa:

! DOCTYPE html>
html>
pää>
otsikko> Yksinkertainen animaatio / otsikko>
/ pää>
runko>
script type = "text / javascript">
var canvas = document.createElement ("kangas");
canvas.width = ikkuna.innerWidth;
kangas.korkeus = ikkuna.innerHeight;
document.body.appendChild (kangas);
var ctx = canvas.getContext ("2d");
var x = 0;
var y = 0;
setInterval (
funktio () {
ctx.clearRect (x - 1, y - 1, 40, 40);
ctx.fillStyle = "# 33f";
ctx.fillRect (x, y, 35, 35);
x + = .5;
y + = .5;
},
20 // kestää 20 millisekuntia tai 50 kertaa sekunnissa.
);
/ script>
/ body>
/ html>

Tällä tavalla animaatiosilmukoiden määrittelemisellä on kaksi suurta haittapuolta. Ensinnäkin, jos piirustustoiminto kestää liian kauan, animaatio törmää ja alkaa olla jonossa. Toiseksi tämä toiminto kuluttaa järjestelmäresursseja, vaikka välilehti, jolla peliä pelataan, on piilotettu tai mikä vielä pahempaa, kun selainikkuna on minimoitu. Parempi ratkaisu olisi soittaa requestAnimationFramework toiminnot, kuten tässä artikkelissa kuvataan.

Vaihe 03. Tulot

Nyt kun meillä on kuvia ja kunnollinen animaatiosilmukka, tarvitsemme jonkin verran pelin sisäistä vuorovaikutusta. Keskityttäväsi alustan mukaan voit käyttää erilaisia syöttöalijärjestelmiä. Vaikka näppäimet ja hiiri ovat ensisijainen syöttöjärjestelmä työpöytäjärjestelmissä, kosketustapahtumat ja kiihtyvyysmittarit ovat yleensä rajoitettuja mobiililaitteisiin.

Huolimatta siitä, että nykyaikaiset selaimet työntävät pelaamisen kirjekuorta, selaimia ei rakennettu pelaamista ajatellen, ennen kuin uusimmat suuret selaimet tukevat nyt sovellusliittymiä, kuten hiiren lukitus, koko näyttö ja niin edelleen.

Mobiililaitteessa ei ole ongelmaa, koska pidämme pelimme optimoituna koko näytön kokoiseksi. Mutta tavallisessa selaimessa, jossa kangas voi olla mikä tahansa paikka DOM-hierarkiassa, asiat voivat olla monimutkaisempia, koska ei ole suoraa selaimen mekanismia, jotta saisimme hiiren / kosketuksen tapahtumakoordinaatin kankaaseemme. Joten paras käytäntö on pitää merkintä kangaspelissämme mahdollisimman yksinkertainen. Tämä on menettelytapamme CAAT: ssa, animaatiokirjastossamme.

Toinen hiiren syöttöjärjestelmän haittapuoli on, että siinä ei ole "mouseDrag" -tapahtumaa, jota sinun on simuloitava itse.

Lopullinen syöttökoodinotto merkitsisi jokaisen tulolähteen tunnistamista ja sitomista johonkin uudelleenkäytettävään koodiin, esimerkiksi:

kiihtyvyysanturi-laiha-vasen = kosketusnäyttö-vasen-näytön puoli = näppäin-vasen-painettu.

Vaihe 04. Liikkuvat näyttelijät

Näyttelijöiden siirtäminen ruudulla tarkoittaa periaatteessa sitouttaa syötötapahtumia muuttuviin näytön sijaintimuuttujiin.

Monimutkaisemmat toiminnot saattavat vaatia monimutkaisen polun läpikulun, soveltaa keventämistoimintoja läpikulkuun, ketjutettuihin animaatioihin joko ajan tai ulkoisten tapahtumien avulla ja niin edelleen. Tässä esimerkissä sidomme kohdistinnäppäimet pyörivän suorakulmion siirtämiseksi näytöllä.

! DOCTYPE html>
html>
pää>
otsikko> Yksinkertainen animaatio / otsikko>
/ pää>
runko>
script type = "text / javascript">
var W = 800;
var H = 600;
var canvas = document.createElement ("kangas");
kangas.leveys = W;
kangas.korkeus = H;
document.body.appendChild (kangas);
var ctx = canvas.getContext ("2d");
var x = W / 2;
var y = H / 2;
var inc = 1;
var incx = 0;
var incy = 0;
// avainpainikkeen käsittelijä, joka asettaa liikkuvat lisäykset riippuen
painetaan näppäintä.
window.addEventListener (
'Keydown',
funktio (evt) {
var-näppäin = (mikä) evt. mikä: evt.keyCode;
kytkin (avain) {
tapaus 37: // vasemmalle
incx = -inc;
tauko;
tapaus 39: // oikea
incx = inc;
tauko;
tapaus 38: // ylös
incy = -inc;
tauko;
tapaus 40: // alas
incy = inc;
tauko;
}
},
väärä
);
// avaimen vapautuskäsittelijä, joka nollaa liikkuvat lisäykset riippuen
painetaan näppäintä.
window.addEventListener (
'Näppäimet',
funktio (evt) {
var-näppäin = (mikä) evt. mikä: evt.keyCode;
kytkin (avain) {
tapaus 37: // vasemmalle
tapaus 39: // oikea
incx = 0;
tauko;
tapaus 38: // ylös
tapaus 40: // alas
incy = 0;
tauko;
}
},
väärä
);
// animaatiosilmukka. Piirrä kehys 50 kertaa sekunnissa.
setInterval (funktio () {
// tyhjennä animaatioalue
ctx.clearRect (0,0, W, H);
ctx.fillStyle = "# 33f";
// piirtää pyörivä suorakulmio. Pyörii 360 astetta sekunnissa.
ctx.save ();
ctx.käännös (x, y);
ctx.rotate ((uusi päivämäärä (). getTime ()% 1000) / 1000*2*Math.PI); // kiertää 360
astetta sekunnissa
ctx-käännös (-20, -20);
ctx.fillRect (0, 0, 40, 40);
ctx.restore ();
// aseta uusi sijainti näppäimen painallusten lisäysten perusteella.
x + = incx;
y + = incy;
}, 20);
/ script>
/ body>
/ html>

Vaihe 05. Ääni

Ääni on kaikkien pelien tärkein palauteominaisuus. Taustamusiikki ja erikoistehosteet tekevät eron keskimääräisen pelin ja suuren pelin välillä.

Meille HTML5-pelikehittäjille ääni-API ei ole hyvä uutinen. Ääni-sovellusliittymä on hieman rikki. Ensinnäkin eri selaimet toistavat erilaisia äänimuotoja, joten on hyvä, että äänitiedostosi ovat mahdollisimman monessa äänimuodossa. Toiseksi äänitunniste on vähän buginen. Silmukat eivät toimi joissakin selaimissa, ja melkein kaikissa niissä et voi toistaa samaa ääntä samanaikaisesti.

Tämän korjaamiseksi uusimmat suuret selainversiot toimitetaan erittäin tehokkailla ääni-sovellusliittymillä, kuten Googlen Web Audio -sovellusliittymä tai Mozillan äänidata-sovellusliittymä. Huono uutinen on API-äänen pirstaloituminen. Siksi Flash-äänen varavara voi joskus olla hyvä idea. Mutta kuten yleensä tapahtuu JavaScriptiä käytettäessä, tämä kieli on niin tehokas, että sen avulla pystyt keksimään useimmat alustan ongelmat hieman koodilla.

Oma Audio API -kiertotapa löytyy täältä: netm.ag/audioapi-230. Suosittelemme myös SoundManager2: n käyttöä. Pohjimmiltaan, äänen ohjelmallisen toistamiseksi nämä ovat vaiheet, jotka voidaan suorittaa:

1 Luo ääniobjekti:

var channel = document.createElement (’audio’);

2 Aseta äänidata:

channel.src = "valid_url / uri äänitiedostoon";
channel.preload = "auto"; // saada äänitiedosto latautumaan hiljaa
kanava. määrä = 10; // muuta äänenvoimakkuutta
channel.currentTime = 5; // aloita pelaaminen 5 sekunnista alkaen
kanava.lata ();

3 Toista ääni:

channel.play ();

4 Vaihtoehtoisesti voit liittää soittopyynnöt esimerkiksi tapahtumiin äänen loppu ja niin edelleen:

channel.addEventListener (
'Päättynyt',
// äänen lopussa, aseta kanava käytettävissä olevaan kanavaluetteloon.
toiminto (audioEvent) {
},
väärä );

Vaihe 06. Pelin skaalaus

Kun keskitytään monitasoisiin tai selainten välisiin HTML5-pelien kehittämiseen, yksi asia, johon on kiinnitettävä erityistä huomiota, etenkin mobiililaitteissa, on näytön tarkkuuden pirstoutuminen. Näytön resoluutioita on niin monta erilaista selviytymistä varten, että voi olla todellista tuskaa mukauttaa kaikki pelin sisäiset resurssimme niin erilaisiin päätöslauselmiin.

Onneksi kangas-sovellusliittymä tai jopa DOM / CSS on riittävän joustava, jotta voimme soveltaa affiinisia muunnoksia, jotta voimme saada pelimme hienosti tai alemmaksi melkein ilman kehityskustannuksia. Tämä tarkoittaa, että yhden näytön pikselin ja yhden maailman koordinaatin välistä suhdetta ei saa sitoa 1: 1-suhteeseen. Ainoa rajoitus tälle menettelylle on, että kangas vie koko ikkuna-alueen. Siksi on hyvä asettaa se body style = "marginaali: 0; pehmuste: 0;" ilman merkintöjä. Tapa edetä HTML5-kangasobjektin kanssa on melko yksinkertainen:

1 Luo kangasobjekti tai valitse se merkinnästä ja aseta haluamasi koko; tämä koko on meidän pelitilan koko.

2 Lisää ikkunatapahtumien kuuntelija kokoa varten, jossa lasket nykyisen ikkunakoon ja alkuperäisen kangasobjektimme koon välisen suhteen arvon:

var scaleFactor = 1;
window.addEventListener (’koon muutos’,
funktio (evt) {
// laske mittakerroin oikean kuvasuhteen säilyttämiseksi.
scaleFactor = Math.min (ikkuna.innerWidth / W, ikkuna.innerHeight / H);
// tee kankaasta uusi skaalattu koko.
canvas.width = W * scaleFactor;
canvas.height = H * scaleFactor;
// hanki skaalattu kankaakonteksti.
ctx = canvas.getContext (’2d’);
},
väärä);

3 Muokkaa piirustusrutiinia siten, että asteikkoa käytetään edellisen kanssa scaleFactor:

setInterval (funktio () {
// piirustusrutiini
// …
ctx.save ();
ctx.scale (scaleFactor, scaleFactor);
// säännöllinen piirustuskoodi, ilman huolta uudesta kankaan koosta.
// …
ctx.restore ();
}, 20 );

Vaihe 07. Päätelmä

Huolimatta siitä miltä se saattaa tuntua, uskomme todella, että HTML5 on oikea tapa edetä kohdistettaessa verkkopelien kehitykseen. Tällä hetkellä tekniikka on vielä alkuvaiheessa, mutta se parantaa päivittäin ja tehokkaita sovellusliittymiä lisätään.

Suosittelemme, että kuka tahansa, joka haluaa aloittaa HTML5-pelien kehittämisen, luottaa mihin tahansa jo olemassa olevaan pelikehykseen. Ne auttavat välttämään joitain yleisiä HTML5-karhuja ja toimittavat sinulle erilaisia renderointitekniikoita kohdistamaan eri käyttöönottolaitteet. Olemme kehittäneet oman pelikehyksemme: CAAT, joka on vapaasti saatavilla MIT-lisenssillä.

Olemme myös tehneet pelin osoituksena sen voimasta, joka on alle 200 koodiriviä ja jonka voit ladata täältä. Voit pelata täydellistä pulmapeliä, jossa on syötteenotto, animaatiot, äänen ja näytön tarkkuuden riippumattomuus.

Katsaus muihin koodausprojekteihin on auttanut meitä oppimaan paljon ja pystyttävä tarjoamaan yksinkertaisia ratkaisuja monimutkaisiin ongelmiin. Valitse täältä kehys, joka parhaiten vastaa tarpeitasi.

Sanat: Iker Jamardo Zugaza ja Ibon Tolosana: www.ludei.com