Aller à : navigation, rechercher

Cadavre-exquis

Cadavre Exquis, créer un jeu en javascript

Skull1.jpg

Introduction

Nous allons créer ici le jeu du Cadavre Exquis en JavaScript. Le JavaScript est un langage de programmation qui permet d’animer des pages Web. Les pages web se programment avec deux langages : le HTML (sert à la rédaction du texte et des pages web) et le CSS (sert à la mise en forme du texte et des pages).

Voici quelques exemples de ce que l'on peut en faire en JavaScript dans une page Web :

- ouvrir des pop-up

- faire défiler un texte

- insérer un menu dynamique (qui se développe au passage de la souris)

- proposer un diaporama d’images

- avoir une horloge "à aiguilles"

- faire en sorte que des images suivent le pointeur de la souris

- créer de petits jeux

- créer un livre dont vous êtes le héros

- etc.


Pour cet exercice, nous avons besoin de seulement deux choses : le bloc-notes de votre ordinateur – ou un logiciel éditeur de texte gratuit : Brackets - et un navigateur web qui sera Firefox ici.

Partie 1 : Créer vos fichiers

1) Créer un dossier pour votre livre : il faut mettre tous les fichiers qui sont indispensables à sa création dans le même dossier. Ces fichiers interagissent ensemble et doivent donc être au même endroit.

Créer avec le bloc note un fichier hmtl : il faut absolument le renommer « cadavre_exquis.html ».

Créer avec le bloc note un fichier css : il faut absolument le renommer « style.css ».

Créer un dossier image : c’est là que vous allez mettre vos images que vous voulez insérer dans votre histoire comme l’arrière-plan par exemple.

Tab1a.jpg

Partie 2 : La programmation

1) Dans le fichier cadavre_exquis.html : insérer ce programme.

Cela permet d’activer le langage html et le clavier pour écrire du texte.

Tab2a.jpg

Créé ton cadavre exquis

Nous allons créer ensemble une partie de cadavre exquis. Pour cela, nous allons reproduire ce jeu sous forme de programme afin qu’une phrase soit générée avec des parties de phrase choisie au hasard. Le code suivant est à insérer entre les balises <script type="text/javascript"> et </script>.

Tab3a.jpg
Tab4.jpg

Inclure des images dans ton histoire

Skull1.jpg


Nous allons insérer l’image 1 dans le fichier CSS car il s’agit de l’arrière-plan donc de la mise en forme de notre texte.

- Dans le fichier CSS

Tab7a.jpg

Partie 3 : Lancer le jeu 

Vous pouvez ainsi lancer le jeu en ouvrant le fichier HTML avec Firefox : clic droit ouvrir avec Firefox. (N’oubliez pas de sauvegarder !)

Tab8a.jpg

Si vous voulez remodifier le fichier, vous faites la même procédure mais en l’ouvrant avec le bloc-notes ou Brackets.

TAB10A.jpg

Ce programme est configuré spécifiquement pour être ouvert avec Firefox. Cela peut changer entre les navigateurs.

Pour aller plus loin : lexique

Voici des choses à savoir sur les tableaux, qui pourraient servir aux plus aventuriers !

Les tableaux, dits Arrays

Un tableau est un type de variable permettant de stocker plusieurs valeurs. Sa syntaxe s’écrit par exemple : var dinosaures = [ ]; Pour déclarer ce qu'il y a dans le tableau, on écrit : var dinosaures = ["unDino", "deuxDino", "troisDino", "etc"] ; Var correspond donc à variable Dinosaures correspond au nom choisi pour créer la variable Le contenu à l’intérieur des crochets ["…"] s’appellent l’Indice. On termine toujours notre ligne de code par " ; " pour finir notre instruction et passer à la suivante.

Pour afficher le contenu d'une des cellules dans la console, on tape : dinosaures [2] ; Le résultat sera alors "troisDino" puisqu'un tableau commence par 0 et non par 1. Ce qui signifie donc que "unDino" correspond à la valeur 0 du tableau, "deuxDino" correspond à la valeur 1 du tableau et "troisDino" correspond à la valeur 2 du tableau.

Créer un tableau dans un tableau

Tous les éléments d'un tableau n'ont pas besoin d'être du même type. On peut même mettre un tableau dans le tableau. Par exemple on écrit : var dinoEtNombre = [3, "dino", ["tricératops", "crétacé", 1993], 10] ; Puis pour afficher le résultat : dinoEtNombre [2] [0] ; Le résultat est "tricératops" car [2] renvoie à la 3ème variable déclarée dans le tableau dinoEtNombre ; et puisque nous venons d’y déclarer un tableau, [0] renvoie à la première variable déclarée dans ce dernier tableau.


Connaître la longueur d'un tableau

Pour connaître la longueur d’un tableau, on utilise la méthode "length", ce qui signifie longueur en anglais. On écrit : var dinosaures = ["unDino", "deuxDino", "troisDino"] ; Puis, pour l’obtenir : dinosaures.length ; Le résultat va donc être 3 car il y a trois chaînes de caractères (penser à utiliser console.log ou alert pour afficher ce résultat).


