Digiwijsheid Online - Module 4: Leren programmeren

Digiwijsheid Online - Module 4: Leren programmeren

Introductie

Welcome bij module 4!

In deze module ga je heel veel leren over computers en programmeren en coderen.

Zo ga je de volgende dingen bekijken en leren:

1. Hoe denkt een computer?

2. Wat zijn instructies?

3. Hoe geef ik duidelijk instructies?

4. Programmeer talen

5. Leren programmeren en coderen

6. Maak je eigen game!

Elk van deze dingen zijn zeer belangrijk om te weten als je deze module goed wilt afsluiten. Zoals je kunt zien moet je aan het einde van deze module je eigen game maken! Als je dus niet opgelet hebt tijdens de opdrachten, dan word het heel moeilijk om dit te doen!

Mocht je lessen missen of het even niet snappen, vraag dan je docent om hulp. Die wilt jou maar al te graag helpen met je reis om te leren programmeren!

Bekijk de film: What Most Schools Don't Teach

  • Onder andere Bill Gates en Mark Zuckerberg komen aan het woord in de film.
  • Delen van de film zie je ook terug als je gaat oefenen in CodeStudio.

➔ Opdracht: Terwijl je kijkt schrijf op welke 3 redenen om code te leren in het filmpje worden genoemd?

Title: What most school don't teach

Als je Nederlandse ondertiteling wilt, zorg er dan voor dat hier een rood balkje onder staat:
Klik vervolgens op de knop Instellingen/ Ondertiteling:
Vink in de lijst Nederlands aan:

H1 - Instructies

§1.1 Computational Thinking

Denken zoals een computer, computational thinking, daar gaat het in deze opdracht om.

Kan een computer eigenlijk net zo nadenken als een mens?

Nee, een computer is echter wel heel goed in het uitvoeren van opdrachten of instructies.

We geven een voorbeeld, zodat het verschil tussen een instructie voor een mens en voor een robot duidelijk wordt.

Als je in de woonkamer bent en je moet een pak melk uit de koelkast in de keuken halen, dan heb je aan deze instructie waarschijnlijk voldoende:
Haal een pak melk uit de koelkast.
We hoeven je niet uit te leggen dat je naar de keuken moet lopen, de koelkastdeur moet openen, het pak melk eruit pakken en de koelkastdeur weer dichtdoen.

Maar als we dezelfde instructie voor bijvoorbeeld een robot zouden moeten maken, dan komt deze er heel anders uit te zien.
De robot bedenkt namelijk niet zelf hoe hij in de keuken moet komen, de koelkastdeur moet openen, het pak melk moet pakken en de koelkastdeur weer moet dichtdoen.
Daarvoor moet de robot nauwkeurige instructies krijgen, bijvoorbeeld:

  1. Loop 3 stappen vooruit;
  2. Draai rechtsom;
  3. Loop 2 stappen vooruit;
  4. Pak met het rechterhand het handvat van de koelkastdeur;
  5. Trek de deur naar voren;
  6. Laat het handvat los;
  7. Pak met de rechterhand het pak melk;
  8. Sluit met de linkerhand de koelkastdeur.

Om dit lijstje te maken moest je logisch nadenken en precies aangeven wat je bedoelde. Als je dat doet ben je bezig met computational thinking, denken als een computer. Het is dus eigenlijk iets in kleine stukjes opdelen. Je maakt een 'moeilijke' oplossing simpel.

In de rest van deze opdracht ga je instructies maken. Je noemt dat ook wel coderen of programmeren.
Normaal doe je dit door een programmeertaal te gebruiken. Een veelgebruikte programmeertaal is JavaScript. Wij zullen in volgende hoofdstukken gebruiken maken van een aantal programma's om dit te gaan leren! Waaronder code studio en Scratch.

Sommige van jullie kennen Scratch waarschijnlijk al, dus dan heb je een voorsprong!

In deze opdracht gaan we nog geen programmeertaal gebruiken, maar schrijven we instructies op papier!

Ga door naar §1.2

 

§1.2 Exacte instructies

Zoals je in §1.1 hebt kunnen lezen zijn de instructies die je aan een computer of programma geeft zeer belangrijk. Ze moeten exact of heel precies zijn wil de computer gaan doen wat jij zegt.

Vroeger op tv was er een bekend spelprogramma genaamd "Labyrinth". Hier moeten te spelers exacte instructie geven om te kunnen winnen.

