gameDing

GameDing

Dit project draait niet alleen om het ontwikkelen van een spel, maar ook om samenwerken, plannen en creatief nadenken.
In dit project werken jullie in een team van twee leerlingen.
Samen ontwikkelen jullie een spel en leggen jullie de basis voor een later eindproduct. 
In de loop van de tijd zoeken we naar een mogelijkheid om de werkende spellen samen te voegen tot een gezamenlijk eindresultaat: een webpagina waarop alle spellen gepresenteerd worden.

Een goede voorbereiding, een goede planning, duidelijke afspraken en een proactieve houding zijn de sleutel tot succes. 
Om jullie in de oriënterende fase van deze opdracht op weg te helpen, geef ik hier een overzicht van de (deel)producten en de deadlines die daarbij horen.

Je maakt met je team één inlevermap voor deze opdracht.
In deze map bewaar je alle deelproducten.
Als een deadline verstreken is wordt de voortgang gecontroleerd en reregistreerd ten behoeve van de beoordeling van het proces.
Ook jullie verslag staat in de inlevermap en zal met hetzelfde doel tussentijds ingezien worden.


Veel plezier en succes met dit uitdagende project!

Deadlines

10 januarigame analyse
10 januarieisen functionaliteit
31 januaridoelgroep  beschrijving
31 januarimoodboard
7 februarivisueel ontwerp
14 februariflowchart(s)
14 maartjavascript
14 maartstyle
14 maarteindproduct

Beoordeling

Het project wordt op verschillende manieren beoordeeld. Niet alleen het eindproduct telt mee, maar ook de kwaliteit van de deelproducten en hoe jullie als team samenwerken. Jullie proces is daarbij erg belangrijk:

De producten:

  • Analyse game
  • Beschrijving functionaliteitseisen
  • Doelgroep bepalen en omschrijven
  • Moodboard
  • Visueel ontwerp
  • Flowchart(s)
  • Javascript, html en css
  • Css
 

Het proces:

Naast de producten die jullie ontwikkelen, wordt er van jullie verwacht dat je een uitgebreid en goed gestructureerd verslag inlevert.
Dit verslag bevat twee belangrijke onderdelen:
verslaglegging en reflectie.

Verslaglegging

In de verslaglegging beschrijf je helder:

  • De keuzes en beslissingen:
    • Welke keuzes hebben jullie gemaakt tijdens het project en waarom?
    • Welke beslissingen zijn genomen, en hoe hebben deze bijgedragen aan het eindresultaat?
  • Werkverdeling en samenwerking:
    • Hoe hebben jullie het werk verdeeld?
    • Hoe is de samenwerking binnen het team verlopen? (Bijvoorbeeld: taakverdeling, communicatie, verantwoordelijkheden.)
Werk het verslag elke les bij. Noteer telkens als je er aan werkt duidelijk de datum!

Reflectie

In het reflectiegedeelte reflecteren jullie op het proces en kijken jullie terug op jullie aanpak. Hierin beschrijf je:

  • Uitdagingen en problemen:
    • Welke problemen zijn jullie tijdens het project tegengekomen?
    • Wat waren de oorzaken van deze problemen?
  • Oplossingen:
    • Hoe hebben jullie deze problemen opgelost?
    • Wat hebben jullie hiervan geleerd?
  • Samenwerking:
    • Hoe effectief was de samenwerking binnen het team?
    • Waren er momenten waarop jullie samenwerking verbeterd kon worden? Zo ja, hoe hebben jullie dat aangepakt?
  • Eigen leerproces:
    • Wat heb je persoonlijk geleerd van dit project?
    • Wat zou je de volgende keer anders doen in een vergelijkbaar project?
 

Belang van het verslag

Een goed verslag toont niet alleen de inhoudelijke kwaliteit van jullie werk, maar ook hoe jullie als team hebben samengewerkt en problemen hebben opgelost. Zorg ervoor dat het verslag:

  • Overzichtelijk en goed gestructureerd is.
  • In duidelijke taal geschreven is.
  • Een eerlijke weergave geeft van het proces, inclusief uitdagingen en oplossingen.
 

Let op:
De leraar observeert tijdens de lessen hoe jullie (samen)werken, communiceren en problemen oplossen. Daarnaast wordt ook gekeken of jullie deadlines halen en het werk op de juiste manier inleveren. Dit alles telt mee in de beoordeling van het proces.

Game analyseren

Voordat je begint met het ontwerpen en bouwen van je eigen spel, is het belangrijk om te begrijpen hoe een spel in elkaar zit.
Door een bestaand spel te analyseren, krijg je inzicht in de doelen, regels en interacties die een spel leuk en uitdagend maken.
Deze analyse vormt de basis voor je eigen ontwerp en helpt je om gerichte keuzes te maken tijdens het ontwikkelproces.

