I denne oppskriften skal du trinn for trinn bygge opp en enkel variant av spillet Space Invader med bare én invader (i gangen) og en defender. Defender skal forsøke å skyte invader, og får ett poeng pr. invader som blir skutt ned. For hver invader som unnslipper mister defender ett liv.
Ved start skal du lage tre variabler du kaller invader, defender og missil. I hver av disse variablene skal du lage en brikke og plassere brikkene på fornuftige steder på skjermen. <hidden Tips 1>Du lager brikker til spillet ved å bruke kommandoen «lag brikke på x: y:» fra menyen for Spill. Det er mulig du må trykke på Avansert for at denne menyen skal bli synlig.</hidden> <hidden Tips 2>Koordinatene X og Y betegner hvor brikken skal plasseres i forhold til øverste venstre hjørne. En koordinat med X=2 og Y=3 vil bety 2 hakk bortover og 3 hakk nedover.</hidden> <hidden Tips 3>En naturlig plassering for invader er på øverste linje på skjermen (Y=0), X kan være hva som helst, gjerne et tilfeldig tall fra menyen for Matematikk.</hidden> <hidden Tips 4>En naturlig plassering for defender kan være på nederste linje på skjermen (Y=4), X kan være hva som helst, gjerne et tilfeldig tall fra menyen for Matematikk. Du bør plassere missil på samme sted som defender.</hidden> <hidden Tips 5>Selv om vi har opprettet en brikke for missil skal den ikke være synlig på skjermen enda. Bruk «angi»-kommandoen fra Spill-menyen til å angi lysstyrke 0 på missilet. Missilet skal være synlig etter at det er avfyrt, ellers usynlig.</hidden> https://jsfiddle.net/royeven/87ypu6k1/1/embedded/css,html,result/ 100%,400 noscroll noborder left
Spillet blir vanskeligere dersom invader beveger seg fort, og lettere om invader er treig. Lag en variabel som du kaller invader_speed og en variabel du kaller missil_speed og sett dem til henholdsvis 2000 og 100. Du kan endre disse verdiene senere i spillet om du vil. https://jsfiddle.net/royeven/87ypu6k1/3/embedded/css,html,result/ 100%,400 noscroll noborder left
Ved oppstart av spillet skal du ha 0 poeng og 3 liv. Du får ett nytt poeng hver gang du skyter og treffer invader og du mister ett liv hver gang invader passerer forbi deg. <hidden Tips 1>Du finner kommandoer for dette i Spill-menyen.</hidden> https://jsfiddle.net/royeven/87ypu6k1/4/embedded/css,html,result/ 100%,400 noscroll noborder left
Defender må kunne flytte seg til sidene, og det kan være naturlig å bruke knappene A og B til å flytte brikken defender. Når knapp A trykkes skal defender flytte seg til venstre og når knapp B trykkes skal defender flytte seg til høyre. <hidden Tips 1>Du finner funksjoner for «når knapp A trykkes» og «når knapp B trykkes» under Inndata-menyen.</hidden> <hidden Tips 2>Du kan endre defender sin posisjon ved å bruke «sprite endre x med»-kommandoen fra Spill-menyen.</hidden> <hidden Tips 3>Hvis du endrer x med 1 vil x-koordinaten øke med 1 og brikken flytte seg til høyre. Hvis du endrer x-koordinaten med -1 vil x-koordinaten avta med 1 og brikken flyttes til venstre.</hidden> https://jsfiddle.net/royeven/87ypu6k1/5/embedded/css,html,result/ 100%,400 noscroll noborder left
I denne enkle varianten av Space Invader vil invader bevege seg mot defender, og dersom defender ikke skyter invader vil invader forsvinne fra skjermen før en ny invader kommer til syne øverst på skjermen. Programmeringsmessig skal vi løse dette ved å flytte invader tilbake til toppen på skjermen (Y=0) hver gang den kommer seg forbi defender (Y=4). Vi må først lage oss en egen funksjon som skal flytte defender tilbake til toppen av brettet. Trykk på Avansert og deretter på Funksjon. Der skal du lage en ny funksjon som heter «resetInvader». De skal ikke legge til noen parametre til denne, bare trykke fullført etter å ha endret navnet på funksjonen «gjørNoe» til «resetInvader».
Etterpå skal du legge kommandoer i denne funksjonen som angir invader sin Y-koordinat til 0 og invader sin X-koordinat til et tilfeldig tall. https://jsfiddle.net/royeven/87ypu6k1/7/embedded/css,html,result/ 100%,400 noscroll noborder left
Når du trykker på knapp A+B (altså A og B samtidig) skal missil (som nå er usynlig ett eller annet sted på skjermen) flyttes til defender sin koordinat, bli synlig, og bli skutt ut fra defender. Missil skal bevege seg oppover på skjermen helt til det kommer til toppen. Der skal det på nytt bli usynlig og vente på neste avfyring. <hidden Tips 1>Alt som skal skje med missil må skje inni en «når knapp A+B trykkes»-blokk som du finner under Inndata.</hidden> <hidden Tips 2>Du ønsker å angi missil sin y-koordinat til samme y-koordinat som defender har. Og ditto for x-koordinatene. Du kan deretter angi missil sin lysstyrke til 255, som er maksimal lysstyrke.</hidden> <hidden Tips 3>Etter at missilet har blitt synlig skal det endre sin y-koordinat 4 ganger i negativ retning (oppover) før det på nytt skal bli usynlig.</hidden> <hidden Tips 4>Du bør bruke variabelen missil_speed til å bestemme hvor fort missilet skal gå. F.eks. kan du ta en pause i missil_speed millisekunder etter hvert skritt missilet blir flyttet.</hidden> https://jsfiddle.net/royeven/87ypu6k1/17/embedded/css,html,result/ 100%,400 noscroll noborder left
For hver gang du flytter missil ett hakk bør du sjekke om missil kolliderer med (berører) invader. I så fall kan du øke poengsummen din med 1, angi missil sitt lysstyrke til 0 (usynlig) og resette invader ved å bruke funksjonen du lagde i stad. <hidden Tips 1>Du kan sjekke om missil og invader er på samme plass ved å bruke en «hvis»-blokk fra Logikk-menyen og «sprite berører …»-kommandoen fra Spill.</hidden> https://jsfiddle.net/royeven/87ypu6k1/11/embedded/css,html,result/ 100%,400 noscroll noborder left
Nå skal vi la invader flytte seg automatisk nedover skjermen. Dette kan oppnås ved å bruke en «gjenta for alltid»-løkke fra Basis-menyen. Det som skal gjentas er følgende algoritme (et teknisk for for oppskrift):
Gjenta for alltid:
Med denne løsningen mister du liv hvis du kolliderer med invader. Hvis du unngår kollisjon mister du bare ett poeng for hver invader som unnslipper. Ved å trykke på «Result» under får du opp et ukomplett løsningsforslag som du kan ta utgangspunkt i. https://jsfiddle.net/royeven/87ypu6k1/13/embedded/css,html,result/ 100%,400 noscroll noborder left
Ved å trykke på «Result» under får du et komplett løsningsforslag. https://jsfiddle.net/royeven/87ypu6k1/14/embedded/css,html,result/ 100%,400 noscroll noborder left