Les booléens et les conditions

Un jeu est fait de multiples conditions, qui une fois réunies, permettent d'enclencher certaines actions du joueur ou des ennemis. Quelques exemples :

• Si le joueur appuie sur la touche "flèche haut" et qu'il n'est pas face à un mur, le personnage avance.
• Si un ennemi est à moins de 300 pixels de distance du héros, alors l'ennemi passe en mode "attaque".
• Si la balle touche un bord de l'écran, la balle rebondit.
• etc ...

Dans ce cours, nous verrons en détail ce que sont les booléens, et leur utilisation dans les conditions.

Les booléens, valeurs de vérité

Un booléen est une "valeur de vérité", il s'agit d'une valeur qui ne peut être que vrai ou fausse. Pour les définir sous leur forme la plus simple: true pour une valeur vraie, et false pour une valeur fausse, il suffit de faire comme pour les autres types de variables et constantes, avec comme valeur true ou false (sans guillemets, ou apostrophe, ce ne sont pas des strings).

let variableBooleene = true
const CONSTANTE_BOOLEENE = false

Les opérateurs relationnels

Il existe d'autre façon de définir des booléens, notamment à l'aide des opérateurs relationnels, la liste complète des opérateurs relationnels disponibles en JavaScript est la suivante:

• > est supérieur à
• >= est supérieur ou égale à
• < est inférieur à
• <= est inférieur ou égal à
• == est égal à
• === est identique à
• != n'est pas égal à
• !== n'est pas identique à

Chacun de ces opérateurs, utilisé pour analyser la relation entre deux valeurs, retourne un booléen, voici quelques exemples:

let distance = 200

let estSupA100 = distance > 100 // true
let estInfA100 = distance < 100 // false

// notez ici les guillemets autour du nombre 200
//                             v   v
let estEgaleA200 = distance == "200" // true

// notez ici l'utilisation du triple signe égal
//                              vvv
let estIdentiqueA200 = distance === "200" // false

Dans la liste des opérateurs cités, il est important de comprendre la différence entre == et ===, ainsi que celle entre != et !==.
Comme dans l'exemple ci-dessus:

• le signe == permet d'évaluer une égalité entre deux valeurs
  la valeur numérique 200 est considérée égale à la valeur au format texte "200"
• le signe === est lui un opérateur d'identité, il vérifiera non seulement l'égalité, mais aussi le type des deux valeurs.
  Ici le type Number est différent du type String, donc dans ce cas, 200 est différent de "200".

Le principe est le même pour les signes inverses != et !==, le second vérifiant aussi le type des deux données.

Conjonctions et disjonctions de booléens

Les booléens suivent les règles établies de l'algèbre de Boole qui définit trois opérateurs qui permettent la conjonction, la disjonction et la disjonction exclusive de booléens.
Le dernier n'étant pas disponible en JavaScript et très peu utilisé dans les jeux vidéo, nous ne nous attarderons pas dessus, ici.

La conjonction de booléens, représentée en JavaScript par les symboles && (et), permet de vérifier qu'un ensemble donné de booléens sont vrais. Si un seul était faux, alors l'ensemble serais faux.
Ainsi:

let VraiEtVrai = true && true // true
let VraiEtFaux = true && false // false
let FauxEtFaux = false && false // false

La disjonction de booléens est représentée en JavaScript par les symboles || (ou). Elle défini à l'inverse qu'il suffit qu'un seul des booléens donnés dans un ensemble soit vrai pour confirmer la vérité.
Ainsi:

let VraiOuVrai = true || true // true
let VraiOuFaux = true || false // true <<< Ici se trouve la différence
let FauxOuFaux = false || false // false

Le symbole des doubles-barres s'effectue à l'aide des touches ALT+6 de votre clavier

Si, sinon si, sinon.

If

La plus répandue des structures conditionnelles et la condition if, qui signifie littéralement "si", la syntaxe est la suivante :

