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érique200
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 typeNumber
est différent du typeString
, 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 valoirbébé
. - Si
age
est compris entre 1 et 17,vieillesse
doit valoirjeune
. - Si
age
est compris entre 18 et 60,vieillesse
doit valoiradulte
. - 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é]