Bekijk het fragment: Spelprogramma Labyrinth

Title: Spelprogramma Labyrinth

➔ Opdracht 1: Pak een pen en papier en schrijf een exacte instructie op over hoe je het doolhof hieronder moet oplossen. Het doolhof kan je downloaden onder aan de pagina.

Schrijf de instructies onder elkaar op. Dus elke stap die je moet maken op een eigen regel.

Voorbeeld:

1. naar voren

2. naar links

3. 2x naar voren

➔ Opdracht 2: Laat een klasgenoot het doolhof oplossen door jouw instructies op te volgen en kijk of het lukt! Die klasgenoot kan tekenen selecteren in Word en een lijn trekken door het doolhof.

Download het bestand:

Download Icon Flat - Icon Shop - Download free icons for commercial use

 

§1.3 Peanut Butter Jelly Time

Veel handelingen die je dagelijks doet gaan vanzelf. Je hoeft niet meer na te denken over de tussenstappen, maar je voert de tussenstappen wel één voor één uit. Denk bijvoorbeeld aan lopen. Je denkt niet bij elke stap dat je je voet moet optillen, naar voren moet brengen en weer neer moet zetten. Toch doe je dit bij elke stap. Voor lopen gebruik je dus eigenlijk stap voor stap instructies, die gelukkig volledig geautomatiseerd is. Een computer moet wel die stap voor stap instructies krijgen, anders gaat het heel fout!

Op het internet is een filmpje viral gegaan waarin een vader aan z’n kinderen vraagt om een handleiding te schrijven voor het klaarmaken van een sandwich met peanut butter en jelly.
Dat klinkt eenvoudig, maar het is dat ook?

Bekijk het filmpje hieronder:

Instructies: Maak een peanut butter and jelly sandwich!

Nu je gezien hebt hoe ingewikkeld het schrijven van exacte instructies is voor zoiets simpels als het smeren van een boterham, wordt het tijd dat je hier zelf mee gaat oefenen!
 

§1.4 De opdracht - Maak instructies

Jullie hebben nu gezien wat er kan gebeuren als instructies niet exact zijn voor een computer of programma! Jullie hebben ook zelf geoefend om exacte instructies te schrijven. Dit gaan we nu allemaal samenvoegen in 1 opdracht!

 

➔ De opdracht: Maak een "Peanut Butter and Jelly" filmpje!

In deze opdracht ga je een zelfde soort filmpje maken als de Peanut Butter and Jelly Youtube clip die je hebt bekeken in §1.3. Je mag uit een aantal broodjes kiezen en gebaseerd daarop maak je met een klasgenoot of familielid een soortgelijk filmpje.

Kies 1 van de volgende broodjes:

1. Peanut Butter and Jelly

2. Pindakaas met hagelslag

3. Een broodje roerei.

4. Een tosti ham-kaas

Belangrijk!

➔ De gene die het broodje maakt leest steeds een stap duidelijk voor, voor dat je de instructie daadwerkelijk gaat doen.

➔ De schrijver van de instructie mag uiteraard meerdere pogingen doen de instructie te perfectioneren, tot het een volwaardig broodje is!

➔ Edit je video clip zodat het niet langer dan 5 minuten in totaal is.

Inleveren doe je via de Showbie opdracht die je docent heeft open gezet! Je kan de clip op Youtube zetten, maar je mag deze ook gewoon zo inleveren, mits deze niet te groot is!

 

H2: Scratch + iPad buttons

Je hebt in het hoofdstuk hiervoor gewerkt met het geven van exacte instructies. Zo hopen wij dat je door hebt dat je stap voor stap instructies of wel "code" moet schrijven om te zorgen dat een programma weet wat hij moet doen.

Scratch is een op blokken gebaseerde visuele programmeertaal en website, voornamelijk gericht op kinderen als een educatief hulpmiddel voor programmeren, met een doelgroep van 8 tot 16 jaar. Gebruikers op de site, Scratchers genaamd, kunnen projecten op de website maken met een blokachtige interface.

 

§2.1 Scratch account

Vanaf nu gaan we aan de slag met het leren coderen! Om daar mee te kunnen beginnen moet je eerst een account maken voor Scratch. Scratch is een website die je alle gereedschap geeft om zelf te leren coderen. Volg de stappen hieronder om een eigen account te maken:

Stap 1: Click op de knop hieronder om naar de website te gaan

