Bug Race Kodboken Live

Svårighetsgrad:

I spelet Bug Race är målet att få en skalbagge att springa runt en bana och försöka undvika att hamna utanför banan genom att styra med vänster- och högerpil på datorns tangentbord. Åker figuren utanför banan blir du Game Over!

Testa ett exempelspel av Bug Race nedan. image alt text

HUR KODAR JAG?
Följ denna instruktion steg för steg och koda ditt projekt i verktyget Scratch. Klicka här för att öppna Scratch i en ny flik. I Scratch klickar du på Skapa för att börja. Logga gärna in på Scratch så kan du även spara och dela ditt projekt. Det är gratis att skaffa ett konto.

Dax att börja koda! Klicka på steg 1 nedan för att gå vidare i instruktionen.

1: Välj ny sprajtfigur

Byt ut katt-sprajten till ny sprajt - en skalbagge!

VAD SKA JAG GÖRA?

Se i videon ovan hur du ska:

  • Ta bort kattfiguren
  • Välj ny sprajt
  • Minska sprajtens storlek


INSTRUKTION HUR JAG GÖR STEG-FÖR-STEG:

I Scratch skapar du projekt med så kallade sprajtar. En sprajt är en figur eller andra saker du väljer att lägga in i ditt projekt. Alla sprajtar kan påverkas och styras med den kod du lägger till. Koden i Scratch ser ut som små pusselbitar. När du byggt ihop olika kod-pusselbitar kallas det för att du bygget ett skript - det är ditt kodade program som styr ditt projekt och alla dina sprajtar.

Nu ska vi byta ut katten mot en skalbagge. Gör såhär:

  1. Tryck på krysset på lilla rutan med kattfiguren så försvinner den.

    image alt text

  2. Nu vill du lägga till en ny sprajt, skalbagge. Tryck på knappen för NY SPRAJT som finns under den scenen med den vita bakgrunden:

    image alt text

En massa sprajt-figurer finns här. I menyn till vänster finns en kategori som heter "Djur", tryck på den. Bland alla djurbilder hittar du skalbaggen. Klicka på den så läggs den till i ditt projekt.

  1. Skalbaggen är ganska stor, så vi minskar storleken på sprajten. Under scenen med sprajten finns Storlek och bredvid står det 100. Det betyder att sprajten är i full storlek, alltså 100%. Ändra siffran till en lägre procent, exempelvis 30%. Testa dig fram tills den blir lagom stor (som din tummnagel ungefär). Du kan alltid ändra det sen igen om det blev för stort eller litet.

    image alt text

Nu är skalbaggen klar och det är dags att rita banan som den ska springa runt på! Klicka dig vidare till kapitel 2.

2: Färglägg bakgrunden och rita en bana

Du ska nu färglägga spelets bakgrund och rita en bana som skalbaggen kan springa på.

VAD SKA JAG GÖRA?

Se i videon ovan hur du ska:

  • Aktivera bakgrunder
  • Aktivera Bitmapp-läge
  • Välj färg och verktyg för att fylla bakgrund
  • Välj ny färg och verktyg för att måla en bana


INSTRUKTION HUR JAG GÖR STEG-FÖR-STEG:

  1. För att ändra på bakgrunden trycker du först på den vita lilla rutan längst ner till höger där det står SCEN, så den blir markerad. Klicka sedan på fliken BAKGRUNDER som du finner högst upp till vänster.

    image alt text image alt text

  2. Tryck på blå knappen som det står "Gör till bitmapp på.

    image alt text

Välj sen en färg du gillar genom att klicka på den lilla färgade rutan ovanför och ställ in färgen du vill ha, genom att dra eller klicka på de olika reglagen tills du är nöjd.

image alt text

Fyll sen bakgrunden med färgen du valt genom att klicka på verktyget Fyll som ser ut som en liten hink och sen klicka på stora vita rutan så fylls bakgrunden med den färg du valt.

image alt text

Tips: Viktigt att färgen du valt inte är samma som någon färg som din sprajt har på sig. Annars kan det bli problem i ditt projekt längre fram.

  1. Tryck sen på verktyget PENSEL och välj en ny färg till banan i ditt spel. Viktigt att färgen inte är samma som skalbaggens färger. Gör även penseln mycket bredare genom att klicka länge på uppåtpilen som finns snett ovanför, eller bara skriva 100 i rutan bredvid pilarna. Strecket ska bli tjockt.

image alt text

Rita nu en bana som en oval eller en utdragen cirkel - gör den så stor som du kan, utan att den hamnar utanför spelets ruta!

Ungefär så här kan nu spelets bana se ut. Om banan är väldigt smal kommer spelet bli väldigt svårt, skalbaggen hamnar då lätt utanför banan - och du blir Game Over. Är banan bred blir spelet lite lättare då du har mer plats att styra runt på utan att åka ut!