Tijdens deze opdracht werk je samen met je teamgenoot om jullie spel te onderzoeken.
Door kritisch te kijken naar de werking en opzet van het spel, ontdek je wat er nodig is om een goed werkend en aantrekkelijk spel te maken. Gebruik deze inzichten om straks zelf aan de slag te gaan!

Neem de tijd om het gekozen spel zorgvuldig te analyseren en bespreek je bevindingen goed met je teamgenoot.
Jullie analyse zal namelijk de fundering vormen voor de verdere uitwerking van jullie eigen spel.

Tijdens het maken van de analyse zul je merken dat de voorbeelden die bij deze opdracht gegeven worden heel minimalistisch zijn.
Wellicht kun je functionaliteit die het spel leuker of uitdagender maken, bijvoorbeeld spelersnamen toevoegen. bedenken.
Leg oook deze toevoegingen vast in je analyse en neem het mee naar de volgende stap (Eisen functionaliteit)

Opdracht:

Analyseer het spel en beantwoord de volgende vragen:

  • Wat is het doel van het spel?
  • Welke spelregels zijn er?
  • Welke interacties heeft de speler (bijvoorbeeld klikken, bewegen)?
  • Leg je bevindingen vast in een werkdocument. Voeg screenshots toe als voorbeelden.
 

Resultaat: Een document met de analyse.
Deadline: 10 januari.

Eisen functionaliteit bepalen

Voordat je begint met het ontwikkelen van je spel, is het belangrijk om helder te hebben wat je spel precies moet kunnen.
Dit doe je door de functionele eisen van je spel vast te stellen.
Functionele eisen beschrijven wat het spel moet doen om goed te werken en de spelers een leuke ervaring te bieden.  

Door deze eisen vooraf duidelijk te formuleren, voorkom je dat je tijdens het ontwikkelen belangrijke zaken over het hoofd ziet.
Het helpt je ook om je ontwerp en code overzichtelijk te houden.
Denk bijvoorbeeld aan hoe de speler het spel bestuurt, welke acties er mogelijk zijn, en hoe het spel reageert op bepaalde situaties.  

Deze opdracht is een belangrijke stap in het ontwikkelproces.
De lijst met eisen die je nu opstelt, gebruik je later als leidraad bij het ontwerpen en programmeren van je spel.
Zorg dat de eisen haalbaar, duidelijk en volledig zijn. 

Opdracht:

Maak een lijst van minimaal 5 functionele eisen voor je spel. Denk hierbij aan:

  • Wat moet het spel kunnen (bijvoorbeeld “De speler moet punten kunnen scoren”)?
  • Welke interacties zijn noodzakelijk (bijvoorbeeld “De speler moet met pijltjestoetsen kunnen bewegen”)?
 

Resultaat: Een lijst met functionele eisen.
Deadline: 10 januari.

Doelgroep bepalen / beschrijven

Een goed spel begint met een duidelijk beeld van de spelers waarvoor je het maakt.
De doelgroep bepaalt namelijk veel aspecten van je ontwerp: de moeilijkheidsgraad, de stijl, de interacties en zelfs de sfeer van het spel. Als je weet wat je doelgroep leuk en interessant vindt, kun je een spel maken dat hen echt aanspreekt.

Tijdens deze opdracht ga je nadenken over wie jouw spel gaat spelen.

  • Wat is hun leeftijd?
  • Wat zijn hun interesses?
  • En wat zoeken ze in een spel?

Je beschrijft deze doelgroep op een manier die jou en je teamgenoot helpt om keuzes te maken die passen bij hun wensen en verwachtingen.

Deze beschrijving vormt straks de basis voor het ontwerp en de stijl van je spel.
Neem de tijd om je doelgroep goed te definiëren en wees creatief.

Opdracht:

  • Bepaal wie jouw spel gaat spelen. Beantwoord de volgende vragen:
    • Wat is de leeftijdsgroep?
    • Wat zijn hun interesses?
    • Wat vinden ze belangrijk in een spel (bijvoorbeeld uitdaging, snelheid, humor)?
  • Beschrijf je doelgroep in 100-150 woorden. Geef ze een naam, bijvoorbeeld “De jonge avonturiers” of “De puzzelmeesters”.
 

Resultaat: Een korte doelgroepbeschrijving met een creatieve naam.
Deadline: 31 januari.

Het geven van een naam aan een doelgroep is niet per se gebruikelijk in professionele contexten, maar het wordt soms gedaan in creatieve of educatieve settings om het proces toegankelijker en leuker te maken. In professionele marketing of productontwikkeling wordt vaak gewerkt met persona’s—fictieve representaties van doelgroepen—die een naam krijgen (zoals “Jonge Avonturier Anna” of “Technologie Enthousiasteling Tom”). Dit helpt teams om de doelgroep meer tot leven te brengen en zich beter in hen in te leve.