if (expression) {
    // Corps de la condition
    // ne sera exécutée que si l'expression retourne un booléen "true"
}

L'expression entre parenthèses doit être un booléen valant true pour que le corps de la condition soit exécuté.

Pour les exemples suivantes, créons deux données de type objet, joueur et ennemi, conprenant différentes propriétés:

let ennemi = { distance: 500 }
let joueur = {
    distance: 200,
    peutAttaquer: false,
    peutTirer: false,
    bonus: false
}

Pour reprendre notre fonction distance créée précédemment, nous pouvons évaluer si la distance entre le gnome et le troll est inférieure à 200 pixels :

let distanceGnomeToTroll = distance(gnome.x, troll.x, gnome.y, troll.y)

if (distanceGnomeToTroll < 200) {
    // Sera exécuté seulement si la distance entre
    // le gnome et le troll est inférieure à 200 pixels
}

Else if

Dans le cas où la condition if ne soient pas valable, il est possible d'évaluer une seconde condition, à l'aise des mots-clé else if :

if (distanceGnomeToTroll <= 200) {
    // Sera exécuté seulement si la distance entre
    // le gnome et le troll est inférieure à 200 pixels
}
else if (distance(gnome.x, troll.x, gnome.y, troll.y) <= 500) {
    // Sera exécuté seulement si la distance entre
    // le gnome et le troll est comprise entre 201 et 500 inclus
}

Il peut y avoir autant de else if les uns à la suite des autres que nécessaire :

if (condition1) {
    // Sera exécuté seulement si la condition1 est vraie
}
else if (condition2) {
    // Sera exécuté seulement si la condition1 est FAUSSE
    // Et que la condition2 est vraie
}
else if (condition3) {
    // Sera exécuté seulement si les condition1
    // et conditions2 sont FAUSSES
    // Et que la condition3 est vraie
}
else if (condition4) {
    // Sera exécuté seulement si les trois conditions précédentes
    // sont FAUSSES et que la condition4 est vraie
}

Else

Dans le cas où une action doivent être exécutée si aucune des conditions n'est valable, on utilisera le mot clé else, qui ne nécessite donc aucune condition.

if (condition1) {
    // Corps de la condition1
}
else if (condition2) {
    // Corps de la condition2
}
else if (condition3) {
    // Corps de la condition3
}
else {
    // Sera exécutée si aucune des conditions précédentes n'est vraies.
}

La structure conditionnelle if/else if/else permet de résoudre tous les cas conditionnels existants. Il existe néanmoins certaines autres structures plus adaptées selon les cas, que nous verrons par étape, lorsque nous les rencontrerons.

Exercices

Structure if/else

A l'aide de la structure if/else, vérifiez la donnée age pour définir si la données estMajeur doit valeur oui ou non. La donnée age est créée en amont et contient un chiffre entre 1 et 99.

// Practice-code
function estMajeur(age) {// Hidden line
let estMajeur; // Read-only line

// Complétez ici

return estMajeur; // Hidden line
} // Hidden line
return [estMajeur(17), estMajeur(18)] // Hidden line
// Doit valoir : [non, oui]

Structure if/else

A l'aide de la structure if/else/elseif, vérifiez la donnée age pour définir la valeur de vieillesse:

• Si age est inférieur ou égale à 3, vieillesse doit valoir bébé.
• Si age est compris entre 1 et 17, vieillesse doit valoir jeune.
• Si age est compris entre 18 et 60, vieillesse doit valoir adulte.
• Sinon, vieillesse doit valoir âgé.

La donnée age est créée en amont et contient un chiffre entre 0 et 99.

// Practice-code
function testVieillesse(age) {// Hidden line
let vieillesse; // Readonly line

// Complétez ici

return vieillesse; // Hidden line
} // Hidden line
return [testVieillesse(3), testVieillesse(15), testVieillesse(20), testVieillesse(61)] // Hidden line
// Doit valoir : [bébé, jeune, adulte, âgé]