image alt text

3: Sprajten rör på sig

Nu när bakgrunden är färdig kan du börja skapa ditt första skript med kod för att få din sprajt att börja röra sig.

VAD SKA JAG GÖRA?

Se i videon ovan hur du ska:

  • Välj KOD och din sprajt för att kunna börja koda
  • Lägg in kod för start-block: När GRÖN FLAGGA klickas på
  • Lägg in kod för RÖRELSE: Gå 10 steg
  • Lägg in kod för KONTROLL: För alltid (en loop)


INSTRUKTION HUR JAG GÖR STEG-FÖR-STEG:

Nu när bakgrunden är färdig kan du börja skapa ditt första skript. Glöm inte att spara ofta! Du måste vara inloggad för att kunna spara.

Ställ muspekaren på skalbaggen och ta tag i den genom att hålla ned musknappen (eller håll på den med ditt finger om du använder surfplatta) och dra sprajten på den målade banan, släpp den där du tycker skalbaggen ska stå när ditt spel börjar.

Tryck på KOD-fliken högst upp till vänster. Nu kommer du bort från målarverktyget och tillbaka till vita ytan där du kan bygga din kod för spelet.

Har du lagt märke till START- och STOPP-knappen än? Den gröna flaggan betyder är en start-knapp och den röda knappen är en stopp-knapp.

image alt text

Nu ska du koda så att skalbaggen börjar röra sig när du sen trycker på START-knappen - som alltså är den gröna flaggan. För att göra det måste du tala om för skalbaggen vad den ska göra, annars händer ingenting. Skalbaggen kan inte tänka av sig självt, den väntar på dina instruktioner. Du ska alltså koda och lägga till ditt första skript som säger:

"När jag trycker på START-flaggan, ska skalbaggen röra sig."

Gör såhär:

  1. Överst till vänster hittar du flera färgglada rubriker med en massa kod-pusselbitar under. Klicka på gula rubriken HÄNDELSER och välj pusselbiten med en grön flagga på som är blocket för: "när START (gröna flaggan) klickas på". Ta tag i och dra detta block till skriptytan (den stora tomma, vita ytan i mitten) och släpp den där.

image alt text

Välj sedan den blå rubriken RÖRELSE som finns längst upp och välj blocket "gå 10 steg". Lägg detta block direkt under det första blocket med den gröna flaggan på scriptytan och koppla ihop dem som pusselbitar.

image alt text

Tips: om man för två block nära varandra på scriptytan dyker snart en grå skugga upp, då kan man bara släppa så kopplar blocken automatiskt ihop sig som pusselbitar.

image alt text

Testa nu vad som händer när du trycker på START. Flyttar sig skalbaggen åt lite höger! Det är bra, men du vill ju att skalbaggen skall röra sig framåt hela tiden när spelet startats, inte bara flytta sig superkort en enda gång. Hur gör du det? Jo, såhär:

  1. Under orangea rubriken KONTROLL finns kodblocket "för alltid". Det är en LOOP, alltså en repetition av något som sker om och om igen. Med detta block kommer skalbaggen fortsätter röra sig framåt så länge spelet är igång. Dra in "för alltid"-loopen och lägg den direkt under "när START klickas på" så blocket "gå 10 steg" hamnar inuti loopen. Kolla på bilden nedan så ser du hur du ska göra.

image alt text

För att skalbaggen ska fortsätta att gå måste du lägga "gå 10 steg" i mitten av "för alltid"-loopen. "Gå 10 steg" kommer då att upprepas för alltid - om och om igen, så skalbaggen går och går och går.

Testa att trycka på START - alltså den gröna flaggan ovanför spelet. Nu blir det fart på skalbaggen! Prova vad som händer om du ändrar antalet steg till en lägre siffra. Klicka på siffran 10 i blocket gå 10 steg och skriv in en annan siffra för en hastighet som du tror är lagom för att kunna styra skalbaggen. Testa dig fram tills det känns lagom snabbt.

image alt text

4: Sätt en Startposition

För att slippa dra tillbaka skalbaggen till startplatsen varje gång du vill starta spelet, kan du säga åt datorn att placera den på en bestämd plats vid start.

VAD SKA JAG GÖRA?

Se i videon ovan hur du ska:

  • Dra sprajten till där du vill den ska starta på banan
  • Lägg in kod för RÖRELSE: gå till x:__ y:__