Stap 2: Druk op de volgende knop om te beginnen met het maken van je account:

 

Stap 3: Vul je gebruikersnaam en wachtwoord in.

BELANGRIJK:

GEBRUIKERSNAAM: Jouw eigen voor- en achternaam aan elkaar geschreven

WACHTWOORD: Gebruik je schoolwachtwoord

DAARNA: Stuur je gebruikersnaam + wachtwoord in de privé Teams chat tussen jou en je docent.  

DOE HET ZO:
Gebruikersnaam Scratch: MissFrancken 
Wachtwoord Scratch: MissFranckenisleuk

Hiermee moet je namelijk steeds inloggen, niet met je email. Schrijf deze ook op aan de achterkant van je Plenda.

 

 

 

Stap 4: Kies Netherlands als land

 

Stap 5: Geef je geboorte datum

 

Stap 6: Kies 1 van de opties die past bij jouw geslacht.

 

Stap 7: BELANGRIJK! Vul jouw school email in.

 

Als je deze melding ziet, dan gefeliciteerd! Je hebt een account.

 

 

      ALS LAATSTE: Je krijgt een email binnen van Scratch op je schoolemail. Je moet je account verifiëren. Anders kan je al je materiaal kwijtraken.

Check de spam box en verifiër je account.

§2.2 Scratch omgeving

In deze paragraaf gaan wij kennis maken met de omgeving van Scratch. Zo bekijken wij de website, maar ook de verschillende functies wanneer je een eigen project start in Scratch.

Stap 1: Bekijk eerst het filmpje hieronder om te kijken hoe de website werkt:

 

Website Tour

Stap 2: Bekijk nu het filmpje hieronder waarin uitgelegd wordt wat je allemaal voor knoppen hebt binnen je nieuwe project!

 

Project Tour

Stap 3: Lees hieronder wat elke code soort doet! Naast elk icoontje staat een klein beschrijving.

In deze catagorie vind je codeblokken om je sprites te laten bewegen of ergens op je scherm te  zetten.

 

In deze categorie vind je codeblokken om je sprites te laten veranderen van uiterlijk.

 

In deze categorie vind je codeblokken om geluid toe te voegen om acties of gebeurtenissen geluiden te laten maken.

 

In deze categorie vind je codeblokken die zeggen "ALS dit is gebeurt, voer dan de volgende code uit."

 

In deze categorie vind je codeblokken die andere delen van je code besturen. (If/and/as-statements)

 

In deze categorie vind je codeblokken die eisen stellen aan je code. Bijvoorbeeld "raak
ik deze kleur aan dan gebeurt er dit..."


In deze categorie vind je codeblokken die je besturen codeblokken specifieker maken.


 

 In deze categorie kun je codeblokken maken die informatie opslaan. Deze informatie kan je dan weer in andere code blokken gebruiken. Zoals "aantal levens".

§2.3 De opdracht - Leren bewegen

Laten we beginnen met het maken van jullie eerste game. Deze is nog niet heel spectaculair, maar wel heel belangrijk om onder de knie te krijgen. We gaan namelijk leren hoe we iPad controls moeten maken.

In dit geval gaan we de volgende dingen coderen:

1. Vier sprites maken die knoppen moeten voorstellen

2. Zorgen dat deze 4 knoppen onze cat naar links, rechts, boven en onder laten bewegen.

3. Zorgen dat onze cat op een juiste snelheid loopt en in de goede richting.

 

Laten we gewoon beginnen! Bekijk de filmpjes en volg de instructies op in jouw eigen project. Aan het einde moet jij dus een game hebben die doet wat wij hierboven hebben beschreven. Deze lever je in bij je docent als je klaar bent.

 

Stap 1: 4 knoppen maken

4 Knoppen maken

Stap 2: Je cat laten bewegen

Cat laten bewegen

Stap 3: Juiste snelheid en richting

Snelheid en richting

Scratch Huiswerk inleveren

BELANGRIJK! Je docent vertelt waar en wanneer je het huiswerk moet inleveren. Dit kan dus verschillen met het einde van het filmpje hieronder. Let dus goed op de instructie van je docent!

Scratch Huiswerk Inleveren

H3: Game 1: Food Catcher

