Kom igång

Nu börjar vi bygga.

Målet är enkelt: innan den här delen är klar ska du kunna öppna en webbsida på din dator och styra en figur med piltangenterna.

Det kanske inte låter som ett helt spel. Men du har då tagit det första riktiga steget.

Lärandemål

• Du har installerat verktygen
• Du kan starta ditt spel i webbläsaren på din egen dator
• Du kan spara en version som fungerar

Först behöver vi några verktyg

Du behöver tre saker. Namnen kan låta tekniska, men du behöver inte förstå hur de fungerar bakom kulisserna.

Claude Code, din AI-assistent

Claude Code är verktyget som hjälper dig att skapa och ändra spelets kod.

Om du använder Claude-appen för datorn kan du arbeta via Code-funktionen, där den finns tillgänglig. Du skriver vad du vill göra, ungefär som i en vanlig chatt.

Skillnaden är att Claude Code också kan arbeta med filerna på din dator och hjälpa dig att köra spelet.

Node.js, som hjälper dig att köra spelprojektet

Node.js används av de utvecklingsverktyg vi ska arbeta med.

Gå till nodejs.org och installera den version som är märkt LTS. Det betyder att den är avsedd för långsiktig användning.

Är du osäker på om installationen fungerade kan du be Claude hjälpa dig att kontrollera.

Git, så att du kan ångra dig

Git håller reda på olika versioner av ditt projekt.

Tänk dig att du bygger något som fungerar fint. Sedan gör du en förändring, och plötsligt fungerar ingenting.

Med Git kan du gå tillbaka till den tidigare versionen.

På Mac kan Git installeras tillsammans med Apples utvecklarverktyg. På Windows och Linux finns motsvarande installationsmöjligheter.

Du behöver inte lära dig Git-kommandon nu. Det räcker att be Claude skapa en sparpunkt när något fungerar.

Skapa en plats för ditt spel

Börja med att skapa en mapp där spelets filer ska ligga.

Du kan exempelvis kalla den:

Spel/mitt-forsta-spel

Välj helst en plats som inte automatiskt synkas med iCloud, OneDrive eller någon annan molntjänst. Spelprojekt innehåller ofta många små filer, och synkningen kan ibland ställa till problem.

Öppna sedan mappen i Claude Code.

Dags att skapa ditt första spel

Nu ska du ge Claude din första instruktion.

Kopiera texten nedan och klistra in den i Claude Code:

Jag vill bygga mitt första webbspel och har aldrig programmerat.
Skapa ett enkelt spelprojekt med Vite och Three.js i den här mappen.
Börja med en scen som har en mark, en himmel och en kub som jag kan styra med piltangenterna.
Hjälp mig att starta spelet i webbläsaren och förklara kort vad du gör.

Claude börjar nu skapa projektet.

Den kan behöva installera några saker och kanske ställa en fråga innan den fortsätter.

När allt är klart får du en webbadress, ofta:

http://localhost:5173

Öppna den i din webbläsare.

Om allt fungerar ska du nu kunna styra din kub med piltangenterna.

Du har byggt din första spelbara scen.

Vad betyder localhost?

Det betyder helt enkelt att spelet körs lokalt, på din egen dator.

Det är alltså inte publicerat på internet, och andra kan inte automatiskt komma åt det.

Det är ett bra sätt att bygga och testa innan du bestämmer dig för om spelet ska delas med andra.

Vill du hellre bygga ett 2D-spel?

Det går också bra.

Three.js passar för spel i tre dimensioner. Om du exempelvis vill göra ett klassiskt plattformsspel kan du be Claude använda Phaser i stället.

Arbetssättet är i stort sett detsamma.

När något inte fungerar

Förr eller senare händer det. Kanske syns ingenting i webbläsaren. Kanske går kuben inte att styra. Eller så får du ett felmeddelande.

Då behöver du inte börja leta efter felet i koden.

Berätta i stället för Claude vad som hände.

Exempel:

Jag ser marken och himlen, men kuben går inte att styra med piltangenterna. Hjälp mig att hitta felet och rätta det. Ändra bara det som behövs.

Har du fått ett felmeddelande kan du kopiera in det.

Försök gärna ändra en sak i taget. Då blir det lättare att se vad som faktiskt hjälpte.

Spara när det fungerar

När du kan styra kuben är det dags för din första sparpunkt.

Skriv:

Nu fungerar styrningen. Gör en sparpunkt med Git och beskriv kort vad vi har gjort.

Claude sparar då den fungerande versionen av projektet. I Git kallas det en commit.

Det är en vana som kommer att spara dig mycket tid.

Gör en ny sparpunkt varje gång du har fått en viktig del att fungera.

Din uppgift, cirka 40 minuter

1. Installera Claude Code, Node.js och Git.
2. Skapa en mapp för ditt spel.
3. Be Claude bygga en enkel scen med en figur du kan styra.
4. Starta spelet och prova det i webbläsaren.
5. Be Claude göra en sparpunkt.

Du är klar när du kan styra figuren och har sparat en fungerande version.

Kom ihåg

Du behöver inte förstå all teknik för att komma vidare. Be Claude förklara när något är oklart, testa det som byggs och spara när det fungerar.