game loop html5 javascript

gameLoop.js

const canva = document.getElementById('canva');
let ctx = canva.getContext('2d');

load();
let interval = setInterval(run,1000/60);

function run()
{
    update();
    draw();
}

function load()
{

}
function update()
{

}
function draw()
{

}

gameLoop2a.js

//juste run() ,init()
//main.js
const canva = document.getElementById('canva');
let ctx = canva.getContext('2d');
let interval;

canva.width = 400
canva.height = 400

function run()
{
    
    update();
    ctx.clearRect(0,0,canva.width,canva.height);
    draw(ctx);
}
function init()
{
    
    load();
    interval = setInterval(run,1000/60);
}
init();

gameloop2b.js

//load() , update() , draw() 
//game.js
let img;
let img2;

function load()
{
    img = new Sprite("images/satellite_C.png");
    img2 = new Sprite("images/satellite_C.png",100,50);
}
function update()
{
    img.x +=1;
    img.y +=1;
    img2.y += 1;
}
function draw(pCtx)
{
    img.draw(pCtx)
    img2.draw(pCtx)
}

gameloop2c.js

//create Spite object
class Sprite {
    constructor(pSrc,pX = 0 ,pY = 0){
        this.img = new Image();
        this.img.src = pSrc;
        this.x = pX;
        this.y = pY;
    }
    draw(pCtx){
        pCtx.drawImage(this.img,this.x,this.y);
    }
}

gameloop3.js

//avec delta time
//explication : on prend lastupdate 0.013 avec atpresent 0.016 oui on fait la différence entre atpresente - lastupdate
// puis on met a jour lastupdate avec la nouvelle donnée calculs de génie non... 
// main.js


const canva = document.getElementById('canva');
let ctx = canva.getContext('2d');
let interval;
let lastUpdate = Date.now();

canva.width = 400
canva.height = 400
// let interval;
// let fps = 0;
// let dernierUpdate = 0;
function run()
{
    let atPresent = Date.now();
    let deltaTime = (atPresent - lastUpdate) /1000;
    lastUpdate = atPresent;

    update(deltaTime);
    ctx.clearRect(0,0,canva.width,canva.height);
    draw(ctx);
}
function init()
{
    
    load();
    interval = setInterval(run,1000/60);
}
init();

gameLoop3b.js

//avec delta time
// game.js

let img;
let img2;
let timer;
function load()
{
    img = new Sprite("images/satellite_C.png");
    img2 = new Sprite("images/satellite_C.png",100,50);
    timer = 0;
}
function update(deltaTime)
{
    timer += deltaTime;
    if(timer >= 1){

        img.x +=10;
        img.y +=10;
        img2.y += 10;
        timer = 0;
    }
    
}
function draw(pCtx)
{
    img.draw(pCtx)
    img2.draw(pCtx)
}