[Nom de la société]

[Titre du
document]
[Sous-titre du document]

paul YAO
[Date]
DEDICACE

Je désire ce support à tous

mes étudiants de Sup’Management
qui m’aide à toujours me perfectionner
je vous portes dans mon cœur.

Page 1 sur 156

SOMMAIRE

DEDICACE ................................................................................................................................ 0

SOMMAIRE .............................................................................................................................. 2

AVANT PROPOS ...................................................................................................................... 4

I. LES BASES DU JAVASRIPT ........................................................................................... 6

1. Introduction ..................................................................................................................... 6

2. Les types de variables en javascript .............................................................................. 12

3. Les opérateurs (operator) .............................................................................................. 17

4. Les conditions ............................................................................................................... 23

5. Les boucles .................................................................................................................... 28

6. Les fonctions ................................................................................................................. 31

7. Les Tableaux (Arrays) ................................................................................................... 34

II. CONCEPT ORIENTE OBJET ......................................................................................... 40

1. Les objets....................................................................................................................... 40

2. Les constructeurs ........................................................................................................... 47

3. Les classes en javascript ................................................................................................ 50

III. CONCEPTION PRATIQUE D’UN PROJET ............................................................... 61

1. Projet de création du jeu Serpent................................................................................... 61

2. Project de création du canvas ........................................................................................ 64

3. Projet de rafraichir le Canvas ........................................................................................ 65

4. Projet serpent ................................................................................................................. 68

5. Projet diriger le serpent ................................................................................................. 75

6. Projet création de la pomme .......................................................................................... 83

7. Projet le serpent s’est pris un mur ................................................................................. 92

8. Projet le serpent à manger la pomme .......................................................................... 101

9. Projet Game Over ........................................................................................................ 116

Page 2 sur 156

10. Projet Ajouter du style ............................................................................................. 129

11. Projet de synthèse .................................................................................................... 143

Page 3 sur 156

AVANT PROPOS

JavaScript est un langage de programmation qui permet d’implémenter des mécanismes

complexes sur une page web. À chaque fois qu’une page web fait plus que simplement afficher
du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes
interactives, des animations 2D/3D, des menus vidéo défilants, etc... — JavaScript a de bonnes
chances d’être impliqué. C’est la troisième couche des technologies standards du web

Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant

de :

➢ Stocker des valeurs utiles dans des variables.

➢ Faire des opérations sur des morceaux de texte
➢ Exécuter du code en réponse à certains événements se produisant sur une page web.

De nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de

programmation applicatives » (APIs pour « Application Programming Interfaces ») donnent
accès à des quasi-superpouvoirs dans votre code JavaScript.

Dans ce livre nous s’allons apprendre à mieux cerner tous les contours plus ou moins essentiel
à une pédagogie simple et compréhensive en vue de vous permettre de concevoir un programme
basé sur JavaScript.

CEDRIC YAO
INGENIEUR INFORMATIQUE
Doctorant en Informatique à Sup Management Maroc (Fès)
RESPONSABLE TECHNIQUE A EASY SMART Solutions

Mai 2020

Page 4 sur 156

 PARTIE I :

INITIATION A

JAVASCRIPT

Page 5 sur 156

 I. LES BASES DU JAVASRIPT

1. Introduction

JavaScript ou JS est un composant majeur de tous les sites web car ils sont composés de trois
Éléments principaux :

➢ Html utilisé pour structurer notre site web

➢ Le CSS utilisé pour la décoration de notre site web
➢ JavaScript pour interactivité de notre page web c’est un langage de programmation.

Initiation à la console de google

Elément très important pour l’utilisation de JavaScript il s’agit des outils de conception pour
les développeurs de chrome on peut les afficher de deux manières :

Soit faire un clic droit et sélectionner Inspecteur de code

Allez dans plus d’outils et sélectionner Outils de Développement Ou faire ctrl+Maj+I .

Page 6 sur 156

Ensuite on voit apparaître la console qui nous permet d’exécuter et d’afficher JavaScript à
l’écran.

On peut entrer certaines valeurs dans la console comme :

alert("hello") et un pop-up s’affiche :

Page 7 sur 156

console.log("Etape1")

Ou écrit le javascript

On écrit le javascript entre des tags <scripts> codeJS</script> et peut être présenter de plusieurs
manières :

➢ Dans le head

Page 8 sur 156

 ➢ Dans le body
➢ Sous le body
➢ Ou dans un fichier.JS

Code.html (cas du head)

<!Doctype html>

<html>

<head>

<script>

console.log("hello");

</script>

</head>

<body>

<p> mon paragraphe</p>

</body>

</html>

Page 9 sur 156

Code.html (cas du body)

<!Doctype html>

<html>

<head>

</head>

<body>

<script>

console.log("hello");

</script>

<p> mon paragraphe</p>

</body>

</html>

Code.html (sous le body)

<!Doctype html>

Page 10 sur 156

<html>

<head>

</head>

<body>

<p> mon paragraphe</p>

</body>

<script>

console.log("hello");

</script>

</html>

La façon la plus utilisée est de créer un fichier JavaScript dans le même dossier que le fichier
html noté script.js

index.html

<!Doctype html>

<html>

<head>

</head>

<body>

<p> mon paragraphe</p>

</body>

<script src="script.js">

</script>

</html>

Page 11 sur 156

Script.js

alert("hello john")

La syntaxe de javascript

Var : permet de déclarer une variable

var name="john";

console.log(name);

On a affecté la valeur john à la variable name

La méthode console.log () écrit un message dans la console.

2. Les types de variables en javascript

La variable de type strings ou chaîne de caractère

Scripts.js

var name="john";

Page 12 sur 156

console.log(name)

"john" : est une variable de types string

La variable de type number ou nombre

var x = 12;

console.log(12);

12 : est une variable de type number

Remarque ton nombre est afficher en bleu dans la console par une chaine de caractère est
afficher en noir mais il est possible de forcer un nombre à devenir une chaîne de caractère en
utilisant la fonction x.toString()

var x = 12;

var y = 25.63;

console.log(x);

console.log(y);

console.log(x.toString())

Page 13 sur 156

Ou aussi en expérimentant cette méthode :

var x = 12;

var y = 25.63;

console.log(x);

console.log(y);

var xToString = x.toString();

console.log(xToString);

Afficher la longueur d’une chaîne de caractère

var name = "john";

var namelength = name.length;

console.log(namelength);

Forcer une chaîne de caractère en nombre

Cas d’un nombre entier

var xString = '12';

var xNumber = parseInt(xString);

console.log(xString);

Page 14 sur 156

console.log(xNumber) ;

Cas d’un nombre décimal

var xString = '12.63';

var xNumber = parseFloat(xString);

console.log(xNumber);

Position d’un mot dans une string

var myString = 'hello john';

var position = myString.indexOf("john");

console.log(position)

Page 15 sur 156

Le code permet de montrer que john est à la position 8

Remplacer la valeur d’un caractère

var myString = 'hello john';

var myNewString = myString.replace("john" , "Lou")

console.log(myNewString);

Concaténation des chaînes de caractère

var String1 = " hello ";

var String2 = 'cedric';

var myNewString = String1 + String2;

console.log(myNewString);

Page 16 sur 156

A tester

var String1 = "hello";

var String2 = 'cedric';

var myNewString = String1 + String2;

console.log(myNewString);

a tester

var String1 = "hello";

var String2 = 'cedric';

var myNewString = String1 + " "+ String2;

console.log(myNewString);

3. Les opérateurs (operator)

L’affectation : donner la valeur à une variable

Méthodes 1

var x;

x = 12;

Page 17 sur 156

console.log(x);

Méthodes 2

var x = 12;

console.log(x);

Les opérateurs arithmétiques

Addition

var x = 12;

var y = 15;

var resp = x+y;

console.log(resp);

Soustraction

var x = 30;

var y = 15;

var resp = x-y;

console.log(resp);

Multiplication

var x = 30;

var y = 15;

var resp = x*y;

console.log(resp);

Division
var x = 30;

var y = 15;

var resp = x/y;

console.log(resp);

Page 18 sur 156

Modulo (reste de la division)

var x = 34;

var y = 15;

var resp = x%y;

console.log(resp);

Incrémentation et désincrémentation

var x = 34;

var y = 15;

x++; // incrémentation

y--; // désincrémentation

console.log(x);

console.log(y);

Cas particuliers d’incrémentation (même principe pour la désincrémentation)

var x = 34;

var y = 15;

var result = x++

var resp = ++y

console.log(result);// la valeur afficher en console sera 34 valeur de x

console.log(resp);// la valeur afficher en console sera 16 valeur de y + 1

Quelque raccourci d’écriture

var x = 34;
var y = 15;
var z = 2
x = x + 1;
z += y;
y +=1;

Page 19 sur 156

console.log(x); //affiche la valeur x+1
console.log(y); //affiche la valeur y+1
console.log(z);// affiche la valeur z+y
Cas particuliers de concaténation
var x = "diomande";
var y = "laeticia";
console.log(x+y); //affiche la concaténation de x et y
console.log(x+" "+y); // +" "+ pour faire l’espace
Les commentaires

Les commentaires d’expliquer une instruction dans le code elle permet à un développeur de se
repérer facilement dans un code.
var x = "diomande";
var y = "laeticia";
console.log(x+y); //affiche la concaténation de x et y
console.log(x+" "+y);
Un commentaire permet à la partie d’un code de ne pas s’exécuter
var x = "diomande";
var y = "laeticia";
console.log(x+y);
//console.log(x+" "+y);
On peut faire un commentaire pour plusieurs lignes
/*
ceci est un test de
concaténation en
JavaScript
testé par cedric yao
*/
var x = "diomande";
var y = "laeticia";
console.log(x+y);
//console.log(x+" "+y);
Page 20 sur 156
Les opérateurs booléens
Ce sont des opérateurs pouvant prendre deux valeurs vraies ou faux
var myboolean1 = true;
var myboolean2 = false;
console.log(myboolean1) ;
console.log(myboolean2) ;
Opérateur de comparaison
Opérateur d’égalité ou de différences
/* opérateur strictement
égale ou différents*/
var x = 5
/*égalité*/
var myBoolean1 = (x===5);//égalité vérifié
/*différences*/
var myBoolean2 = (x!==5)//différence pas vérifié;
/*affichage à la console*/
console.log(myBoolean1);
console.log(myBoolean2);
Cas d’égalité simple
/* opérateur strictement
Égale ou égalité simple */
var x = 5
var myBoolean1 = (x==="5"); // strictement égale
var myBoolean2 = (x=="5"); // égalité simple
console.log(myBoolean1);
console.log(myBoolean2);
L’opérateur strictement égale vérifie l’égalité en du type de variable déclaré dans le cas de notre
exemple la valeur sera fausse (console.log(myBoolean1) et la valeur sera vérifié pour l’égalité
simple (console.log(myBoolean2)) car elle ne prend pas en compte le type de caractère.
Opérateur d’infériorité
/* opérateur d'infériorité */

Page 21 sur 156

var x = 5
var myBoolean1 = (x<5); // strictement inférieur
var myBoolean2 = (x<=5); // inférieur ou égale
console.log(myBoolean1);
console.log(myBoolean2);
opérateur ET
A B A ET B
VRAI FAUX FAUX
VRAI VRAI VRAI
FAUX VRAI FAUX
FAUX FAUX FAUX

/* opérateur ET */
var x = 5
var y = 15
var myBoolean1 = (x>3 && y<20); // vérifié
var myBoolean2 = (x>3 && y>20); // pas vérifié
console.log(myBoolean1);
console.log(myBoolean2);
opérateur OU
A B A OU B
VRAI FAUX VRAI
VRAI VRAI VRAI
FAUX VRAI VRAI
FAUX FAUX FAUX

/* opérateur OU */
var x = 5
var y = 15
var myBoolean1 = (x>3 || y<20); // vérifié
var myBoolean2 = (x>3 || y>20); // vérifié
var myBoolean3 = (x<3 || y>20); // pas vérifié

console.log(myBoolean1);

Page 22 sur 156

console.log(myBoolean2);
console.log(myBoolean3);
Opérateur Non

A Non A
Vrai Faux
Faux Vrai

/* récapitulatif */
var x = 5
var y = 15
var myBoolean1 = (x>3 || y<20); // vérifié
var myBoolean2 = (x>3 || y>20); // vérifié
var myBoolean3 = (x<3 || y>20); // pas vérifié
console.log(myBoolean1);
console.log(myBoolean2);
console.log(myBoolean3);
/*opérateur inverse*/
console.log('opération inverse');
console.log('');
console.log(!myBoolean1);
console.log(!myBoolean2);
console.log(!myBoolean3);

4. Les conditions

Condition if (si)
La syntaxe d’une condition est la suivante :
if (condition)
{
instructions;
}
Condition else (sinon)
La syntaxe est la suivante
Page 23 sur 156
If (condition)
{
Instructions ;
}
Else
{
Instructions ;
}
Condition else if (sinonsi)
La syntaxe est la suivante
If (condition)
{
Instructions ;
}
Else if (condition2)
{
Instructions ;
}
Else
{
Instructions ;
}
Exemple pratique avec l’âge
De 0 à 17 ans Mineur
De 18 à 25 ans Majeur
Plus de 25 ans Adultes

var age = 25

if(age<=18)

console.log("tu est un mineur");

Page 24 sur 156

 }

