thylo.be

Les cœurs de Billy

Le combat de Billy l'ogre et de Raoul le chevalier, chaque point de vie dessiné en cœur. Il reprend la variable, la condition et la boucle.

Le combat

Billy a dix points de vie, et Raoul lui en retire deux à chaque clic. Le code se recopie dans un sketch préparé avec la boîte à outils.

let vieBilly = 10;
let forceRaoul = 2;

async function setup() {
  createCanvas(800, 600);
  await chargerPersonnages();
}

function draw() {
  background(30);
  dessinerRaoul(250, 500, 120);
  if (vieBilly > 0) {
    dessinerBilly(600, 500, 250);
  }
}

function mousePressed() {
  vieBilly = vieBilly - forceRaoul;
  console.log(vieBilly);
}
Consigne. Répondre aux trois questions sur papier, puis lancer le sketch et vérifier chaque réponse dans la console, comme à l'étape 3 du protocole de panne.
  1. Avec forceRaoul = 3, combien de clics faut-il pour que Billy disparaisse, et quels nombres la console affiche-t-elle ?
  2. Toujours avec forceRaoul = 3, la condition devient vieBilly !== 0. Que se passe-t-il ?
  3. let vieBilly = 10; descend en première ligne de draw(). Que se passe-t-il au clic ?

Dix cœurs

Consigne. Afficher la vie de Billy au-dessus de sa tête, avec une boucle dont la borne est vieBilly : un disque rouge de 20 pixels par point de vie, le premier en 470, 120, les suivants tous les 30 pixels.

Avant de lancer, le tableau se remplit sur papier pour vieBilly = 4, une ligne par tour.

i vauti < vieBilly ?le cœur est dessiné en x =
0oui470
1
2
3
4

Les cœurs de Raoul

Consigne. Billy rend les coups : un clic sur Raoul, Billy frappe. Raoul a ses cœurs au-dessus de la tête et disparaît quand il n'en a plus. Dès que l'un des deux tombe, les clics ne font plus rien. Régler les quatre nombres pour que le combat dure une dizaine de clics et puisse se perdre des deux côtés.

Le squelette s'ajoute au sketch précédent, les trous sont marqués ___.

let vieRaoul = ___;
let forceBilly = ___;

// dans draw(), sous les cœurs de Billy
for (let i = 0; i < ___; i = i + 1) {
  circle(___, 260, 20);
}

// remplace l'ancienne fonction
function mousePressed() {
  if (mouseX > width / 2) {
    vieBilly = vieBilly - forceRaoul;
  } else {
    vieRaoul = ___;
  }
}

Contraintes supplémentaires :

  • (a) Billy commence avec trente points de vie. Les cœurs passent à la ligne tous les dix pour rester dans le canvas.
  • (b) Chaque coup de Raoul retire entre 2 et 5 points, tirés au sort. lancerDe(4) rend un entier entre 1 et 4.
  • (c) Les cœurs perdus restent dessinés, vides. Il faut une variable de plus, vieMaxBilly, et une deuxième boucle en noFill() et stroke().

Le lien du sketch se poste sur la page partagée.