Insérer de nouveaux éléments dans un tableau

Quand le tableau est créé, il faut rajouter une fonction pour pouvoir rajouter d’autres éléments car dans certains cas, le tableau est verrouillé et on ne peut plus rajouter d’éléments. Il faut alors utiliser la fonction "push".

Si c’est une chaîne de caractère à la fin du tableau, on écrira : dinosaures.push("nom de l'élément à ajouter") ;

Et si c’est au début du tableau, on écrira : dinosaures.unshift("nom de l'élément à ajouter") ; Par conséquent, toutes les cellules vont être décalées d'un rang.


Supprimer des éléments dans un tableau

De même, si l’on veut supprimer le dernier élément du tableau (on dit désenfiler), on utilise la méthode "pop". Pour enlever la dernière chaîne de caractères qui est "troisDino", on écrit alors : dinosaures.pop();

Et si, on veut supprimer le premier élément, on utilise la méthode "shift". On écrit alors : dinosaures.shift( ) ; Le premier élément va donc être supprimé et les autres variables vont voir leur rang changer en conséquence.


Position d'un élément

Pour connaître la position d’un élément, on utilise la méthode "indexOf". On écrit : var dinosaures = ["unDino", "deuxDino", "troisDino"] ; Puis, pour l’obtenir : dinosaures.indexOf("unDino"); Le résultat est donc 0 puisque "unDino" est la première des chaînes caractères du tableau. La méthode Math.random()


Cette méthode va donner un nombre aléatoire. D’ailleurs random en anglais signifie « au hasard ». Le nombre renvoyé par la méthode Math.random() est compris entre 0 et 1.

Tu peux essayer dans la console pour voir ce que ça fait. J’ai obtenu ces résultats : Taper une première fois : Math.random() ; Cela donne : 0.5236398838744449 Taper une nouvelle fois : Math.random() ; Cela donne : 0.29575115369549354 Taper une dernière fois : Math.random() ; Cela donne : 0.03341091488730297

Le nombre renvoyé sera toujours inférieur à 1. Il ne sera jamais égal à 1.

Pour avoir un nombre plus grand, il faut multiplier le nombre obtenu avec Math.random(). Par exemple, pour obtenir des nombres compris entre 0 et 10, nous multiplierons le résultat de Math.random() par 10 de cette façon : Math.random()*10 ;

Taper une première fois : Math.random()*10 ; Cela donne : 4.485738930643668 Taper une nouvelle fois : Math.random()*10 ; Cela donne : 6.68390314033966 Taper une dernière fois : Math.random()*10 ; Cela donne : 1.7458429973007417

On obtient toujours un nombre à virgule en résultat (on les appelle float en javascript).

La méthode Math.floor()


Les résultats obtenus avec la méthode Math.random() ne vont pas être adaptés si l’on souhaite les utiliser comme indice d’un tableau puisque comme vu dans le test, nous avons obtenu que des chiffres à virgule. Nous avons donc besoin d’une méthode pour obtenir un nombre entier à notre résultat à virgule, il faut utiliser la méthode Math.floor() qui signifie "plancher" en anglais.

Math.floor() va ainsi transformer le nombre décimal obtenu avec Math.random() en entier en l’arrondissant au chiffre avant la virgule. Taper : Math.floor(3.21578546) ; Cela donne : 3 Taper : Math.floor(199.24547863124) ; Cela donne : 199 Taper : Math.floor(2.5478) ; Cela donne : 2

Dans notre jeu, nous aurons besoin de combiner Math.random() et Math.floor() pour générer des indices de tableaux au hasard. Taper : Math.floor(Math.random()*4); Cela donne : 3 Taper : Math.floor(Math.random()*4) ; Cela donne : 1 Taper : Math.floor(Math.random()*4); Cela donne : 0

Petit rappel sur les Variables


Une variable est une valeur que l’on va stocker en mémoire dans l’ordinateur et qui va pouvoir être réutilisée continuellement sans être rentrée de nouveau et qui varie sans cesse.

Par exemple dans un jeu vidéo, les variables sont le score, le nombre de vie, le chronomètre, ... Ce sont des informations que l’on enregistre dès le début et que l’on garde en mémoire pour le temps que va durer le jeu. Ces informations vont alors varier en fonction de la partie en cours comme le nombre de vie qui va diminuer si l’on perd contre un ennemi ou le chronomètre qui descend jusqu’à zéro et qui termine la partie quand il arrive à zéro. Attention pour stocker une valeur dans une variable, on utilise un = simple.

Exemple :

On définit une variable pour l’âge :

Var age = 18;

Camille CUVILLIER et Ludivine PERARD

Médiatrice numérique Bibliothèques de Chalons-en-Champagne

CHALONS-EN-CHAMPAGNE