Moodboard

Met een goed moodboard kun je een duidelijke visie ontwikkelen die het werkproces stroomlijnt en zorgt voor een consistent ontwerp in zowel het spel als de webpagina waarin het spel opgenomen wordt.
Het uitgangspunt is natuurlijk de doelgroep die je beschreven hebt.
Het moodboard bevat minimaal de volgende onderdelen:

  • Afbeeldingen en Illustraties
    • Inspirerende afbeeldingen die de sfeer en het thema van het spel weergeven.
  • Kleurenschema
    • Een palet van 3-5 hoofdkleuren die consistent gebruikt worden in het spel en op de webpagina.
    • Denk aan kleuren die passen bij het thema (bijvoorbeeld levendige kleuren voor een vrolijk spel, donkere kleuren voor een mysterieus spel).
  • Typografie
    • Voorbeelden van lettertypes (fonts) die worden gebruikt in het spel en op de webpagina.
    • Suggesties voor koppen, subkoppen, en bodytekst (bijvoorbeeld speelse fonts voor titels en strakke fonts voor de tekst).
  • Stijl en Thema
    • Beschrijvende woorden of korte zinnen die het gevoel of de sfeer van het spel aangeven (bijvoorbeeld: “avontuurlijk”, “grappig”, “snel”).
    • Inspiratie uit bestaande spellen of ontwerpen (met credits als ze direct zijn overgenomen).
  • UI-elementen
    • Voorbeelden van knoppen, menu’s, en andere grafische elementen uit games of webdesigns.
    • Denk aan stijlen voor scoreborden, timers, of navigatiebalken.
  • Inspiratie voor Animaties (optioneel)
    • Als het spel animaties bevat, kunnen voorbeelden van bewegingsstijlen toegevoegd worden. Denk aan hoe objecten bewegen, verschijnen of verdwijnen.
 

Opdracht: Maak een moodboard voor je spel dat aan bovenstaande eisen voldoet.

Resultaat: Een moodboard dat kan dienen als basis voor het spel.
Deadline: 31 januari.

Er zijn verschillende gratis online tools waarmee je moodboards kunt maken voor webdesign en gamedesign. Hier zijn enkele  geschikte opties:

Visueel ontwerp

Een goed ontwerp kan je spel maken of breken. Het visuele ontwerp is namelijk het eerste wat spelers zien en speelt een belangrijke rol in de aantrekkingskracht van je spel.
Met het juiste design zorg je ervoor dat jouw spel duidelijk, aantrekkelijk en prettig speelbaar is.

In dit onderdeel ga je jouw creatieve ideeën omzetten in een visueel ontwerp dat past bij de doelgroep en het moodboard.
Denk hierbij aan de plaatsing van knoppen, scores en andere elementen, maar ook aan kleuren, typografie en visuele details die jouw spel uniek maken.

Je zorgt voor een samenhangend ontwerp dat zowel functioneel als aantrekkelijk is.
Dit ontwerp vormt de basis voor het stylen en afronden van je project.
Laat je creativiteit de vrije loop en maak iets waar je trots op kunt zijn!

Opdracht:

  • Maak een ontwerp (op papier of digitaal) van hoe de webpagina en jullie spel eruit moeten zien.
    • Waar komen de knoppen, scores, en andere elementen?
    • Hoe wordt het spel visueel aantrekkelijk?
  • Bespreek het ontwerp in je team en met andere teams.
  • Verwerk feedback en finaliseer je ontwerp.
  • Het ontwerp is een precieze weergave van het definitieve spel.
 

Resultaat: Een uitgewerkt ontwerp van het design.
Deadline: 7 februari.

Flowchart

Voordat je begint met programmeren, is het belangrijk om een helder overzicht te hebben van hoe je spel werkt.
Een flowchart helpt je om het proces van je spel stap voor stap in kaart te brengen.
Dit geeft je inzicht in de verschillende acties van de speler, de mogelijke uitkomsten en hoe het spel daarop reageert.

Met een flowchart maak je je ideeën concreet en logisch.
Het is een visuele weergave van het spelproces, waarin je aangeeft wat er gebeurt vanaf het moment dat de speler begint tot het einde van het spel.
Als je spel complex is, kun je het proces opdelen in kleinere flowcharts om alles overzichtelijk te houden.

Een goede flowchart is als een blauwdruk: het helpt je later bij het programmeren en zorgt ervoor dat je niets belangrijks over het hoofd ziet.
Zorg ervoor dat je flowchart compleet, duidelijk en logisch opgebouwd is.

