Jons utviklerhjørne

Horse Race

HTML
CSS
JavaScript
Web Components

Et nettleserbasert hesteløpsspill bygget med web-komponenter.

Prosjektoversikt

Hesteløpsspillet i bruk, fire hester løper over banen, og de har nesten nådd målstreken. — Figur 1: Hesteløpsspillet i bruk.

Hesteløpsspillet er et enkelt HTML / CSS / JavaScript-spill med webkomponenter som hovedfokus. Her fikk man lære seg separasjon av forskjellige komponenter og logikker, og i tillegg gikk arbeidet her såpass greit at jeg fikk lagt til mye valgfri ekstra funksjonalitet, og eksperimentert med det. I tillegg er dette et fleksibelt prosjekt med mange retninger å gå i med tanke på videre koding, og mange forbedringer å gjøre i hver av disse retningene, så det er unektelig et interessant prosjekt for videre arbeid / hobbykoding.

Prosjektets kodearkiv: github.com/jonper-dev/browser-game-platform

Hvordan ble det laget

Hestespillet var en obligatorisk oppgave, og å splitte komponentene var noe vi måtte gjøre. I mitt spill er det da en JavaScript-fil som holder rede på hvor hesten er, en annen som holder rede på banen og sjekker med tilsendt informasjon når hesten (eller en hest) er over mållinjen. Spillet har en nedtelling før løpet starter, og man kan pause og resette spillet både under denne og selve løpet.

Bonusfunksjonalitet er en «Mario Kart»-stil «gummistrikk»-effekt, der de som er lenger bak i feltet har bedre odds for å gå langt per trykk, for å oppnå spenning med et jevnt felt. I tillegg er det en slags midlertidig animasjon jeg har implementert bak hestene, vind / støv virvler opp bak dem i kort tid etter tastetrykk. Hester som er i mål «danser» eller gynger litt når man trykker på knappen etter å ha kommet i mål, som både er en litt artig responsivitet, og allikevel hindrer dem i å løpe ut av banen.

Refleksjoner

Dette er av betydning for meg, for det var her jeg virkelig lærte webkomponenter å kjenne, og den har også blitt utgangspunktet for framtidige planer om å gjøre denne om til en spillplattform med flere nettleserspill.

Fremtidige planer

Jeg har personlig hatt store planer angående hesteløpsspillet:

Gjøre det om til React-basert frontend.
Legge til en hovedmeny før spillet.
Lage en spillplatform med flere spill vist som kort, der hesteløpsspillet er et av disse.
Bedre spillogikk: En variabel som holder lengden løpt, så hestene blir plassert på rett sted til og med om skjermstørrelsen forandres underveis i løpet.
Bakgrunnsterreng som seiler forbi, gjerne lagvis for en «parallakse»-effekt.
Datamaskin-motstandere som løper av seg selv.
Bedre / alternativt spill, med trykk på den rette knappen av fire fortest mulig istedenfor å trykke på én så fort som mulig.

Bidragsytere