Lore

Tes parents ont certainement passé des heures à jouer au snake sur leur NOKIA 3310 … et ça ressemblait à ça

risefallofnokia_snake2.webp

Ta mission est de voyager dans le passé, plus précisément le 12 octobre 2000 le jour de la sortie du Nokia 3310, et de coder le jeu du snake pour rendre addict toute une génération qui ne manquera pas de te dire dans le futur que tu passes trop de temps sur les écrans

Pré-requis

Ouvre ce lien dans ton navigateur préféré https://editor.p5js.org/ et c’est parti

Capture d’écran 2025-04-22 à 11.42.00.png

L’éditeur est composé de quatre parties :

  1. Une barre de menu avec le ▶️ et ⏹️  pour exécuter et arrêter le programme.
  2. Une zone à gauche qui permet d’écrire du code
  3. Une zone à droite “preview” qui permet de voir le résultat
  4. Une zone en bas à gauche “console” pour t’aider à trouver les bugs dans ton code

<aside> 💡

Coche la case ✅ « Auto-refresh » pour une mise à jour automatique

</aside>

Dessiner la grille

En dessinant une grille sur l’espace d’affichage, tu vas ajouter des repères qui vont aider à la création du jeu.

Tutoriel

Tu vas utiliser la fonction line() pour tracer une ligne dans la zone d'affichage. Tu peux trouver des explications sur l’utilisation de cette fonction dans la référence de p5js qui est une documentation technique en ligne : https://p5js.org/reference/p5/line/

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  line(0,0,10,40);
}

Maintenant tu vas apprendre à utiliser une boucle for , à la différence de le fonction line cette instruction n’est pas spécifique à p5.js , c’est une fonctionnalité du langage javascript. Comme pour p5.js, il existe une documentation technique en ligne pour t’aider : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/for