INSTRUKTION HUR JAG GÖR STEG-FÖR-STEG:

  1. Dra sprajten till den position där du vill att den ska starta på banan när spelet börjar. Se till att sprajten står på mitten av banan och helst på en raksträcka, inte en kurva.

  2. Under RÖRELSE väljer du blocket "gå till x:__ y:__" och koppla fast blocket direkt under "när START klickas på", ovanför "för alltid"-loopen. De siffror (värden) som står vid X och Y är KOORDINATERNA för den startposition som du har ställt skalbaggen på - alltså en bestämd plats i ditt spel.

image alt text

Nu kommer skalbaggen automatiskt att förflyttas till samma startposition varje gång du trycker på gröna START-flaggan.

5: Styra skalbaggen

Nästa steg blir att göra det möjligt att styra skalbaggen, så den inte rusar rakt av banan! För det behöver du två korta skript. Ett som säger åt datorn att skalbaggen ska svänga åt höger när du trycker ned höger piltangent på datorns tangentbord, och ett annat som säger åt den att svänga vänster när du trycker ned vänster piltangent. (Använder du surfplatta med pekskärm finns tips på hur du kan koda sprajten att följa ditt finger längre ned.)

VAD SKA JAG GÖRA?

Se i videon ovan hur du ska:

  • Lägg in kod för HÄNDELSER: när mellanslag trycks ned. Dra in två stycken sådana block
  • Ändra mellanslag i kodblocken till vänsterpil och högerpil
  • Lägg in kod för RÖRELSE: rotera vänster 15 grader och ett block rotera höger 15 grader


INSTRUKTION HUR JAG GÖR STEG-FÖR-STEG:

Tips! Använder du surfplatta med pekskärm? Koda då som bilden visar nedan istället för knappar att styra med, så följer sprajten ditt finger på skärmen runt banan: image alt text

  1. Koda styrknappar såhär: under rubriken HÄNDELSER finns ett block som säger "när mellanslag trycks ned". Dra in två sådana block och lägg dem bredvid varandra vart som som helst fritt på skriptytan.

image alt text

Bredvid ordet mellanslag i dessa två block finns en liten vit triangel. Klicka på lilla triangeln i vardera block och välj i rullistan som kommer fram - ändra till vänsterpil i det ena blocket och till högerpil i det andra.

image alt text

  1. Nu ska vi få sprajten att kunna vända sig. Under RÖRELSE hittar du ett block som säger "rotera (pil vänster) 15 grader" och ett som säger "rotera (pil höger) 15 grader". Koppla fast dessa två block under blocken "när vänsterpil tangent trycks ned" och "när högerpil tangent trycks ned".

image alt text

Testa vad som händer nu när du trycker på gröna START-flaggan. Kan du styra skalbaggen åt båda hållen med piltangenterna på tangentbordet? Går det för fort? Sänk skalbaggens hastighet genom att ändra variabelsiffran i rörelse-blocket!

6: Ändra startriktning

Om du trycker på START-flaggan igen märker du att skalbaggen behåller den riktning som den hade när du avslutade spelet sist. Kan lätt bli fel håll och detta kan du lösa genom att lägga in ett till init-skript som säger åt datorn att skalbaggen alltid ska vara vänd åt höger när du startar spelet.

VAD SKA JAG GÖRA?

Se i videon ovan hur du ska:

  • Lägg in kod för RÖRELSE: peka i 90 graders ritning


INSTRUKTION HUR JAG GÖR STEG-FÖR-STEG:

  1. Under RÖRELSE väljer du blocket som säger "peka i 90 riktning".

image alt text

Testa vad som händer om du ändrar på värdet från 90 grader till något annat (klicka på siffran 90 i blocket, dra runt muspekaren till annan vinkel och klicka utanför bilden för att välja annan vinkel).

image alt text

7: Känna av när skalbaggen åker av banan

Skalbaggen måste känna av när den hamnar utanför banan och bli Game Over! Det löser vi genom att skalbaggen känner av vilken färg den åker på. Vi kodar ett VILLKOR för skalbaggen, som säger att: "OM skalbaggen rör vid färgen utanför banan - ska spelet ta slut".

VAD SKA JAG GÖRA?

Se i videon ovan hur du ska:

  • Lägg in kod för KONTROLL: om...då
  • Lägg in kod för KÄNNA AV: rör färgen_. Lägg blocket i det kantiga hålet mellan om...då.
  • Lägg in kod för UTSEENDE: säg Hej! i 2 sekunder. Ändra texten till Game Over!


INSTRUKTION HUR JAG GÖR STEG-FÖR-STEG:

  1. Under KONTROLL finns blocket "om <> då", dra in det till scriptytan, lägg det fritt någonstans bredvid de övriga scripten. Det här blocket säger att OM det som står inom <> händer, ska något annat direkt hända. Till exempel: Om skalbaggen <rör färgen grön>, säg Game Over i 2 sekunder.

image alt text

  1. Under KÄNNA AV finns blocket "Rör färgen <> ?". Dra in detta block till hålet <> inom blocket "om <> då" som du lagt på skriptytan.

