Educatieve 3D-browsergame
Cyber Detective
Cyber Detective is een first-person 3D-browsergame waarin jongeren online risico's leren herkennen door zelf digitale zaken op te lossen. Spelers betreden een futuristische Cyber Hub, kiezen missies en onderzoeken bewijs in een virtueel kantoor.
Uitdaging
Het project moest cyberveiligheid begrijpelijk maken voor jongeren van ongeveer 10 tot 15 jaar, zonder dat het voelt als een lange theorieles. De uitdaging zat daarom niet alleen in de techniek, maar ook in de didactische vorm: spelers moesten verdachte en betrouwbare situaties kunnen vergelijken, bewijs verzamelen en merken waarom een keuze veilig of juist riskant is.
Mijn aanpak
Ik koos voor een volledig client-side browsergame, zodat het project makkelijk te hosten en te spelen blijft via GitHub Pages. De Cyber Hub werkt als startpunt voor missies, terwijl het virtuele kantoor de onderzoeksscène vormt. Iedere missie is opgebouwd rond vier bewijsstukken, praktijksituaties en directe feedback, zodat de speler niet alleen leest wat goed is, maar het zelf beoordeelt.
Educatief ontwerp
De game draait om leren door keuzes te maken. De missies behandelen phishing, game-scams, sterke wachtwoorden, veilig chatten, nepwebshops, verdachte QR-codes, nepnieuws en AI-beelden, gehackte accounts, onveilige downloads, online privacy, cyberpesten, nephelpdesks, openbare wifi, valse betaalverzoeken, appmachtigingen en online manipulatie. Na iedere keuze krijgt de speler uitleg, zodat fouten onderdeel worden van het leerproces.
Belangrijkste functionaliteiten
- First-person WASD-besturing met muisbesturing en lichte sprint.
- 16 cybermissies met vier bewijsstukken per missie.
- Contextgevoelige interacties, botsingen en eindoordelen met score en uitleg.
- 22 achievements en lokale voortgang via localStorage.
- Gepagineerde, scrollvrije missie- en achievementmenu's.
- Instelbaar volume, ondertiteling en een optie voor minder beweging.
Technieken
De game is gebouwd met Vite, vanilla JavaScript, Three.js, HTML, CSS, WebGL, Web Audio API, localStorage, GLTF/GLB-assets, GitHub Actions en GitHub Pages. Ik koos bewust voor vanilla JavaScript in plaats van een framework, omdat de kern van dit project vooral draait om rendering, input, gamestate, performance en modulaire spelstructuur.
Technische keuzes
De code is modulair opgezet rond rendering, input, speler, wereld, audio, opslag, missies, achievements en UI. Voor performance gebruikte ik adaptieve renderkwaliteit, selectieve schaduwen en opruimen van GPU-resources bij levelwissels. Relatieve assetpaden zorgen ervoor dat de game betrouwbaar werkt op GitHub Pages.
Leerpunten
Cyber Detective liet goed zien hoe belangrijk de balans is tussen spel en uitleg. Te veel tekst haalt tempo uit de ervaring, maar te weinig context maakt het leerdoel zwakker. Door feedback direct na keuzes te tonen, blijven spelers actief betrokken en wordt online veiligheid concreter.
Resultaat
Het resultaat is een kleurrijke low-poly cyberwereld waarin jongeren op een toegankelijke manier oefenen met digitale risico's. De combinatie van 3D-gameplay, educatieve missies, achievements, toegankelijkheidsopties en performance-optimalisatie maakt het project meer dan een technische demo: het is een interactieve leerervaring die laat zien hoe front-end development ook gedrag en bewustwording kan ondersteunen.
Credits
Voor de kantooromgeving zijn assets uit The Office Pack via Poly Pizza gebruikt, met CC-BY-vermelding. De Cyber Hub, missies, interacties, UI, voortgang, achievements en deployment zijn door mij ontworpen en gebouwd.