Opdracht:

  • Teken een flowchart van het spelproces. Gebruik bijvoorbeeld Lucidchart of een ander flowchartprogramma.
    • Begin met het startpunt (bijvoorbeeld: “Speler drukt op Start”).
    • Geef alle mogelijke acties en uitkomsten weer (bijvoorbeeld: “Speler scoort een punt” of “Speler verliest”).
    • Als de flowchart te complex dreit te worden mag je het opdelen  in afzonderlijke flowcharts waarin je de afzonderlijke problemen oplost. Zorg wel voor een duidelijke en logische samenhang tussen de sub-flowcharts.
  • Controleer je flowchart:
    • Is elke stap duidelijk?
    • Zijn alle mogelijke acties van de speler verwerkt?
  • Dubbelcheck je flowchart:
    • Laat een ander team je flowchart bekijken en feedback geven.
    • Verwerk de feedback in je flowchart.
 

Resultaat: Een volledige flowchart van het spel.
Deadline: 14 februari.

Programmeren

Nu je een duidelijk beeld hebt van hoe je spel moet werken, is het tijd om te beginnen met programmeren!
In deze opdracht schrijf je het JavaScript-script dat de basisfunctionaliteit van je spel mogelijk maakt.
Dit script is de motor van je spel: het zorgt ervoor dat acties van de speler worden verwerkt, het spel reageert zoals gepland, en dat alles soepel verloopt.

Een belangrijk aspect van deze opdracht is dat je script voorzien moet zijn van comments.
Comments zijn korte stukjes uitleg in je code die beschrijven wat een bepaald deel van de code doet.
Dit maakt je script niet alleen overzichtelijker voor jezelf, maar ook voor anderen die je code bekijken.
Goed gebruik van comments laat zien dat je je code begrijpt en maakt het makkelijker om je werk later aan te passen of uit te breiden.

Begin met de kernfunctionaliteit van je spel, zoals starten, stoppen, en reageren op invoer. Bouw daarna stap voor stap verder.
Test je script regelmatig om ervoor te zorgen dat alles werkt zoals bedoeld. 

Tijdens het programmeren zul je tegen problemen oplopen die wat moeilijker op te lossen zijn.
Het is toegestaan om bij het zoeken naar oplossingen hiervoor het internet of AI te gebruiken.
Zorg er dan we voor dat je de code die je gebruikt echt begrijpt en je inzicht in de werking van die code vastlegt in comments.
Het is aan te raden om hulpprogramma’s te vragen om de code zo weinig mogelijk abstract te maken.
Beschrijf in je verslag duidelijk 

  • Welke problemen je tegen bent gekomen.
  • Hoe je de oplossing daarvoor gezicht hebt 
  • en waar je die gevonden hebt
  • Hoe je die toegepast hebt
Als je AI gebruikt neem je ook de prompt die je geschreven hebt op in je verslag.

Veel succes met deze essentiële stap in het ontwikkelen van je spel!

Opdracht:

  • Gebruik je flowchart en eisen om een JavaScript-script te schrijven voor de basisfunctionaliteit van je spel.
    • Begin met de kern: hoe start en eindigt het spel?
    • Voeg interacties toe (bijvoorbeeld klikken of toetsen indrukken).
  • Test je script regelmatig en noteer problemen die je tegenkomt.
  • Zorg dat het spel aan de functionele eisen voldoet.
    Een volledig design is nog niet nodig.
  • Voorzie het script van comments die de werking verklaren.
 

Resultaat: Een werkend script met alle functionaliteit van het spel.
Deadline: 14 maart.

De game stylen

Nu de basisfunctionaliteit van je spel klaar is, is het tijd om ervoor te zorgen dat je spel er niet alleen goed werkt, maar er ook goed uitziet.
Met CSS geef je je spel de unieke uitstraling die je eerder in het visueel ontwerp hebt vastgesteld.
Een goed design maakt je spel aantrekkelijker en helpt spelers om het spel beter te begrijpen en te beleven.

Bij het stylen van je spel kun je denken aan het gebruik van kleuren, afbeeldingen, en lettertypes.
CSS biedt veel mogelijkheden om knoppen, tekst en andere elementen vorm te geven.
Zorg ervoor dat je design consistent is met het moodboard en het visueel ontwerp.
Blijf je werk regelmatig testen om te zien hoe je CSS en JavaScript samen functioneren.

Met deze opdracht geef je de finishing touch aan je spel, zodat het niet alleen technisch, maar ook visueel professioneel en uitnodigend is. 

Opdracht:

  • Gebruik CSS om de gekozen stijl toe te passen op je spel.
    Denk aan:
    • Achtergrondkleuren en -afbeeldingen.
    • Stijlen voor knoppen, tekst, en scoreborden.
       

Resultaat: Een gestyled spel dat er professioneel uitziet.
Deadline: 14 maart.