else if (age>=18 && age<=25)

console.log("tu est un majeur");

else

console.log("tu est devenu adulte");

}
Un cas particulier pour les mineurs de 0 à 8ans
var age = 4
if(age<=18)
{
if (age <= 8)
{
console.log("tu est un petit gar");
}
else
{
console.log("tu est un mineur");
}
}
else if (age>=18 && age<=25)
{
console.log("tu est un majeur");
}
else
{
console.log("tu est devenu adulte");

Page 25 sur 156

 }
La condition switch
La syntaxe est la suivante :
Switch (expression)
{
case x :
// code block
break;
case y :
// code block
break;
:
:
default :
// code block
}
Cas pratique avec les groupes sanguin
Groupe sanguin Signification
A Recoit A et O
B Recoit B et O
AB Donneur Universel
O Receveur Universel

var grousang = "b";

switch(grousang)
{
case "ab":
console.log('AB : receveur universel');
break;
case "o":
console.log('O : donner universel');
break;

Page 26 sur 156

 case "a":
console.log(' A: groupe sanguin');
break;
case "b":
console.log('B : groupe sangin');
break;
default:
console.log("ceci n'est pas un groupe sanguin")
}
Cas particulier A et B ne sont ni donneur ni receveur
var grousang = "ab";
switch(grousang)
{
case "ab":
console.log('AB : receveur universel');
break;
case "o":
console.log('O : donner universel');
break;
case "a":
case "b":
console.log(' groupe sangin');
break;
default:
console.log("ceci n'est pas un groupe sanguin")
}
Petit exercice des jours de la semaine
var jours = 9;
switch(jours)
{

Page 27 sur 156

 case 1:
console.log('lundi');
break;
case 2:
console.log('Mardi');
break;
case 3:
console.log(' Mercredi');
break;
case 4:
console.log(' Jeudi');
break;
case 5:
console.log(' Vendredi');
break;
case 6:
console.log(' Samedi');
break;
case 7:
console.log(' Dimanche');
break;
default:
console.log("ceci n'est pas une valeur ")
}

5. Les boucles

Les boucles permettent d’exécuter un code plusieurs fois

La bloucle while TANT QUE
Syntaxe est la suivante :
While (condition)
{

Page 28 sur 156

 Instructions ;
}
Pratique :
var nombre = 0;

while(nombre < 10)

{
console.log(nombre);
nombre++;
}
La Boucle Do While (faire tant que)

La syntaxe est la suivante :

Do

Instructions ;

While (conditions)

Pratique

var nombre = 0;

do

console.log(nombre);

nombre++;

while(nombre < 10)

Cas du différence entre while et Do while

Page 29 sur 156

Avec Do while

var nombre = 0;

do

console.log(nombre);

nombre++;

while(nombre>0 && nombre<10)

Avec While

var nombre = 0;

while(nombre>0 && nombre<10)

console.log(nombre);

nombre++;

L’écran ne va rien afficher

La boucle For

La boucle for est constitué de trois parties :

Page 30 sur 156

 ➢ La partie 1 : initialisation (produit une seule fois)
➢ La partie 2 : condition (condition à vérifier à chaque fois)
➢ La partie 3 : incrémentation

Syntaxe est la suivante :

for(initialisation; condition; incrémentation)

Instructions ;

Pratique

for (number = 0; number < 5; number++)

console.log(number);

6. Les fonctions

La syntaxe d’une fonction est la suivante

Function name (paramète1, paramètre2, etc …)

Code à Exécuter ;

Return result ;

Pratique

//déclaration de la fonction

function multiplication(nombre1,nombre2)

return nombre1 * nombre2;

Page 31 sur 156

}

function division(nombre1,nombre2)

return nombre1 / nombre2;

//exécution de la fonction

var a = 8;

var b = 9;

var result = multiplication(a,b);

var resp = division(b,a);

console.log(result);

console.log(resp);

Les scopes ou portées des variables (variable globale et variable locale)

La « portée » d’une variable désigne l’espace du script dans laquelle elle va être accessible.

En JavaScript, il n’existe que deux espaces de portée différents : l’espace global et l’espace
local. L’espace global désigne l’entièreté d’un script à l’exception de l’intérieur de nos
fonctions. L’espace local désigne, à l’inverse, l’espace dans une fonction.

//déclaration de la fonction (scope)

function multiplication(nombre1,nombre2)

var resultmultiple = nombre1 * nombre2; //variable local

return resultmultiple*5;

function Somme(nombre1,nombre2)

Page 32 sur 156

 var resultSomme = nombre1 + nombre2; //variable local

return resultSomme*5;

//exécution de la fonction

var a = 8; //variable globale

var b = 9; //variable globale

var result = multiplication(a,b);

var resp = Somme(a,b);

console.log(result);

console.log(resp);

Var a : variable globale

Var resultmultiple : variable locale

Mais par contre il est possible de définir une variable globale dans une fonction

//déclaration de la fonction (scope)

function multiplication(nombre1,nombre2)

resultmultiple = nombre1 * nombre2; //variable globale

return resultmultiple*5;

function Somme(nombre1,nombre2)

resultSomme = nombre1 + nombre2; //variable globale

return resultSomme*5;

Page 33 sur 156

//exécution de la fonction

var a = 8; //variable globale

var b = 9; //variable globale

var result = multiplication(a,b);

var resp = Somme(a,b);

console.log(resultmultiple);

console.log(resultSomme);

resultmultiple : variable globale dans le corps d’une fonction

7. Les Tableaux (Arrays)

Les tableaux JavaScript sont utilisés pour stocker plusieurs valeurs dans une seule variable. Un
tableau est une variable spéciale, qui peut contenir plusieurs valeurs à la fois

Syntaxe d’un tableau :

Var name = [valeur1 ,valeur2,…] ;

Pratique

// declaration d'un tableau

var fruits = ["Pomme","banane","Orange","Citron"];

console.log(fruits.length);//longueur du tableau

console.log(fruits);// affichage en console

console.log(fruits[2]);// affichage d'une valeur du tableau

Remarque

Pour lire les valeurs d’un tableau il commencer par la position zéro

[0] [1] [2] [3] [4] [5] [6] [7] [8]

On a un tableau de 10 élements.

Cas pratique avec la boucle for

Page 34 sur 156

// declaration d'un tableau

var fruits = ["Pomme","banane","Orange","Citron"];

for (var i = 0; i < fruits.length;i++)

console.log(fruits[i]);// affichage d'une valeur du tableau

Astuces (sélectionnez tous le test et faire ctrl + // pour mettre tous en commentaire).

Quelques fonctions pour utiliser les Tableaux

fruits.push("Ananas"); :ajouter un nouvel valeur dans le tableau

console.log(fruits); : afficher en console

La méthode push() ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle
longueur du tableau.

La syntaxe est la suivante :

arr .push ( element1 [, ... [, elementN ]])

Exemple

var fruits = ["Pomme","banane","Orange","Citron"];

fruits.push("Ananas");//ajouter un nouvel valeur dans le tableau

console.log(fruits);

fruits.pop(); : supprimer la dernière valeur dans le tableau

La méthode pop() supprime le dernier élément d'un tableau et renvoie cet élément. Cette
méthode modifie la longueur du tableau.

Sa syntaxe est la suivante :

arr .pop ()

Exemples :

Page 35 sur 156

// declaration d'un tableau

var fruits = ["Pomme","banane","Orange","Citron"];

fruits.pop();//supprimer la dernière valeur dans le tableau

console.log(fruits);

La méthode slice () renvoie une copie superficielle d'une partie d'un tableau dans un nouvel
objet tableau sélectionné de l'index des éléments de ce tableau. Le tableau d'origine ne sera pas
modifié.

Sa syntaxe est la suivante :

arr .slice ([ début [, fin ]])

Remarque slice(n ;n+1)

Exemples :

// declaration d'un tableau

var fruits = ["Pomme","banane","Orange","Citron"];

var agrumes = fruits.slice(1,4);

console.log(agrumes);

Dans un tableau on peut déclarer plusieurs valeurs de type différents

// declaration d'un tableau avec différents types de variable

var tableau = ["Pomme",20,false];

console.log(tableau);

Tableau composé de sous tableaux (cas pratique)

// declaration d'un tableau dans un tableau

Page 36 sur 156

var tableau = [[0,1],[4,3,20],[8,9],[12,15]];

//afficher le tableau

console.log(tableau) ;

Affichage des différentes valeurs

Pour la valeur neuf (9) du tableau on procède comme suite :

Neuf (9) se trouve dans le sous tableau deux (2) et à la position un (1) de ce sous tableaux donc
la syntaxe sera : tableau [2][1]

Page 37 sur 156

Cas pratique

// declaration d'un tableau dans un tableau

var tableau = [[0,1],[4,3,20],[8,9],[12,15]];

//afficher le tableau

//console.log(tableau);

console.log(tableau[2][1])

Page 38 sur 156

 PARTIE II :

PROGRAMMATION

ORIENTE - OBJET

Page 39 sur 156

II. CONCEPT ORIENTE OBJET

1. Les objets

Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se
composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles
sont dans des objets).

Structure d’un objet :

OBJET

Propriété 1 : valeur1
Propriété 2 : valeur2
Propriété 1 : valeur1
……………………
Propriété n : valeur n
Méthodes 1( )
Méthodes 2( )
Méthodes 3( )
:::::::::::::::::::
Méthodes N( )

En javascript voici la syntaxe d’un objet :

var objet =

Propriété 1 : valeur1,

Propriété 2 : valeur2,

……………………

Propriété n : valeur n

Méthodes 1 : function1 ( ) {

Page 40 sur 156

Méthodes 1 : function1 ( ) {

Méthodes 2 : function2 ( ) {

::::::::::::::::::::::::::::::::::::::::

Méthodes 3 : function3 ( ) {

};

Cas pratique 1 : création de l’objet voiture

Voiture
Nom : Fiat
Modèle : 500
Poids : 850kg
Couleurs : white

// création d'un objet

var voiture =

//propriété de l'objet

name: "Fiat",

model: "500",

weight: "850kg",

color: "white"

};

//afficher les propriétés de la voiture

Page 41 sur 156

console.log(voiture);

//accéder à une valeur particulière

console.log(voiture.name);

//accéder à une valeur particulière de la propriété 2

console.log(voiture["model"]);

Cas pratique 2 : affichage des propriétés dans une boucle

// création d'un objet

var voiture =

//propriété de l'objet

name: "Fiat",

model: "500",

weight: "850kg",

color: "white"

};

// boucle pour lister toutes les propriétés d'un objet

for (var property in voiture)

console.log(voiture[property]);

Page 42 sur 156

Cas pratique 3 : autres méthodes de création d’objet

// création d'un objet

var voiture = new Object();

//propriété de l'objet

voiture.name = "Fiat";

voiture.model = "500";

voiture.weight = "850kg";

voiture.color = "white";

// boucle pour lister toutes les propriétés d'un objet

for (var property in voiture)

console.log(voiture[property]);

Cas pratique 3 : création des méthodes d’un objet

Voiture
Nom : Fiat
Modèle : 500
Poids : 850kg
Couleurs : white
Démarrer ( )
Conduire ( )
Freiner ( )
S’arrêter ( )

// création d'un objet

var voiture = new Object();

//propriété de l'objet

Page 43 sur 156

 voiture.name = "Fiat";

voiture.model = "500";

voiture.weight = "850kg";

voiture.color = "white";

//création de méthodes pour la voiture

voiture.start = function(){

console.log("démarer")

};

voiture.drive = function(){

console.log("conduire")

};

voiture.brake = function(){

console.log("freiner")

};

voiture.stop = function(){

console.log("s'arrêter")

};

// boucle pour lister toutes les propriétés d'un objet

for (var property in voiture)

console.log(voiture[property]);

Page 44 sur 156

 }