image alt text

Kolla att lilla ovala cirkeln med färg till höger om texten "rör färgen" i ditt script är exakt samma färg som spelets bakgrundsfärg. Byt annars genom att klicka med muspekaren på den lilla färgcirkeln och välj den lilla symbolen med en pimpett längst ned. Klicka sedan med den på spelets bakgrundsfärg, så blir det rätt färg i kodblockets cirkel. Nu har du talat om för datorn att något ska hända när skalbaggen rör vid denna färg.

image alt text

  1. Till sist skapar du ett skript för att spelet ska säga att det är Game Over om skalbaggen nuddar färgen utanför banan. Under tema UTSEENDE väljer du blocket "säg Hej! i 2 sekunder" och drar in detta block innanför "om <"Rör färgen grön?> då"". Klicka sedan på ordet "Hej!" och ändra texten till det du vill skalbaggen ska säga - till exempel Game Over.

image alt text

Testa ditt spel! Händer det något när skalbaggen nuddar färgen utanför banan? Om inte, vad tror du att det kan bero på?

8: Gör klart skriptet

Något saknas för att koden ska fungera! Tänk efter: När vill du att datorn ska känna av om skalbaggen rör färgen utanför banan? Det behöver ju göras efter varje steg skalbaggen tar, för att inte missa om den springer av banan. Datorn måste kolla exakt vart skalbaggen befinner sig "om och om igen", hela tiden. Därför måste du koppla ihop skriptet som känner av färgen utanför banan med det som får skalbaggen att röra sig.

VAD SKA JAG GÖRA?

Se i videon ovan hur du ska:

  • Lägg skriptet inuti för alltid-loopen
  • Lägg in kod för KONTROLL: stoppa alla. Lägg blocket längst ned inom om...då. Ändra till stoppa detta skript.


INSTRUKTION HUR JAG GÖR STEG-FÖR-STEG:

  1. Lägg skriptet som känner av färgen inuti din "för alltid"-loop. Nu kollar datorn av om skalbaggen ramlat av banan varje gång innan den tar nästa steg framåt igen. Sen kollar den igen - har jag ramlat av banan? Om inte, spring vidare, kolla, spring...

image alt text

  1. När spelet blir Game Over ska ju allt ta slut och skalbaggen stoppa helt. Under KONTROLL finns blocket "stoppa alla". Dra in detta block till skriptfältet. Klicka på lilla pilen i blocket och byt till "stoppa detta skript".

image alt text

Lägg in detta block längst ned inuti skriptet med "om <> då". På så sätt avslutas spelet och skalbaggen stannar om den hamnar utanför banan och blir Game Over.

Testa koden! Kan du styra skalbaggen runt banan med piltangenterna? Vad händer om sprajten åker utanför banan?

Är det svårt att veta hur alla blocken ska läggas in i skriptet? På nästa sida kan du se en bild på hur det färdiga skriptet ska se ut.

Färdig!

Grattis, nu har du skapat ditt första spel! Det färdiga skriptet i sin helhet borde se ut ungefär så här - om du följt instruktionerna:

image alt text

Glöm inte att spara ditt projekt - och att döpa det! Döp det gärna till uppgiftens namn Bug Race - eller hitta på ett eget namn, så att du enkelt kan hitta det igen. Du skriver in namn på spelet högt upp ovanför projektet, där det nu står "Scratchprojekt". Spara sedan, men du måste vara inloggad för att kunna spara.

Testa ditt projekt
Visa gärna någon ditt spel och låt dem testa. Om du vill, tryck på knappen DELA som du finner överst så kan andra också hitta spelet på Scratch sajt och testa det.

Viktigt om du delar ditt projekt: Tänk på att delade projekt kan ses, testas och remixas (omskapas) av alla som vill på Scratch sajt. Det är viktigt när du sparar och delar att projektet inte innhåller information, bilder eller ljud du inte vill sprida till andra.

Utmaning

Saknas något? Hur skulle du vilja utveckla spelet?

Tips på hur du kan bygga vidare på Bug Race hittar du i uppgiften som heter Bug Race - Tillägg. Där kan du bland annat skapa Bug Race för två spelare samtidigt och göra en mjukare styrning av sprajtarna. Bug race med två spelare

Frågeställningar

  • Vad är en sprajt?

  • Vad är en loop?

  • Varför kan det vara bra att använda en loop?

  • Vad är ett INIT-Script eller Start-Script?

  • Vad händer i spelet Bug Race om sprajten har samma färg som bakgrunden?

Har du kommentarer till materialet på den här sidan? Mejla info@kodcentrum.se
Föreslå förbättring av sidan direkt Gå till sidan på Github!