Begge sider forrige revisjonForrige revisjonNeste revisjon | Forrige revisjon |
space_invaders [2020/03/30 14:03] – [Poeng og liv] royeven | space_invaders [2022/11/30 08:09] (nåværende versjon) – ekstern redigering 127.0.0.1 |
---|
====== Space Invader (enkel variant) ====== | ====== Space Invader (enkel variant) ====== |
I denne oppskriften skal vi 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. | 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 - initialiser spillet ===== | ===== Ved start - initialiser spillet ===== |
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. | 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 "lag brikke på x: y:"-kommandoen fra spill-menyen under avansert.</hidden> | <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 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 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. Missil bør plasseres på samme sted som defender.</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> | <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> |
{{url>https://jsfiddle.net/royeven/87ypu6k1/1/embedded/css,html,result/ 100%,400 noscroll noborder left}} | {{url>https://jsfiddle.net/royeven/87ypu6k1/1/embedded/css,html,result/ 100%,400 noscroll noborder left}} |
| |
| |
===== Vanskegrad ===== | ===== Vanskegrad ===== |
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. | 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. |
{{url>https://jsfiddle.net/royeven/87ypu6k1/3/embedded/css,html,result/ 100%,400 noscroll noborder left}} | {{url>https://jsfiddle.net/royeven/87ypu6k1/3/embedded/css,html,result/ 100%,400 noscroll noborder left}} |
| |
| |
===== Poeng og liv ===== | ===== Poeng og liv ===== |
Ved oppstart av spillet skal du ha 0 poeng og 3 liv. Du får ett nytt poeng hver gang du skyter en invader og du mister ett liv hver gang en invader passerer forbi deg. | 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> | <hidden Tips 1>Du finner kommandoer for dette i **Spill**-menyen.</hidden> |
{{url>https://jsfiddle.net/royeven/87ypu6k1/4/embedded/css,html,result/ 100%,400 noscroll noborder left}} | {{url>https://jsfiddle.net/royeven/87ypu6k1/4/embedded/css,html,result/ 100%,400 noscroll noborder left}} |
| |
| |
===== Test ===== | ===== Flytte defender ===== |
| //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> |
{{url>https://jsfiddle.net/royeven/87ypu6k1/5/embedded/css,html,result/ 100%,400 noscroll noborder left}} | {{url>https://jsfiddle.net/royeven/87ypu6k1/5/embedded/css,html,result/ 100%,400 noscroll noborder left}} |
{{url>https://jsfiddle.net/royeven/87ypu6k1/6/embedded/css,html,result/ 100%,400 noscroll noborder left}} | |
| |
| ===== Flytte invader ===== |
| 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. |
{{url>https://jsfiddle.net/royeven/87ypu6k1/7/embedded/css,html,result/ 100%,400 noscroll noborder left}} | {{url>https://jsfiddle.net/royeven/87ypu6k1/7/embedded/css,html,result/ 100%,400 noscroll noborder left}} |
{{url>https://jsfiddle.net/royeven/87ypu6k1/8/embedded/css,html,result/ 100%,400 noscroll noborder left}} | |
{{url>https://jsfiddle.net/royeven/87ypu6k1/9/embedded/css,html,result/ 100%,400 noscroll noborder left}} | |
{{url>https://jsfiddle.net/royeven/87ypu6k1/10/embedded/css,html,result/ 100%,400 noscroll noborder left}} | ===== Avfyre missil ===== |
| 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> |
| {{url>https://jsfiddle.net/royeven/87ypu6k1/17/embedded/css,html,result/ 100%,400 noscroll noborder left}} |
| |
| |
| ===== Sprenge invader ===== |
| 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> |
{{url>https://jsfiddle.net/royeven/87ypu6k1/11/embedded/css,html,result/ 100%,400 noscroll noborder left}} | {{url>https://jsfiddle.net/royeven/87ypu6k1/11/embedded/css,html,result/ 100%,400 noscroll noborder left}} |
{{url>https://jsfiddle.net/royeven/87ypu6k1/12/embedded/css,html,result/ 100%,400 noscroll noborder left}} | |
| ===== Automatisk bevegelse av invader ===== |
| 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: |
| - Endre //invader// sin y-koordinat med 1 |
| - Ta pause i //invader_speed// |
| - Hvis //invader// berører //defender// |
| - mist ett liv |
| - reset invader |
| - ellers hvis //invader// er på bunnen |
| - mist ett poeng |
| - reset //invader// |
| |
| 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. |
{{url>https://jsfiddle.net/royeven/87ypu6k1/13/embedded/css,html,result/ 100%,400 noscroll noborder left}} | {{url>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. |
{{url>https://jsfiddle.net/royeven/87ypu6k1/14/embedded/css,html,result/ 100%,400 noscroll noborder left}} | {{url>https://jsfiddle.net/royeven/87ypu6k1/14/embedded/css,html,result/ 100%,400 noscroll noborder left}} |
{{url>https://jsfiddle.net/royeven/87ypu6k1/15/embedded/css,html,result/ 100%,400 noscroll noborder left}} | |
| |
| |
| ====== Egen innsats ====== |
| * Greier du å endre på spillet slik at du mister liv for hver invader som unnslipper? |
| * Greier du å endre på spillet slik at invader går fortere når du passerer et visst antall poeng? |
| * Greier du å endre spillet slik at du har to invadere som går samtidig? |
| |