// afficher la méthodes

voiture.start();

voiture.drive();

voiture.brake();

voiture.stop();

Cas pratique 4 : ajouter un argument dans une méthodes (cas de démarage)

On va essayer de compter le nombre de démarrages :

// création d'un objet

var voiture = new Object();

//propriété de l'objet

voiture.name = "Fiat";

voiture.model = "500";

voiture.weight = "850kg";

voiture.color = "white";

//création de méthodes pour la voitures

voiture.start = function(nombre){

// ajouter un argument dans la fonction

while(nombre>0){

console.log(nombre.toString() + "démarer");

nombre--;

Page 45 sur 156

 }

};

voiture.drive = function(){

console.log("conduire")

};

voiture.brake = function(){

console.log("freiner")

};

voiture.stop = function(){

console.log("s'arrêter")

};

// boucle pour lister toutes les propriétés d'un objet

for (var property in voiture)

console.log(voiture[property]);

// afficher la méthode

voiture.start(8);

voiture.drive();

voiture.brake();

voiture.stop();

Page 46 sur 156

 2. Les constructeurs

Un constructeur est associé à un objet d'une classe particulière qui a été instanciée. Le
constructeur initialise cet objet et peut fournir un accès à ses informations privées. Le concept
de constructeur peut s'appliquer à la plupart des langages de programmation orientée objet.
Dans l'essentiel, un constructeur en JavaScript est en général déclaré lors de l'instance d'une
classe.

Sa syntaxe est la suivante :

// Voici un constructeur générique par défaut de la classe Default

