Kategori: Prosjekter

Hva en amatør kan få til med vibe coding

Er jeg en dilletant? Med minimale forkunnskaper har jeg laget et miljøquiz-brettspill med AI-motspiller. Hvis du ble så interessert at du leser videre, finner du lenke til spillet nederst.

Vibe coding går kort sagt ut på at du kommuniserer med at AI program ved hjelp av naturlig språk og formidler hva du ønsker å få utrettet.

Så unna vei, programmerere, her kommer jeg og min nye bestevenn Claude Code og min gamle kompis Chat GPT. Sammen har vi i løpet av en helg laget et digitalt brettspill inspirert av det klassiske «Snakes and ladders» eller «Stigespill», men med innlagte miljøspørsmål, som kan gi ekstra terningkast.

Min programmeringskompetanse er relativt beskjeden. Riktignok har jeg 12 vekttall informatikk fra Blindern (deriblant grunnkurs i programmering) for mange år siden, men det kommer man ikke så langt med. Han jeg er gift med er derimot en erfaren programmerer, som jobber med å utnytte kunstig intelligens til søk i informasjonssystemer, og jeg har sett hvordan AI har effektivisert hans arbeid. Det ga meg ideen til å se om jeg selv kunne klare å utnytte de samme verktøyene til å lage noe som virket. Og slik startet mitt bekjentskap med Claude Code. Chat GPT var jeg kjent med fra tidligere.

To gode hjelpere

I likhet med Chat GPT er Claude høflig og oppmuntrende, og han syntes min ide om et miljøquiz brettspill var en flott ide for bloggen min. Jeg forklarte funksjonaliteten med slanger og stiger og beskrev så godt jeg kunne hva jeg var ute etter. Og VOW! Claude kastet seg over oppgaven og kodet i vei et første utkast etter mine spesifikasjoner. Det så slett ikke så ille ut, som du kan se nedenfor, og det virket!!! Men jeg hadde ikke vært nøye nok med spesifikasjonene, tallene skulle begynne nederst til venstre og så gå i sikksakk oppover fra linje til linje. Og selv om funksjonaliteten med stiger og slanger var der, så kunne man ikke se hvor stigen førte hen, eller langt ned du ville falle hvis du traff på en slange. Men det var en bra start. Slik så det første forsøket ut:

Vi utvidet spillet til 100 ruter og fikset nummereringen. Jeg spilte spillet – og alt fungerte, selv om jeg fortsatt savnet visuelle stiger og slanger. Men det var dessverre ganske kjedelig, og poengene for å svare riktig på miljøspørsmål ga lite mening, siden det varierte veldig hvor mange spørsmål du ble eksponert for i løpet av spillet. Man kunne risikere å spille gjennom hele spillet uten å få et eneste spørsmål. Jeg droppet derfor poengene og introduserte i stedet en AI-motspiller, eller rettere sagt tre varianter – en smarting, som kan mye om miljø, en som er ganske miljøinteressert, og en som ikke har giddet å sette seg inn i noe, som da selvfølgelig har høy sannsynlighet for å svare feil på spørsmålene. Og så lot vi det være tettere mellom miljøspørsmålene. Nå begynte funksjonaliteten å ligne på noe. Men designet var fremdeles ikke noe å skryte av.

Claude og Chat og jeg er et superteam

Claud er en racer til å kode, men litt begrenset når det gjelder design. Jeg konsulterte derfor min andre AI-medhjelper, Chat GPT og fikk hjelp til å designe et brett med slanger og stiger, jeg tenkte det bare skulle være et bilde som kunne legges oppå brettet som Claude hadde laget. Når vi fikk satt inn stiger og slanger, oppdaget jeg at de koordinatene jeg hadde lagt inn for slanger og stiger var slik at noen stiger og slanger krysset hverandre – det ga et rotete inntrykk, og jeg måtte korrigere plasseringene for å få det til å se noenlunde harmonisk ut. Jeg var rimelig fornøyd med resultatet, men så stakk min bedrevitende mann hodet inn og kastet et blikk på verket. Han var foreløpig ikke så imponert og sa at hvis jeg skulle lage et dataspill, så burde jeg bruke vektorgrafikk for å få responsivt design. Ja – det bør fungere på nettbrett og mobil, så du kan spille det hvis du sitter på bussen og kjeder deg. Det ble en ny runde med Chat GPT, og vi kom fram til brettet med slanger og stiger og sjakkruter, som du ser nedenfor, som jeg så ga til Claude, som la det inn i spillet. Og så ble det nye runder med prøving og finpuss.

