commit e32536686132742217de2fa8d798257cc8aef02e Author: Tarik Hijstek Date: Sun Aug 14 11:03:03 2022 +0200 init diff --git a/playground.html b/playground.html new file mode 100644 index 0000000..a81ad68 --- /dev/null +++ b/playground.html @@ -0,0 +1,13 @@ + + + + + + +

+ FPS: + + +

+ \ No newline at end of file diff --git a/playground.js b/playground.js new file mode 100644 index 0000000..dc2a3b1 --- /dev/null +++ b/playground.js @@ -0,0 +1,165 @@ +"use strict" +let fps = 0; +const logicTickRate_ms = 100; + +//Rending the +const render = (time) => { + fps += 1; + ctx.clearRect(0,0, c.width, c.height); + drawables.forEach(d => { + ctx.save(); + d.draw(d, ctx); + ctx.restore(); + }); +} + +const renderLoop = (time) => { + requestAnimationFrame(renderLoop); + render(time); +} + +const logicLoop = () => { + // Update the world state. + + //Iterate over drawables, and do something fun with them + drawables = drawables + .map((d) => { + switch(d.name) + { + case "bug": + //jiggle the bug + return { + ...d, + position: { + x: clamp(d.position.x + randomIntInclusive(-5, 5), 0, c.width - d.width), + y: clamp(d.position.y + randomIntInclusive(-5, 5), 0, c.height - d.height) + } + } + case "bouncer": + //Bounces around like the dvd logo. + return { + ...d, + position: dvdBounce(d) + } + default: + return d; + } + }); + + function dvdBounce(drawable){ + if((drawable.position.x) <= 0){ + drawable.direction[0] = 1; + } + if((drawable.position.x + drawable.size) >= c.width){ + drawable.direction[0] = -1; + } + if((drawable.position.y) <= 0){ + drawable.direction[1] = 1; + } + if((drawable.position.y + drawable.size) >= c.height){ + drawable.direction[1] = -1; + } + + + return { + x: drawable.position.x + (drawable.direction[0] * drawable.speed), + y: drawable.position.y + (drawable.direction[1] * drawable.speed) + } + } + + setTimeout(logicLoop, logicTickRate_ms) +} + +//Print debugging info +setInterval(()=> { + document.getElementById("FPS").textContent = `FPS: ${fps}`; + fps = 0; +}, 1000, fps) + +// ================== // +// Events +window.onresize = (event) =>{ + fixCanvasStyle(c); +} +const addBug = () => { + drawables.push({ + name: "bug", + position: { + x: randomIntInclusive(0, c.width), + y: randomIntInclusive(0, c.height) + }, + width: 10, + height: 15, + draw: (self, ctx) => ctx.fillRect(self.position.x, self.position.y, self.width, self.height) + }); +} +const addBouncer = () => { + drawables.push({ + name: "bouncer", + position: { + x: randomIntInclusive(0, c.width), + y: randomIntInclusive(0, c.height) + }, + size: 30, + colour: "#f22", + speed: 10, + direction: [1,1], //Vector x,y + draw: (self, ctx) =>{ + ctx.fillStyle = self.colour; + ctx.fillRect(self.position.x, self.position.y, self.size, self.size) + } + + }); +} + +// ================== // +// Utils +function randomIntInclusive(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive +} +function fixCanvasStyle(canvas){ + //Canvas met een hoogte/breedte gezet via css schaalt het canvas naar de juiste groote + // met deze functie vergroot je het aantal pixels in het canvas. + const cStyle = getComputedStyle(canvas); + const stripNonDidgits = /[^\d.-]/g; + + canvas.height = cStyle.height.replace(stripNonDidgits,'') + canvas.width = cStyle.width.replace(stripNonDidgits,'') +} +function clamp(value, min, max){ + if(value > max) return max; + if(value < min) return min; + return value; +} + + +// ================== // +// Setup + +// The array containing all our drawable objects. +let drawables = [{ + name: "wall", + position: { + x: 100, + y: 140 + }, + thickness: 10, + draw: ()=>{} +}] + +const c = document.getElementById("c") // The canvas +const ctx = c.getContext('2d'); // The rendering context of the canvas +fixCanvasStyle(c); + +// Add a couple moving things for fun +addBug(); +addBug(); +addBug(); +addBouncer(); +addBouncer(); + +//start de logic & rendering loops +logicLoop(); +window.requestAnimationFrame(renderLoop); diff --git a/style.css b/style.css new file mode 100644 index 0000000..d8fed5c --- /dev/null +++ b/style.css @@ -0,0 +1,20 @@ +*{ + box-sizing: border-box; + padding: 0; + margin: 0; +} +body { + background-color: #ddd; + display:grid; + grid-template-areas: "canvas canvas canvas" + "canvas canvas canvas" + "debug controls controls"; + height: 100vh; +} +body > { + display:grid; +} +canvas{ + height: 100%; + width: 100%; +} \ No newline at end of file