function Name( Propriété 1, Propriété 2,…, Propriété n) {

// création de propriétés avec this pour la gestion des instanciations

This.propriétés1 = Propriété 1 ;

This.propriétés2 = Propriété 1 ;

This.propriétésn = Propriété n ;

// création de méthodes

This.Methode1 = function () {

This.Methode2 = function () {

This.MethodeN = function () {

}
Page 47 sur 156
// créaction des instances pour l’appel des constructeurs .

var NameReference1 = new Name( valeur1, valeur2,….,valeurN);

var NameReference2 = new Name( valeur1, valeur2,….,valeurN);

Pour appeler le constructeur d'une classe en JavaScript, utilisez un opérateur new pour affecter
une nouvelle référence d'objet à une variable.

Cas pratique avec une figure

On désire définir un objet qui nous permet de créer à la fois un carrée et un rectangle et exploité
le calcul de la surface et du périmètre sachant que le carré et le rectangle sont tous deux des
figures géométriques qui sont constitué de longueur et de largeur la sel différences est le carrée
dont la longueur est égale à la largeur :

Schéma de l’objet figure :

Figures
Nom : valeur1 (string)
Longueur : valeur2 (number)
Largeur : valeur3 (number)
Aire (Longueur * Largeur)
Perimètre ( 2*[Longueur + Largeur] )

FIGURE 1
Nom Carré

Longueur 8
Largeur 8

FIGURE 2

Nom Rectangle

Longueur 10

Largeur 8

Page 48 sur 156

//création d'un constructeur

function Figure (nom,longueur,largeur)

// this pont vers l'instance créé

// propriétés

this.nom = nom;

this.longueur = longueur;

this.largeur = largeur;

//méthodes

this.aire = function()

console.log("l'aire du " + this.nom + " est :");

console.log (this.largeur * this.longueur);

this.perimetre = function()

console.log("le périmètre du " + this.nom + " est :");

console.log (2*(this.largeur + this.longueur) );

//création des instances

var Figure1 = new Figure("carré",8,8);

console.log(Figure1);

var Figure2 = new Figure("rectangle",10,8);

Page 49 sur 156

console.log(Figure2);

Figure1.aire();

Figure1.perimetre();

Figure2.aire();

Figure2.perimetre();

3. Les classes en javascript

En réalité, les classes sont juste des fonctions spéciales. Ainsi, les classes sont définies de la
même façon que les fonctions : par déclaration, ou par expression.

Déclaration d’une classe :

Pour utiliser une déclaration de classe simple, on utilisera le mot-clé class, suivi par le nom de
la classe que l'on déclare.

Schéma de’une classe

Nom de classe

Propriété 1 : valeur1
Propriété 2 : valeur2
Propriété 1 : valeur1
……………………
Propriété n : valeur n

Syntaxe de la classe

Class Nomsclasse {

// création des constructeurs

constructor(propriété1, propriété2) {

this.propriété1 = propriété1;

this.propriété2 = propriété2; }

Page 50 sur 156

Corps d'une classe et définition des méthodes

Le corps d'une classe est la partie contenue entre les accolades. C'est dans cette partie que l'on
définit les propriétés d'une classe comme ses méthodes et son constructeur.

La méthode constructor est une méthode spéciale qui permet de créer et d'initialiser les objets
créés avec une classe.

Exemple de classe Rectangle (Méthodes de prototype)

Rectangle
Longueur : valeur2 (number)
Largeur : valeur3 (number)
Aire (Longueur * Largeur)
Perimètre ( 2*[Longueur + Largeur] )

class Rectangle {

//création des propriétés à l’aide d’un constructeur

constructor(hauteur, largeur) {

this.hauteur = hauteur;

this.largeur = largeur;

/création des méthodes à l’aide d’un constructeur

get area() {

return this.calcArea();

get perimetre() {

return this.calcPerimetre();

calcArea() {

Page 51 sur 156

 console.log("l'aire est : " );

return this.largeur * this.hauteur;

calcPerimetre() {

console.log("le perimètre est : " );

return 2*(this.largeur + this.hauteur);

// création d’une nouvelle instance

var carré = new Rectangle(10, 10);

// affichage des valeurs

console.log(carré);

console.log(carré.area);

console.log(carré.perimetre);

Exemple de classe Rectangle (Méthodes statiques)

Le mot-clé static permet de définir une méthode statique pour une classe. Les méthodes
statiques sont appelées par rapport à la classe entière et non par rapport à une instance donnée
(ces méthodes ne peuvent pas être appelées « depuis » une instance).

Etudes de la classe point

Point
X : valeur1 (number)
Y : valeur2 (number)

Distance (√(𝑋𝑏 − 𝑋𝑎 )2 + (𝑌𝑏 − 𝑌𝑎 )2)

Explication

On a P(𝑋𝑦) , avec P1(55) et P2(55)

Page 52 sur 156

Calculons :

P1P2 = √(10 − 5)2 + (10 − 5)2

P1P2 = √(5)2 + (5)2

P1P2 = √50

Cas pratique

// création de la classe point

class Point {

// création du constructeur de la classe

constructor(x, y) {

// création des méthodes de la classe

this.x = x;

this.y = y;

//création de la méthode calcul de distance

static distance(a, b) {

const dx = a.x - b.x;

const dy = a.y - b.y;

return Math.hypot(dx, dy);

const p1 = new Point(5, 5);

const p2 = new Point(10, 10);

// affichage des éléments à la console

console.log(p1);

Page 53 sur 156

console.log(p2);

console.log("la distinace du point1 au point2 est : ");

console.log(Point.distance(p1, p2));

Remarque :

La fonction Math.hypot() renvoie la racine carrée de la somme des carrés de ses arguments. On
peut également la définir avec la formule suivante :

Créer une sous-classe avec extends (notion d’héritage)

Le mot-clé extends, utilisé dans les déclarations ou les expressions de classes, permet de créer
une classe qui hérite d'une autre classe (on parle aussi de « sous-classe » ou de « classe-fille »).

Utiliser super pour la classe parente

Le mot-clé super est utilisé pour appeler les fonctions rattachées à un objet parent.

Page 54 sur 156

 ANIMAL

nom

parle()

CHIEN

super (nom)

parle()

Cas pratique

class Animal {

constructor(nom) {

this.nom = nom;

parle() {

console.log(`${this.nom} fait du bruit.`);

class Chien extends Animal {

constructor(nom) {

super(nom); // appelle le constructeur parent avec le paramètre

parle() {

console.log(`${this.nom} aboie.`);

Page 55 sur 156

 }

var caniche = new Chien ("Boby");

caniche.parle();

var corbeau = new Animal ("cler")

corbeau.parle();

Remarque :

Si on déclare un constructeur dans une classe fille, on doit utiliser super() avant this.

On peut également étendre des classes plus traditionnelles basées sur des constructeurs
fonctionnels :

function Animal (nom) {

this.nom = nom;

Animal.prototype.crie = function () {

console.log(`${this.nom} fait du bruit.`);

class Chien extends Animal {

crie() {

super.crie();

console.log(`${this.nom} aboie.`);

let c = new Chien('Ida');

c.crie();

var pigeon = new Animal ("lolo")

Page 56 sur 156

pigeon.crie()

En revanche, les classes ne permettent pas d'étendre des objets classiques non-constructibles.
Si on souhaite créer un lien d'héritage en un objet et une classe, on utilisera
Object.setPrototypeOf() :

function Animal (nom) {

this.nom = nom;

Animal.prototype.crie = function () {

console.log(`${this.nom} fait du bruit.`);

class Chien extends Animal {

crie() {

super.crie();

console.log(`${this.nom} aboie.`);

let c = new Chien('Ida');

c.crie();

var pigeon = new Animal ("lolo")

pigeon.crie()

Utiliser super pour la classe parente

Le mot-clé super est utilisé pour appeler les fonctions rattachées à un objet parent.

class Chat {

constructor(nom) {

this.nom = nom;

Page 57 sur 156

 }

parler() {

console.log(`${this.nom} fait du bruit.`);

class Lion extends Chat {

parler() {

super.parler();

console.log(`${this.nom} rugit.`);

var felin = new Chat ("sylvestre");

felin.parler();

var prédateur = new Lion ("booki");

prédateur.parler();

Bonus comment lire une valeur en javasript

Pour lire une valeur en javascript on utilise la fonction prompt( ) mais lire que les chaine de
caractère donc pour la faire les nombre il faut forcer le caractère :

var x = prompt("Enter a Value", "0");

var jours = parseInt(x);

switch(jours)

case 1:

console.log('lundi');

Page 58 sur 156

 break;

case 2:

console.log('Mardi');

break;

case 3:

console.log(' Mercredi');

break;

case 4:

console.log(' Jeudi');

break;

case 5:

console.log(' Vendredi');

break;

case 6:

console.log(' Samedi');

break;

case 7:

console.log(' Dimanche');

break;

default:

console.log("ceci n'est pas une valeur ")

Page 59 sur 156

PARTIE II : MISE EN

PLACE D’UN PROJET

Page 60 sur 156

III. CONCEPTION PRATIQUE D’UN PROJET

1. Projet de création du jeu Serpent

Après avoir appris les bases du javasript notre objectif est de mettre en pratique toutes les
notions vues à travers la création du jeu serpent qui nous permettra de mieux assimiler toutes
les notions dans un cadre de projet afin de confronter dans l’avenir aux exigences d’un projet

Introduction au canvas

canvas

<canvas> est un nouvel élément HTML qui peut être utilisé pour dessiner des éléments
graphiques à l'aide de scripts (habituellement JavaScript). Il permet par exemple de dessiner
des graphiques, de réaliser des compositions de photographies ou des animations simples (voire
pas si simples).

Document Object Model (DOM)

Le Document Object Model (DOM) connecte des pages Web à des scripts ou à des langages de
programmation en représentant la structure d'un document.

Le DOM représente un document avec une arborescence logique. Chaque branche de l'arbre se
termine par un nœud et chaque nœud contient des objets. Les méthodes DOM permettent un
accès programmatique à l'arborescence.

Window

L’interface Window représente une fenêtre contenant un document DOM ; la propriété du

document pointe vers le document DOM chargé dans cette fenêtre.

Une variable globale window, représentant la fenêtre dans laquelle le script s'exécute, est
exposée au code JavaScript.

window.onload

Un gestionnaire d'évènement pour l'évènement load (chargement) de la fenêtre.

Syntaxe

Page 61 sur 156

window.onload = refFct;

NB : refFct est une référence à une fonction.

Document

L’interface Document représente toute page Web chargée dans le navigateur et sert de point
d'entrée dans le contenu de la page Web, qui est l’arborescence DOM.

L'arbre DOM comprend des éléments tels que <body>et <table>, entre autres.

Il fournit des fonctionnalités globales au document, comme comment obtenir l'URL de la page
et créer de nouveaux éléments dans le document.

L’interface Document décrit les propriétés et méthodes communes à tout type de document.

Document.createElement ()

Dans un document HTML, document.createElement()méthode crée l'élément HTML spécifié

par une balise , ou un élement HTML inconnu si la balise n'est pas reconnu.

Syntaxe

var element = document .createElement ( tagName [, options ]);

appendChild()

appendChild() , méthode pour ajouter un nœud à la fin de la liste des nœuds enfants d'un nœud
parent spécifié.

appendChild()peut être utilisé pour déplacer un nœud enfant existant vers la nouvelle position
dans le document.

Syntaxe :

parentNode.appendChild(childNode);

La méthode HTMLCanvasElement.getContext() retourne un contexte de dessin sur le canevas,

ou null si l'identificateur de contexte n'est pas supporté.

Syntaxe
Page 62 sur 156
canvas.getContext(typeDeContexte, attributsDeContexte);

typeDeContexte :

➢ "2d", conduisant à la création d'un objet CanvasRenderingContext2D représentant un

contexte de représentation bi-dimensionnel.
➢ "webgl" (ou "experimental-webgl") pour créer un objet WebGLRenderingContext
représentant un contexte de représentation tri-dimensionnel.
➢ "webgl2" pour créer un objet WebGL2RenderingContext représentant un contexte de
représentation tri-dimensionnel.
➢ "bitmaprenderer" pour créer un ImageBitmapRenderingContext ne fournissant que la
fonctionnalité de remplacement du contenu du canevas par une ImageBitmap donnée.

CanvasRenderingContext2D.fillStyle

La propriété CanvasRenderingContext2D.fillStyle de l'API Canvas 2D spécifie la couleur ou

style à utiliser à l'intérieur des formes.

Syntaxe

ctx.fillStyle = color;

ctx.fillStyle = gradient;

ctx.fillStyle = pattern;

Options

➢ Color : Une DOMString analysée comme valeur CSS <color>.

➢ Gradien : Un objet CanvasGradient (un gradient linéaire ou radial).
➢ Pattern : Un objet CanvasPattern (une image répétée).

La méthode CanvasRenderingContext2D.fillRect()

La méthode CanvasRenderingContext2D.fillRect() de l'API 2D des Canvas dessine un

rectangle plein aux coordonnées (x, y), aux dimensions déterminées par largeur et hauteur et au
style déterminé par l'attribut fillStyle.

Syntaxe

void ctx.fillRect(x, y, largeur, hauteur);

Paramètres

Page 63 sur 156

 ➢ X : L’ordonnée x des coordonnées du point de départ du rectangle.
➢ Y : L'abscisse y des coordonnées du point de départ du rectangle.
➢ Largeur : La largeur du rectangle.
➢ Hauteur : La hauteur de rectangle.

2. Project de création du canvas

Index.html

<!Doctype html>

<html>

<head>

<title> SNAKE GAME</title>

<script src="script.js"></script>

</head>

<body>

</body>

</html>

Script.js

window.onload = function()

// création d'un élement de type canvas

var canvas = document.createElement ('canvas');

canvas.width = 900;

canvas.height = 600;

canvas.style.border ="1px solid";

/* liason de notre élement canvas à notre page web au niveau du body*/

document.body.appendChild(canvas);

Page 64 sur 156

 // creation du contexte

var ctx = canvas.getContext('2d');

ctx.fillStyle = "#FF0000";

ctx.fillRect(30 ,30 , 100, 50);

3. Projet de rafraichir le Canvas

La méthode CanvasRenderingContext2D.clearRect

La méthode CanvasRenderingContext2D.clearRect() de l'API 2D des Canvas met en noir

transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées (x, y)
et par les tailles (largeur, hauteur), supprimant tout contenu précédemment dessiné.

Syntaxe

void ctx.clearRect(x, y, largeur, hauteur);

Paramètres
Page 65 sur 156
X : La coordonnée sur l'axe des x du point de départ du rectangle.

Y : La coordonnée sur l'axe des y du point de départ du rectangle.

Largeur : La largeur du rectangle.

Hauteur : La hauteur de rectangle.

Méthode setTimeout ()

La méthode setTimeout(), rattachée au mixin WindowOrWorkerGlobalScope (et qui succède

à window.setTimeout()) permet de définir un « minuteur » (timer) qui exécute une fonction ou
un code donné après la fin du délai indiqué.

La méthode setTimeout () appelle une fonction ou évalue une expression après un nombre
spécifié de millisecondes.

Astuce : 1000 ms = 1 seconde.

Astuce : La fonction n'est exécutée qu'une seule fois

Syntaxe

setTimeout(function, milliseconds, param1, param2, ...)

Pour bien mener le projet de rafraichir le canvas nous allons redéfinir le :

Etape 1 : définition des variables accessibles

➢ var canvas; : declaration du canvas

➢ var ctx; : declaration de variable context pour dessiner dans notre canvas
➢ var delay = 100; : variable définissant notre délai de refraichissement

Déclaration des coordonnées spécifique :

➢ var xCoord = 0;
➢ var yCoord = 0;

Étapes 2 : création et exécution de la fonction d’initiation [function Init()]

Etapes 3 : création de la fonction de rafraichissement du canvas [function refreshCanvas()]

index.html

<!Doctype html>

Page 66 sur 156

<html>

<head>

<title> SNAKE GAME</title>

<script src="script.js"></script>

</head>

<body>

</body>

</html>

Scripts.js

window.onload = function()

// definition des variables accessible

var canvas;

var ctx;

var delay = 100;

var xCoord = 0;

var yCoord = 0;

// exécution de la fonction initialisation

init();

//création d'une fontion d'initialisation

function init()

canvas = document.createElement ('canvas');

canvas.width = 900;

Page 67 sur 156

 canvas.height = 600;

canvas.style.border ="1px solid";

document.body.appendChild(canvas);

ctx = canvas.getContext('2d');

refreshCanvas();

// fonction de rafraichissement du canvas

function refreshCanvas()

xCoord += 2;

yCoord += 2;

ctx.clearRect(0,0, canvas.width,canvas.height);

ctx.fillStyle = "#ff0000";

ctx.fillRect(xCoord,yCoord, 100, 50);

setTimeout (refreshCanvas,delay);

4. Projet serpent

Logique du projet:

nous allons commencer par expliquer la logique de projet , notre canvas sera en quelque sorte
une grille composé de blocs dimmensions égales, chaque bloc se caractérisent par une position
(x,y).

Page 68 sur 156

Le corps de notre serpent sera un ensemble de petits blocks dont la tête est le block qui avancent
en premier

La méthode CanvasRenderingContext2D.save()

La méthode CanvasRenderingContext2D.save() de l'API Canvas 2D API enregistre l'état

complet du canvas en plaçant l'état courant dans une stack.

L'état du dessin

L'état du dessin qui est sauvegardé dans un stack se compose de :

➢ La matrice de transformation actuelle.

➢ La région de détourage actuelle.
➢ Le tableau pour les tracés en pointillés.
➢ Les valeurs des attributs

Syntaxe

void ctx.save();

Page 69 sur 156

La méthode CanvasRenderingContext2D.restore()

La méthode CanvasRenderingContext2D.restore() de l'API Canvas 2D restaure l'état du

canevas le plus récemment enregistré en faisant apparaître l'entrée du haut dans la pile d'état du
dessin. S'il n'y a pas d'état enregistré, cette méthode ne fait rien.

Syntaxe

void ctx .restore ();

La méthode slice()

La méthode slice() renvoie un objet tableau, contenant une copie superficielle (shallow copy)
d'une portion du tableau d'origine, la portion est définie par un indice de début et un indice de
fin (exclus). Le tableau original ne sera pas modifié.

Syntaxe :

arr.slice()

arr.slice(début)

arr.slice(début, fin)

Paramètres

Début (Facultatif)

➢ Indice (à partir de zéro) depuis lequel commencer l'extraction.

➢ S'il s'agit d'un indice négatif, début indique un décalage depuis la fin de la séquence.
➢ Si début est absent, slice() commencera depuis 0.
➢ Si début est supérieur à la taille du tableau, c'est un tableau vide qui sera renvoyé.

Fin (Facultatif)

➢ Indice (à partir de zéro) auquel arrêter l'extraction.

➢ S'il s'agit d'un indice négatif, fin indique un décalage depuis la fin de la séquence.
➢ Si fin n'est pas fourni, slice() extraira jusqu'à la fin de la séquence (arr.length).
➢ Si fin est supérieur à la longueur de la séquence, slice() fera une extraction jusqu'à la fin
de la séquence.

Page 70 sur 156

La méthode unshift()

La méthode unshift() ajoute un ou plusieurs éléments au début d'un tableau et renvoie la

nouvelle longueur du tableau.

Syntaxe

arr.unshift([élém1[, ...[, élémN]]])

Paramètres

élémN : Les éléments que l'on souhaite ajouter en début de tableau.

La méthode pop()

La méthode pop() supprime le dernier élément d'un tableau et retourne cet élément. Cette
méthode modifie la longueur du tableau.

Syntaxe

arr.pop()

Objet Serpent

L’objet serpent va nous permettre de créer notre serpent qui doit avancer dans le jeu pour cela
il aura comme propriéte le body et deux méthodes dessiner et avancer

Voici le schéma de l’objet Serpent :

Snake
Body :[ array]

Draw()
Advance()

Pour mieux cerner le projet des nouvelles variables vont s’ajouter ou d’autres seront modifier :

➢ var canvasWidth = 900;

➢ var canvasHeight = 600;
➢ var blockSize =30; (pour les blocks)
➢ var ctx;
➢ var delay = 100;

Page 71 sur 156

 ➢ var snakee;

De nouvelles fonction et Objet seront intégrée :

➢ Fonction dessine block

➢ Objet serpent :
✓ Propriétés : this.body
✓ Les méthodes (this.draw [snakee.draw()] , this.advance[snakee.advance()]

Le code Html reste le même donc nous donnerons le code javascript

Script.js

window.onload = function()

// definition des variables accessible

var canvasWidth = 900;

var canvasHeight = 600;

var blockSize =30;

var ctx;

var delay = 100;

var snakee;

// exécution de la fonction initialisation

init();

//création d'une fontion d'initialisation

function init()

var canvas = document.createElement('canvas');

Page 72 sur 156

 canvas.width = canvasWidth;

canvas.height = canvasHeight;

canvas.style.border ="1px solid";

document.body.appendChild(canvas);

ctx = canvas.getContext('2d');

snakee = new Snake([[6,4],[5,4],[4,4]]);

refreshCanvas();

// fonction de rafraichissement du canvas

function refreshCanvas()

ctx.clearRect(0,0,canvasWidth,canvasHeight);

snakee.advance();

snakee.draw();

setTimeout (refreshCanvas,delay);

// fonction dessine block

function drawBlock(ctx, position)

var x = position[0] * blockSize;

var y = position[1] * blockSize;

Page 73 sur 156

 ctx.fillRect(x,y,blockSize,blockSize);

// Objet serpent

function Snake(body)

this.body = body;

this.draw = function()

ctx.save();

ctx.fillStyle = "#ff0000";

for(var i=0; i < this.body.length; i++)

drawBlock(ctx,this.body[i]);

ctx.restore();

};

this.advance = function ()

var nextPosition = this.body[0].slice();

nextPosition[0] += 1;

this.body.unshift(nextPosition);

Page 74 sur 156

 this.body.pop();

5. Projet diriger le serpent

L'événement onkeydown

L'événement onkeydown se produit lorsque l'utilisateur appuie sur une touche (sur le clavier).

Syntaxe

En HTML :

<element onkeydown="myScript">

En JavaScript :

object.onkeydown = function(){myScript};

La propriété keyCode

La propriété keyCode renvoie le code de caractère Unicode de la clé qui a déclenché

l’événement onkeypress ou le code de clé Unicode de la clé qui a déclenché l’événement
onkeydown ou onkeyup.

Syntaxe :

event.keyCode

La méthode indexOf()

La méthode indexOf() renvoie le premier indice pour lequel on trouve un élément donné dans
un tableau. Si l'élément cherché n'est pas présent dans le tableau, la méthode renverra -1.

indexOf compare élémentRecherché aux éléments contenus dans le tableau en utilisant une
égalité stricte (la même méthode utilisée par l'opérateur ===).

Page 75 sur 156

Syntaxe

arr.indexOf(élémentRecherché)

arr.indexOf(élémentRecherché, indiceDébut)

Paramètres

➢ élémentRecherché : L'élément qu'on cherche dans le tableau

➢ indiceDébut (Facultatif) : L'index à partir duquel commencer la recherche.
✓ La valeur par défaut est 0 (le tableau sera parcouru dans sa totalité).
✓ Si l'index est plus grand ou égal à la longueur du tableau, la méthode renverra -
1.
✓ Si l'index est négatif, la recherche commencera d'autant d'éléments, à partir de
la fin du tableau

L'instruction throw

L'instruction throw permet de lever une exception définie par l'utilisateur. Lorsqu'on lève une
exception, expression fournit la valeur de l'exception.

Syntaxe

throw expression;

➢ expression : L'expression qui fournit l'exception à lever.

Analyse du projet

Le serpent doit pouvoir se déplacer en fonction de la direction que le joueur utilise mais faut
noter aussi que cela se fait selon une logique car le serpent est doté d’une tête et une queue.

Faut noter aussi que pour réussir cette phase du projet qui consiste à diriger le serpent nous
allons introduire :

➢ La propriété direction (Objet serpent / [this.direction = direction] )

➢ La méthode diriger [this.setDirection = function(newDirection)]
➢ La fonction de saisir de touche de direction (document.onkeydown = function
handleKeydown (e))
➢ Appeler la méthode diriger (snakee.setDirection(newDirection);)

Page 76 sur 156

Schéma de l’objet Serpent :

SNAKE
Body
Direction
Avancer ()
Diriger ()

Schéma des positions de direction

Le déplacement du serpent initialement va de la gauche vers la droite

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

Le déplacement se faire dans un repère orthonormé

Script.js

window.onload = function()

Page 77 sur 156

{

// definition des variables accessible

var canvasWidth = 900;

var canvasHeight = 600;

var blockSize =30;

var ctx;

var delay = 100;

var snakee;

// exécution de la fonction initialisation

init();

//création d'une fontion d'initialisation

function init()

var canvas = document.createElement('canvas');

canvas.width = canvasWidth;

canvas.height = canvasHeight;

canvas.style.border ="1px solid";

document.body.appendChild(canvas);

ctx = canvas.getContext('2d');

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

refreshCanvas();

Page 78 sur 156

 }

// fonction de rafraichissement du canvas

function refreshCanvas()

ctx.clearRect(0,0,canvasWidth,canvasHeight);

snakee.advance();

snakee.draw();

setTimeout (refreshCanvas,delay);

// fonction dessine block

function drawBlock(ctx, position)

var x = position[0] * blockSize;

var y = position[1] * blockSize;

ctx.fillRect(x,y,blockSize,blockSize);

// OBjet serpent

function Snake(body,direction)

this.body = body;

this.direction = direction;

Page 79 sur 156

this.draw = function()

ctx.save();

ctx.fillStyle = "#ff0000";

for(var i=0; i < this.body.length; i++)

drawBlock(ctx,this.body[i]);

ctx.restore();

};

this.advance = function ()

var nextPosition = this.body[0].slice();

switch(this.direction)

case "left":

nextPosition[0] -=1;

break;

case "right":

nextPosition[0] +=1;

break;

Page 80 sur 156

 case "down":

nextPosition[1] +=1;

break;

case "up":

nextPosition[1] -=1;

break;

default:

throw("direction not possible");

this.body.unshift(nextPosition);

this.body.pop();

};

this.setDirection = function(newDirection)

var allowedDirections;

switch(this.direction)

case "left":

case "right":

allowedDirections = ["up","down"];

break;

Page 81 sur 156

 case "down":

case "up":

allowedDirections = ["left","right"];

break;

default:

throw("direction not possible");

if(allowedDirections.indexOf(newDirection) > -1)

this.direction = newDirection;

};

// création des touche de direction

document.onkeydown = function handleKeydown (e)

var key = e.keyCode;

var newDirection;

switch(key)

case 37:

Page 82 sur 156

 newDirection = "left";

break;

case 38:

newDirection = "up";

break;

case 39:

newDirection = "right";

break;

case 40:

newDirection = "down";

break;

default:

return;

snakee.setDirection(newDirection);

6. Projet création de la pomme

La méthode CanvasRenderingContext2D.beginPath()

La méthode CanvasRenderingContext2D.beginPath() de l'API Canvas 2D permet de

commencer un nouveau chemin en vidant la liste des sous-chemins. Appelez cette méthode
quand vous voulez créer un nouveau chemin

Page 83 sur 156

Syntaxe

void ctx.beginPath();

La méthode CanvasRenderingContext2D.arc()

La méthode CanvasRenderingContext2D.arc() de l'API Canvas 2D permet d'ajouter un arc de

cercle au tracé, en le centrant aux positions (x, y) et avec un rayon r qui démarre à angleDépart
et qui finit à angleFin, dans la direction de sensAntiHoraire (par défaut en sens horaire).

Syntaxe

void ctx.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);

Paramètres

➢ X : La position en x du centre de l'arc.

➢ Y : La position en y du centre de l'arc.
➢ Radius (rayon) : Le rayon de l'arc.
➢ startAngle (angle départ) : La valeur de l'angle avec laquelle démarre l'arc de cercle,
mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
➢ endAngle (angle fin) : La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée
dans le sens horaire à partir de l'axe x positif et exprimé en radians.
➢ anticlockwise (sens anti-horaire) Facultatif : Un Booléen facultatif qui, si à true(vrai),
indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les
deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.

La méthode CanvasRenderingContext2D.fill()

La méthode CanvasRenderingContext2D.fill() de l'API Canvas 2D remplit le chemin courant

ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur
non nul ou la règle de remplissage pair/impair.

Syntaxe

void ctx.fill([fillRule]);

void ctx.fill(path[, fillRule]);

Page 84 sur 156

Paramètres

fillRule : L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du

chemin. Valeurs possibles :

➢ "nonzero": La règle de remplissage extérieur/intérieur non nul, qui est la règle par
défaut.
➢ "evenodd": La règle de remplissage pair/impair.

Path : Un chemin Path2D à remplir.

Conception du projet pomme

Pour concevoir la pomme il faut :

➢ Créer l’objet pomme qui est composé du paramètre position [function Apple(position)]
dons elle sera composé de la propriété [this.position = position;] et de méthodes
[this.draw = function ()]
➢ Créer la variable générale appelé applee [var applee;]
➢ Initialiser la variable [var applee;] au niveau de la fonction d’initialisation : applee =
new Apple([10,10]);
➢ Au niveau de fonction rafraichir on va appeler la méthode dessiner de l’objet Pomme :
applee.draw();

Schéma de l’objet pomme

Apple

Position

Dessiner ()

Scripts.js

window.onload = function()

// definition des variables accessible

Page 85 sur 156

 var canvasWidth = 900;

var canvasHeight = 600;

var blockSize =30;

var ctx;

var delay = 100;

var snakee;

var applee;

// exécution de la fonction initialisation

init();

//création d'une fontion d'initialisation

function init()

var canvas = document.createElement('canvas');

canvas.width = canvasWidth;

canvas.height = canvasHeight;

canvas.style.border ="1px solid";

document.body.appendChild(canvas);

ctx = canvas.getContext('2d');

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

applee = new Apple([10,10]);

Page 86 sur 156

 refreshCanvas();

// fonction de rafraichissement du canvas

function refreshCanvas()

ctx.clearRect(0,0,canvasWidth,canvasHeight);

snakee.advance();

snakee.draw();

applee.draw();

setTimeout (refreshCanvas,delay);

// fonction dessine block

function drawBlock(ctx, position)

var x = position[0] * blockSize;

var y = position[1] * blockSize;

ctx.fillRect(x,y,blockSize,blockSize);

// Objet serpent

function Snake(body,direction)

Page 87 sur 156

this.body = body;

this.direction = direction;

this.draw = function()

ctx.save();

ctx.fillStyle = "#ff0000";

for(var i=0; i < this.body.length; i++)

drawBlock(ctx,this.body[i]);

ctx.restore();

};

this.advance = function ()

var nextPosition = this.body[0].slice();

switch(this.direction)

case "left":

nextPosition[0] -=1;

break;

case "right":

Page 88 sur 156

 nextPosition[0] +=1;

break;

case "down":

nextPosition[1] +=1;

break;

case "up":

nextPosition[1] -=1;

break;

default:

throw("direction not possible");

this.body.unshift(nextPosition);

this.body.pop();

};

this.setDirection = function(newDirection)

var allowedDirections;

switch(this.direction)

case "left":

case "right":

Page 89 sur 156

 allowedDirections = ["up","down"];

break;

case "down":

case "up":

allowedDirections = ["left","right"];

break;

default:

throw("direction not possible");

if(allowedDirections.indexOf(newDirection) > -1)

this.direction = newDirection;

};

// Objet pomme

function Apple(position)

this.position = position;

this.draw = function ()

Page 90 sur 156

 ctx.save();

ctx.fillStyle = "#00FF00";

ctx.beginPath();

var radius = blockSize/2;

var x = position[0]*blockSize + radius;

var y = position[1]*blockSize + radius;

ctx.arc(x,y,radius,0,Math.PI*2,true);

ctx.fill();

ctx.restore();

};

// création des touche de direction

document.onkeydown = function handleKeydown (e)

var key = e.keyCode;

var newDirection;

switch(key)

case 37:

newDirection = "left";

break;

Page 91 sur 156

 case 38:

newDirection = "up";

break;

case 39:

newDirection = "right";

break;

case 40:

newDirection = "down";

break;

default:

return;

snakee.setDirection(newDirection);

7. Projet le serpent s’est pris un mur

Dans ce projet l’objectif est d’empêcher le serpent de sortir des murs et même de l’éviter
d’entrer en collision avec les murs par la suite nous verrons aussi qu’il ne doit pas entrer en
collisions avec lui-même pour commencer notre projet nous allons nous intéresser à l’objet
serpent en introduisant une nouvelle méthode qui sera vérifier_collisions voici le schéma de
l’objet serpent :

Page 92 sur 156

 SNAKE
Body
Direction
Dessiner()
Avancer()
Diriger()
Verifier_Collision()

Voici comment nous procéderons techniquement parlant :

Etape1 : Introduction de deux nouvelles variables au niveau des variables accessible

➢ La largeur dans le bloc [var widthInBlocks = canvasWidth/blockSize;]

➢ La hauteur dans le bloc [var heightInBlocks = canvasHeight/blockSize;]

Etapes 2 : redéfinition de la fonction refresh canvas

Dans cette fonction nous allons la restructurer en introduisant une condition [

if(snakee.checkCollision())] :

function refreshCanvas()

snakee.advance();

if(snakee.checkCollision())

//GAME OVER

else

ctx.clearRect(0,0,canvasWidth,canvasHeight);

snakee.draw();

Page 93 sur 156

 applee.draw();

setTimeout (refreshCanvas,delay);

Dans ce code nous vérifions la conditions de la collision d’abord le serpent se déplace

[snakee.advance();] ensuite lors de son déplacement si il fait une collision la partie est terminé
sinon on rafraichir ses mouvement à chaque foi.

Script.js

window.onload = function()

// definition des variables accessible

var canvasWidth = 900;

var canvasHeight = 600;

var blockSize =30;

var ctx;

var delay = 100;

var snakee;

var applee;

var widthInBlocks = canvasWidth/blockSize;

var heightInBlocks = canvasHeight/blockSize;

// exécution de la fonction initialisation

init();

//création d'une fontion d'initialisation

function init()

Page 94 sur 156

 var canvas = document.createElement('canvas');

canvas.width = canvasWidth;

canvas.height = canvasHeight;

canvas.style.border ="1px solid";

document.body.appendChild(canvas);

ctx = canvas.getContext('2d');

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

applee = new Apple([10,10]);

refreshCanvas();

// fonction de rafraichissement du canvas

function refreshCanvas()

snakee.advance();

if(snakee.checkCollision())

//GAME OVER

else

ctx.clearRect(0,0,canvasWidth,canvasHeight);

snakee.draw();

applee.draw();

setTimeout (refreshCanvas,delay);

Page 95 sur 156

 }

// fonction dessine block

function drawBlock(ctx, position)

var x = position[0] * blockSize;

var y = position[1] * blockSize;

ctx.fillRect(x,y,blockSize,blockSize);

// Objet serpent

function Snake(body,direction)

this.body = body;

this.direction = direction;

this.draw = function()

ctx.save();

ctx.fillStyle = "#ff0000";

for(var i=0; i < this.body.length; i++)

drawBlock(ctx,this.body[i]);

ctx.restore();

};

Page 96 sur 156

this.advance = function ()

var nextPosition = this.body[0].slice();

switch(this.direction)

case "left":

nextPosition[0] -=1;

break;

case "right":

nextPosition[0] +=1;

break;

case "down":

nextPosition[1] +=1;

break;

case "up":

nextPosition[1] -=1;

break;

default:

throw("direction not possible");

this.body.unshift(nextPosition);

this.body.pop();

};

this.setDirection = function(newDirection)

Page 97 sur 156

{

var allowedDirections;

switch(this.direction)

case "left":

case "right":

allowedDirections = ["up","down"];

break;

case "down":

case "up":

allowedDirections = ["left","right"];

break;

default:

throw("direction not possible");

if(allowedDirections.indexOf(newDirection) > -1)

this.direction = newDirection;

};

this.checkCollision = function()

var wallCollision = false;

var snakeCollision = false;

Page 98 sur 156

 var head = this.body[0];

var rest = this.body.slice(1);

var snakeX = head[0];

var snakeY = head[1];

var minX = 0;

var minY = 0;

var maxX = widthInBlocks - 1;

var maxY = heightInBlocks - 1;

var isNotBetweenHorizontalWalls = snakeX < minX || snakeX > maxX;

var isNotBetweenVerticalWalls = snakeY < minY || snakeY > maxY;

if(isNotBetweenHorizontalWalls || isNotBetweenVerticalWalls)

wallCollision = true;

for(var i = 0; i < rest.length; i++)

if(snakeX === rest[i][0] && snakeY === rest[i][1])

snakeCollision = true;

return wallCollision || snakeCollision;

};

Page 99 sur 156

// Objet pomme

function Apple(position)

this.position = position;

this.draw = function ()

ctx.save();

ctx.fillStyle = "#00FF00";

ctx.beginPath();

var radius = blockSize/2;

var x = position[0]*blockSize + radius;

var y = position[1]*blockSize + radius;

ctx.arc(x,y,radius,0,Math.PI*2,true);

ctx.fill();

ctx.restore();

};

// création des touches de direction

document.onkeydown = function handleKeydown (e)

var key = e.keyCode;

var newDirection;

switch(key)

Page 100 sur 156

 case 37:

newDirection = "left";

break;

case 38:

newDirection = "up";

break;

case 39:

newDirection = "right";

break;

case 40:

newDirection = "down";

break;

default:

return;

snakee.setDirection(newDirection);

8. Projet le serpent à manger la pomme

L'objet Math

L'objet Math est un objet natif dont les méthodes et propriétés permettent l'utilisation de
constantes et fonctions mathématiques. Cet objet n'est pas une fonction.

La fonction Math.round()

La fonction Math.round() retourne la valeur d'un nombre arrondi à l'entier le plus proche.

Syntaxe

Page 101 sur 156

Math.round(x) ;

Paramètres :

X : Un nombre.

La fonction Math.random()

La fonction Math.random() renvoie un nombre flottant pseudo-aléatoire compris dans

l'intervalle [0, 1[ (ce qui signifie que 0 est compris dans l'intervalle mais que 1 en est exclu)
selon une distribution approximativement uniforme sur cet intervalle. Ce nombre peut ensuite
être multiplié afin de couvrir un autre intervalle. La graine (seed) du générateur est choisie par
l'algorithme et ne peut pas être choisie ou réinitialisée par l'utilisateur.

Syntaxe

Math.random()

Conception du projet

D’un point de vue analytique, on peut affirmer que ce projet consistera à de manger la pomme
et chaque fois qu’il consomme le serpent se verra allonger d’un blocs cette analyse nous amène
à procéder à certaine étape :

Au niveau de la fonction de rafraichissement du canvas, ne seront amener à intégrer un

processus de vérification pour savoir si le serpent à manger la pomme
[if(snakee.EatApple(applee))]

if(snakee.EatApple(applee))

snakee.ateApple = true;

do

applee.setNewPosition();

while(applee.isOnSnake(snakee))

Page 102 sur 156

Au niveau de l’objet Serpent, nous allons intégrer une nouvelle propriété[this.ateApple =
false;] et une nouvelle méthodes qui consistera ou serpent de manger la pomme [this.EatApple
= function(appleToEat)]

this.EatApple = function(appleToEat)

var head = this.body[0];

if(head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1])

return true;

else

return false;

};

Il va falloir poser certaine condition sur la propriété mangé_serpent :

if(!this.ateApple)

this.body.pop();

else

this.ateApple = false;

Nouveau schéma de l’objet Serpent :

Page 103 sur 156

 SNAKE

Body : string
Direction : string
Mangé_serpent : booléen

Déssiner()
Avancer()
Diriger()
Vérifier_Collision()
Manger_Pomme()

Au niveau de l’objet Pomme, nous allons ajouter deux nouvelles méthodes.

➢ La première méthodes consiste à définir de nouveaux coordonnée (x ;y) des nouvelles

positions de la pomme [this.setNewPosition = function()]
this.setNewPosition = function()
{
var newX = Math.round(Math.random() * (widthInBlocks - 1));
var newY = Math.round(Math.random() * (heightInBlocks - 1));
this.position =[newX,newY];
};

➢ La seconde consiste à éviter la position de la pomme qui est définir de manière aléatoire
se retrouve sur le serpent [this.isOnSnake = function(snakeToCheck)]
this.isOnSnake = function(snakeToCheck)
{
var isOnSnake = false;
for(var i = 0; i < snakeToCheck.body.length; i++)
{
if(this.position[0] === snakeToCheck.body[i][0] && this.position[1] ===
snakeToCheck.body[i][1] )
{
isOnSnake = true;
}

Page 104 sur 156

 }
return isOnSnake;
};

Nous aurons une actualisation de certaines variables au niveau la méthodes dessiner [this.draw
= function ()] :

var x = this.position[0]*blockSize + radius;

var y = this.position[1]*blockSize + radius;

Nouveau schema de l’objet Pomme

Pomme
Position : [string]
Dessiner()
Avancer()
Verifier_Collision()
Manger_Pomme()

Script.js

window.onload = function()

// definition des variables accessible

var canvasWidth = 900;

var canvasHeight = 600;

var blockSize =30;

var ctx;

var delay = 100;

var snakee;

var applee;

Page 105 sur 156

 var widthInBlocks = canvasWidth/blockSize;

var heightInBlocks = canvasHeight/blockSize;

// exécution de la fonction initialisation

init();

//création d'une fontion d'initialisation

function init()

var canvas = document.createElement('canvas');

canvas.width = canvasWidth;

canvas.height = canvasHeight;

canvas.style.border ="1px solid";

document.body.appendChild(canvas);

ctx = canvas.getContext('2d');

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

applee = new Apple([10,10]);

refreshCanvas();

// fonction de rafraichissement du canvas

function refreshCanvas()

snakee.advance();

Page 106 sur 156

 if(snakee.checkCollision())

//GAME OVER

else

if(snakee.EatApple(applee))

snakee.ateApple = true;

do

applee.setNewPosition();

while(applee.isOnSnake(snakee))

ctx.clearRect(0,0,canvasWidth,canvasHeight);

snakee.draw();

applee.draw();

setTimeout (refreshCanvas,delay);

Page 107 sur 156

// fonction dessine block

function drawBlock(ctx, position)

var x = position[0] * blockSize;

var y = position[1] * blockSize;

ctx.fillRect(x,y,blockSize,blockSize);

// Objet serpent

function Snake(body,direction)

this.body = body;

this.direction = direction;

this.ateApple = false;

this.draw = function()

ctx.save();

ctx.fillStyle = "#ff0000";

for(var i=0; i < this.body.length; i++)

drawBlock(ctx,this.body[i]);

Page 108 sur 156

 ctx.restore();

};

this.advance = function ()

var nextPosition = this.body[0].slice();

switch(this.direction)

case "left":

nextPosition[0] -=1;

break;

case "right":

nextPosition[0] +=1;

break;

case "down":

nextPosition[1] +=1;

break;

case "up":

nextPosition[1] -=1;

break;

default:

throw("direction not possible");

Page 109 sur 156

 }

this.body.unshift(nextPosition);

if(!this.ateApple)

this.body.pop();

else

this.ateApple = false;

};

this.setDirection = function(newDirection)

var allowedDirections;

switch(this.direction)

case "left":

case "right":

allowedDirections = ["up","down"];

break;

case "down":

Page 110 sur 156

 case "up":

allowedDirections = ["left","right"];

break;

default:

throw("direction not possible");

if(allowedDirections.indexOf(newDirection) > -1)

this.direction = newDirection;

};

this.checkCollision = function()

var wallCollision = false;

var snakeCollision = false;

var head = this.body[0];

var rest = this.body.slice(1);

var snakeX = head[0];

var snakeY = head[1];

var minX = 0;

var minY = 0;

Page 111 sur 156

 var maxX = widthInBlocks - 1;

var maxY = heightInBlocks - 1;

var isNotBetweenHorizontalWalls = snakeX < minX || snakeX > maxX;

var isNotBetweenVerticalWalls = snakeY < minY || snakeY > maxY;

if(isNotBetweenHorizontalWalls || isNotBetweenVerticalWalls)

wallCollision = true;

for(var i = 0; i < rest.length; i++)

if(snakeX === rest[i][0] && snakeY === rest[i][1])

snakeCollision = true;

return wallCollision || snakeCollision;

};

this.EatApple = function(appleToEat)

var head = this.body[0];

if(head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1])

Page 112 sur 156

 {

return true;

else

return false;

};

// Objet pomme

function Apple(position)

this.position = position;

this.draw = function ()

ctx.save();

ctx.fillStyle = "#00FF00";

ctx.beginPath();

var radius = blockSize/2;

var x = this.position[0]*blockSize + radius;

var y = this.position[1]*blockSize + radius;

Page 113 sur 156

 ctx.arc(x,y,radius,0,Math.PI*2,true);

ctx.fill();

ctx.restore();

};

this.setNewPosition = function()

var newX = Math.round(Math.random() * (widthInBlocks - 1));

var newY = Math.round(Math.random() * (heightInBlocks - 1));

this.position =[newX,newY];

};

this.isOnSnake = function(snakeToCheck)

var isOnSnake = false;

for(var i = 0; i < snakeToCheck.body.length; i++)

if(this.position[0] === snakeToCheck.body[i][0] && this.position[1] ===

snakeToCheck.body[i][1] )

isOnSnake = true;

return isOnSnake;

Page 114 sur 156

 };

// création des touche de direction

document.onkeydown = function handleKeydown (e)

var key = e.keyCode;

var newDirection;

switch(key)

case 37:

newDirection = "left";

break;

case 38:

newDirection = "up";

break;

case 39:

newDirection = "right";

break;

case 40:

newDirection = "down";

break;

Page 115 sur 156

 default:

return;

snakee.setDirection(newDirection);

9. Projet Game Over

La méthode CanvasRenderingContext2D.fillText()

La méthode CanvasRenderingContext2D.fillText() de l'API Canvas 2D écrit un texte donné à

la position (x, y) donnée. Si le quatrième paramètre optionnel donnant une largeur maximum
est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.

Syntaxe

void ctx.fillText(texte, x, y [, largeurMax]);

Paramètres

Texte : Le texte à représenter en utilisant les valeurs en cours de fond, textAlign, textBaseline,
et de direction.

X : La valeur de la coordonnée sur l'axe des x du point de début du texte.

Y : La valeur de la coordonnée sur l'axe des y du point de fin du texte.

largeurMax Facultatif : La largeur maximum à dessiner.

Conception du game over

D’un point de vue analytique le game over suppose que la partie est terminé et affiche votre
score en fonction du nombre de pomme manger avant que le serpent entre en collision

On procèdera comme suite :

Au niveau de la variable globale, nous allons introduire une nouvelle variable score [var score;]

Page 116 sur 156

Au niveau de la fonction d’initiation, nous allons initialiser le score à zéro [score = 0;]

Au niveau de la fonction de rafraichissement nous incrémenteront le score [score++;]

Création de la fonction recommencer [function restart()] :

function restart()

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

applee = new Apple([10,10]);

score = 0;

refreshCanvas();

Création de la fonction score [function drawScore()]

function drawScore()

ctx.save()

ctx.fillText(score.toString(),5,canvasHeight - 5);

ctx.restore()

Création de la fonction partie terminée

function GameOver()

ctx.save()

ctx.fillText("PARTIE TERMINEE",5,20);

ctx.fillText("Appuyer sur la touche Espace pour rejouer",5,30);

ctx.restore()

Page 117 sur 156

 }

Au niveau de la création des boutons nous allons définir la touche espace pour appeler la
fonction reprise :

case 32:

restart()

return;

Scripts.js

window.onload = function()

// definition des variables accessible

var canvasWidth = 900;

var canvasHeight = 600;

var blockSize =30;

var ctx;

var delay = 100;

var snakee;

var applee;

var widthInBlocks = canvasWidth/blockSize;

var heightInBlocks = canvasHeight/blockSize;

var score;

// exécution de la fonction initialisation

init();

//création d'une fontion d'initialisation

function init()

Page 118 sur 156

 var canvas = document.createElement('canvas');

canvas.width = canvasWidth;

canvas.height = canvasHeight;

canvas.style.border ="1px solid";

document.body.appendChild(canvas);

ctx = canvas.getContext('2d');

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

applee = new Apple([10,10]);

score = 0;

refreshCanvas();

// fonction de rafraichissement du canvas

function refreshCanvas()

snakee.advance();

if(snakee.checkCollision())

GameOver()

else

if(snakee.EatApple(applee))

score++;

Page 119 sur 156

 snakee.ateApple = true;

do

applee.setNewPosition();

while(applee.isOnSnake(snakee))

ctx.clearRect(0,0,canvasWidth,canvasHeight);

snakee.draw();

applee.draw();

drawScore();

setTimeout (refreshCanvas,delay);

//fonction recommencer

function restart()

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

applee = new Apple([10,10]);

score = 0;

refreshCanvas();

// fonction score

function drawScore()

Page 120 sur 156

 {

ctx.save()

ctx.fillText(score.toString(),5,canvasHeight - 5);

ctx.restore()

//fonction partie terminée

function GameOver()

ctx.save()

ctx.fillText("PARTIE TERMINEE",5,20);

ctx.fillText("Appuyer sur la touche Espace pour rejouer",5,30);

ctx.restore()

// fonction dessine block

function drawBlock(ctx, position)

var x = position[0] * blockSize;

var y = position[1] * blockSize;

ctx.fillRect(x,y,blockSize,blockSize);

// Objet serpent

function Snake(body,direction)

this.body = body;

Page 121 sur 156

this.direction = direction;

this.ateApple = false;

this.draw = function()

ctx.save();

ctx.fillStyle = "#ff0000";

for(var i=0; i < this.body.length; i++)

drawBlock(ctx,this.body[i]);

ctx.restore();

};

this.advance = function ()

var nextPosition = this.body[0].slice();

switch(this.direction)

case "left":

nextPosition[0] -=1;

break;

case "right":

nextPosition[0] +=1;

break;

case "down":

Page 122 sur 156

 nextPosition[1] +=1;

break;

case "up":

nextPosition[1] -=1;

break;

default:

throw("direction not possible");

this.body.unshift(nextPosition);

if(!this.ateApple)

this.body.pop();

else

this.ateApple = false;

};

this.setDirection = function(newDirection)

var allowedDirections;

switch(this.direction)

case "left":

Page 123 sur 156

 case "right":

allowedDirections = ["up","down"];

break;

case "down":

case "up":

allowedDirections = ["left","right"];

break;

default:

throw("direction not possible");

if(allowedDirections.indexOf(newDirection) > -1)

this.direction = newDirection;

};

this.checkCollision = function()

var wallCollision = false;

var snakeCollision = false;

var head = this.body[0];

var rest = this.body.slice(1);

var snakeX = head[0];

var snakeY = head[1];

var minX = 0;

Page 124 sur 156

 var minY = 0;

var maxX = widthInBlocks - 1;

var maxY = heightInBlocks - 1;

var isNotBetweenHorizontalWalls = snakeX < minX || snakeX > maxX;

var isNotBetweenVerticalWalls = snakeY < minY || snakeY > maxY;

if(isNotBetweenHorizontalWalls || isNotBetweenVerticalWalls)

wallCollision = true;

for(var i = 0; i < rest.length; i++)

if(snakeX === rest[i][0] && snakeY === rest[i][1])

snakeCollision = true;

return wallCollision || snakeCollision;

};

this.EatApple = function(appleToEat)

var head = this.body[0];

if(head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1])

return true;

Page 125 sur 156

 }

