Skip to content
Terug naar Blog
WebCraft: Een Minecraft-Kloon in Pure JavaScript

WebCraft: Een Minecraft-Kloon in Pure JavaScript

Alexandru Maftei
Alexandru Maftei
@ice
Updated
1 weergaven
TL;DR:WebCraft is een JavaScript-gebaseerde Minecraft Classic-kloon die in je browser draait met WebGL en WebSockets. Geen frameworks, minimale afhankelijkheden. Het is ideaal voor het leren van voxel-game development, hoewel het niet langer actief wordt onderhouden.

"Minecraft-kloon geschreven in Javascript."

Overv/WebCraft · github.com
⭐ 418 sterren💻 JavaScript📄 Zlib

Heb je ooit nagedacht over wat er nodig is om een Minecraft-ervaring volledig in je browser te bouwen? WebCraft is precies dat: een JavaScript-gebaseerde Minecraft-kloon die via WebGL en WebSockets draait en alleen een moderne webbrowser vereist. Het biedt niet de volledige survival-ervaring die je van het officiële spel kent, maar als je benieuwd bent hoe op blokken gebaseerde voxel-werelden werkelijk werken, is dit project echt verhelderend.

Wat WebCraft Is

WebCraft is een Minecraft Classic-recreatie gebouwd van nul af aan met vanilla JavaScript. Geen Three.js, geen Babylon.js, geen zware 3D-frameworks. Eerlijk gezegd bouwde de ontwikkelaar de rendering pipeline rechtstreeks bovenop WebGL, wat hardcore klinkt totdat je beseft dat het veel efficiënter is voor het renderen van duizenden statische blokken dan een volledige game engine mee te slepen.

Het project biedt zowel single-player als multiplayer modus. Multiplayer maakt gebruik van Node.js op de backend met WebSockets om speleracties tussen verbonden clients te synchroniseren. Wat ik het meest interessant vond, is hoe minimaal de afhankelijkheden zijn. Je hebt glmatrix voor wiskundige bewerkingen en socket.io voor netwerken, en dat is het. Al het andere is aangepaste code.

Eén belangrijk ding om meteen te vermelden: dit project wordt niet meer actief onderhouden. De repository bestaat en de code is er, maar verwacht geen regelmatige updates of actieve ondersteuning. Voor educatieve doeleinden of experimenteren? Het is van onschatbare waarde. Voor een production multiplayer-server? Kijk elders.


Waarom Dit Belangrijk Kan Zijn

Er zijn een paar goede redenen om naar WebCraft te kijken, afhankelijk van wat je zoekt. Als je game development of graphics programming leert, is dit goud waard. Je ziet hoe iemand een voxel-gebaseerde wereld heeft gestructureerd, rendering performance beheert, physics (zwaartekracht, vloeistofstroming) afhandelt en game state over clients synchroniseert. Niets ervan is verborgen achter een propriëtaire engine.

Wil je gewoon Minecraft in je browser spelen zonder iets te installeren? Zeker, de ervaring is er. Je kunt werelden creëren, blokken plaatsen en verwijderen, en als je een server opzet, met vrienden spelen. Maar ik zal eerlijk met je zijn: het is een Classic-kloon, niet modern Minecraft. Geen survival-mechanics, geen mobs, geen vooruitgang. Het lijkt meer op creative mode in een versimpelde vorm.

Studenten die capstone-projecten rond game development bouwen of iedereen die een voxel-gebaseerd gameconcept prototypet, kan veel leren door de codebase door te nemen. De architectuur is schoon genoeg dat je kunt volgen hoe een blok in de wereld wordt geplaatst helemaal tot het renderen op het scherm.


Hoe de Architectuur Werkt

Het project is georganiseerd in modulaire JavaScript-bestanden, elk met een specifieke laag van het spel. Deze World module bevat de blokgegevens voor je volledige kaart. Beschouw het als een 3D-array die bijhoudt wat zich op elke coördinaat bevindt. De Render module neemt die gegevens en zet ze om in chunks (eigenlijk groepen blokken) en voert die vervolgens in aan WebGL voor weergave.

Fysica-simulatie draait apart. Zwaartekracht trekt vallende blokken naar beneden, water en lava stromen volgens eenvoudige regels, en collision detection voorkomt dat je door het terrein valt. Het is geen complexe fysica, maar het werkt voor een op blokken gebaseerde wereld.

Spelerinvoer wordt afgehandeld door de Player module, die je inventaris, momenteel geselecteerde bloktype en beweging bijhoudt. Aan de multiplayer-kant vergelijkt de Network module je lokale wereldtoestand met wat de server weet en synchroniseert wijzigingen over alle verbonden spelers zodat iedereen hetzelfde ziet.

Blokken zelf zijn aanpasbaar via de Blocks module, waar je materiaaleigenschappen zou definiëren zoals kleur, of licht erdoorheen gaat en hoe het wordt weergegeven. Als je nieuwe bloktypen wilde toevoegen of bestaande zou willen wijzigen, zou je daar beginnen.


Het Opzetten (Als Je Het Wilt Proberen)

De single-player versie is eenvoudig. Je clont de repository en opent vervolgens singleplayer.html in een moderne browser. Geen build-stap, geen node_modules-nachtmerrie. Klaar.

Voor multiplayer heb je Node.js nodig geïnstalleerd (het project richt zich op oudere versies, maar elke recente LTS zou moeten werken). Installeer afhankelijkheden met npm en start de server:

bash
npm install
node server.js

Zodra de server draait, open je multiplayer.html in je browser en deze zal verbinding maken. Je kunt vervolgens meerdere browservensters op dezelfde server openen om multiplayer te testen, of de verbindings-URL met anderen op je lokale netwerk delen. Extern spelen via het internet zou wat netwerksetup nodig hebben (port forwarding of ngrok), wat verder gaat dan wat het project documenteert maar zeker mogelijk is.

Als iets kapot gaat of je wilt teruggaan naar vanilla Minecraft, sluit je gewoon het browsertabblad. WebCraft draait volledig in geheugen en de WebGL-context van de browser, dus niets wordt opgeslagen of wijzigt je systeem. Geen voetafdruk om op te schonen.


Wat Het Opvallend Maakt

Een voxelrenderer van nul af aan bouwen is niet triviaal. Het feit dat dit zonder grafische bibliotheek wordt gedaan, is het hoogtepunt. WebGL is laag genoeg dat je precies ziet hoe chunkgeometrie wordt gegenereerd, hoe vlakken worden weggelaten (niet getekend als ze verborgen zijn) en hoe verlichtingsberekeningen werken.

Single-player structuur
Single-player structuur

De multiplayer-setup is sober. Socket.io handelt de ingewikkelde delen van bidirectionele communicatie af, maar je ziet nog steeds hoe game state wordt geserialiseerd, over de verbinding verzonden en aan de client-zijde afgestemd. Dat is een praktisch netwerkprobleem dat de meeste game-tutorials voorbijgaan.

Een ander detail dat ik waardeerde: het project belast zichzelf niet met veel functies. Het concentreert zich op de kernlus van blokken plaatsen, de wereld renderen en spelers synchroniseren. Geen GUI-framework, geen animatiebibliotheek, geen packagebloat. Je leest iemands pragmatische implementatiebeslissingen, geen framework-showcase.


Beperkingen Die Je Moet Weten

Prestatie is het grote knelpunt. Afhankelijk van je hardware en browser, kan je gaan stotteren als je echt grote structuren bouwt of massieve werelden genereert. Het renderen van duizenden kubussen is mogelijk, maar niet oneindig schaalbaar. Verwacht dat dit soepel draait op moderne machines met kleinere speelgebieden, en misschien wat haperingen als je het hard pusht.

Er is geen persistentie ingebouwd. Vernieuw de pagina of herstart de server en je wereld is weg. Als je permanente werelden wilt, zou je zelf databaselogica moeten toevoegen. Hetzelfde geldt voor server configuratie, admin tools of gebruikersverificatie. Het is een skelet, geen compleet serverproduct.

De Classic-mode beperking betekent geen survival-elementen, geen mob-AI, geen dungeons of loot. Als je het vergelijkt met modern Minecraft, mist het bijna alles behalve de kernbouwmechanica. Dat is geen fout, alleen een realistische scopebegrenzing die het project stelde en zich aan hield.

O, en browsercompatibiliteit. Dit is gebouwd voor het WebGL-tijdperk, dus zeer oude browsers werken niet. Alles uit het afgelopen decennium zou prima moeten werken, maar verwacht niet dat het op Internet Explorer of oude Android-apparaten draait.


Als Je Vergelijkbare Projecten Wilt

Er zijn enkele alternatieven die het waard zijn om te kennen. Minecraft zelf biedt een gratis versie genaamd Minecraft Classic aan via hun website als je gewoon de officiële ervaring wilt. Het is ook browser-gebaseerd, officieel onderhouden en voelt meer gepolijst.

Als je specifiek geïnteresseerd bent in het leren van voxel-game development, zijn er schonere startprojecten. Sommige mensen raden aan om naar Voxel.js te kijken of zelfs te beginnen met een Python-bibliotheek zoals Panda3D als je een ander taal prefereert. Deze hebben meestal actiever gemeenschappen en actuele documentatie.

Voor Minecraft-mods en -tools onderhoudt onze gemeenschap lijsten van geteste servers en skins als je nieuwsgierig bent naar het uitbreiden van vanilla Minecraft. Onze Votifier Tester en Text Generator tools kunnen je helpen bij het beheren van servers en het maken van aangepaste inhoud zonder in JavaScript te duiken.


Mijn Mening

WebCraft vervult een heel specifieke rol. Als je wilt begrijpen hoe een op blokken gebaseerd spel werkelijk werkt, of je leert web graphics en game loops, is het een paar uur exploratie waard. De code is leesbaar, de architectuur is degelijk, en je gaat weg met meer kennis dan je begon.

Voor casual spelen? Blijf bij officiële Minecraft. Voor leren? Dit is degelijk. Het feit dat het niet meer wordt onderhouden doet er niet echt toe voor educatieve doeleinden. De code verdwijnt niet, en wat er is, is goed doordacht.

Het is een van die projecten die bewijzen dat een capabele ontwikkelaar geen framework nodig heeft om iets interessants te bouwen. Gewoon vaardigheden, helder denken en een degelijk begrip van het probleem. Dat alleen maakt het al waard om te weten dat het bestaat.

Overv/WebCraft - Zlib, ⭐418
About the author
Alexandru Maftei
Alexandru MafteiLead Writer

Lead writer at minecraft.how. Long-time Minecraft player running a small SMP server, testing every build, mod, and seed before writing about it.

Share with your friends!