Det er alltid noe mer man kan ønske seg og ting som kan forbedres. Jeg oppdaget at det var vanskelig å få med seg hva som skjedde på skjermen samtidig som jeg skulle følge med på terningkastene. Det ble løst med at motspillers miljøspørsmål ble vist i samme format som ditt eget, i stedenfor bare å blafre forbi i meldingsfeltet. Og så la vi på noen lydeffekter på slanger og stiger og også på flytting av brikkene, samtidig som vi animerte flyttingen av brikker fra rute til rute for å få det til å kjennes mer som et fysisk brettspill

Ta alltid backup!

Men det var ikke fritt for drama underveis. Da jeg endelig hadde fått spillet til å virke som jeg ville, var tiden kommet til å finne ut hvordan jeg kunne få publisert det på Gnistfangeren.no. Gnistfangeren er laget i WordPress, og med det abonnementet jeg har kjøpt er det noe begrenset funksjonalitet. Blant annet kan jeg ikke kjøre Javascript eller bruke iFrame. Vi prøvde forskjellige alternativer, og Claude ba meg om å kopiere koden og lime inn i en custom html-blokk i WordPress. Jeg hadde nettopp for sikkerhets skyld bedt Claude om å lagre koden på prosjektet mitt på GitHub. Dette var gresk for meg før jeg begynte å lage dette spillet, men jeg måtte opprette konto på GitHub for å lagre koden trygt, med versjonskontroll. Da jeg skulle kopiere koden, hadde jeg noen problemer med å åpne filen. Åpne den som ren tekst, sa Claude – og det gjorde jeg. Og vipps – så var html-filen forsvunnet, og all kodingen med den. Det hadde min Macbook Air gjort helt på egen hånd. I stedet satt jeg igjen med en liten tekstfil med noen få linjer. Da var jeg virkelig glad for at jeg kunne hente tilbake koden fra backup! Men vi endte likevel opp med ikke å få det til å virke ved å lime koden inn i WordPress, så da måtte jeg finne ut hvordan jeg skulle lage en GitHub page. For å få det til, måtte jeg gjøre repositoryet offentlig (det var også gresk for meg før dette). Så foreløpig vil du se en GitHub adresse i adressefeltet når du spiller spillet. Hvis jeg oppgraderer til WordPress Business, en merkostnad på ca. 200 kr i måneden, kan jeg bruke iFrame, og da vil spillet kjøre på Gnistfangersiden. Er det verdt det? Det kommer an på hvor mange jeg kan glede med et sånt spill, og om jeg har tenkt å lage flere.

Jeg har satt meg som mål at hvis minst 50 personer spiller spillet, og hvis minst 10 stykker kjøper en kaffe til meg, så skal jeg spandere på meg en oppgradering av WordPress til Business-versjonen og lage det neste miljøinspirerte spillet som jeg allerede har en ide til. Så nå er jeg spent på responsen!

Slik ble resultatet

Teknisk løsning

For den som er teknisk interessert, kan jeg med hjelp av min gode venn Claude fortelle følgende:

Miljøquiz-brettspillet er bygget som en moderne webapplikasjon med følgende teknologier:

• Frontend: Ren HTML5, CSS3 og vanilla JavaScript – ingen eksterne biblioteker eller rammeverk. Dette sikrer rask lasting og bred kompatibilitet.
•  Spillbrett: SVG-grafikk generert programmatisk med JavaScript. Brettet tegnes dynamisk med rutenett, tallnummerering, stiger, slanger og spillebrikker.
•  Spillogikk: Objektsorientert JavaScript med en hovedklasse (MiljoQuizGame) som håndterer spilltilstand, terningkast, spillerbevegelser og AI-logikk.
•  Lydeffekter: Web Audio API brukes for å generere lydsignaler for terningkast, stiger, slanger og spørsmål.
• Animasjoner: CSS-animasjoner og JavaScript-timere skaper smidig bevegelse av spillebrikker steg-for-steg rundt brettet.
•  Hosting: GitHub Pages for gratis, pålitelig hosting med global CDN.
•  WordPress-integrasjon: Lenket inn via Custom HTML-blokk med responsiv styling.

 Alt er kodet fra bunnen av uten eksterne avhengigheter, noe som gjør spillet raskt og vedlikeholdsvennlig

Vil du gi meg en tilbakemelding?

Hvis du nå har lyst til å teste spillet, så har du muligheten nedenfor. Og jeg vil veldig gjerne ha en tilbakemelding fra deg, hvis du du har kommentarer eller forbedringsforslag. Da går du bare tilbake til dette vinduet etter at du har spilt ferdig og legger inn en kommentar. På forhånd takk!