else

return false;

};

// Objet pomme

function Apple(position)

this.position = position;

this.draw = function ()

ctx.save();

ctx.fillStyle = "#00FF00";

ctx.beginPath();

var radius = blockSize/2;

var x = this.position[0]*blockSize + radius;

var y = this.position[1]*blockSize + radius;

ctx.arc(x,y,radius,0,Math.PI*2,true);

ctx.fill();

ctx.restore();

};

Page 126 sur 156

 this.setNewPosition = function()

var newX = Math.round(Math.random() * (widthInBlocks - 1));

var newY = Math.round(Math.random() * (heightInBlocks - 1));

this.position =[newX,newY];

};

this.isOnSnake = function(snakeToCheck)

var isOnSnake = false;

for(var i = 0; i < snakeToCheck.body.length; i++)

if(this.position[0] === snakeToCheck.body[i][0] && this.position[1] ===

snakeToCheck.body[i][1] )

isOnSnake = true;

return isOnSnake;

};

// création des touche de direction

document.onkeydown = function handleKeydown (e)

var key = e.keyCode;

var newDirection;

Page 127 sur 156

 switch(key)

case 37:

newDirection = "left";

break;

case 38:

newDirection = "up";

break;

case 39:

newDirection = "right";

break;

case 40:

newDirection = "down";

