JSFiddle - React, Tailwind, and code Playground
CSS
body{
margin: 0px;
padding; 0px;
}
JavaScript
// Breaker of demolition basis game
// door Hjalmar Snoep.
// global scope variables
// dit object gaat alle andere objecten bevatten!
var game={};
var graphics={};
startgame(); // voer blokje code startgame uit.
// einde programma.
// codeblokje start game.
function startgame()
{
defineGraphics();
// 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";
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.
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);
// zet mouse catch aan.
$(document).mousemove(catchMouse);
// zet animatie aan: gameloop iedere 25 milliseconden.
game.loop=setInterval(gameloop,25);
}
function stopGame()
{
clearInterval(game.loop);
console.log("game stopped");
}
// functie om alle beweging van de balk te doen.
function moveHero()
{
// alles met de hero (balk)
// maak hero.x gelijk aan mouse.x;
objectMoveTowardsObject(game.hero,game.mouse,15);
game.hero.y=game.room.h-game.hero.h; // hero blijft onderaan
restrictObjectInObject(game.hero,game.room);
// zet positie van balk in pagina op hero.x, hero.y
actuateChanges(game.hero);
}
// functie om alle beweging van de bal te doen.
function moveBal()
{
// alles met de...