JSFiddle - React, Tailwind, and code Playground

JavaScript

// Breaker of zo u wilt.. demolition 
// basis game demo
// geluid, graphics en programmeren
// door Hjalmar Snoep.

// global scope variables 
// dit object gaat alle andere objecten bevatten!
var game={};
var graphics={}; // deze worden helemaal onderaan gedefinieerd
var sounds={};// deze worden helemaal onderaan gedefinieerd
initGamePage(); // dit zorgt ervoor dat alles gaat werken.
                // ik heb een aantal algemene game-functies
                // geschreven, die het makkelijker maken
                // games te maken.


startgame(); // voer blokje code startgame uit.
// einde programma.

// codeblokje start game.
function startgame()
{
    // initieert waardes voor alle objecten
    // create mouse for reference, do not place on page.
    // deze functie (en meer) vind je helemaal onderaan.
    createObject("mouse");

    // create room and place in game
    createObject("room");
    game.room.w=300; // room width height
    game.room.h=250;
    game.room.col="#ccc";
    game.room.img="back";
    createOnPage(game.room);
    
    // create room and place in game
    createObject("hero");
    game.hero.w=50; // hero width height
    game.hero.h=20;
    game.hero.col="#f00";
    game.hero.x=game.room.w/2-game.hero.w/2; // hero begint in midden
    game.hero.y=game.room.h-game.hero.h; // hero begint onderaan.
    game.hero.img="hero";
    createOnPage(game.hero);
    
    createObject("bal");
    game.bal.w=20; // hero width height
    game.bal.h=20;
    game.bal.dx=2; // bal start met x-snelheid  2
    game.bal.dy=2; // bal start met x-snelheid  2
    game.bal.col="#ff0";
    game.bal.img="bal";
    createOnPage(game.bal);
   
    // creer een aantal blokjes.
    // met een geneste loop. 
    // de x gaat van 0 to 5, voor iedere x
    // gaat de y van 0 tot 3, resulterend in 15 blokjes.
    var x,y;
    game.blocks=[]; // dit is een array.
    // in een array sla je objecten achter elkaar op.
    // je kunt ze dan aanspreken als bijvoorbeeld
    //...