break;

case 32:

restart()

return;

default:

return;

snakee.setDirection(newDirection);

Page 128 sur 156

 10. Projet Ajouter du style

Ce projet nous permettra de mettre en pratiques comment utiliser les styles en javascript nous
procéderons comme suite :

Au niveau de la fonction d’initiation nous utiliserons certaines propriétés de styles pour définir :

➢ La bordure : canvas.style.border ="30px solid #808080";

➢ La marge : canvas.style.margin =" 50px auto";
➢ L’affichage : canvas.style.display = "block";
➢ L’arrière plan: canvas.style.backgroundColor ="#000000";

Au niveau de la fonction refresh canvas, nous allons ordonnées certaines instructions :

➢ drawScore();
➢ snakee.draw();
➢ applee.draw();

Au niveau de la fonction score, fonction partie terminée nous allons définir certains styles :

La propriété CanvasRenderingContext2D.font

La propriété CanvasRenderingContext2D.font de l'API Canvas 2D API spécifie le style de texte

à utiliser pour dessiner du texte

Syntaxe

ctx.font = value;

La propriété CanvasRenderingContext2D.textAlign

La propriété CanvasRenderingContext2D.textAlign de l'API Canvas 2D indique l'alignement

de texte courant à utiliser lors du dessin de texte.

