Denk na over de volgorde waarin de commando's worden uitgevoerd.
### 📤 Inleveren Maak een screenshot de code met de coordinaten waarbij de muis linksboven in beeld in beeld staat en de kaas rechtsonder. [datasource](https://www.roc.ovh/books/software-development-2025/page/pak-de-kaas) ## 2 Beweeg de muis In deze les gaan we de muis laten bewegen met de pijltjestoetsen. We doen dat door de positie van de muis aan te passen telkens als een toets wordt ingedrukt. ### Wat gaan we doen? We maken twee variabelen `mouse_x` en `mouse_y` om de positie van de muis bij te houden. In de functie `update()` passen we deze coördinaten aan als je een pijl indrukt. ### 🔰 Startercode ```python # importeer library import pgzrun # Spelgrootte WIDTH = 800 HEIGHT = 600 # Startpositie van de muis mouse_x = 150 mouse_y = 150 def draw(): screen.clear() screen.blit("mouse", (mouse_x, mouse_y)) screen.blit("cheese", (50, 50)) def update(): global mouse_x, mouse_y if keyboard.left: mouse_x -= 5 if keyboard.right: mouse_x += 5 if keyboard.up: mouse_y -= 5 if keyboard.down: mouse_y += 5 #start programma pgzrun.go() ``` ### ℹ️ Uitleg - `mouse_x` en `mouse_y` zijn variabelen die bijhouden waar de muis staat - `update()` wordt meerdere keren per seconde uitgevoerd - Met `keyboard.left` controleer je of de linkerpijl wordt ingedrukt - Bij elke toetsdruk wordt de positie een klein stukje aangepast ### 🛠️ Opdracht - Voer de code uit en beweeg de muis met de pijltjestoetsen - Pas de waarde `5` aan naar een groter of kleiner getal. Wat merk je? - Probeer ervoor te zorgen dat de muis niet buiten het scherm kan verdwijnen (zie extrat uitleg). - Als de muis en de kaas op dezelfde positie staan dan verdwijnt de muis onder de kaas. Zorg ervoor dat de muis boven de kaas komt. Zoals hier is weegegven:  #### 💡 Extra uitleg Laat de muis **niet** verder bewegen als hij het scherm uit dreigt te gaan. Voeg hiervoor `if`-statements toe zoals: ```python if keyboard.left and mouse_x > 10: mouse_x -= 5 ``` Dus hier staat: las de linker pijtjes toets is ingedrukt én de x coördinaat is > 10 zet de postie van de muis dan op de huidige positie - 5. Dus trek 5 van de huisdige posite af. Doe dit in vier stappen en test **elke** stap. 1. Doe dit eerst voor keyboard.left en test of het werkt. 2. Doe dit ook voor de keyboard.right en test of het werkt. 3. Doe dit daarna ook voor de keyboard.up en test of het werkt. 4. Doe dit tenslotte voor de keyboard.down en test of het werkt. ### 📤 Inleveren Maak een screenshot van je aangepaste code waarbij de **muis boven de kaas** beweegt én waarbij de muis **niet uit het scherm** kan bewegen. ## 3 Botsing met de kaas In deze les gaan we kijken of de muis de kaas aanraakt. Daarvoor gebruiken we een `if`-statement en controleren we of de muis en de kaas elkaar overlappen. ### Wat gaan we doen? We maken een rechthoek rondom de muis en rondom de kaas, en gebruiken `colliderect()` om te kijken of ze elkaar raken. Als de muis de kaas raakt, tonen we een bericht in de console met `print()`. ### 🔰 Startercode ```python # importeer library import pgzrun # Spelgrootte WIDTH = 800 HEIGHT = 600 # Startpositie van de muis en kaas mouse_x = 150 mouse_y = 150 cheese_x = 50 cheese_y = 50 def draw(): screen.clear() screen.blit("mouse", (mouse_x, mouse_y)) screen.blit("cheese", (cheese_x, cheese_y)) def update(): global mouse_x, mouse_y if keyboard.left: mouse_x -= 5 if keyboard.right: mouse_x += 5 if keyboard.up: mouse_y -= 5 if keyboard.down: mouse_y += 5 # Botsing controleren mouse_rect = Rect((mouse_x, mouse_y), (50, 50)) cheese_rect = Rect((cheese_x, cheese_y), (100, 100)) if mouse_rect.colliderect(cheese_rect): print("Gevonden!") else: print('-') #start programma pgzrun.go() ``` ### ℹ️ Uitleg - Een `Rect` is een rechthoek: (x, y, breedte, hoogte) - `colliderect()` geeft `True` als twee rechthoeken elkaar raken - In dit voorbeeld zijn muis 50x50 pixels en de kaas beide 100x100 pixels groot. - Als er een botsing is, toont Python het woord `Gevonden!` ### 🛠️ Opdracht - Probeer de muis met de pijltjestoetsen naar de kaas te bewegen - Als je `Gevonden!` ziet in de console, werkt de botsing - De kaas is niet helemaal 100x100 (in alle richtingen). Pas de grootte van de `Rect` aan zodat je alleen een melding "Gevonden!" krijgt als de muis duidelijk de kaas raakt en duidelijk 'op de kaas zit'. - Zorg er ook voor dat de muis **op** de kaas komt en niet eronder! #### 💡 Extra uitdaging Toon een boodschap op het scherm als de muis de kaas heeft gevonden: ```python gevonden = False def update(): ... if mouse_rect.colliderect(cheese_rect): gevonden = True def draw(): ... if gevonden: screen.draw.text("Gevonden!", (350, 10), fontsize=60, color="red") ``` ### 📤 Inleveren Maak een screenshot van je console waarin je ziet dat "Gevonden!" verschijnt als de muis de kaas aanraakt. ## 4 Kaas verspringt In deze les gaan we ervoor zorgen dat de kaas naar een nieuwe plek springt als de muis hem aanraakt. We doen dat met de functie `random.randint()` om een willekeurige positie te kiezen. ### Wat gaan we doen? We importeren de `random`-bibliotheek en maken een functie die een nieuwe plek kiest voor de kaas. Als er een botsing is, roepen we die functie aan en verplaatsen we de kaas. ### 🔰 Startercode ```python import pgzrun import random WIDTH = 800 HEIGHT = 600 mouse_x = 150 mouse_y = 150 cheese_x = 50 cheese_y = 50 def nieuwe_kaas_plek(): x = random.randint(0, WIDTH - 64) y = random.randint(0, HEIGHT - 64) return x, y def draw(): screen.clear() screen.blit("mouse", (mouse_x, mouse_y)) screen.blit("cheese", (cheese_x, cheese_y)) def update(): global mouse_x, mouse_y, cheese_x, cheese_y if keyboard.left: mouse_x -= 5 if keyboard.right: mouse_x += 5 if keyboard.up: mouse_y -= 5 if keyboard.down: mouse_y += 5 mouse_rect = Rect((mouse_x, mouse_y), (64, 64)) cheese_rect = Rect((cheese_x, cheese_y), (64, 64)) if mouse_rect.colliderect(cheese_rect): cheese_x, cheese_y = nieuwe_kaas_plek() #start programma pgzrun.go() ``` ### ℹ️ Uitleg - `import random` zorgt ervoor dat we willekeurige getallen kunnen gebruiken - `random.randint(a, b)` geeft een willekeurig getal tussen `a` en `b` - `WIDTH - 64` zorgt ervoor dat het plaatje niet buiten beeld komt - Als de muis de kaas raakt, wordt `cheese_x` en `cheese_y` aangepast ### 🛠️ Opdracht - Laat de muis de kaas aanraken en kijk of deze naar een nieuwe plek verspringt - Probeer het een paar keer en kijk of het altijd binnen het scherm blijft - Pas de afmetingen van de sprite aan als jouw plaatjes groter of kleiner zijn dan 64x64 #### 💡 Extra uitdaging Kies een leuk geluidseffect op : [https://www.wavsource.com/sfx/sfx.htm](https://www.wavsource.com/sfx/sfx.htm) 📁 Zet dan ook een bestand, bijvoorbeeld `bloop_x.wav` in de (nieuwe) map `sounds/` Voeg een geluid toe dat afspeelt als de muis de kaas raakt: ```python if mouse_rect.colliderect(cheese_rect): sounds.blook_x.play() cheese_x, cheese_y = nieuwe_kaas_plek() ``` ### 📤 Inleveren Maak een screenshot van je werkende code waar de kaas verspringt. Leg kort uit wat `random.randint()` doet en waarom je `WIDTH - 64` gebruikt. ## 5 Score bijhouden In deze les gaan we een score bijhouden: elke keer als de muis de kaas raakt, telt de score één punt op. Deze score tonen we ook op het scherm. ### Wat gaan we doen? We maken een variabele `score` die begint op 0 en steeds verhoogd wordt bij een botsing. In de `draw()`-functie tekenen we de score linksboven in het scherm. ### 🔰 Startercode ```python # importeer library import pgzrun import random WIDTH = 800 HEIGHT = 600 mouse_x = 150 mouse_y = 150 cheese_x = 50 cheese_y = 50 score = 0 def nieuwe_kaas_plek(): x = random.randint(0, WIDTH - 64) y = random.randint(0, HEIGHT - 64) return x, y def draw(): screen.clear() screen.blit("mouse", (mouse_x, mouse_y)) screen.blit("cheese", (cheese_x, cheese_y)) screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color="white") def update(): global mouse_x, mouse_y, cheese_x, cheese_y, score if keyboard.left: mouse_x -= 5 if keyboard.right: mouse_x += 5 if keyboard.up: mouse_y -= 5 if keyboard.down: mouse_y += 5 mouse_rect = Rect((mouse_x, mouse_y), (64, 64)) cheese_rect = Rect((cheese_x, cheese_y), (64, 64)) if mouse_rect.colliderect(cheese_rect): cheese_x, cheese_y = nieuwe_kaas_plek() score += 1 #start programma pgzrun.go() ``` ### ℹ️ Uitleg - `score = 0` zet de score aan het begin op nul - Elke keer als de muis de kaas aanraakt, wordt de score verhoogd met `score += 1` - `screen.draw.text()` toont tekst op het scherm ### 🛠️ Opdracht - Speel het spel een paar keer en kijk of de score steeds verder oploopt - Pas de tekstkleur of positie aan van de score - Maak de tekst groter of kleiner door `fontsize` aan te passen #### 💡 Extra uitdaging Laat de kleur van de tekst veranderen bij een bepaalde score: ```python kleur = "black" if score >= 5: kleur = "red" screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color=kleur) ``` ### 📤 Inleveren Maak een screenshot van het spel waarbij de score zichtbaar is (minimaal 3 punten). Leg in een zinnetje uit wat `score += 1` betekent. ## 6 Tijdslimiet In deze les gaan we een tijdslimiet toevoegen. De speler heeft bijvoorbeeld 30 seconden om zoveel mogelijk kaas te pakken. Aan het einde tonen we “Game Over” en stoppen we het spel. ### Wat gaan we doen? We maken een teller `tijd_over` die elke seconde met 1 omlaag gaat. Als de tijd op is, stopt het spel. We tonen de tijd linksboven in beeld naast de score. ### 🔰 Startercode ```python # importeer library import pgzrun import random WIDTH = 800 HEIGHT = 600 mouse_x = 150 mouse_y = 150 cheese_x = 50 cheese_y = 50 score = 0 tijd_over = 30 game_over = False def nieuwe_kaas_plek(): x = random.randint(0, WIDTH - 64) y = random.randint(0, HEIGHT - 64) return x, y def draw(): screen.clear() screen.blit("mouse", (mouse_x, mouse_y)) screen.blit("cheese", (cheese_x, cheese_y)) screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color="white") screen.draw.text(f"Tijd: {tijd_over}", (10, 50), fontsize=40, color="blue") if game_over: screen.draw.text("Game Over", center=(WIDTH//2, HEIGHT//2), fontsize=60, color="red") def update(): global mouse_x, mouse_y, cheese_x, cheese_y, score if game_over: return if keyboard.left: mouse_x -= 5 if keyboard.right: mouse_x += 5 if keyboard.up: mouse_y -= 5 if keyboard.down: mouse_y += 5 mouse_rect = Rect((mouse_x, mouse_y), (64, 64)) cheese_rect = Rect((cheese_x, cheese_y), (64, 64)) if mouse_rect.colliderect(cheese_rect): cheese_x, cheese_y = nieuwe_kaas_plek() score += 1 def verlaag_tijd(): global tijd_over, game_over if tijd_over > 0: tijd_over -= 1 if tijd_over == 0: game_over = True clock.schedule_interval(verlaag_tijd, 1.0) #start programma pgzrun.go() ``` ### ℹ️ Uitleg - `tijd_over` begint op 30 (seconden) - `clock.schedule_interval(verlaag_tijd, 1.0)` zorgt ervoor dat elke seconde de functie `verlaag_tijd()` wordt aangeroepen - Als `tijd_over` op 0 staat, verandert `game_over` in `True` en stopt het spel - In de `draw()`-functie tonen we de resterende tijd en, als het spel voorbij is, de tekst “Game Over” ### 🛠️ Opdracht deel 1 - Laat het spel lopen en probeer zoveel mogelijk punten te halen binnen de tijd - Pas de tijd aan naar 10 of 60 seconden – wat vind je leuker? - Laat bij “Game Over” ook de eindscore groter in beeld zien. ### 🛠️Opdracht deel 2 (opnieuw uitvoeren) - Zorg ervoor dat de **muis niet uit het beeld** kan worden bewogen (zoals we bij opgave 2 hebben gedaan). - Zorg ervoor dat de muis **op de kaas** en niet onder de kaas verdwijnt. #### 💡 Extra uitdaging Voeg een herstart-mogelijkheid toe met de `R`-toets: ```python def on_key_down(key): global score, tijd_over, game_over, mouse_x, mouse_y, cheese_x, cheese_y if key == keys.R: score = 0 tijd_over = 30 game_over = False mouse_x, mouse_y = 150, 150 cheese_x, cheese_y = nieuwe_kaas_plek() ``` ### 📤 Inleveren 1. Maak een screenshot van het spel als de tijd op is en je “Game Over” ziet en zet een mooie score neer! 2. Bewaar je code als een bestand (in Thonny, file - save as...) en lever het .py bestand met de code in. ## 7 Eindopdracht ### 🎮 Eindopdracht Kies één (of meerdere) van de volgende uitbreidingen en voeg die toe aan je spel: - 🧀 Zet meerdere stukjes kaas tegelijk op het scherm (gebruik een `for`-loop) - 💣 Voeg een “giftige” kaas toe: als je die pakt, verlies je punten - 🔊 Voeg geluiden toe voor eten, botsing of game over - 🎨 Verander het uiterlijk van de muis of de achtergrond - 🕒 Laat het spel moeilijker worden naarmate de tijd verstrijkt (bijv. snellere muis of bewegende kaas) 💡 Bedenk zelf ook een uitbreiding? Schrijf het plan op, laat het goedkeuren door je docent en priobeer het te maken!Bij deze opgave mag je AI gebruiken!
### 📤 Inleveren Lever de volgende dingen in: 1. Een werkend Python-bestand (.py) waarin jouw uitbreiding is verwerkt 2. Een screenshot van je spel én; 3. Uitleg in tekst (.txt) wat je hebt gedaan. ## 8 Reflectie In deze les kijk je terug op wat je hebt gemaakt, én krijg je de kans om je spel op een leuke manier uit te breiden of aan te passen. ### 🧠 Reflectie Als je terugkijkt naar deze opgave. Vraag je zelf de volgende dingen af: - Wat vond je het leukste om te doen? - Wat vond je moeilijk of lastig om te begrijpen? - Welke onderdelen van Python begrijp je nu beter? - Waar ben je trots op. ### 📤 Inleveren 1. Lever je reflectie in met de antwoorden op de (reflectie) vragen in een PDF bestand.Let op: gebruik je eigen woorden en wees specifiek!
## ! Docentenhandleiding ### 📘 Overzicht - **Doelgroep:** Leerlingen van 12-15 jaar (instapniveau Python) - **Duur:** 6 lessen van ±45-60 minuten - **Software:** Thonny + Pygame Zero - **Spelconcept:** Een muis beweegt met de pijltjestoetsen en pakt steeds opnieuw verschijnende kaasjes ### 🎯 Leerdoelen - Begrijpen hoe coördinaten werken in een 2D-scherm - Gebruik van `draw()` en `update()` in een animatie - Werken met variabelen voor positie en beweging - Detecteren van botsingen met `Rect` en `colliderect()` - Gebruik van `random` en herhaalde logica - Score bijhouden en tonen - Reflecteren op eigen code en uitbreidingen bedenken ### 📚 Lesoverzicht| Les | Onderwerp | Nieuwe concepten |
|---|---|---|
| 1 | Muis en kaas tekenen | `draw()`, `screen.blit()`, coördinaten |
| 2 | Muis beweegt met toetsen | `keyboard.left`, `update()`, grenzen |
| 3 | Botsing detecteren | `Rect()`, `colliderect()` |
| 4 | Kaas verspringt op random plek | `random.randint()`, logica |
| 5 | Score bijhouden | `score += 1`, `screen.draw.text()` |
| 6 | Reflectie & uitbreiden | Reflecteren, creatief uitbreiden |
| Criterium | Omschrijving | Score (1-5) |
|---|---|---|
| Spel werkt | Muis beweegt, kaas wordt gepakt, score telt | 🟩 |
| Codekwaliteit | Variabelen zijn logisch, overzichtelijk | 🟩 |
| Creativiteit | Leerling heeft iets extra’s toegevoegd (geluid, extra levels, design) | 🟩 |
| Reflectie | Leerling beantwoordt de reflectievragen met inzicht | 🟩 |
**Wat is een lus in programmeren en waarom is het handig?**
Een lus (of "loop") is een blokje in Scratch dat zorgt dat een stukje code steeds opnieuw wordt uitgevoerd. Bijvoorbeeld: als je wilt dat een sprite (Giga) blijft bewegen zolang het spel bezig is, kun je een "herhaal" of "herhaal zolang" blok gebruiken. Dit is handig, omdat je dan niet elke stap apart hoeft te programmeren – het gebeurt automatisch steeds opnieuw.**Wat is een als-dan-anders blok (if-then-else)?**
Een als-dan-anders-blok in Scratch controleert of iets waar is. Als dat zo is, doet het programma het eerste stukje code. Anders doet het iets anders. Bijvoorbeeld: *als* de muis is ingedrukt, *dan* laat een sprite (Giga) iets zeggen, *anders* doet hij niets of zegt hij iets anders. Zo kan je programma reageren op wat er gebeurt.**Wat is een variabele en hoe kun je die gebruiken om de score bij te houden?**
Een variabele is een blokje waarmee je informatie kunt opslaan, zoals een getal dat kan veranderen. In een spel kun je een variabele maken die "score" heet. Aan het begin zet je die op 0. Elke keer dat Giga bijvoorbeeld een sleutel aanraakt, verhoog je de score met 1. Zo weet het spel hoeveel punten je hebt.**Wat is het verschil tussen gewoon “als…dan” en “als…dan…anders”?**
**“Als…dan”** voert alleen code uit *als* de voorwaarde waar is. Als het niet waar is, gebeurt er helemaal niks. **"Als…dan…anders”** voert óf de ene actie uit als de voorwaarde waar is, óf een andere actie als de voorwaarde niet waar is. Dus: - Met “als…dan” doe je iets óf niks. - Met “als…dan…anders” doe je altijd iets: óf de ene actie óf de andere.**Wat betekent het als een sprite op x: 0 en y: 0 staat?**
Dat betekent dat de sprite precies in het **midden van het speelveld** staat. In Scratch is (0, 0) het **middelpunt van het scherm**. - De x-coördinaat (horizontaal) is dan in het midden van links naar rechts. - De y-coördinaat (verticaal) is in het midden van boven naar beneden.**In welke richting beweegt een sprite als je de x-coördinaat groter maakt?**
Dan beweegt de sprite **naar rechts**. - Hoe groter de x-waarde, hoe verder naar rechts de sprite op het scherm staat. - Als je de x-coördinaat juist kleiner maakt, beweegt de sprite naar links.**Wat gebeurt er als je bij x een heel grote waarde gebruikt, zoals 5000?**
De sprite verdwijnt **buiten beeld**. - Het Scratch-scherm heeft grenzen: ongeveer van x = -240 (helemaal links) tot x = 240 (helemaal rechts). - Als je een waarde gebruikt zoals x = 5000, dan staat de sprite ver buiten het zichtbare scherm, dus je ziet hem niet meer.**Hoe kun je zorgen dat een sprite niet buiten het scherm beweegt?**
Gebruik een **“als…dan”**-blok om te controleren of x of y binnen een bepaalde grens. ``` als x-positie < 240 dan wijzig x met 10 ```**Waarom is inspringen (indentatie) belangrijk in Python, terwijl Scratch dat niet nodig heeft?**
Omdat Python aan de hand van inspringen (spaties) bepaalt welke code bij elkaar hoort. Als je dat niet goed doet, begrijpt Python niet wat je bedoelt, en krijg je een foutmelding. 📌 *Voorbeeld:* ``` if x > 10: print("x is groot") # ❌ fout: geen inspringing ``` ``` if x > 10: print("x is groot") # ✅ goed: ingesprongen ```**Leg uit wat een `#` in Python doet**
Een `#` wordt gebruikt om commentaar toe te voegen in je code. Alles wat na het `#` staat, wordt genegeerd door de computer. Het is alleen bedoeld voor de programmeur zelf, om uit te leggen wat de code doet. 📌 *Voorbeeld:* ``` # Dit is een commentaarregel x = 5 # We geven x de waarde 5 ```**Hoe ziet een if-then-else er uit in Python?**
In Python gebruik je `if`, `else` (en soms `elif`). De code die bij elke voorwaarde hoort moet ingesprongen staan. 📌 *Voorbeeld:* ``` if x > 10: print("x is groter dan 10") else: print("x is 10 of kleiner") ```**Wat doet een for-loop in Python?**
Een `for`-loop herhaalt een blokje code een vast aantal keren. 📌 *Voorbeeld:* ``` for i in range(5): print("Hallo") ```**Noem verschillen tussen Python en Scratch**
| Scratch | Python |
|---|---|
| Werkt met blokken die je sleept | Werkt met tekst die je zelf typt |
| Geen spaties of haakjes nodig | Spaties en dubbele punten zijn belangrijk |
| Visueel en kleurrijk | Tekstgebaseerd, je moet meer onthouden |
| Makkelijk te starten zonder fouten | Foutgevoelig bij typefouten of inspringen |
**Wat leert de student bij 'Pak de Kaas'?**
In dit Python/Pygame Zero-project leren studenten onder andere: - Sprites op het scherm tonen met `screen.blit()` - De muis laten bewegen via variabelen en `update()` - Botsingen detecteren tussen muis en kaas - Willekeurige verplaatsing van de kaas met `random` - Score bijhouden bij het verzamelen van kaas - Tijdslimiet instellen zodat het spel eindigt ("Game Over")**Hoe detecteer je dat de muis de kaas raakt?**
Gebruik een `if`-statement met `collide` of vergelijk coördinaten van de muis en kaas, bijvoorbeeld: ``` if mouse_x == cheese_x and mouse_y == cheese_y: score += 1 ```**Waarom gebruik je willekeurige getallen bij het verplaatsen van de kaas na botsing?**
Zodat de kaas steeds op een nieuwe plek verschijnt. Bijvoorbeeld met: ``` import random cheese_x = random.randint(0, WIDTH) cheese_y = random.randint(0, HEIGHT) ```**Wat doet `random.randint()` precies?**
De functie `random.randint(a, b)` geeft een willekeurig geheel getal terug tussen **a** en **b**, inclusief beide grenzen. 📌 *Voorbeeld:* ``` import random getal = random.randint(1, 10) print(getal) ``` Dit print een willekeurig getal tussen 1 e**Hoe detecteer je dat de muis de kaas raakt?**
Gebruik een `if`-statement met `collide` of vergelijk coördinaten van de muis en kaas, bijvoorbeeld: ``` if mouse_x == cheese_x and mouse_y == cheese_y: score += 1 ```**Waarom gebruik je willekeurige getallen bij het verplaatsen van de kaas na botsing?**
Zodat de kaas steeds op een nieuwe plek verschijnt. Bijvoorbeeld met: ``` import random cheese_x = random.randint(0, WIDTH) cheese_y = random.randint(0, HEIGHT) ```**Wat doet `random.randint()` precies?**
De functie `random.randint(a, b)` geeft een willekeurig geheel getal terug tussen **a** en **b**, inclusief beide grenzen. 📌 *Voorbeeld:* ```python import random getal = random.randint(1, 10) print(getal) ``` Dit print een willekeurig getal tussen 1 en 10, zoals 3 of 9. Handig voor bijvoorbeeld het willekeurig verplaatsen van een sprite in een spel.**Wat gebeurt er als je de muis buiten het scherm laat bewegen?**
Als je de variabelen `mouse_x` of `mouse_y` zo aanpast dat de sprite buiten het scherm komt, dan **verdwijnt de muis uit beeld**. - Het spel zelf blijft werken, maar de speler ziet de muis niet meer. - De sprite staat dan op een coördinaat die buiten het zichtbare venster valt (bijvoorbeeld x = -50 of y = 1000).**Hoe zorg je ervoor dat de muis niet buiten het spel beweegt? Gebruik je een loop of een if-then?**
Om te voorkomen dat de muis buiten het scherm beweegt, gebruik je een **`if`-statement**, geen `loop`. Daarmee controleer je of de muis nog binnen de grenzen is voordat je de positie verandert. 📌 *Voorbeeld:* ```python if mouse_x < WIDTH - 50: mouse_x += 5 if mouse_x > 0: mouse_x -= 5 ```Tip: bij welke `if` wordt gekeken of de speler tegen de linkerkant van het scherm aan zit?
#### 💡 Extra uitdaging - Laat de speler sneller bewegen als je de toets langer inhoudt - Laat de speler automatisch naar links of rechts bewegen als je een extra toets indrukt (bijvoorbeeld `A` of `D`) ### 📤 Inleveren 1. Leg in eigen woorden uit hoe de `player_speed` de snelheid van het spel veranderd. 2. Leg uit waarom de speler aan de linkerkant van het scherm 'stuitert' en wat heb je aangepast om dit te voorkomen? ## 3 Steen laten vallen In deze les gaan we de steen automatisch laten vallen. Zodra de steen de onderkant van het scherm bereikt, verschijnt hij opnieuw bovenaan op een willekeurige plek. ### Wat gaan we doen? We voegen een `rock_speed` toe en laten de `y`-positie van de steen langzaam toenemen in `update()`. We controleren of de steen het scherm uit valt, en zetten hem dan opnieuw bovenaan met een willekeurige x-positie. ### 🔰 Code ```python import pgzrun import random WIDTH = 800 HEIGHT = 600 player_x = 400 player_y = 550 player_width = 80 player_height = 20 player_speed = 5 rock_x = random.randint(0, WIDTH - 40) rock_y = 0 rock_size = 40 rock_speed = 3 def draw(): screen.clear() screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue") screen.draw.filled_rect(Rect((rock_x, rock_y), (rock_size, rock_size)), "gray") def update(): global player_x, rock_y, rock_x, rock_size if keyboard.left: player_x -= player_speed if keyboard.right: player_x += player_speed if player_x < 0: player_x = 0 if player_x > WIDTH - player_width: player_x = WIDTH - player_width # Steen laten vallen rock_y += rock_speed # Als de steen onderaan is, zet hem weer bovenaan met random x if rock_y > HEIGHT: rock_y = 0 rock_x = random.randint(0, WIDTH - rock_size) pgzrun.go() ``` ### ℹ️ Uitleg - `rock_speed`: bepaalt hoe snel de steen valt - `rock_y += rock_speed`: laat de steen naar beneden bewegen - `random.randint(...)`: zorgt voor een willekeurige x-positie als de steen opnieuw verschijnt ### 🛠️ Opdracht - Verander de `rock_speed` – wat gebeurt er? - Maak de steen groter of kleiner door `rock_size` aan te passen. - Zorg er nu voor dat elke keer als de steen opnieuw valt de rock\_size wordt aangepast en een random grootte krijgt. - Met random.randint(1, 10) wordt er een getal tussen 1 en 10 gegenereerd. Bedenk zelf mooie waarden en pas de code aan zodat de grootte van de steen telkens anders wordt. #### 💡 Extra uitdaging - Laat meerdere stenen tegelijk vallen - Laat elke steen een willekeurige snelheid hebben ### 📤 Inleveren 1. Leg uit hoe je ervoor hebt gezorgdt dat de steen telkens een ander grootte kijgt. ## 4 Botsing & Game Over In deze les gaan we controleren of de speler de steen raakt. Als er een botsing is, stopt het spel en verschijnt er de tekst “Game Over”. ### Wat gaan we doen? We maken een `Rect` van de speler en van de steen, en gebruiken `colliderect()` om te zien of ze elkaar raken. We gebruiken een variabele `game_over` om te stoppen met het spel als er een botsing is. ### 🔰 Code ```python import pgzrun import random from pygame import Rect WIDTH = 800 HEIGHT = 600 player_x = 400 player_y = 550 player_width = 80 player_height = 20 player_speed = 5 rock_x = random.randint(0, WIDTH - 40) rock_y = 0 rock_size = 40 rock_speed = 3 game_over = False def draw(): screen.clear() if game_over: screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red") return screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue") screen.draw.filled_rect(Rect((rock_x, rock_y), (rock_size, rock_size)), "gray") def update(): global player_x, rock_y, rock_x, game_over if game_over: return if keyboard.left: player_x -= player_speed if keyboard.right: player_x += player_speed if player_x < 0: player_x = 0 if player_x > WIDTH - player_width: player_x = WIDTH - player_width rock_y += rock_speed if rock_y > HEIGHT: rock_y = 0 rock_x = random.randint(0, WIDTH - rock_size) # Botsing detecteren speler_rect = Rect(player_x, player_y, player_width, player_height) steen_rect = Rect(rock_x, rock_y, rock_size, rock_size) if speler_rect.colliderect(steen_rect): game_over = True pgzrun.go() ``` ### ℹ️ Uitleg - `Rect(x, y, w, h)` maakt een rechthoek op de juiste plek - `colliderect()` kijkt of twee rechthoeken elkaar raken - `game_over` bepaalt of het spel nog doorgaat ### 🛠️ Opdracht - Laat de speler de steen raken en kijk of het spel stopt - Verplaats de speler naar de andere kant van het scherm – bots je dan nog? - Verander de “GAME OVER” tekst (bijvoorbeeld kleur of grootte) #### 💡 Extra uitdaging - Laat het spel herstarten als je op de `R`-toets drukt - Speel een geluid af bij de botsing (bijv. `sounds.hit.play()`) ### 📤 Inleveren 1. Leg eersts stap-voor-stap in he eigen woorden uit hoe er een botsing van de steen met de speler wordt gedetecteerd. 2. Leg daarna stap-voor-stap, in eigen woorden uit wat er allemaal gebeurt als de steen tegen de speler aan komt. Verwijs daarbij naar de code. ## 5 Meerdere stenen & moeilijker maken In deze les gaan we meerdere stenen tegelijk laten vallen. Bovendien maakt het spel zichzelf moeilijker naarmate je langer speelt: de stenen vallen sneller. ### Wat gaan we doen? We maken een lijst van stenen, elk met hun eigen positie en snelheid. We laten deze stenen vallen en bij een botsing stoppen we het spel. We laten het spel steeds moeilijker worden door de snelheid te verhogen na een paar seconden. ### 🔰 Code ```python import pgzrun import random from pygame import Rect WIDTH = 800 HEIGHT = 600 player_x = 400 player_y = 550 player_width = 80 player_height = 20 player_speed = 5 rocks = [] game_over = False rock_timer = 0 rock_interval = 60 # frames difficulty = 1.0 # Start met een paar stenen for _ in range(3): x = random.randint(0, WIDTH - 40) speed = random.uniform(2, 4) rocks.append({"x": x, "y": 0, "size": 40, "speed": speed}) def draw(): screen.clear() if game_over: screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red") return screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue") for rock in rocks: screen.draw.filled_rect(Rect((rock["x"], rock["y"]), (rock["size"], rock["size"])), "gray") def update(): global player_x, game_over, rock_timer, difficulty if game_over: return if keyboard.left: player_x -= player_speed if keyboard.right: player_x += player_speed player_x = max(0, min(WIDTH - player_width, player_x)) speler_rect = Rect(player_x, player_y, player_width, player_height) for rock in rocks: rock["y"] += rock["speed"] * difficulty if rock["y"] > HEIGHT: rock["y"] = 0 rock["x"] = random.randint(0, WIDTH - rock["size"]) rock["speed"] = random.uniform(2, 5) rock_rect = Rect(rock["x"], rock["y"], rock["size"], rock["size"]) if speler_rect.colliderect(rock_rect): game_over = True # Verhoog de moeilijkheid langzaam rock_timer += 1 if rock_timer % 300 == 0: difficulty += 0.2 pgzrun.go() ``` ### ℹ️ Uitleg - Elke steen is een dict met `x`, `y`, `size` en `speed` - We gebruiken een `for`-loop om alle stenen te laten vallen - Met `difficulty` verhogen we langzaam de snelheid van de stenen ### 🛠️ Opdracht - Test het spel en kijk of het spel moeilijker wordt na ongeveer 15 seconden! - Nu gaan we de grootte van de stenen weer aanpassen naar een random waarde zoals we dat bij de vorige opdracht ook hebben gedaan. **Zorg er dus voor dat bij het aanmaken van de stenen iedere steen een andere (random) grootte krijgt.** Dat gaat iets anders omdat we nu meerdere 'rocks' hebben. In de` for rock in rocks:` loop worden één voor één alle blokken behandeld. De grootte van de rock staat in `rock["size"]`Tip: weet je nog dat je met `random.randint(1,4)` een getal tussen 1 en 4 kan genereren?
#### 💡 Extra uitdaging - Laat het aantal stenen toenemen naarmate het spel langer duurt - Laat een andere kleur steen verschijnen bij hogere moeilijkheid. - Laat elke steen een ander formaat hebben - Toon je “score” op het scherm: hoe lang heb je overleefd? ### 📤 Inleveren 1. Lever je code (.py bestand) in. \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ## 6 Score, Reflectie & Uitbreiding In deze les voeg je een score toe die laat zien hoelang je het hebt volgehouden. Daarnaast kijk je terug op je eigen werk én kies je een uitbreiding om het spel leuker of moeilijker te maken. ### Wat gaan we doen? - We voegen een `score` toe die telt hoeveel frames je overleeft - We tonen deze score linksboven op het scherm - Bij Game Over laten we je eindscore zien ### 🔰 Toevoegingen aan bestaande code ```python score = 0 # bij de andere variabelen def draw(): screen.clear() if game_over: screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red") screen.draw.text(f"Score: {score}", center=(WIDTH // 2, HEIGHT // 2 + 50), fontsize=40, color="black") return ... screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color="black") def update(): global score if game_over: return ... score += 1 ``` ### ℹ️ Uitleg - `score` wordt bij elke frame 1 hoger → hoe langer je speelt, hoe hoger je score - `screen.draw.text()` toont je score tijdens én na het spel ### 🧠 Reflectie Beantwoord de volgende vragen onderaan je code als commentaar of in een apart document: - Wat vond je het leukst om te maken in dit spel? - Wat vond je moeilijk, en hoe heb je dat opgelost? - Wat heb je geleerd over Python en programmeren? - Waar ben je trots op? ### 🎮 Uitbreiding (kies er één) - 💥 Laat een explosie zien of geluid horen bij Game Over - 🧱 Voeg bewegende obstakels toe - 🏆 Houd een highscore bij (hoogste score van de sessie) - 🚀 Geef de speler power-ups: tijdelijk onsterfelijk, versnellen, etc. - 🎨 Verander het uiterlijk van de speler of achtergrond na elke 30 seconden #### 💡 Eigen idee? Bedenk zelf een uitbreiding en probeer deze te maken. Schrijf kort op wat jouw idee is en hoe je het hebt aangepakt. ### 📤 Inleveren - Lever je eindversie van het spel in (inclusief score en uitbreiding) - Voeg een korte beschrijving toe van wat je hebt toegevoegd of aangepast - Lever ook je reflectie in (de 4 vragen) - Optioneel: voeg een screenshot of kort filmpje toe van je spel ## 🧠 Reflectieopdracht Deze reflectieopdracht helpt je om stil te staan bij wat je hebt geleerd tijdens het programmeren van je spel. Beantwoord de onderstaande vragen eerlijk en in je eigen woorden. Je mag je antwoorden inleveren via een apart document of onderaan je Python-bestand als commentaar zetten. ### 📋 Vragen - 🔹 Wat vond je het leukste om te maken of uit te proberen? - 🔹 Wat vond je lastig? Hoe heb je dat opgelost? - 🔹 Wat heb je geleerd over Python (of programmeren in het algemeen)? - 🔹 Waar ben je trots op in jouw eindresultaat? - 🔹 Wat zou je de volgende keer anders willen doen of verbeteren? ### 📤 Inleveren Lever je reflectie in bij je docent via de afgesproken manier (document, upload of als commentaar in je code). ## \### ## \# Docenten ## 🎓 Docentenhandleiding ### 📘 Overzicht - **Doelgroep:** Leerlingen met basiskennis Python (13-16 jaar) - **Duur:** 6 lessen van ±45-60 minuten - **Software:** Thonny + Pygame Zero - **Spelconcept:** De speler ontwijkt vallende objecten (stenen) en het spel wordt steeds moeilijker ### 🎯 Leerdoelen - Werken met coördinaten en schermlogica - Gebruik van `draw()` en `update()` - Toetsenbordbesturing met `keyboard.left` en `keyboard.right` - Beweging simuleren met variabelen - Objecten detecteren met `Rect` en `colliderect()` - Werken met lijsten voor meerdere objecten - Reflecteren op het leerproces en zelf uitbreidingen bedenken ### 📚 Lesoverzicht| Les | Onderwerp | Nieuwe concepten |
|---|---|---|
| 1 | Speler en steen tekenen | `draw()`, rechthoek tekenen, coördinaten |
| 2 | Speler beweegt | `update()`, keyboard input, begrenzen |
| 3 | Steen valt en komt terug | Beweging, `random`, logica |
| 4 | Botsing + Game Over | `Rect`, `colliderect()`, boolean vlag |
| 5 | Meerdere stenen + moeilijkheid | Lijsten, `for`-loops, moeilijkheidsschaal |
| 6 | Score, Reflectie & Uitbreiding | Scorevariabele, `draw.text()`, vrije opdracht |
| Criterium | Omschrijving | Score (1-5) |
|---|---|---|
| Werkt het spel | Geen fouten, spel werkt zoals bedoeld | 🟩 |
| Code is leesbaar | Logische structuur, goede naamgeving | 🟩 |
| Uitbreiding toegevoegd | Creatieve of technische aanvulling | 🟩 |
| Reflectie | Antwoorden zijn volledig en met inzicht | 🟩 |
Tip: Kopieer je vorige project en noem het anders.
##### *Voorbeeld*  ## 1 Teken de slangkop In deze les gaan we beginnen met het maken van een eigen versie van Snake in Python met Pygame Zero. We gaan eerst de kop van de slang tekenen op het scherm. Je ziet dan een vierkantje dat straks kan gaan bewegen. ### Wat gaan we doen? We maken een slangkop als vierkant met een bepaalde positie en grootte, en tekenen die in de `draw()`-functie. ### 📦 Benodigdheden - Een werkende Python-omgeving met Pygame Zero (zoals Thonny) - Geen plaatjes nodig – we tekenen de slang met blokken ### 🔰 Startercode ```python # importeer library import pgzrun # Spelgrootte WIDTH = 600 HEIGHT = 400 # Startpositie van de slangkop snake_x = 100 snake_y = 100 tile_size = 20 def draw(): screen.clear() screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green") #start programma pgzrun.go() ``` ### ℹ️ Uitleg - `WIDTH` en `HEIGHT`: grootte van het spelvenster - `snake_x` en `snake_y`: positie van de slangkop - `tile_size`: grootte van het blokje - `screen.draw.filled_rect(...)`: tekent een gevuld vierkantje op het scherm ### 🛠️ Opdracht - Pas de waarde van `snake_x` en `snake_y` aan – wat gebeurt er? - Maak het vierkant groter of kleiner door `tile_size` te wijzigen - Verander de kleur van het vierkant in bijvoorbeeld `"blue"` of `"orange"` #### 💡 Extra uitdaging Teken een tweede blokje naast de slangkop alsof er al een stukje staart is. Gebruik nog een `screen.draw.filled_rect()`. ### 📤 Inleveren 1. Maak een screenshot van je 'slangkop' op het scherm (dus geen code) waarbij je de 'slangkop'duidelijke op een andere positie hebt gezet (bijvoorbeeld rechtsonder in het schrem, of in het midden). ## 2 Beweeg de slang In deze les gaan we de slangkop laten bewegen met de pijltjestoets die je indrukt. We gebruiken daarvoor de `update()`-functie van Pygame Zero en de toetsenbordinput. ### Wat gaan we doen? We maken een richting-variabele en passen de positie van de slang aan op basis van de pijltjes die je indrukt. ### 🔰 Code Dit is een **deel van de code**, je moet jouw bestaande code aanpassen aan de hand van deze nieuwe code. Je hoeft dus niet alles opnieuw te typen. Plaats de `update()` functie en pas eventueel `snake_x`, `snake_y`, `tile_size` en `step` aan in jouw bestaande code. ```python # Startpositie van de slangkop snake_x = 200 snake_y = 200 tile_size = 10 step = 1 def draw(): screen.clear() screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green") def update(): global snake_x, snake_y if keyboard.left: snake_x -= step if keyboard.right: snake_x += step if keyboard.up: snake_y -= step if keyboard.down: snake_y += step ``` ### ℹ️ Uitleg - `update()` wordt automatisch meerdere keren per seconde uitgevoerd - `keyboard.left` controleert of de linkerpijl is ingedrukt - Telkens als je een toets indrukt, verandert de positie van de slang - `step` bepaalt hoe ver de slang per stap beweegt ### 🛠️ Opdracht - Beweeg de slang door het scherm met de pijltjes - Pas `step` aan naar een andere waarde – wat merk je? - Laat de slang sneller of langzamer bewegen door minder of meer pixels per keer te verplaatsen #### 💡 Extra uitdaging Laat de slang automatisch blijven bewegen in de laatst gekozen richting: - Gebruik een variabele `richting` die je bijwerkt met `on_key_down()` - Laat de slang dan elke update in die richting verder bewegen ### 📤 Inleveren 1. Leg uit wat de variable step doet. 2. Welke waarde heb je gekozen, waarom? (je kunt dit inleveren in het tekst veld of in een .txt. bestandje) ## 3 Automatische beweging In deze les gaan we de slang automatisch laten blijven bewegen in de richting van de laatste pijltjestoets die je hebt ingedrukt. ### 🔍 Wat gaan we doen? - We maken een nieuwe variabele `richting`. - Als je op een pijltjestoets drukt, verandert de waarde van `richting`. - In de `update()` functie verplaatst de slang zich elke keer opnieuw in de gekozen richting – ook als je de toets niet ingedrukt houdt! ### 🔰 Code Gebruik deze versie als nieuwe code (je mag dit toevoegen aan of combineren met je bestaande code): ```python import pgzrun WIDTH = 600 HEIGHT = 400 snake_x = 200 snake_y = 200 tile_size = 20 step = 10 richting = "right" def draw(): screen.clear() screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green") def update(): global snake_x, snake_y, richting if richting == "left": snake_x -= step elif richting == "right": snake_x += step elif richting == "up": snake_y -= step elif richting == "down": snake_y += step def on_key_down(key): global richting if key == keys.LEFT: richting = "left" elif key == keys.RIGHT: richting = "right" elif key == keys.UP: richting = "up" elif key == keys.DOWN: richting = "down" pgzrun.go() ``` ### ℹ️ Uitleg - `richting`: deze variabele onthoudt de laatst gekozen richting - `on_key_down()`: dit is een functie die wordt uitgevoerd als je op een toets drukt - `update()`: deze functie verplaatst de slang elke keer in de gekozen richting, ook als je geen toets indrukt ### 🛠️ Opdracht - Test of je slang automatisch blijft bewegen nadat je een pijl indrukt - Wat gebeurt er als je twee keer snel op een andere richting drukt? - Probeer met `tile_size` en `step` te spelen voor een ander effect #### 💡 Extra uitdaging Voeg grenzen toe aan je spel: laat de slang stoppen of ergens anders naartoe gaan als hij de rand van het scherm raakt. ### 📤 Inleveren 1. Leg in je eigen woorden uit wat de functie `on_key_down()` doet (Lever dit in via het tekstvak of via een upload.) ## 4 Randbotsing en automatische richting In deze les zorgen we ervoor dat de slang niet zomaar het scherm verlaat. Zodra hij een rand raakt, verandert hij automatisch van richting. Zo beweegt hij steeds binnen het scherm! ### 🔍 Wat gaan we doen? - We controleren of de slang de rand van het scherm raakt. - Als dat zo is, passen we automatisch de richting aan. ### 🔰 Code (let op: onvolledig!) Hieronder zie je de code. De code is onvolledig en moet worden aangepast.Hint: kijk naar de ... (drie puntjes)
```python import pgzrun WIDTH = 600 HEIGHT = 400 snake_x = 200 snake_y = 200 tile_size = 20 step = 5 richting = "right" def draw(): screen.clear() screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green") def update(): global snake_x, snake_y, richting if richting == "left": snake_x -= step elif richting == "right": snake_x += step elif richting == "...": snake_y -= step elif richting == "...": snake_y += step # 🧠 Hier controleren we of de slang de rand raakt if snake_x < 0: richting = "right" elif snake_x + tile_size > WIDTH: richting = "left" elif snake_y < 0: richting = "..." elif snake_y + tile_size > HEIGHT: richting = "..." def on_key_down(key): global richting if key == keys.LEFT: richting = "left" elif key == keys.RIGHT: richting = "right" elif key == keys.UP: richting = "up" elif key == keys.DOWN: richting = "down" pgzrun.go() ``` Als je de linker- of rechterkant raakt, dan 'stuitert' je terug. Dat gebeurt niet als je de boven- of onderkant aanraakt. Pas de code aan zodat je ook naar boven en beneden kan bewegen en zodat je ook terugstuiters als je de onder-of bovenkant aanraakt. ### ℹ️ Uitleg - `snake_x + tile_size > WIDTH`: betekent dat de slang voorbij de rechterrand gaat - Als de slang een rand raakt, verander je de variabele `richting` ### 🛠️ Opdracht - Pas de code aan zodat de slang alle richtingen uit kan bewegen en zodat hij als hij de rand raakt (link, recht en boven en beneden) terug 'stuiterd'. - Test of de slang de alle richtingen op gaat en hij aan alle kantne goed terug 'stuiterd'! #### 💡 Extra uitdaging Laat de slang bij elke randbotsing van kleur veranderen! (Tip: maak een variabele `kleur` en gebruik bijvoorbeeld `random.choice()`) ### 📤 Inleveren 1. Leg in **eigen woorden** uit **wat** je hebt aangepast op regel 35 en 36 en **hoe dat werkt.** Vind je dit lastig? Dan *kun* je de deze template gebruiken: ``` Ik heb op regel 35 .... aangepast en ik heb op regel 36 .... aangepast. Wat er dan gebeurt is dat als de Snake ......... en de toets ..... wordt ingedrukt dan verandert de .......... van .......... naar ............ ``` (Lever dit in via het tekstvak of via een upload.) ## 5 Geen omkeren toegestaan In deze les zorgen we ervoor dat de slang niet meteen omkeert. In een echte Snake-game kun je namelijk niet ineens van rechts naar links bewegen – dan zou de slang zichzelf opeten! ### 🔍 Wat gaan we doen? - We voorkomen dat de slang direct de tegenovergestelde richting kiest. - We vergelijken de huidige richting met de nieuwe richting voordat we die veranderen. ### 🔰 Code (let op: onvolledig!) De volgende code voorkomt omkeren, maar jij moet één voorwaarde nog zelf aanvullen. ```python import pgzrun WIDTH = 600 HEIGHT = 400 snake_x = 200 snake_y = 200 tile_size = 20 step = 1 richting = "right" def draw(): screen.clear() screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green") def update(): global snake_x, snake_y, richting if richting == "left": snake_x -= step elif richting == "right": snake_x += step elif richting == "up": snake_y -= step elif richting == "down": snake_y += step def on_key_down(key): global richting if key == keys.LEFT and richting != "right": richting = "left" elif key == keys.RIGHT and richting != "left": richting = "right" elif key == keys.UP and richting != "down": richting = "up" elif key == keys.DOWN and richting != "...": richting = "down" pgzrun.go() ``` ### Stuiteren tegen randen werkt niet meer Het botsen tegen de randen wat in stap 4 is gedaan, zit niet in deze code. Dat is express gedaan. We proberen op deze manier een ding gelijktijdig uit te leggen en het voorkomt dat je op dit moment "*door de bomen het bos niet meer ziet*". ### ℹ️ Uitleg - We gebruiken een `if`-voorwaarde om te voorkomen dat je teruggaat in de tegenovergestelde richting. - De ontbrekende regel is die voor `keys.DOWN`: welke richting is dan niet toegestaan? ### 🛠️ Opdracht - Vul de ontbrekende voorwaarde aan zodat de slang niet van "up" naar "down" mag keren - Test alle richtingen: kun je nog steeds normaal draaien? Keren lukt niet meer, toch? #### 💡 Extra uitdaging Laat de slang een geluidje maken als je op een toets drukt, maar de richting wordt niet veranderd (bijv. als je wél op links drukt, maar dat mag niet). Met deze code kan je ene geluidje afspelen. ``` sounds.beep.play() ``` Om een sound af te kunnen spelen moet jouw project folder een mapje maken sounds en daarin moet een beep.wav komen. ``` mijn_project/ ├── main.py └── sounds/ └── beep.wav ``` ##### Geluidjes toevoegen Je kunt zelf geluidjes toevoegen, stel je hebt een geluidje **bel.wav** dan plaats je dat in de sounds directory en dan gebruik je het commando `souds.bel.play()` ### 📤 Inleveren 1. Leg uit **wat** je hebt veranderd en **hoe** het werkt (dit zijn dus twee vragen: **wat** en **hoe**). Vind je dit lastig? Dan *kun* je de deze template gebruiken: ``` Ik heb op regel ... ....... aangepast. Wat er dan gebeurt is dat als de Snake ......... en de toets ..... wordt ingedrukt dan ........ ``` (Lever dit in via het tekstvak of via een upload.) ## 6 Appel tekenen en raken In deze les voegen we een appel toe aan het spel. De appel verschijnt op een willekeurige plek op het scherm. Als de slang de appel raakt, verschijnt er een bericht in de console. ### 🔍 Wat gaan we doen? - We gebruiken de `random`-module om een appel op een willekeurige positie te tekenen. - We tekenen de 'appel' met een geel cirkeltje of vierkantje. - We detecteren of de slang de appel raakt. ### 📦 Benodigdheden - Je slangkop beweegt al automatisch over het scherm - Je hebt al gewerkt met `tile_size` en `snake_x`/`snake_y` ### 🔰 Code (let op: onvolledig!) Onderstaande code tekent een slangkop en een appel. De botsing werkt al, maar na een botsing blijft de appel op dezelfde plek staan. Vul zelf aan wat er moet gebeuren! ```python import pgzrun import random WIDTH = 600 HEIGHT = 400 tile_size = 20 snake_x = 100 snake_y = 100 richting = "right" step = 3 # Appelpositie (willekeurig op het grid) apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size def draw(): screen.clear() screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green") screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow") def on_key_down(key): global richting if key == keys.LEFT and richting != "right": richting = "left" elif key == keys.RIGHT and richting != "left": richting = "right" elif key == keys.UP and richting != "down": richting = "up" elif key == keys.DOWN and richting != "up": richting = "down" def update(): global snake_x, snake_y, apple_x, apple_y, richting if richting == "left": snake_x -= step elif richting == "right": snake_x += step elif richting == "up": snake_y -= step elif richting == "down": snake_y += step # Botst de slang met de appel? snake_rect = Rect((snake_x, snake_y), (tile_size, tile_size)) apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size)) if snake_rect.colliderect(apple_rect): print("🍏 Appel geraakt!") # 👇 VUL HIER AAN: genereer een nieuwe positie voor de appel # apple_x = ... # apple_y = ... pgzrun.go() ``` ### ℹ️ Uitleg - `random.randint()`: geeft een willekeurig geheel getal terug - De appelpositie wordt op het grid berekend, zodat deze altijd netjes uitlijnt - `filled_circle()`: tekent een geel rondje (je kunt ook `filled_rect()` gebruiken) ### 🛠️ Opdracht - Test of de appel op het scherm verschijnt - Beweeg de slang naar de appel – zie je de console-uitvoer? - Vul de ontbrekende regels in zodat de appel na een botsing op een **nieuwe plek** verschijnt #### 💡 Extra uitdaging Laat de appel niet precies op dezelfde plek als de slang verschijnen wanneer hij opnieuw wordt gegenereerd! ### 📤 Inleveren 1. Lever de code in .py bestand. ## 7 De slang groeit In deze les maak je van je slang een échte slang: eentje die uit meerdere blokjes bestaat en langer wordt als hij een appel eet. ### 🔍 Wat gaan we doen? - We veranderen de slang van één blokje naar een lijst van blokjes - De slang groeit bij het eten van een appel - We houden de lengte gelijk als er geen appel wordt gegeten ### 📘 Strategie De code wordt nu iets ingewikkelder. Het is niet erg als je niet alles direct begrijpt. Probeer wel te volgen wat er gebeurt. We bespreken de strategie: 1. De slang bestaat uit meerdere delen. De code in de `draw()`-functie tekent elk stukje. 2. Bij elke update wordt er een nieuw blokje toegevoegd aan de kop van de slang. 3. Als de slang een appel raakt: dan blijft de slang langer. 4. Als er geen appel is geraakt: dan wordt het laatste stukje van de slang verwijderd. Dus in het kort: 1. Teken de slang 2. Voeg een stukje toe aan de kop 3. Geen appel? Verwijder de staart ### 🔰 Code ```python import pgzrun import random WIDTH = 600 HEIGHT = 400 tile_size = 20 snake = [(100, 100)] richting = "right" step = 3 apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size def draw(): screen.clear() for segment in snake: screen.draw.filled_rect(Rect(segment, (tile_size, tile_size)), "green") screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow") def on_key_down(key): global richting if key == keys.LEFT and richting != "right": richting = "left" elif key == keys.RIGHT and richting != "left": richting = "right" elif key == keys.UP and richting != "down": richting = "up" elif key == keys.DOWN and richting != "up": richting = "down" def update(): global apple_x, apple_y, richting head_x, head_y = snake[0] if richting == "left": head_x -= step elif richting == "right": head_x += step elif richting == "up": head_y -= step elif richting == "down": head_y += step new_head = (head_x, head_y) snake.insert(0, new_head) head_rect = Rect(new_head, (tile_size, tile_size)) apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size)) if head_rect.colliderect(apple_rect): print("🍏 Appel geraakt!") apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size else: snake.pop() # staart verwijderen if new_head in snake[1:]: # Deze code detecteerd of de slang zichzelf raakt. print("🚫 Game over! De slang raakte zichzelf.") exit() pgzrun.go() ``` ### ℹ️ Uitleg - `snake = [(x, y), ...]`: lijst van alle slangsegmenten - `insert(0, new_head)`: voegt een nieuw blokje toe aan de voorkant - `pop()`: verwijdert het laatste stukje (staart) - `if new_head in snake[1:]`: controle of slang zichzelf raakt ``` Voorbeeld bij beweging: Stap 1: slang = [(4,2), (3,2), (2,2)] Stap 2: kop wordt (5,2) → slang = [(5,2), (4,2), (3,2)] Stap 3: geen appel → staart eraf → slang = [(5,2), (4,2)] ``` #### 📚 Waarom werkt dit zo? Door altijd eerst een kop toe te voegen, beweegt de slang vooruit. Als er geen appel is geraakt, halen we de staart weg zodat de lengte gelijk blijft. Wordt er wél een appel geraakt, dan blijft de slang langer: we doen dan geen `pop()`. Dit is hoe de slang groeit! ### 🛠️ Opdracht - Controleer of de slang groeit als hij een appel eet - Controleer of hij even lang blijft als er geen appel wordt geraakt ### 📄 Inleveren 1. Beantwoord de vraag: **Wat gebeurt er als je `snake.pop()` vergeet?** (Lever dit in via het tekstvak of als bestand.) ## 8 De slang sneller maken met vertraging In deze les leer je hoe je de slang sneller kunt laten groeien door de `step` te vergroten, zonder dat het spel te snel en onspeelbaar wordt. ### 🔍 Wat is het probleem? Je denkt misschien: "Ik wil dat de slang sneller beweegt, dus ik maak `step` groter." Maar als je `step = 20` doet, wordt het spel ineens **veel te snel**. Dat komt omdat `update()` standaard 60 keer per seconde wordt uitgevoerd. Dus je slang maakt dan 60 sprongen van 20 pixels per seconde: dat is 1200 pixels! ### ❌ Fout idee ```python step = 20 # grotere stap # maar het spel gaat nu te snel! ``` ### ✅ Goede oplossing: beweging vertragen We laten de slang **niet elke update** bewegen, maar bijvoorbeeld 1x per 10 frames. Zo kun je `step` groter maken, zonder dat het spel onbestuurbaar wordt. ### 🔰 Code ```python import pgzrun import random WIDTH = 600 HEIGHT = 400 tile_size = 20 step = 20 vertraging = 10 # aantal frames wachten frames = 0 snake = [(100, 100)] richting = "right" apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size def draw(): screen.clear() for segment in snake: screen.draw.filled_rect(Rect(segment, (tile_size, tile_size)), "green") screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow") def on_key_down(key): global richting if key == keys.LEFT and richting != "right": richting = "left" elif key == keys.RIGHT and richting != "left": richting = "right" elif key == keys.UP and richting != "down": richting = "up" elif key == keys.DOWN and richting != "up": richting = "down" def update(): global frames frames += 1 if frames < vertraging: return frames = 0 beweeg_slang() def beweeg_slang(): global apple_x, apple_y, richting head_x, head_y = snake[0] if richting == "left": head_x -= step elif richting == "right": head_x += step elif richting == "up": head_y -= step elif richting == "down": head_y += step new_head = (head_x, head_y) snake.insert(0, new_head) head_rect = Rect(new_head, (tile_size, tile_size)) apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size)) if head_rect.colliderect(apple_rect): print("\U0001F34F Appel geraakt!") apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size else: snake.pop() if new_head in snake[1:]: print("\u274C Game over! De slang raakte zichzelf.") exit() pgzrun.go() ``` ### 🧠 Waarom werkt dit? - `frames += 1`: telt hoe vaak `update()` al is uitgevoerd - Pas als `frames >= vertraging`, beweegt de slang echt - `step` bepaalt nu de grootte van de stap, niet de snelheid van het spel ### 🚀 Opdracht - Stel `step = 20` in en test of de slang nu sneller groeit - Experimenteer met `vertraging = 5` of `vertraging = 15` - Wat is een fijne balans tussen stapgrootte en snelheid? - Test het spel; wat gebeurt er precies als de slang tegen zijn eigen staart botst? #### 🔎 Extra uitdaging Laat de slang naarmate hij langer wordt automatisch steeds iets sneller bewegen (tip: verlaag `vertraging` bij elke appel). ### 📄 Inleveren 1. Leg uitwat er gebeurt als de slang tegen zijn staart aankomt. 2. Probeer te vertellen wat je zou willen veranderen; wat moet er gebeuren als de slang tegen zijn slang aan botst? (Lever dit in via het tekstvak of als bestand.) ## 9 Score bijhouden en Game Over tonen In deze les voegen we een score toe aan het spel. Elke keer als je een appel eet, krijg je 1 punt. En als de slang zichzelf raakt, laten we **"Game Over"** op het scherm zien en stopt het spel. ### 🔍 Wat gaan we doen? - Een variabele `score` bijhouden - De score op het scherm tonen met `screen.draw.text()` - Bij een botsing met jezelf: `game_over = True` - Het spel stoppen en "Game Over" tonen ### 🔰 Startercode ```python import pgzrun import random WIDTH = 600 HEIGHT = 400 tile_size = 20 step = 20 vertraging = 10 frames = 0 snake = [(100, 100)] richting = "right" score = 0 apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size game_over = False def draw(): screen.clear() if game_over: screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red") screen.draw.text(f"Score: {score}", center=(WIDTH // 2, HEIGHT // 2 + 50), fontsize=40, color="white") else: for segment in snake: screen.draw.filled_rect(Rect(segment, (tile_size, tile_size)), "green") screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow") screen.draw.text(f"Score: {score}", topleft=(10, 10), fontsize=30, color="white") def on_key_down(key): global richting if key == keys.LEFT and richting != "right": richting = "left" elif key == keys.RIGHT and richting != "left": richting = "right" elif key == keys.UP and richting != "down": richting = "up" elif key == keys.DOWN and richting != "up": richting = "down" def update(): global frames if game_over: return frames += 1 if frames < vertraging: return frames = 0 beweeg_slang() def beweeg_slang(): global apple_x, apple_y, score, game_over, richting head_x, head_y = snake[0] if richting == "left": head_x -= step elif richting == "right": head_x += step elif richting == "up": head_y -= step elif richting == "down": head_y += step new_head = (head_x, head_y) if new_head in snake[1:]: print("❌ Game over! De slang raakte zichzelf.") game_over = True return snake.insert(0, new_head) head_rect = Rect(new_head, (tile_size, tile_size)) apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size)) if head_rect.colliderect(apple_rect): print("\U0001F34F Appel geraakt!") score += 1 apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size else: snake.pop() pgzrun.go() ``` ### 🧠 Waarom werkt dit? - We tekenen de score linksboven tijdens het spel - We zetten `game_over = True` bij een zelfbotsing - Als `game_over` waar is, stoppen we de beweging en tonen een ander scherm ### 🚀 Opdracht - Laat de slang een paar appels eten en kijk of de score klopt - Laat de slang zichzelf raken en controleer of "Game Over" verschijnt #### 🔎 Extra uitdaging - Laat de score ook in de console printen bij elke appel - Laat het spel automatisch herstarten na een paar seconden (of met een toets) ### 📄 Inleveren 1. Beantwoord: **Hoe weet de code dat het "Game Over" is en wat gebeurt er dan precies?** Leg stap-voor-stap uit wat er gebeurt. Kijk goed naar de code! (Lever dit in via het tekstvak of als bestand.) ## 10 Snake – Eindopdracht ### 🌯️ Houd de slang binnen het scherm Op dit moment kan de slang zomaar van het scherm verdwijnen als je te ver naar links, rechts, boven of onder beweegt. Bedenk zelf hoe je dat kunt oplossen! **Tip:** je kunt controleren of de kop van de slang buiten het scherm terechtkomt. Bijvoorbeeld: ```python if head_x < 0 or head_x >= WIDTH or head_y < 0 or head_y >= HEIGHT: game_over = True ``` Op deze manier ben je 'af' als je het scherm raakt. Je zou ook van richting kunnen veranderen, maar dit is wat lastiger om uit te voeren. ### 🛠️ Opdracht Zorg ervoor dat de slang niet buiten het beeld kan verdwijnen. Je kunt het natuurlijk zo maken dat als je de rand raakt, het spel klaar is ("Game over"). Een ander optie is om van richting te veranderen. Dat is lastiger, weet je waarom? Hoe zou je het op een goede manier kunnen uitvoeren? ### 📄 Inleveren 1. Leg uit waarom het lastig is om de slang van richting te laten veranderen als die de rand van het scherm raakt. Je hoeft het niet te coderen, maar leg uit hoe je de slang precies van richting zou kunnen laten veranderen als die de rand raakt. En werkt dit ook in de hoeken? *Probeer te omschrijven hoe het zou kunnen werken. maak als het ware een **AI prompt** (een AI opdracht) om de code op een bepaalde manier aan te passen. Beschrijf **precies** wat er moet gebeuren!* #### 🔎 Extra uitdaging Als je goed hebt beschreven wat er precies moet gebeuren en je hebt ook rekening gehouden met de hoeken dan kun je misschien AI vragen jouw te helpen om dit echt te bouwen? Probeer maar ! Als het lukt, wordt het spel leuker om te spelen! \-- # Introductie AI ## 1, wat is AI? [datasource](https://www.roc.ovh/books/software-development-2025/page/introductie-ai) ### 🔰Introductie In deze les leren we wat AI is en we gaan kijken naar het verschil van programmeren met en zonder AI. We kijken naar de kracht van AI maar ook naar de tekortkomingen. ### 🎯 Leerdoelen Aan het einde van deze les: - Kun je uitleggen wat Artificial Intelligence (AI) is. - Kun je voorbeelden geven van toepassingen van AI in het dagelijks leven en in softwareontwikkeling. - Kun je het verschil benoemen tussen klassieke ('gewone') code en code gemaalkt door AI. - Kun je minimaal drie voordelen van het gebruik van AI benoemen. - Kun je minimaal drie nadelen of risico’s van AI toelichten. - Kun je uitleggen hoe je AI slim en verantwoord kunt inzetten bij schoolopdrachten of programmeertaken. - Heb je een eerste indruk gekregen van wat prompt engineering is en waarom het belangrijk is bij het gebruiken van AI. #### Bekijk deze video: [https://www.youtube.com/watch?v=QJE\_ycgR8E8](https://www.youtube.com/watch?v=QJE_ycgR8E8) ### 🛠️Opdracht 1 Vat in één tot drie zinnen samen wat de kernboodschap van dit filmpje is. ### 📤Inleveren 1. Maak de samenvatting in van het filmpje in een text document en vul deze in. Lever een **TXT** document in. ## 2, AI toepassingen AI is veel meer dan alleen ChatGPT. In deze video wordt uitgelegd waarvoor AI kan worden gebruikt. Bekijk deze video: [https://www.youtube.com/watch?v=stw2upLHCuI](https://www.youtube.com/watch?v=stw2upLHCuI) ### 💡Theorie AI-toepassingen per taaktype Hieronder staan concrete voorbeelden van hoe kunstmatige intelligentie (AI) wordt toegepast in verschillende soorten taken**✦ 1. Classificatie**
- **Wat is het?**: Het toewijzen van gegevens aan een bepaalde categorie.
- **Voorbeeld**: Een e-mailsysteem dat automatisch bepaalt of een e-mail *spam* is of *geen spam*, op basis van de inhoud, afzender en gebruikte woorden.
**✦ 2. Associatie**
- **Wat is het?**: Het ontdekken van patronen of combinaties van items die vaak samen voorkomen.
- **Voorbeeld**: Een webshop gebruikt AI om te ontdekken dat klanten die een *laptop* kopen ook vaak een *laptophoes* kopen. Op basis daarvan worden aanbevelingen gedaan: "Andere klanten kochten ook...".
**✦ 3. Optimalisatie**
- **Wat is het?**: Het vinden van de beste oplossing uit veel mogelijkheden, vaak onder bepaalde voorwaarden.
- **Voorbeeld**: Een AI-systeem voor routeplanning bepaalt de *snelste bezorgroutes* voor een pakketdienst, rekening houdend met afstand, verkeer en bezorgtijd.
**✦ 4. Voorspelling**
- **Wat is het?**: Het voorspellen van toekomstige waarden of gebeurtenissen op basis van eerdere gegevens.
- **Voorbeeld**: Een bakker gebruikt AI om op basis van eerdere verkoopdata te voorspellen hoeveel *brood* er de komende week nodig is.
**✦ 5. Creatie**
- **Wat is het?**: Het genereren van nieuwe inhoud of ideeën met behulp van AI.
- **Voorbeeld**: Een AI-systeem zoals ChatGPT of DALL·E kan een *gedicht schrijven* of een *afbeelding maken* op basis van een beschrijving, bijvoorbeeld: "Een robot die schildert in een zonnebloemenveld".
### 🛠️Opdracht
Bepaal van elk van de voorbeelden bij welk type AI-toep\[assing (creatie, assiociatie, optimalisatie, voorpellen, creatie) dit hoort.
1. Netflix geeft je aanbevelingen voor films op basis van wat je eerder hebt gekeken.
2. Een game bepaalt of je gedrag verdacht is en je mogelijk aan het valsspelen bent.
3. Een routeplanner voor je fietsrit kiest de route met de minste verkeerslichten.
4. TikTok voorspelt welke video je het langst gaat kijken en laat die eerder zien.
5. Een AI-programma maakt een unieke profielfoto in cartoonstijl van jou.
### 📤Inleveren
1. Neem de punten over in een text document en vul deze in. Lever een **TXT** document in.
## 3, AI en 'gewone' computer code.
#### Wat is het verschil tussen 'gewone' code en AI-code?
**Gewone code (klassieke algoritmes)** is gebaseerd op vaste instructies: als je A invoert, gebeurt altijd B. Dit maakt het **voorspelbaar** en **betrouwbaar**. Denk aan een rekenmachine of een robotarm in een fabriek die elke minuut exact dezelfde beweging maakt. De computer voert precies uit wat je hebt geprogrammeerd.
**AI-code** werkt anders. Die is **getraind op heel veel voorbeelden** (zoals tekst, beelden of data) en leert daarvan zelf **patronen te herkennen**. Dat lijkt een beetje op hoe onze hersenen leren. AI is vaak **minder voorspelbaar**, omdat het zelf beslissingen neemt op basis van wat het geleerd heeft. Hierdoor kan het ook **fouten maken**, zeker als het iets nog niet eerder gezien heeft. ChatGPT is bijvoorbeeld een AI die voorspelt welk woord het beste past, op basis van miljarden voorbeelden.
### 🛠️Opdracht
**Opdracht: AI-code of klassieke code?** Lees de eigenschappen hieronder. Bepaal of het hoort bij klassieke code of bij AI-code. Zet er een kruisje bij:
| Eigenschap | Klassieke code | AI-code | Geen van beiden |
|---|---|---|---|
| Voert altijd precies dezelfde handeling uit | |||
| Kan leren van voorbeelden | |||
| Maakt soms fouten bij onbekende situaties | |||
| Is goed in rekenen en logica | |||
| Kan patronen herkennen | |||
| Is 100% voorspelbaar | |||
| Kan nieuwe dingen maken (zoals een tekening) | |||
| Kan adviseren of je in Bitcoin moet stappen of moet verkopen | |||
| Zal altijd goed advies geven voor de aankoop/verkoop van Bitcoin | |||
| Kan jouw foto veranderen en jou in een hele vreemde situatie zetten |
*AI weet niet wat jij denkt!*
De context is alles om een vraag heen. ##### Voorbeeld ``` Maak een quiz. ``` Deze opdracht is **veel te vaag**. De AI weet niet: - Over welk onderwerp je quiz moet gaan - Voor welke doelgroep (leeftijd, niveau) - Hoeveel vragen je wilt - Of het meerkeuzevragen of open vragen moeten zijn - Hoe gedetailleerd het antwoord moet zijn ### 🧠Voorbeeld met goede prompt engineering: ``` Maak een quiz van 5 meerkeuzevragen voor leerlingen van 14 jaar over het onderwerp ‘kunstmatige intelligentie’. Geef bij elke vraag vier antwoordmogelijkheden en vermeld welk antwoord correct is ``` Deze prompt is **beter** omdat hij: - context geeft (leerlingen van 14 jaar, onderwerp) - duidelijk beschrijft het formaat (5 meerkeuzevragen) - details bevat (vier antwoordkeuzes, juiste antwoord) We gaan hier in de module prompt engineering verder mee werken, maar we gaan nu vast een oefening doen. ### 🛠️Opdracht, maak een prompt (deze opdracht is vervallen ivm met de volgorde van onderwerpen in het 1ste jaar) Maak één prompt waarin je je AI vraagt een PHP programma dat zoveel mogelijk lijkt op:  Je hoeft geen database te maken, je hoeft alleen front-end code te maken. Maak dit met één prompt en wees zo compleet mogelijk. ### 🛠️Alternatieve opdracht, maak een prompt Maak de game breakout in Pyton: - Je start met drie levens - Plaatjes zoals balletje kan je ook door AI laten maken (via Python Script). Laat het spel er zoveel mogelijk als volgt uit zien.    ### 🧠 Prompting strategiën ##### One shot prompt Bij **one-shot prompting** probeer je in één keer een **zo volledig mogelijke prompt** te schrijven. Je beschrijft alle specificaties, wensen en details tegelijk. 🎯 **Doel:** met één opdracht het hele resultaat (bijvoorbeeld een spel of programma) laten maken. 💡 Daarna gebruik je alleen nog een paar kleine vervolgprompts om details aan te passen. ##### Iterative prompting Bij **iterative prompting** werk je **stapsgewijs**. Je bouwt het project op in **kleine, logische stappen**. 🎯 **Doel:** controle houden over het proces en beter begrijpen wat er gebeurt. 💡 Je moet zelf goed bedenken welke stappen je kunt onderscheiden en in welke volgorde je ze uitvoert — net als bij het bouwen van een huis begin je niet met het dak of de tuin. ##### Advies Omdat AI het concept van een *break-out game* al kent, is een **one-shot prompt** goed mogelijk. Je hoeft dus niet helemaal uit te leggen hoe het spel werkt — de AI vult zelf details aan of “verzint” onderdelen die jij niet benoemt. 👉 **Tip:** probeer je prompt een paar keer te herschrijven en kijk hoe kleine aanpassingen het resultaat veranderen. 👉 **Tip:** vraag AI of jouw prompt voldoende informatie bevat en of alles specifiek genoeg beschreven is. Vraag aan AI wat je nog kan doen om de prompt duidelijker te maken. ### Uitdaging Als je tijd over hebt, is het leuk om een **eigen versie** van het spel te maken. Bedenk zelf hoe je het spel spannender of leuker kunt maken! ### 📤Inleveren 1. De door jouw gemaakte prompt 2. Het resultaat in code \-- # Snake Challenge ## Snake Challenge! [datasource](https://www.roc.ovh/books/software-development-2025/page/snake-challenge) ### Maak je eigen snake versie! In deze laatste les ga je zelf aan de slag. Je krijgt een paar uitdagingen waar je zelf oplossingen voor moet bedenken. De code werkt al goed, maar nog niet perfect: je slang kan bijvoorbeeld zomaar uit beeld verdwijnen. En misschien wil je het spel ook leuker of spannender maken? ### ✨ Bedenk en bouw je eigen toevoeging Voeg nu zelf iets toe aan het spel. Kies uit een van de onderstaande ideeën, of verzin er zelf een! #### 🚀 Idee 1: Maak het spel sneller Verlaag de vertraging een beetje elke keer als je een appel eet. Dan wordt het spel steeds spannender! ```python vertraging = max(1, vertraging - 1) ``` #### 🎈 Idee 2: Verander de kleur van de slang bij elke appel Gebruik bijvoorbeeld `random.choice(["green", "blue", "purple"])` om de kleur van de slang steeds te wisselen. #### ⛅️ Idee 3: Maak obstakels op het scherm Voeg een vaste lijst toe met blokken waar de slang niet overheen mag. Als hij ze raakt: game over! ### 💡 Extra idee? Heb je zelf een ander idee? Ga ervoor! Laat je creativiteit zien. Denk aan een "pauze-knop", meerdere appels tegelijk, of een level-systeem. ### 📄 Inleveren 1. Maak een korte beschrijving van wat je hebt aangepast (txt bestand) 2. Lever je aangepaste en werkende spel in. # Kennis Check Blok 2 ## Kennis Check Blok 2 [datasource](https://www.roc.ovh/books/software-development-2025/page/kennis-check-blok-2) ### Vallende Stenen**Waarom is het handig om de speler en de vallende steen elk met een eigen variabele voor x en y te beheren?**
Zo kun je de positie van elk object onafhankelijk aanpassen en er later berekeningen mee doen, zoals bewegen of botsing detecteren. Als je maar één variabele zou gebruiken, zou je die flexibiliteit verliezen.**Wat is het verschil tussen tekenen op het scherm en het updaten van een positie?**
Tekenen op het scherm gebeurt in de `draw()`-functie en bepaalt wat de speler ziet. Updaten van posities gebeurt in de `update()`-functie en bepaalt waar objecten zich bevinden. Zonder update gebeurt er niets; zonder draw zie je niets.**Waarom gebruik je een functie zoals `colliderect()` en schrijf je geen eigen code om te controleren of objecten elkaar raken?**
`colliderect()` is getest en betrouwbaar. Zelf botsingsdetectie schrijven is foutgevoelig en complex. Door bestaande functies te gebruiken maak je je code korter, leesbaarder en minder foutgevoelig.**Waarom wordt er gewerkt met `random.randint()` om de x-positie van de steen te kiezen?**
Daardoor weet de speler niet waar de volgende steen zal vallen, wat het spel spannender maakt. Zonder toeval zou het spel voorspelbaar en saai worden.**Wat gebeurt er als je geen limiet stelt aan de onderkant van het scherm voor vallende objecten?**
Dan vallen stenen eindeloos door en verdwijnen ze uit beeld, wat kan zorgen voor geheugenproblemen of verwarring bij de speler. Je moet ze resetten of verwijderen als ze te ver vallen.**Waarom wordt in het spel vaak gebruik gemaakt van globale variabelen?**
Omdat `draw()` en `update()` automatisch worden aangeroepen door Pygame Zero en geen parameters gebruiken, moeten variabelen buiten deze functies beschikbaar zijn. Globale variabelen maken dit mogelijk.**Wat is het verschil tussen een spel dat ‘reageert’ op invoer en een animatie die altijd hetzelfde doet?**
Een spel reageert op wat de speler doet, zoals het indrukken van pijltjestoetsen. Bij een animatie loopt alles vanzelf, zonder dat de gebruiker invloed heeft. Interactiviteit is wat van een animatie een spel maakt.**Waarom bestaat een slang uit een lijst met segmenten in plaats van één positie?**
Doordat de slang uit meerdere segmenten bestaat kun je de groei en beweging ervan beter simuleren: bij eten wordt een segment toegevoegd en anders wordt het achterste segment verwijderd. Zo ontstaat een realistische slangbeweging.**Wat is het nut van een timer variabele in `update(dt)`?**
De timer bepaalt hoe snel de slang beweegt (bijv. elke 0.15 seconden). Door `dt` op te tellen weet je precies wanneer de slang een stapje moet maken, los van de framerate.**Waarom gebruiken we een `direction\_queue` in plaats van alleen de huidige richting?**
Een queue maakt het mogelijk om meerdere toetsaanslagen op te slaan vóór de volgende beweging. Zo kan de slang snel achter elkaar van richting veranderen, zonder meteen om te draaien en zichzelf te 'eten'.**Waarom gebruiken we `colliderect()` ?**
`colliderect()` is eenvoudiger en betrouwbaarder: het controleert rechthoekige botsingen automatisch. Handmatig rekenen op coördinaten kan fouten veroorzaken.**Wat zou er gebeuren als we de slang laten 'wrappen' naar de andere kant van het scherm bij randbotsing?**
Door wrappen speelt het spel vloeiender en blijft de slang ononderbroken bewegen. Zonder wrap zou botsen op de rand een abrupt einde betekenen.**Hoe draagt het willekeurig plaatsen van voedsel bij aan de speelervaring?**
Het willekeurig zetten van voedsel voorkomt patronen en houdt het spel uitdagend. De speler moet telkens de slang naar een onverwachte plek sturen.**Wat gebeurt er als de slang op zichzelf botst, en waarom willen we dat checken vóór het toevoegen van een nieuw segment?**
Botst de slang op zichzelf, dan eindigt het spel. Door te checken vóór je de kop toevoegt, voorkom je dat de slang in al zijn segmenten terechtkomt — dat voorkomt onverwacht gedrag.**Waarom hebben we een `reset()`-functie die opnieuw alles initialiseert?**
Een `reset()`-functie zorgt voor een strak begin na Game Over, met dezelfde beginvoorwaarden (slangpositie, timer, richting). Zo kun je herstarten zonder fouten.**Hoe maak je het spel moeilijker zonder de basiscode te veranderen?**
Je kunt de moeilijkheid verhogen door de bewegingstimer in te korten, extra obstakels toe te voegen, of minder ruimte voor voedsel te geven. Zo blijft het uitdagend.**Wat maakt AI anders dan gewone code?**
AI-code is gebaseerd op het leren uit voorbeelden en herkent patronen, terwijl gewone code exact reageert op geprogrammeerde instructies. AI kan dus variabelen voorspellen, terwijl gewone code voorspelbaar blijft :contentReference\[oaicite:1\]{index=1}.**Waarom onderscheidt men AI-toepassingen in categorieën als classificatie, associatie, enz.?**
Zo kun je concrete voorbeelden koppelen aan de manier waarop AI werkt. Elke categorie heeft eigen eigenschappen: classificatie herkent labels, optimalisatie zoekt naar de beste oplossing, creatie gaat over nieuwe inhoud maken, etc. :contentReference\[oaicite:2\]{index=2}.**Hoe helpt het indelen van AI in typen zoals voorspelling en optimalisatie om je begrip te verdiepen?**
Je leert zo dat AI niet één technologie is, maar verschillende werkwijzen heeft afhankelijk van het doel—zoals voorspellen van verkoop of optimaliseren van routes. Dit maakt het makkelijker te kiezen welke techniek geschikt is voor een probleem. :contentReference\[oaicite:3\]{index=3}.**Wat betekent het dat AI 'minder voorspelbaar' is dan klassieke code?**
Normale code geeft altijd hetzelfde resultaat bij dezelfde input. AI geeft verschillende output, omdat het leert van data en tot een inschatting komt. Hierdoor kan het fouten maken in onbekende situaties :contentReference\[oaicite:4\]{index=4}.**Waarom is het belangrijk om de voor- en nadelen van AI te begrijpen?**
AI heeft veel kracht, zoals patronen herkennen en personaliseren, maar kan ook fouten maken, bevooroordeeld zijn of ondoorzichtig zijn ("black box"). Door deze aspecten te begrijpen kun je AI verantwoordelijk en effectief inzetten. :contentReference\[oaicite:5\]{index=5}.**Hoe zorgt goede prompt engineering ervoor dat je AI beter helpt begrijpen wat je wilt?**
Door context, doel, doelgroep en format duidelijk te geven, krijgt de AI de juiste informatie om relevante en bruikbare output te leveren. Vage prompts leiden vaak tot onsamenhangende antwoorden.**Waarom moet je AI‑output altijd controleren, vooral in belangrijke situaties?**
AI-systemen kunnen fouten maken, ongepaste of bevooroordeelde antwoorden geven—vooral zonder toezicht. Daarom is menselijke verificatie essentieel, bijvoorbeeld bij medische of juridische adviezen. :contentReference\[oaicite:6\]{index=6}.**Wat betekent het dat AI een ‘black box’ is, en waarom is dat problematisch?**
Je weet vaak niet precies hoe een AI tot een bepaalde beslissing komt. Dit maakt het lastig om die beslissing uit te leggen of te controleren, wat risico's kan veroorzaken in gevoelige toepassingen. :contentReference\[oaicite:7\]{index=7}.Hallo allemaal!
Dit is mijn eerste HTML-pagina in Phoenix Code.
``` #### 4. Bekijk het resultaat - Klik bovenaan op **Run** of **Live Server** - De pagina verschijnt rechts of opent in een nieuw tabblad - Klik aan de rechterkant op de verschillende onderdelen; je ziet nu welke HTML bij dezeonderdelen horen. - Je kunt ook op het bestand dubbelklikken ### Opdracht Waarvoor dient HTML? Zet deze vraag en het antwoord op jouw HTML pagina. 💬 *AI-tip:* Vraag een AI-assistent (zoals ChatGPT) om in 3 zinnen uit te leggen wat HTML doet. Vergelijk dat met jouw eigen uitleg in Phoenix Code — komt het overeen? ### 🧠 Vragen - Wat denk je dat <h1> en </h1> doet? - En <p>....</p>, wat doen die denk je? ### 📤 Inleveren 1. Screenshot van je browser waarin de vraag "Waarom dient HTML?" en jouw antwoord zichtbaar zijn. ### Voorbeeld screenshot  [datasource](https://www.roc.ovh/books/software-development-2025/chapter/blok-3-web-front-end) ## 2 Wat is HTML? *In deze les leer je wat HTML is, waarom het belangrijk is voor websites, en maak je je eerste eenvoudige webpagina met koppen en tekst.* ### 🎯 Leerdoelen - Je weet waar HTML voor wordt gebruikt - Je kent de structuur van een HTML-pagina - Je kunt zelf een eenvoudige HTML-pagina maken ### 💡 Wat is HTML? - HTML betekent **HyperText Markup Language** - Het is de **basis van elke webpagina** - HTML vertelt de browser wat er op een pagina moet staan: tekst, afbeeldingen, knoppen, enzovoort ### 🎬Video - korte uitleg HTML [https://www.youtube.com/watch?v=it1rTvBcfRg](https://www.youtube.com/watch?v=it1rTvBcfRg) ### 🔰 Wat gaan we doen? - We maken een nieuw HTML-bestand in Phoenix Code - We schrijven een pagina over onszelf met koppen en tekst ### 🛠️ Stappenplan #### 1. Maak een nieuw project in Phoenix Code - Ga naar [https://phoenixcode.dev](https://phcode.dev/) - Voeg een bestand toe met de naam `opdracht2.html` #### 2. Typ deze HTML-code ```htmlHallo! Ik ben [jouw naam]
Ik ben [leeftijd] jaar oud en ik zit op school bij [schoolnaam].
Mijn favoriete hobby is [hobby].
``` #### 3. Pas de tekst aan - Vervang `[jouw naam]`, `[leeftijd]`, `[schoolnaam]` en `[hobby]` door je eigen gegevens #### 4. Bekijk je werk - Klik op **Run** of **Live Server** om je webpagina te bekijken ### Uitleg Tekst staat tussen tags. Deze tags geeft aan hoe een tekst moet worden weergegeven. Vrijwel alle HTML tags bestaan uit een open-tag (bijvoorbeeld <p> en een sluit tag bijvoorbeeld </p> **<p>...</p>** betekent dat de tekst een **pragraaf** is. **<h1>...</h1>** betekent dat de tekst een **header** is. Je hebt nog meer headers: <h2>, <h3>, ..... ### Opdracht 1. Vervang de header die tussen <h1>...</h1> staat door een kleinere header. 2. Zoek op hoe je tekst schuingedrukt (italic) kan afdrukken en laat jouw naam schuin afgedrukt worden. ### 📤 Inleveren 1. Maak een screenshot van je webpagina met aangepasgte header en jouw naam ver gedrukt. ## 3 Tekst en opmaak *In deze les leer je hoe je tekst opmaakt met HTML. Je leert koppen, paragrafen, vetgedrukte tekst, cursieve tekst en regels afbreken.* ### 🎯 Leerdoelen - Je kunt kopjes en paragrafen maken met HTML - Je weet hoe je tekst vet of schuin maakt - Je kunt regels afbreken met een <br>-tag ### 💡 Wat kun je met HTML-opmaak? - HTML laat je tekst er beter uitzien en duidelijker maken voor de lezer - Je gebruikt kopjes om structuur aan te brengen, en `` om losse alinea's te maken
- Je kunt woorden **vet** of *schuin* maken om ze op te laten vallen
### 🔰 Wat gaan we doen?
- We maken een pagina met meerdere kopjes en paragrafen
- We oefenen met ``, `` en ` ` Dit is een stukje tekst. Hallo! Ik ben [jouw naam]. Ik ben enthousiast over programmeren. Ik hou van muziek maken Later wil ik werken als programmeur bij een groot bedrijf. Meer informatie over katten vind je op
Wikipedia.
In een tabell moet elke regel precies evenveel kolommen bevatten!
`
### 📝 Eenvoudige HTML-tags voor tekstopmaak
### 🛠️ Stappenplan
#### 1. Maak een nieuw project of nieuw bestand in Phoenix Code
- Noem het bestand `tekst.html`
#### 2. Typ of plak deze HTML-code
```html
Tag Betekenis Voorbeeld Uitleg ` ` t/m `
`
Koppen ` Grote titel
`` ` is de grootste kop, `
` de kleinste
` Paragraaf / alinea ` Zorgt voor witruimte vóór en na `` Vetgedrukt (belangrijk) `Let op!` Wordt ook door screenreaders benadrukt `` Cursief (nadruk) `Heel belangrijk` Geeft nadruk, ook voor screenreaders `
`Regellijn afbreken `Eerste regel
Tweede regel`Breekt een regel zonder nieuwe paragraaf
(deze tag bestaat alleen uit een openingstab) Over mij
Mijn hobby's
voetballen
en gamen.Toekomst
`
#### 4. Bekijk je werk
- Klik op **Run** of **Live Server** om het resultaat te zien
💬 *AI-uitbreiding:* Laat een AI de HTML-code verbeteren door te vragen:
“Hoe kan ik deze HTML beter structureren of leesbaarder maken?”
Bekijk of de suggesties zinvol zijn — pas alleen aan wat je begrijpt.
### 🧠 Reflectie
- Wat doet `
` precies?
- Wanneer zou je `` gebruiken en wanneer ``?
- Hoe maak je een tekst extra duidelijk voor de lezer?
### 📤 Inleveren
1. Maak een screenshot van jouw pagina waarin opmaak en breekregels zichtbaar zijn
## 4 Afbeeldingen en links
*In deze les leer je hoe je een afbeelding op een webpagina toont en hoe je een klikbare link toevoegt naar een andere website.*
### 🎯 Leerdoelen
- Je kunt een **afbeelding** invoegen met HTML
- Je kunt een **link** maken naar een andere website
- Je begrijpt wat attributen zoals `src`, `alt` en `href` doen
### 💡 Wat zijn afbeeldingen en links in HTML?
- **Afbeelding:** je gebruikt de tag `` om een foto of plaatje te tonen
- **Link:** je gebruikt de tag `` om een klikbare link te maken
- Je gebruikt attributen zoals:
- `src` = locatie van de afbeelding
- `alt` = tekst als de afbeelding niet geladen wordt
- `href` = doel van de link
### 🎬Voorbeeld
##### Hoe maak je een link?
[https://www.youtube.com/watch?v=gOioxltfh48](https://www.youtube.com/watch?v=gOioxltfh48)
##### Hoe voeg je een plaatje toe op je web pagina?
[https://www.youtube.com/watch?v=Hh\_se2Zqsdk](https://www.youtube.com/watch?v=Hh_se2Zqsdk)
### 🔰 Wat gaan we doen?
- We voegen een afbeelding toe aan onze pagina
- We maken een link naar een favoriete website
### 🛠️ Stappenplan
#### 1. Maak een nieuw HTML-bestand in Phoenix Code
- Noem het bestand `afbeelding.html`
#### 2. Typ of plak deze HTML-code
```html
Mijn favoriete dier
` = **unordered list**
- **Genummerde lijst:** gebruik je met `
` = **ordered list**
- Elk item in een lijst staat in een `
Mijn hobby's
Top 3 favoriete snacks
```
### Opdracht
Verander de pagina en maak:
1. een **numbered list** van dingen die jij leuk vind om te doen. Op nummer 1 staat dan wat je het leukst vind, op 2 wat je daarna het leukts vind, etc. etc. Noem tenminst 5 dingen.
2. een **unnumbered lists** van dingen die je tot nu hebt geleerd van software development. Wees specifiek, dus antwoord (Python is onjuist omdat dit niet specifiek genoem is).
Klik op **Run** of **Live Server** om je pagina te testen
### 📤 Inleveren
1. Maak een screenshot van jouw webpagina met beide lijsten zichtbaar
## 6 Tabellen in HTML
*In deze les leer je hoe je een eenvoudige tabel maakt met HTML. Je gebruikt dit om informatie netjes in kolommen en rijen te tonen.*
### 🎯 Leerdoelen
- Je weet wat een HTML-tabel is en waarvoor je die gebruikt
- Je kunt een eenvoudige tabel maken met rijen en kolommen
- Je gebruikt de tags ``, `
`, ` ` en ` `
### 💡 Wat is een tabel in HTML?
- Een tabel is een manier om informatie te tonen in rijen (horizontaal) en kolommen (verticaal)
- ` ` = de hele tabel
- `
` = een rij (table row)
- ` ` = een cel met gegevens (table data)
- ` ` = een kopcel (table header)
In een HTML tabel moet elke regel evenveel kolommen bevatten. Om dat voor elkaar te krijgen zou je lege kolommen kunne toevogen als een regel te weinig kolommen heeft.
Mijn schoolrooster
```
#### 3. Pas de inhoud aan
- Vervang de dagen en vakken door jouw eigen rooster
💬 *AI-opdracht:* Vraag ChatGPT:
“Hoe kan ik mijn tabel beter leesbaar maken zonder CSS?” Probeer één van de suggesties uit.
#### 4. Bekijk je werk
- Klik op **Run** of **Live Server** om je tabel te bekijken
### 📤 Inleveren
1. Maak een screenshot van jouw tabel met minstens 6 rijen (kopregel plus maamndag t/m vrijdag)
## 7 Formulieren in HTML
*In deze les leer je hoe je een formulier maakt in HTML. Je leert invoervelden gebruiken en een knop toevoegen om informatie te versturen.*
### 🎯 Leerdoelen
- Je weet wat een formulier is en waarvoor je het gebruikt
- Je kunt invoervelden maken voor tekst, getallen en knoppen
- Je kunt een formulier laten verzenden naar een ander HTML- of PHP-bestand
### 💡 Wat is een formulier?
- Een formulier gebruik je om gegevens in te voeren op een website
- Denk aan: contactformulieren, inlogvelden, zoekvelden, bestellingen
- Je gebruikt tags zoals:
- `
Dag
Vakken
Maandag
Nederlands, Wiskunde
Dinsdag
Engels, Gym