Fabrique ton jeu vidéo, épisode 1 : ton premier truc qui bouge

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Mon jeu</title>
  <style>
    body   { background: #0f172a; display: grid; place-items: center; height: 100vh; margin: 0; }
    canvas { background: #1e293b; border-radius: 8px; }
  </style>
</head>
<body>
  <canvas id="ecran" width="640" height="360"></canvas>
  <script>
    // tout notre code viendra ici
  </script>
</body>
</html>

// On récupère la toile, puis le crayon qui va dessiner dessus.
const ecran  = document.getElementById('ecran');
const crayon = ecran.getContext('2d');

// On choisit une couleur, puis on remplit un rectangle.
// Les quatre nombres : x, y, largeur, hauteur.
crayon.fillStyle = '#38bdf8';
crayon.fillRect(50, 40, 30, 30);

function tour() {
  // 1. effacer toute la toile
  crayon.clearRect(0, 0, ecran.width, ecran.height);

  // 2. calculer (pour l'instant, rien)

  // 3. dessiner
  crayon.fillStyle = '#38bdf8';
  crayon.fillRect(50, 40, 30, 30);

  // 4. recommencer au prochain affichage
  requestAnimationFrame(tour);
}

tour(); // on lance le premier tour

const ecran  = document.getElementById('ecran');
const crayon = ecran.getContext('2d');

// Notre carré : sa position, sa taille, sa vitesse.
const carre = { x: 50, y: 40, taille: 30, vx: 3, vy: 2 };

function tour() {
  crayon.clearRect(0, 0, ecran.width, ecran.height);

  // on avance
  carre.x += carre.vx;
  carre.y += carre.vy;

  crayon.fillStyle = '#38bdf8';
  crayon.fillRect(carre.x, carre.y, carre.taille, carre.taille);

  requestAnimationFrame(tour);
}

tour();

// Vitesse en pixels PAR SECONDE, pas par image.
const carre = { x: 50, y: 40, taille: 30, vx: 180, vy: 120 };

let precedent = 0;

function tour(maintenant) {
  // dt = temps écoulé depuis le tour d'avant, en secondes
  const dt = precedent ? (maintenant - precedent) / 1000 : 0;
  precedent = maintenant;

  crayon.clearRect(0, 0, ecran.width, ecran.height);

  carre.x += carre.vx * dt;
  carre.y += carre.vy * dt;

  crayon.fillStyle = '#38bdf8';
  crayon.fillRect(carre.x, carre.y, carre.taille, carre.taille);

  requestAnimationFrame(tour);
}

requestAnimationFrame(tour);

// Bord gauche et bord droit
if (carre.x < 0) {
  carre.x = 0;
  carre.vx = -carre.vx;
}
if (carre.x + carre.taille > ecran.width) {
  carre.x = ecran.width - carre.taille;
  carre.vx = -carre.vx;
}

// Bord haut et bord bas
if (carre.y < 0) {
  carre.y = 0;
  carre.vy = -carre.vy;
}
if (carre.y + carre.taille > ecran.height) {
  carre.y = ecran.height - carre.taille;
  carre.vy = -carre.vy;
}