In het vorige hoofdstuk heb je jouw eigen iPad controls gemaakt. Hopelijk is alles gelukt en heb je een paar mooie buttons en een character dat beweegt! Zo niet, vraag je docent dan even om hulp. Het is namelijk van belang dat hoofdstuk 2 voldoende is afgerond, anders kan je niet verder met hoofdstuk 3.Vanaf nu ga je namelijk bij vrijwel elk spel deze eigen gemaakte iPad controls gebruiken. Werken ze niet kan je dus ook niet verder met je spel.

De paragrafen in dit hoofdstuk gaan je het volgende leren:

1. Hoe je de door jouw gemaakte iPad controls opslaat als basis voor andere games.

2. Hoe je jouw speelveld netjes kan maken

3. Hoe je een Food catcher game kan maken.


Ga door met §3.1 en laat zien wat voor wereld ster game programmeur jij kan zijn!

§3.1 Je project kopiëren

Voor je verder gaat, is het van belang dat je een copy van je project maakt! Als je een copy maakt, dan kan je met die copy een ander project starten en gelijk al jouw iPad controls klaar hebben. Ook zorgt het ervoor dat als je een fout maakt, je in ieder geval het originele project met je iPad controls nog hebt.

Volg de stappen hieronder om een copy te maken van je iPad controls project:

Stap 1: In je project klik je op Bestand > Opslaan als

 

Stap 2: Je ziet dan een bericht dat je een copy hebt gemaakt. Ga nu naar je project folder toe:

Stap 3: Je ziet nu jouw projecten folder met als bovenste project jouw copy. Click op de naam van de copy:

Stap 4: Verander nu de titel van de copy naar jouw nieuwe project, in dit geval H3 - Game 1: Fruit Catcher:

 

Tadaa! Je hebt nu een gloednieuw project klaargezet, MET jouw eigen gemaakte iPad controls. Tijd om te beginnen aan je eerste game. 

Ga naar §3.2!

§3.2 Verbeter je spelbasis

Voor we daadwerkelijk gaan beginnen met de verschillende onderdelen van het spel, is het goed als de basis voor je spel goed is. Zoals je misschien wel hebt gemerkt zijn er nog een aantal dingen die er niet helemaal goed uit zien. Probeer maar eens te lopen naar de randen van je spel of naar je buttons. Dat ziet er toch niet helemaal netjes uit!

We gaan de volgende dingen coderen in deze paragraaf:

 

1. Je character een loop beweging geven.

2. Zorgen dat je character niet voorbij de randen van je spel kan gaan.

3. De knoppen een eigen ruimte geven waar je character niet bij kan.

4. Zorgen dat je knoppen en je character altijd op de juiste plek beginnen.

 

Bekijk de filmpjes hieronder en doe mee tijdens de uitleg!

 

Stap 1: Loop animatie coderen

Stap 1: Loop animatie

Stap 2: Niet voorbij de randen coderen

Niet voorbij de randen

Stap 3: Knopveld maken

Knopveld maken

Stap 4: Vaste plek voor je sprites coderen

Vaste plek voor je sprites coderen

§3.3 Spel functies maken

Je hebt in §3.2 de basis van je spel compleet en netjes gemaakt! Eindelijk kunnen we nu beginnen met het programmeren van je spel! Zoals je weet gaan wij een Fruit Catcher game maken. Met andere woorden, we gaan een spel maken waarbij jouw character fruit gaat vangen en daar punten voor krijgt.

We gaan in deze paragraaf de volgende dingen programmeren:

1. Zorgen dat we 1 stuk fruit op willekeurige plekken in ons spel kunnen laten verschijnen wanneer deze gepakt word door onze character.

2. Geluid toevoegen wanneer je iets opeet en het verdwijnen van het eten mooier maken.

3. Zorgen dat we meerdere stukken fruit in ons spel hebben.

4. Een score toevoegen voor elk stuk fruit, waarbij de ene meer punten geeft dan de ander.

BELANGRIJK!! Voor je verder gaat, maar een copy van je project van §3.2 en werk verder in je copy. Laten we de naam wat inkorten en deze §3.3 - Fruit Catcher - spel functies noemen.

Bekijk de filmpjes hieronder en ga stap voor stap je eerste spelfunctie programmeren:

Stap 1: Fruit op een willekeurige plek laten verschijnen

Fruit op een willekeurige locatie

Stap 2: Geluid bij opeten + betere verdwijn animatie

Geluid bij opeten + betere verdwijn animatie

Stap 3: Meerdere fruitsoorten in je spel

Meerdere fruit soorten in je spel

Stap 4: Een score systeem toevoegen + verschillende score per stuk fruit

