Sist oppdatert 27. juni 2022

Snake

Mitt aller første egenproduserte dataspill!

Dette er en klone av snake spillet til de gamle Nokia mobiltelefonene med monokrom skjerm fra slutten av 90-tallet og starten av 2000-tallet. Spillet er laget med vanlig JavaScript uten noen biblioteker, og tok meg rundt 2 dager å lage.

Spillet er ikke mobiltilpasset. Derfor må man ha ett tastatur for å spille det. Det er teoretisk mulig å spille det med virtuelt tastatur på nettbrett, men det er ingen god opplevelse.

Jet tok utgangspunkt i denne YouTube guiden for å komme i gang, men jeg skrev om hele spillet slik at det er fullstendig objekt orientert og lett å bygge videre på.

Kildekoden til prosjektet ligger her.

Inspirasjon og motivasjon

Hvorfor laget jeg denne spill klonen?

Etter å ha brukt all fritiden min mellom jula 2020, og påsken 2021 på studier i Windows server, og Linux system administrasjon var behovet for å gjøre noe kreativt og skapende påtrengende i påskeferien. Jeg tenkte at nå var tiden inne for å lære meg å bruke HTML canvas. Samtidig var jeg enormt nysgjerrig på arbeidsflyten rundt det å lage dataspill. Jeg hadde aldri laget et dataspill før.

Jeg prøvde meg på en Snake klone til Arduino, på en LCD skjerm i 2018, men jeg skjønte fort at dette krevde en programmerings innsikt som var langt over det jeg hadde akkurat da. Nå etter å ha drevet med programmering og web utvikling i noen år følte jeg meg bedre rustet. Når jeg startet på læringsprosessen bestemte jeg meg for å følge noen grunnleggende guider i HTML5 spill utvikling for å komme i gang.

Etter å ha laget en halvferdig "Breakout" klone med HTML, CSS og JavaScript var jeg ivrig etter å komme i gang med "Snake". Snake var det første primitive spillet jeg spilte, og jeg elsket det. Jeg husker at jeg gledet meg til at det skulle komme folk på besøk som hadde en mobiltelefon med spillet, slik at jeg kunne låne telefonen og spille snake på den. Siden dette spillet hadde så stor innflytelse på meg som barn har det alltid vert et mål for meg å lage et lignende spill selv.

På slutten av 90-tallet var jeg i starten av tenårene, Internett var fortsatt veldig lite brukt i Norge og verden. SMS (Simple Message System) på mobiltelefoner var den med populære måten for ungdom å kommunisere digitalt på.

Alle de kule kidsa fikk seg mobiltelefon, og det var i utgangspunktet to ting som gjorde en mobiltelefon attraktiv. Hadde den kult deksel og hadde den noen spill?

Nokia etablerte seg sterkt på denne tiden med Nokia 3210 som man både kunne skifte deksel på, og spille noen primitive spill på. Deriblant Snake. I sine glansdager ville alle ungdommer ha en slik Nokia telefon. Senere inkluderte de fleste andre mobiltelefon produsenter spill på sine telefoner.

Målet med dette prosjektet var å fullføre ett skikkelig spill med vanlig HTML, CSS og JavaScript - uten noen spill bibliotek eller andre hjelpemidler. Jeg bestemte meg fra starten av at dette spillet skulle jeg gjøre teknisk perfekt, slik jeg ønsket at det skulle være. En ting jeg har lært av programmering så er det verdien av å lage små prosjekter som kan bruke nye ferdigheter, innsikt og kunnskap på. Ved å løse problemer jeg støter på i slike prosjekter merkes det ofte at jeg lære mer, eller få en dypere forståelse av konsepter som jeg fra før av mener jeg kan en del om. Derfor er det for meg ett dobbelt lærings utbytte av slike prosjekter. Forstå bedre det jeg allerede kan litt om, og få praktisert det jeg forsøker å lære meg.

Målet med prosjektet, og dette spillet var ikke å lage et nytt spill som ingen har spilt før, men heller å lage en retro klone, som jeg personlig kan ha mye glede av, og samtidig lære mye programmering.

Erfaringer

Hva lærte jeg av prosjektet?

Først og fremst fikk jeg min første innsikt i spill utvikling. Dette innebar å bli mer trygg på objektorientert programmering. Jeg fikk virkelig erfare verdien av ryddig og rollebasert basert oppdeling av funksjoner i game loopen. Det å ha en tydelig adskillelse av oppdatering av hva som foregår i spillet, og hva som skal vises på skjermen viste seg å være kjempeviktig.

Det overrasket meg ganske mye hvor komplisert det var å løse tilsynelatende enkel kollisjons deteksjon. Jeg kan se for meg hvor komplisert det kan være med mer avanserte spill.

En av det vanskeligste nøttene jeg måtte knekke var å tenke ut en god måte å inkludere muligheten for å gi spilleren et ekstra skjermbilde hvor spilleren kan redde seg fra å dø. Jeg døpte funksjonen for reflex saver. Resultatet var bare noen få ekstra linjer med kode, men det tok kanskje 1/6 av utvikler tiden! Denne "reflex saver" funksjonaliteten var etter mitt syn det skilte spillet fra å være en dårlig klone til å være noe jeg ble veldig stolt av.

Endringslogg

Historikk på utvikling av spillet

27.06.2022 - v1.1.0 - v1.1.1
La til støtte for touch gestures, og fullscreen. Gjorde meny tekst responsive. La til støtte for WASD keys.

02.04.2021 - v1.0.1
La til funksjonalitet som gjør at man forhindrer websiden fra å scrolle når man trykker på piltastene. Skrev om referanse til lydfilen slik at det er letter å inkludere spillet på hjemmesiden min.

01.04.2021 - v1.0.0
Spillet er etter mitt syn ferdig og godt nok til at jeg vil vise det frem