Syntaxe

ctx.textAlign = "left" || "right" || "center" || "start" || "end";

Options

Valeurs possibles :

Left : Le texte est aligné à gauche.

Right : Le texte est aligné à droite.

Page 129 sur 156

Center : Le texte est centré.

Start : Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes
d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).

End : Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture
de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche)

La propriété CanvasRenderingContext2D.textBaseline

La propriété CanvasRenderingContext2D.textBaseline de l'API Canvas 2D spécifie la ligne de

Syntaxe

ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"; base

de texte à utiliser lors du dessin d'un texte.

Options

Valeurs possibles :

Top : La ligne de base du texte est le haut du cadratin.

Hanging : La ligne de base du texte est la ligne de base supérieure.

Middle : La ligne de base du texte est le milieu du cadratin.

Alphabetic : La ligne de base du texte est la ligne de base normale alphabétique.

Ideographic : La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps
des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base
alphabétique.

Bottom : La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base
idéographique en ce que la ligne de base idéographique ne prend pas en considération les
jambages.

La propriété CanvasRenderingContext2D.strokeStyle

La propriété CanvasRenderingContext2D.strokeStyle de l'API Canvas 2D spécifie la couleur

ou le style à utiliser pour dessiner les lignes autour des formes.

Syntaxe

ctx.strokeStyle = color;

Page 130 sur 156

ctx.strokeStyle = gradient;

ctx.strokeStyle = pattern;

Options

Color : Une DOMString analysée comme valeur CSS <color>.

Gradient : Un objet CanvasGradient (un gradient linéaire ou radial).

Pattern : Un objet CanvasPattern (une image répétée).

La propriété CanvasRenderingContext2D.lineWidth

La propriété CanvasRenderingContext2D.lineWidth de l'API Canvas 2D définit l'épaisseur des

lignes.

Syntaxe

ctx .lineWidth = valeur ;

La méthode CanvasRenderingContext2D.strokeText()

La méthode CanvasRenderingContext2D.strokeText() de l'API Canvas 2D trace le texte fourni

à la position donnée (x, y). Si le quatrième paramètre optionnel indiquant une largeur maximale
est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.

Syntaxe

void ctx.strokeText(texte, x, y [, largeurMax]);

Paramètres

Texte : Le texte à tracer en utilisant les valeurs en cours de font, textAlign, textBaseline, et
direction.

X : La coordonnée sur l'axe des x du point de départ du texte.

Y : La coordonnée sur l'axe des y du point de départ du texte.

largeurMax Facultatif : La largeur maximum à dessiner.

Scripts.js

window.onload = function()
Page 131 sur 156
{

// definition des variables accessible

var canvasWidth = 900;

var canvasHeight = 600;

var blockSize =30;

var ctx;

var delay = 100;

var snakee;

var applee;

var widthInBlocks = canvasWidth/blockSize;

var heightInBlocks = canvasHeight/blockSize;

var score;

// exécution de la fonction initialisation

init();

//création d'une fontion d'initialisation

function init()

var canvas = document.createElement('canvas');

canvas.width = canvasWidth;

canvas.height = canvasHeight;

canvas.style.border ="30px solid #808080";

canvas.style.margin =" 50px auto";

canvas.style.display = "block";

canvas.style.backgroundColor ="#000000";

Page 132 sur 156

 document.body.appendChild(canvas);

ctx = canvas.getContext('2d');

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

applee = new Apple([10,10]);

score = 0;

refreshCanvas();

// fonction de rafraichissement du canvas

function refreshCanvas()

snakee.advance();

if(snakee.checkCollision())

GameOver()

else

if(snakee.EatApple(applee))

score++;

snakee.ateApple = true;

do

applee.setNewPosition();

Page 133 sur 156

 }

while(applee.isOnSnake(snakee))

ctx.clearRect(0,0,canvasWidth,canvasHeight);

drawScore();

snakee.draw();

applee.draw();

setTimeout (refreshCanvas,delay);

//fonction recommencer

function restart()

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

applee = new Apple([10,10]);

score = 0;

refreshCanvas();

// fonction score

function drawScore()

ctx.save()

ctx.font = "bold 200px sans-serif";

ctx.fillStyle = "#FFFF00";

Page 134 sur 156

 ctx.textAlign = "center";

