Tämä liittyy meneillään olevaan kilpailuun. Eli olen tekemässä html+canvas+JavaScript -työkaluja käyttäen peliä tänne.
En saa ääniä toimimaan kunnolla. Uuden äänen pitäisi alkaa heti, kun esim. ammutaan tai osutaan johonkin. Nyt edellinen audio -elementti soitetaan loppuun asti ennenkuin seuraava alkaa. Osaisiko joku neuvoa, miten tuon saisi toimimaan? Audio.pause pysäyttää äänen, mutta se jatkuu samasta kohtaa, kun sen käynnistää uudestaan.
Hyvä alku!
Näppäimet eivät toimi kunnolla. Vilkaisin koodia, ja ilmeisesti käsittelet vain enintään yhtä näppäintä kerrallaan, ja toisen näppäimen painaminen samaan aikaan sekoittaa pelin. Parempi olisi pitää kirjaa painetuista näppäimistä, esimerkiksi Set-objektiin voi lisätä ja poistaa tietoja keydown- ja keyup-tapahtumissa, jolloin pelaaja voisi esimerkiksi kääntyä ja kaasuttaa samaan aikaan.
Näppäinten osalta harkitsisin myös vaihtoehtona WASD-näppäinten käyttämisen liikkumisessa, ja muut toiminnot voisivat olla keskemmällä näppäimistöä.
Jotta ääni alkaisi alusta, pitää asettaa currentTime = 0 ennen soittamista.
Kiitos ohjeista! Tuo näppisongelma tosiaan on, pitää säätää vielä.
En saanut currentTime -asetusta toimimaan, mutta kiertoliikkeenä tallensin saman äänen uusilla nimillä ja soitan aina uudennimisen raidan toisen perään, niin nyt toimii mukavasti tämäkin.
Yksi vaihtoehto äänen (varsinkin ääniefektien) soittamiseen on se, että kopioit soitettavan äänen. Näin voi myös soittaa samaa ääntä useana kappaleena samaan aikaan.
// Alussa:
const räjähdys = new Audio("poks.wav");
// Myöhemmin:
räjähdys.cloneNode().play();Lisäys: Tein Tykkipeli-projektin, jossa on esitelty tätä äänen soittoa, syötteen lukua sekä parempi pelisilmukka requestAnimationFrame-funktion avulla.
Miten tämän pelin nimi pitäisi muuten tulkita? Taste-roids, Ta-steroids? ;)
Itse veikkasin, että se tulee...
T-asteroids eli TapaniS:n asteroids
Joo - peran osui lähelle! Sehän on tietysti TaS - asteroids!
Sain äänet pelaamaan, kun laitoin alla olevan pätkän soundiin:
this.onbegin = function() {
this.sound.pause();
this.sound.currentTime = 0;
}Ja nyt näppiksetkin toimii paremmin, kaasu ja kääntyminen toimii samaan aikaan. Jokin häikkä on, kun yhtä aikaa alhaalla space+arrowUp+arrowLeft. Muilla on ollut sama ongelma, joten lisäsin pari nappulaa ampuja varten (f ja b). Myös w kaasuttaa ja a kääntää vasempaan ja d oikeaan.
Nyt kaipaisin jälleen neuvoa:
Haluaisin toteuttaa Top-10 listan, joka siis innostaa pelaamaan ja yrittämään listalle pääsyä ... Eli miten tuon voisi toteuttaa Javascript-canvas -pelissä?
Oma ajatus olisi lähinnä tallentaa tulokset palvelimelle txt-tiedostoon ja lukea tiedot sieltä. Onnistuuko tämmöinen ja löytyisikö esimerkkiä jostakin? En haluaisi liittää tietokantatoimintoja vaan pitää pelin mahdollisimman yksinkertaisena.
Tuloslista pitää tehdä palvelimelle. Sinänsä listan saa tehtyä helposti esimerkiksi PHP:llä ja tekstitiedostolla, kunhan tiedoston muistaa lukita. Listalle voisi lähettää tietoa JavaScriptin fetch-rajapinnalla.
Listan suuri ongelma on kuitenkin se, että listalle on helppo lähettää mitä tahansa väärennettyjä ”tuloksia”. Viime kädessä hakkeri voi muokata selainpelin koodia niin, että jokainen ammus osuu, jolloin huipputulos on taattu. Luotettava lista vaatisi siis, että koko pelin kulku tallennettaisiin ja sen laillisuus tarkastettaisiin palvelimella, mikä on melko epäkäytännöllistä. Tarkastuksessa voi tulla vaikeuksia myös, jos pelin laskutoimituksissa tulee hieman erilaisia pyöristysvirheitä eri koneilla.
Nyt sain parin päivän väsäämisen jälkeen Top-10 -listan toimimaan. Ratkaisuna hiukan monimutkainen, mutta en saanut oikein muutenkaan toimimaan.
Tiedoston lukeminen:
Luetaan PHP:llä ja syötetään tiedot piilotettuun text-input -kenttään, josta ne luetaan Javascriptillä.
Tietojen tallennus:
Syötetään tiedot lomakkeen näkyviin text-input -kenttiin ja submit lähettää ne uudelle PHP-sivulle, joka tallettaa tiedot tiedostoon. Forwardointi takaisin pelin pääsivulle.
Lisäksi näppiksen preventDefault poistetaan käytöstä tietojen syöttämistä varten. Submit disabled, kunnes peli loppuu ja pisteet riittävät listalle.
Ei kuulosta nyt kovin turvalliselta ratkaisulta. Mitä käy, jos kaksi henkilöä lähettää tuloksia samaan aikaan? Katoaako toisen tulos? Voiko pelaaja poistaa listalta muiden tulokset tai muuten lähettää mitä tahansa? Kyllä listalle pitäisi vain lähettää nykyisen pelin tulos, ja palvelin katsoisi, mihin kohti listaa tulos kuuluu.
Jos taas haluat tehdä listan vain paikallisesti pelaajan koneelle, voit tallentaa tiedot localStorage-rajapinnalla.
Lisäys: Kävinpä lähettämässä listalle tuloksen 715517 nimellä HAX. Lopputulos on vähintäänkin mielenkiintoinen, sillä tulos meni läpi ja on nyt listalla 4 kertaa (joka toisessa välissä).
Hei,
Kiitokset kommenteista jälleen! Jep tämä kaipaa vielä pientä säätöä, mutta pikkuhiljaa pitäisi asettua palaset kohdilleen.
<input type="text" name="playpoints" id="playpoints" value="0" size="6" readonly>
Tuossa siis on tuo readonly -optio, jonka pitäisi estää pisteiden manuaalimuokkaus, mutta ilmeisesti ei toimikaan sitten. Eli ehkä tuokin pitää laittaa sitten piiloon.
Vaikka kuinka piilottaisit tuon kentän, käyttäjä voi painaa F12 ja kirjoittaa selaimen konsoliin document.querySelector("#playpoints").value=1234567, tai viime kädessä käyttäjä voi lukea sivun lähdekoodista, miten tieto lähetetään palvelimelle, ja suoraan lähettää sinne ihan mitä tahansa. Eli kuten koetin jo edellä selittää, ainoa tapa luotettavaan pistelistaan on se, että nimenomaan palvelimella jotenkin tarkastetaan, onko tulos laillinen.
Hei! Eihän noin saa tehdä! Hehehe!
Lisäsin pienen tarkastuksen palvelimelle. Kyllähän tämänkin voi varmaan hakkeroida, mutta vaatii jo vähän enemmän vaivaa, että ehkä nyt on ihan riittävä tähän kisaan.
Nyt on tehty pieni päivitys Top-10 -listan tuloksien tarkastukseen. Jokaiselle pelille luodaan yksilöllinen tunniste, joka vaikuttaa myös pelin kulkuun. Tarkistus on vielä hiukan keskeneräinen, mutta sitä voidaan vielä kiristää, jos se ei toimi riittävän hyvin. Jatkossa listalle päästäkseen pitänee kuitenkin pelata peli loppuun.
Nyt lisätty osumista pisteet ruudulle.
Puuttuu vielä ufot ja lämpöohjukset, sekä oman aluksen suojat ja uudet "elämät" saavutetuista pisterajoista. Näitä yritän saada pikkuhiljaa väsättyä.
Ai niin, nyt tuo tarkistus Top-10 -listalle on viritetty taas hiukan paremmaksi. Pieni lisäys tähänkin on kuitenkin vielä tulossa ...
Tuossa ei kyllä sitten ole mitään järkeä, että tapat kaiken inputin koko sivulla. Kuuntele vain canvas-elementin sisäisiä syötteitä, ja silloinkin sinun pitää sallia vähintään "tab out".
The Alchemist kirjoitti:
Tuossa ei kyllä sitten ole mitään järkeä, että tapat kaiken inputin koko sivulla. Kuuntele vain canvas-elementin sisäisiä syötteitä, ja silloinkin sinun pitää sallia vähintään "tab out".
Joo, tykkipelissä onkin hieno esimerkki tästäkin! Yritän vielä saada tuon paremmaksi, aikaa palaa vaan ihan kauheasti kaikkeen muuhun, kuin itse pelin ominaisuuksien toteutukseen ...
Pari parannus ehdotusta: Alkuvalikossa ei varmaan kuuluisi kuulla rakettimoottorin polttoääntä, jos painaa näppäimistöltä nuolta ylöspäin? Mielestäni kuolin animaatio kun alus hajoaa palasiksi saisi olla melkein puolet nopeampi ettei pelaajalla mene odotteluksi.
Itse olen miettinyt minkälaisen pelin tekisin kilpailuun ja milä työkalulla. Pelin kirjoittaminen 8th:lla vaatisi melkein kaiken toiminnallisuuden toteuttamista itse. Hauskaa puuhaahan tuo silti olisi... Olen nyt kirjoitellut vanhaa asteroids peliäni selain versioksi SpiderBasic:illa. Homma luonnistuu kyllä nopeasti ja syntaksi sopii minulle JavaScriptiä paremmin kun en ole mikään OOP-ohjelmointityylin ystävä. Kilpailuun en tätä kyllä silti varmaan laita, ettei tule asteroids ylikuormitusta...
TapaniS kirjoitti:
Joo, tykkipelissä onkin hieno esimerkki tästäkin! Yritän vielä saada tuon paremmaksi, aikaa palaa vaan ihan kauheasti kaikkeen muuhun, kuin itse pelin ominaisuuksien toteutukseen ...
En tiedä, mihin se aika sitten kuluu, mutta ei noiden pienten muutosten tekeminen ole ollenkaan vaikeaa.
Pelin pohjana näyttää olevan 20 vuotta ja vanhentunut koodi. Jos olet sen verran kouliintunut JS-ohjelmoija, ettet pelkää hajottaa vierasta koodia, niin sinuna kyllä lähtisin ihan siitä liikkeelle, että restrukturoit koodin sellaiseksi, että se noudattaa edes perustason bestpractiseja. (Validi HTML, erilliset koodikomponentit yhden ison spagettitiedoston sijaan.)
Kannattaa myös varmaan unohtaa HTML-lomakkeilla kikkailu ja tehdä taustatyö ihan kunnollisella JS-freimiksellä. Se säästää aikaa ja hermoja.
Kiitokset jälleen kommenteista! Nyt on uusi päivitys laitettu. Tuossa on odotteluaikaa pienennetty ja pieni bugi korjattu (oma alus saattoi rähähtää, kun ammutun asteroidin haamu ajoi sen yli). Jalskin asteroids näyttää hienolta! Sillä olisi mitalisija kisassa hyvinkin tulossa!
Alchemist:
Koodi varmaan näyttää vanhalta, kun tämä on ihan ensimmäinen Javascript -tuotokseni ja vaikutteet Javasta ja PHP:stä ovat vahvasti näkyvissä. En saanut tuota tiedoston käsittelyä toimimaan Javascriptillä ja lomakkeet taas toimivat kuin "junan vessa". Eli taidot eivät nyt vielä riitä parempaan. Ongelmana ainakin oli, että kun sain tiedoston jotenkin luettua Javascriptin avulla, niin se tuntui sitten jäävän johonkin puskuriin niin, että vaikka tiedostoon tuli uusia rivejä, niin ne eivät koskaan tulleet käyttöön, vaan vanhan tiedoston tiedot tulivat aina uudestaan, kun sivu ladattiin uudelleen.
Lisäksi tietysti homma menee tosi nopsaan, kun sen osaa. Näitä kun harjoittelee ja kirjoittaa koodia moneen kertaan, testaa ja taas uudestaan, niin siinähän se aika sitten menee. Iso spagettitiedosto on tosiaan, ehkä olisi hyvä jotenkin jakaa pienempiin palasiin. Toisaalta, kun on tämmöinen kisa käynnissä, niin ehkä ei tarvitse ihan kaikki olla niin helposti kopioitavissa.
"Toimii kuin junan vessa" viittaa siis siihen, että jokin toimii varmasti. Junan vessa on siis vain reikä radalle.
Lebe80 kirjoitti:
"Toimii kuin junan vessa" viittaa siis siihen, että jokin toimii varmasti. Junan vessa on siis vain reikä radalle.
Mielestäni Tapanin viesti vaikuttaa siltä että hän tämän kyllä tietää ja muutenkin kyseessä on ihan yleistieto.
Joo, itselle tuo ilmaus on oman kokemuksen kautta hyvin konkreettinen. Tosin nämä uudemmat lähiliikenteen junavessat taitaakin jo toimia toisella periaatteella eli siinä mielessä on ymmärrettävää, jos nuorempi polvi ei tuota ilmausta täysin pysty hahmottamaan. Tarkoitin siis, että lomakkeet toimivat hyvin luotettavasti.
Pieniä päivityksiä: näppäinohjaus ja äänet vain pelin aikana, oma alus luodaan vapaalle kentälle ja hetken suojaus, että ehtii väistellä asteroideja. Peruutus lisätty omalle alukselle. Top-10 -lista myös viimeisen viikon aikaisille tuloksille. Ufo lentelee jo introssa, mutta peliin asti se ei ole vielä ehtinyt.
Puuttuu vielä: Ufot, lämpöohjukset, oman aluksen suojukset, Hyper-Space, pelin pause ja äänten sammutus M-näppäimellä.
TapaniS kirjoitti:
(16.04.2020 21:44:10): Pieniä päivityksiä: näppäinohjaus ja äänet...
Hyper-Space äärimmäisen helppo lisätä, lisäät vaan uuden näppäimen käsittelijään ja arvot uudet koordinaatit alukselle. Tarvitset jonkunmoisen pelitilan käsittelyn peliin ja pause-tila sekä muut vastaavat pienet muutokset toteutuvat sen jälkeen kuin itsestään (yksinkertainen switch/case rakenne riittänee tähän).
Harkitse vielä tykkipelini tutkimista, siinä on mm. tuo pause-mahdollisuus koodissa (joskaan ei käytössä) ja myös varmatoiminen ajanottoon perustuva silmukka.
Nyt on vähän isompi päivitys TaSteroids 3.1.0 Beta.
Piti laittaa Beta perään, kun on jo hiukan hankala hahmottaa, mitä koodissa oikein tapahtuu ja varmaan bugejakin joukkoon taas mahtuu.
Ensimmäinen UFO on nyt aktivoitu. Onkohan tuo liian "tappava"? No suojukset auttaa jatkossa, kunhan saan niitä väsättyä. Ne olen kuitenkin halunnut jättää viimeiseksi, ettei parhaat pisteet karkaa kovin korkealle.
Uusia päivityksiä, nyt on jo enemmän pelaamisen tuntua. Hidastin UFOn fotonien nopeutta, niin nyt niitä pystyy jo väistelemään aika mukavasti. Lisäsin myös 3 suojakilpeä, jotka ovat hyvä lisä. Suojakilpiä tulee lisää, kun saan vielä lämpöohjukset peliin. Äänet ovat nyt oletuksena pois päältä, mutta ne saa M-näppäimellä päälle.
Yritän viikonlopun aikana saada vielä puuttuvia kohteita: HyperSpace, lämpöohjukset ja pelin pause. Ei kovin paljon enää puutu! Tietysti lisäksi pitää vielä säätää aika monta asetusta kohdilleen ja ehkä koodiakin pitää vielä siivota ... :-)
Peli itsessään on jo aika hyvä.
Äänet pätkivät ikävästi esimerkiksi usean samanaikaisen räjähdyksen tapauksessa. Voisit kokeilla äänen kopiointia, kuten Tykkipelissä. Moottorin äänen voisi myös tehdä niin, että sen saisi soimaan ilman taukoa. (Audio-objektissa on jopa loop-ominaisuus tätä varten.)
Mitäpä jos tekisit sivun HTML-osuuden uusiksi paremmin? Kun sivulla on noin vähän HTML-sisältöä ja noin yksinkertaiset muotoilut, sivun uusiminen on helppo juttu. Voit ottaa ottaa pohjaksi vaikka tykkipelin sivun ja lisätä siihen puuttuvat palaset. Kannattaa käyttää myös validaattoria.
Hyvä peli. Mutta äänet ei lähtenyt päälle heiti vaan vasta kun tuli Game Over niin suraavassa pelissä äänet toimi.
Nyt on uusi päivitys TaSteroids 3.2.0 Beta.
Eli pelin kaikki ominaisuudet ovat nyt käytössä. Lopulliseen versioon saattaa tulla vielä joitakin muutoksia ja koodia ei ole vielä "kirjoitettu puhtaaksi".
En tehnyt lämpöohjuksia (ainakaan vielä), kun tuntui riittävän haastavalta ilman niitäkin. Pieni UFO ampuu kohti ja ennakoi oman liikkeen, joten sen pitäisi olla hyvä korvike lämpöohjukselle. En ole tätä päässyt kovin paljoa vielä testaamaan, mutta säädän asetuksia palautteen ja kokemusten mukaan vielä myöhemmin.
Pieniä päivityksiä: Auto Fire, Bonukset tasojen selvityksestä, mustat kivet. Lisäksi asteroidien määrää sekä UFOjen ilmestymistiheyttä on pienennetty. Enää ei saa suojia niin helposti kuin ennen.
Joudun vielä harkitsemaan TOP-10 listan nollausta. Nyt siellä on kärjessä tosi iso tulos, mutta tuo oli vielä, kun suojia sai UFOjen ampumisesta.
Tällä hetkellä tuloksen tallennus top-listaan ei tunnu toimvan. Yritin kahdesti lähettää uuden ennätyksen (227070 pistettä), mutta se ei näy listassa. Minulla on lomakkeen data tallessa, jos tarvitset sitä vianetsinnässä.
Tarkastuslaskennassa ei löytynyt virheitä, joten tulos on hyväksytty listalle. Tarkastusohjelmasta löytynyt bugi on korjattu.
Itse en ole päässyt testaamaan kovin paljon yli tason 15 toimintaa, tuosta olisi mukava kuulla, miten peli toimii korkeammilla tasoilla. Ilmeisesti lämpöohjus kuitenkin pitää vielä rakentaa ... :( Ja täytyy vielä säätää jotenkin, että peli ei voi jatkua loputtomiin.
Peli oli täysin pelattava ainakin vielä tasolla 28. Ruudulla on toki paljon tavaraa, mutta hitaasti liikkumalla sitä saa hyvin väisteltyä. Pidemmälle mentäessa tasot alkavat tuntua aika samanlaisilta.
Jossain vaiheessa peliä alkaa aina tason lopussa ufoja tulla aivan hirveällä tahdilla. En tiedä, onko kyseessä bugi vai ominaisuus, mutta se on ehkä pelin ärsyttävin asia.
Lopussa oli vielä reilusti aluksia ja suojia jäljellä, mutta lopetin pelin tarkoituksella. Tämä peli toimii mielestäni parhaiten hetken kerrallaan pelattuna, mutta nykyisellään pelimekaniikka ei oikein tue sitä. Se toki johtuu suoraan pelityypistä, eikä minulla ole siihen parempaakaan vaihtoehtoa tarjota.
Pieninä parannuksina äänet voisivat olla oletuksena päällä ja sivun vierityksen pelin alussa voisi ottaa pois. Nyt sivu vierittyy siten, että pelialue on aivan ruudun yläreunassa, jolloin tuntuu siltä, että osa pelistä on näkymättömissä. Vaihtoehtoisesti pelialueen voisi vierittää keskelle tai siihen voisi lisätä kehyksen.
Kiitos palautteesta. Joo, UFOjen ideana oli toimia pelin lopettajana, mutta säädöissä on ollut hakemista, että tulisi jonkinlainen tasapaino pelattavuuden ja pelin vaikeutumisen suhteen.
Nyt laitoin sitten nämä lämpöohjukset peliin mukaan ja ne toimivat nyt pelin lopetuksen varmistuksena. Kun suojat loppuvat, niin aika paha on noita väistellä. Suojat ottavat nyt myös siipeensä jokaisesta törmäyksestä ja torjutusta ammuksesta tai ohjuksesta eli ei kannata enää ehkä ajaa asteroidien yli suojat päällä.
En ole kovin paljon pystynyt testaamaan yli 20 tasojen toimintaa, mutta jonkinlainen parempi tasapaino nyt pitäisi olla ainakin tuonne tasolle 23 asti. Näitä asetuksia ja ajoituksia pitänee vielä säätää, kun tulee enemmän kokemuksia. En ole vielä koskenut ääniasetuksiin tai vieritykseen. Tuo vieritys tuli siitä, kun itsellä on niin pieni ruutu läppärissä, että piti vierittää ylöspäin, että koko pelialue tulee näkyviin (nyt ei isompaa aluetta tähän mahdu).
Miksi minusta tuntuu että nyt nuo asteroidit liikkuvat nopeammin? (olen level 1.) Vai onko se tehty tarkoituksella?
Nopeudet eivät kovin paljon muutu eri tasoilla. Lähinnä tulee enemmän väisteltäviä tasojen kasvaessa. Kenttää on nyt suurennettu ja jonkinlaista tasapainoa on haettu nopeuksien ja pelattavuuden suhteen. Tämä on lähinnä oman kokemuksen "best by test".
Itse peli on melko tyylikäs. Ehdottaisin kuitenkin seuraavia parannuksia vielä:
Tarkka pieni suunnan muutos on vaikeaa. Ehkä myös kääntymisessä voisi olla (ja fysiikan mukaan pitäisi olla) kiihtyvyys ja hidastuvuus, aivan kuten eteen ja taakse liikkumisessa.
Vaikka satunnaisuus on kätevää, odottaisin asteroidien hajoamiselta edes jotain logiikkaa liikemäärän (ja pyörimismäärän) säilymisen suhteen. Tietenkin voi ajatella, että räjähdys muuttaa suuntia jonkin verran, mutta myös tämän pitäisi olla pikemmin pois päin osumakohdasta kuin aivan satunnaisesti.
Sivun HTML-koodin korjaamiseen annan suorat ohjeet:
1) Vaihda ensimmäiseksi riviksi HTML5:n mukainen ”<!DOCTYPE html>”.
2) Lisää head-osion alkuun <meta charset="UTF-8">.
3) Siirrä head-osiosta formit ja inputit bodyn sisään, vaikka juuri ennen skriptiä.
4) Otsikkotagin kuuluu olla <h1> eikä <h>.
5) Taulukosta täytyy poistaa attribuutit width, border ja bgcolor, ja nämä voi toteuttaa vastaavilla CSS-tyyleillä.
6) Piilotetussa lomakkeessa submit-nappi on selvästi tarpeeton ja inputilla voisi olla type="hidden", ettei tarvitse erikseen CSS:llä piilottaa.
7) Rivinvaihto ei ole input-elementin arvossa sallittu, ja joka tapauksessa nuo moniriviset inputit kannattaa poistaa ja sen sijaan laittaa tiedot suoraan JS-koodiin seuraavasti:
<script> var allresults = <?php echo json_encode($allresults); ?>; </script>
TapaniS kirjoitti:
En ole kovin paljon pystynyt testaamaan yli 20 tasojen toimintaa,
Kehittäjänä voisit varmasti nostaa itsesi ihan mille tahansa tasolle muokkaamalla koodia vähän.
Kiitän hyvistä ohjeista! Laitoin pienen päivityksen, mutta en koskenut itse pelin koodiin tällä kertaa. Muuten sain vähän siistimpään kuosiin, mutta tuo jsonin käyttö ei ole ennestään tuttua, joten en alkanut sitä nyt opettelemaan.
Oikeastaan ajattelen, että on parempi, ettei suuntaus mene ihan tarkasti. Se pakottaa oman aluksen liikkeelle ja antaa hiukan lisähaastetta peliin.
Aihe on jo aika vanha, joten et voi enää vastata siihen.