htmlPlayground/playground.js

"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);