ctx.textBaseline = "middle";

var centreX = canvasWidth / 2;

var centreY = canvasHeight / 2;

ctx.fillText(score.toString(),centreX,centreY);

ctx.restore()

//fonction partie terminée

function GameOver()

ctx.save()

ctx.font = "bold 70px sans-serif";

ctx.fillStyle = "#0000FF";

ctx.textAlign = "center";

ctx.textBaseline = "middle";

ctx.strokeStyle = "#FFFFFF";

ctx.lineWidth = 5;

var centreX = canvasWidth / 2;

var centreY = canvasHeight / 2;

ctx.strokeText("PARTIE TERMINEE",centreX,centreY - 180);

ctx.fillText("PARTIE TERMINEE",centreX,centreY - 180);

ctx.font = "bold 30px sans-serif";

ctx.strokeText("Appuyer sur la touche Espace pour rejouer",centreX,centreY - 120);

ctx.fillText("Appuyer sur la touche Espace pour rejouer",centreX,centreY -

120);

Page 135 sur 156

 ctx.restore()

// fonction dessine block

function drawBlock(ctx, position)

var x = position[0] * blockSize;

var y = position[1] * blockSize;

ctx.fillRect(x,y,blockSize,blockSize);

// Objet serpent

function Snake(body,direction)

this.body = body;

this.direction = direction;

this.ateApple = false;

this.draw = function()

ctx.save();

ctx.fillStyle = "#ff0000";

for(var i=0; i < this.body.length; i++)

drawBlock(ctx,this.body[i]);

ctx.restore();

Page 136 sur 156

};

this.advance = function ()

var nextPosition = this.body[0].slice();

switch(this.direction)

case "left":

nextPosition[0] -=1;

break;

case "right":

nextPosition[0] +=1;

break;

case "down":

nextPosition[1] +=1;

break;

case "up":

nextPosition[1] -=1;

break;

default:

throw("direction not possible");

this.body.unshift(nextPosition);

if(!this.ateApple)

Page 137 sur 156

 this.body.pop();

else

this.ateApple = false;

};

this.setDirection = function(newDirection)

var allowedDirections;

switch(this.direction)

case "left":

case "right":

allowedDirections = ["up","down"];

break;

case "down":

case "up":

allowedDirections = ["left","right"];

break;

default:

throw("direction not possible");

if(allowedDirections.indexOf(newDirection) > -1)

Page 138 sur 156

 {

this.direction = newDirection;

};

this.checkCollision = function()

var wallCollision = false;

var snakeCollision = false;

var head = this.body[0];

var rest = this.body.slice(1);

var snakeX = head[0];

var snakeY = head[1];

var minX = 0;

var minY = 0;

var maxX = widthInBlocks - 1;

var maxY = heightInBlocks - 1;

var isNotBetweenHorizontalWalls = snakeX < minX || snakeX > maxX;

var isNotBetweenVerticalWalls = snakeY < minY || snakeY > maxY;

if(isNotBetweenHorizontalWalls || isNotBetweenVerticalWalls)

wallCollision = true;

for(var i = 0; i < rest.length; i++)

Page 139 sur 156

 if(snakeX === rest[i][0] && snakeY === rest[i][1])

snakeCollision = true;

return wallCollision || snakeCollision;

};

this.EatApple = function(appleToEat)

var head = this.body[0];

if(head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1])

return true;

else

return false;

};

// Objet pomme

function Apple(position)

this.position = position;

Page 140 sur 156

 this.draw = function ()

ctx.save();

ctx.fillStyle = "#00FF00";

ctx.beginPath();

var radius = blockSize/2;

var x = this.position[0]*blockSize + radius;

var y = this.position[1]*blockSize + radius;

ctx.arc(x,y,radius,0,Math.PI*2,true);

ctx.fill();

ctx.restore();

};

this.setNewPosition = function()

var newX = Math.round(Math.random() * (widthInBlocks - 1));

var newY = Math.round(Math.random() * (heightInBlocks - 1));

this.position =[newX,newY];

};

this.isOnSnake = function(snakeToCheck)

var isOnSnake = false;

for(var i = 0; i < snakeToCheck.body.length; i++)

if(this.position[0] === snakeToCheck.body[i][0] && this.position[1] ===

snakeToCheck.body[i][1] )

Page 141 sur 156

 {

isOnSnake = true;

return isOnSnake;

};

// création des touche de direction

document.onkeydown = function handleKeydown (e)

var key = e.keyCode;

var newDirection;

switch(key)

case 37:

newDirection = "left";

break;

case 38:

newDirection = "up";

break;

case 39:

newDirection = "right";

break;

case 40:

Page 142 sur 156

 newDirection = "down";

break;

case 32:

restart()

return;

default:

return;

snakee.setDirection(newDirection);

11. Projet de synthèse

La méthode clearInterval()

La méthode clearInterval(), rattachée au mixin WindowOrWorkerGlobalScope, permet

d'annuler une action répétée minutée initiée via un appel à setInterval().

Syntaxe

scope.clearInterval(intervalID)
Page 143 sur 156
Paramètres

intervalID : L'identifiant de l'intervalle de répétition qu'on souhaite annuler. Cet identifiant est
renvoyé lorsqu'on appelle setInterval() pour définir l'intervalle de répétition.

Pour terminer notre projet nous allons intégrer :

➢ Au niveau des variables accessibles la variables timeout [var timeout;]

➢ Au niveau de la fonction de rafraichissement nous allons la lié à la fonction setTimeout()
[timeout = setTimeout (refreshCanvas,delay);]
➢ Au niveau de la fonction restart nous allons annuler les repétition en utilisant : [
clearInterval(timeout);]

Code final

Index.html

<!Doctype html>

<html>

<head>

<title> SNAKE GAME</title>

<script src="script.js"></script>

</head>

<body>

</body>

</html>

Scripts.js

window.onload = function()

// definition des variables accessible

var canvasWidth = 900;

var canvasHeight = 600;

Page 144 sur 156

 var blockSize =30;

var ctx;

var delay = 100;

var snakee;

var applee;

var widthInBlocks = canvasWidth/blockSize;

var heightInBlocks = canvasHeight/blockSize;

var score;

var timeout;

// exécution de la fonction initialisation

init();

//création d'une fontion d'initialisation

function init()

var canvas = document.createElement('canvas');

canvas.width = canvasWidth;

canvas.height = canvasHeight;

canvas.style.border ="30px solid #808080";

canvas.style.margin =" 50px auto";

canvas.style.display = "block";

canvas.style.backgroundColor ="#000000";

document.body.appendChild(canvas);

ctx = canvas.getContext('2d');

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

Page 145 sur 156

 applee = new Apple([10,10]);

score = 0;

refreshCanvas();

// fonction de rafraichissement du canvas

function refreshCanvas()

snakee.advance();

if(snakee.checkCollision())

GameOver()

else

if(snakee.EatApple(applee))

score++;

snakee.ateApple = true;

do

applee.setNewPosition();

while(applee.isOnSnake(snakee))

Page 146 sur 156

 ctx.clearRect(0,0,canvasWidth,canvasHeight);

drawScore();

snakee.draw();

applee.draw();

timeout = setTimeout (refreshCanvas,delay);

//fonction recommencer

function restart()

snakee = new Snake([[6,4],[5,4],[4,4]],"right");

applee = new Apple([10,10]);

score = 0;

clearInterval(timeout);

refreshCanvas();

// fonction score

function drawScore()

ctx.save()

ctx.font = "bold 200px sans-serif";

ctx.fillStyle = "#FFFF00";

ctx.textAlign = "center";

ctx.textBaseline = "middle";

Page 147 sur 156

 var centreX = canvasWidth / 2;

var centreY = canvasHeight / 2;

ctx.fillText(score.toString(),centreX,centreY);

ctx.restore()

//fonction partie terminée

function GameOver()

ctx.save()

ctx.font = "bold 70px sans-serif";

ctx.fillStyle = "#0000FF";

ctx.textAlign = "center";

ctx.textBaseline = "middle";

ctx.strokeStyle = "#FFFFFF";

ctx.lineWidth = 5;

var centreX = canvasWidth / 2;

var centreY = canvasHeight / 2;

ctx.strokeText("PARTIE TERMINEE",centreX,centreY - 180);

ctx.fillText("PARTIE TERMINEE",centreX,centreY - 180);

ctx.font = "bold 30px sans-serif";

ctx.strokeText("Appuyer sur la touche Espace pour rejouer",centreX,centreY - 120);

ctx.fillText("Appuyer sur la touche Espace pour rejouer",centreX,centreY -

120);

ctx.restore()

Page 148 sur 156

// fonction dessine block

function drawBlock(ctx, position)

var x = position[0] * blockSize;

var y = position[1] * blockSize;

ctx.fillRect(x,y,blockSize,blockSize);

// Objet serpent

function Snake(body,direction)

this.body = body;

this.direction = direction;

this.ateApple = false;

this.draw = function()

ctx.save();

ctx.fillStyle = "#ff0000";

for(var i=0; i < this.body.length; i++)

drawBlock(ctx,this.body[i]);

ctx.restore();

};

this.advance = function ()

Page 149 sur 156

{

var nextPosition = this.body[0].slice();

switch(this.direction)

case "left":

nextPosition[0] -=1;

break;

case "right":

nextPosition[0] +=1;

break;

case "down":

nextPosition[1] +=1;

break;

case "up":

nextPosition[1] -=1;

break;

default:

throw("direction not possible");

this.body.unshift(nextPosition);

if(!this.ateApple)

this.body.pop();

Page 150 sur 156

 else

this.ateApple = false;

};

this.setDirection = function(newDirection)

var allowedDirections;

switch(this.direction)

case "left":

case "right":

allowedDirections = ["up","down"];

break;

case "down":

case "up":

allowedDirections = ["left","right"];

break;

default:

throw("direction not possible");

if(allowedDirections.indexOf(newDirection) > -1)

this.direction = newDirection;

Page 151 sur 156

 }

};

this.checkCollision = function()

var wallCollision = false;

var snakeCollision = false;

var head = this.body[0];

var rest = this.body.slice(1);

var snakeX = head[0];

var snakeY = head[1];

var minX = 0;

var minY = 0;

var maxX = widthInBlocks - 1;

var maxY = heightInBlocks - 1;

var isNotBetweenHorizontalWalls = snakeX < minX || snakeX > maxX;

var isNotBetweenVerticalWalls = snakeY < minY || snakeY > maxY;

if(isNotBetweenHorizontalWalls || isNotBetweenVerticalWalls)

wallCollision = true;

for(var i = 0; i < rest.length; i++)

if(snakeX === rest[i][0] && snakeY === rest[i][1])

Page 152 sur 156

 snakeCollision = true;

return wallCollision || snakeCollision;

};

this.EatApple = function(appleToEat)

var head = this.body[0];

if(head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1])

return true;

else

return false;

};

// Objet pomme

function Apple(position)

this.position = position;

this.draw = function ()

Page 153 sur 156

 {

ctx.save();

ctx.fillStyle = "#00FF00";

ctx.beginPath();

var radius = blockSize/2;

var x = this.position[0]*blockSize + radius;

var y = this.position[1]*blockSize + radius;

ctx.arc(x,y,radius,0,Math.PI*2,true);

ctx.fill();

ctx.restore();

};

this.setNewPosition = function()

var newX = Math.round(Math.random() * (widthInBlocks - 1));

var newY = Math.round(Math.random() * (heightInBlocks - 1));

this.position =[newX,newY];

};

this.isOnSnake = function(snakeToCheck)

var isOnSnake = false;

for(var i = 0; i < snakeToCheck.body.length; i++)

if(this.position[0] === snakeToCheck.body[i][0] && this.position[1] ===

snakeToCheck.body[i][1] )

Page 154 sur 156

 isOnSnake = true;

return isOnSnake;

};

// création des touche de direction

document.onkeydown = function handleKeydown (e)

var key = e.keyCode;

var newDirection;

switch(key)

case 37:

newDirection = "left";

break;

case 38:

newDirection = "up";

break;

case 39:

newDirection = "right";

break;

case 40:

newDirection = "down";

Page 155 sur 156

 break;

case 32:

restart()

return;

default:

return;

snakee.setDirection(newDirection);

Page 156 sur 156