Score geven per fruitstuk

Extra lessen

Extra Functie 1: Game Over Scherm + Timer

Wil je een "Game Over" scherm?

Video: Make a Game Over Screen

Extra Functie 2: Ipad Stick Controls

In deze extra les vind je een manier om stick controls te maken voor je game! Dit gaan we in latere hoofdstukken ook gebruiken, maar wil je er al eerder mee beginnen, kijk dan het filmpje hieronder!

iPad Stick controls

Extra Functie 3: Start Menu

Bekijk de tutorial hieronder om een eigen start scherm te maken!

How to Make a Game with a Start Screen in Scratch | Tutorial

Extra Functie 4: Timer

Wil je een timer in je scherm, zodat je game na een aantal seconden of minuten stopt? Bekijk dan de tutorial hieronder!

Add a Timer to your Scratch Game

Extra Game Idee 1: Platformer

Wil je een ingewikkelde platformer game zoals Mario maken? Bekijk dan de tutorial series hieronder!

How to make a platformer game

Extra Game Idee 2: Clicker Game

Altijd al je eigen "Clicker Game" willen maken? Kijk dan naar de tutorials hieronder en maak een volledig eigen Clicker Game met een shop!

Maak een Clicker Game met een Shop (Part 1)

Maak een Clicker Game met een Shop (Part 2)

Extra Game Idee 3: Five Nights At Freddies

Ooit een Five Nights at Freddies gespeeld en wil je er zelf 1 maken? Hieronder vind je een grote game making tutorial series om een soortgelijke game te maken!

Let op! Deze game is heel moeilijk om zelf te maken en je docent kan je hier niet bij helpen, maar wel erg leuk!

How To Make A FNAF Game In Scratch | Ep 1 | Title Screen

Extra Programeer Les

Je hebt geklikt op de "Extra" paragraaf van dit hoofdstuk. Deze paragraaf is alleen bedoelt voor leerlingen die een stapje verder willen gaan. Waarschuwing dat je zowel redelijk Engels moet kennen en hier de tijd voor moet nemen.

Hieronder vind je een extra brede uitleg van wat computational thinking is en wat Scratch kan doen. Dit is de eerste hoorcollege van CS50. Een programma die Harvard in America aanbied voor leerlingen die een eerste stap willen zetten op het gebied van leren programmeren.

Opdracht: Klik op het plaatje hieronder en bekijk het filmpje. Maak aantekeningen voor jezelf. Deze kan je aan je docent laten zien wanneer je hier mee klaar bent.

In deze extra module ga je leren hoe je een platformer moet maken. Denk aan games als Mario!

 

 

 

 

 

 

 

 

 

Deze opdracht vraagt heel veel van jou als leerling en is dan ook alleen voor de leerlingen die gemotiveerd zijn om meer te leren over coderen. Voor je verder gaat, zorg dat je Extra 2 hebt afgerond en je een project hebt met een stick als besturing. In het filmpje van extra 2 wordt ook uitgelegd hoe je deze kan programmeren voor de besturing van andere spellen en zo ook deze platformer.

Bekijk de filmpjes hieronder en kijk hoe ver je komt!

 

Code a Platformer Game | 1. The Basics

1. The Basics

Code a Platformer Game | 2. Next Level

2. Next Level

Code a Platformer Game | 3. Hitboxes and Animation

3. Hitboxes and Animation

Code a Platformer Game | 4. Slopes & Limb Posing

4. Slopes & Limb Posing

Code a Platformer Game | 5. Wall Jumping Done Right!

5. Wall Jumping Done Right!

Code a Platformer Game | 6. Vertical Levels

6. Vertical Levels

Code a Platformer Game | 7. SPIKES and LAVA

7. SPIKES and LAVA

Code a Platformer Game | 8. Moving Platforms

8. Moving Platforms

Scratch Platformer Game | 9. Collectables, Keys & Doors

9. Collectables, Keys & Doors

Scratch Platformer Game | 10.  Waypoints, Game Over & Game Menu

10.  Waypoints, Game Over & Game Menu

Scratch Platformer Game | 11. Coding Platformer Enemies

11. Coding Platformer Enemies

Scratch Platformer Game |11.5 How to Fix A Scratch Bug - Classic Platformer Wall Jump

11.5 How to Fix A Scratch Bug

Scratch Platformer Game | 12. Code Rotating Platforms

12. Code Rotating Platforms

Terug naar de hoofdpagina