karine-jamet / atelier-lycee

atelier-lycee

http://karine-jamet.github.io/atelier-lycee/

Etape 1: Structure
Doctype html head meta body title link(css) link(js)

Etape 2 : Organisation
Créer une section dans laquelle sera le jeu
Mettre un titre(h1)/consigne(p)
Créer un espace avec une div pour l'ordinateur
Créer un espace avec une div pour les boutons
Mettre des class pour le css aux div

Etape 3: Récupération
Utilisation des icones sur fontawesome
Mettre les icones dans chaque div

Etape 4: Style
Ajouter du style dans le fichier css
Mettre un background de couleur au body
Centrer la section
Donner une largeur (width) et une hauteur (height)
Donner une couleur au titre/contenu
Chercher une font( dafont/googlefont)
Installer la font
Grossir la taille des icones
Rendre invisible les icones
Mettre un border aux div
Mettre des hover

Sauvegarder et afficher via le navigateur

Etape 5: Javascript
Maintenant nous allons coder notre jeu, le choix du joueur, le choix de l'ordinateur, gérer les différents cas. (qui gagne, égalité...etc ). Pour réaliser cela nous utiliserons une librairie javascript très répendue JQuery, qui nous permettra d'alléger notre code.
Le but de javascript est de dynamiser notre page html, nous utiliserons pour cela les classes CSS affectées à nos balises html.
Par convention, et pour une meilleure fonctionnalitée, nous insèrerons notre script dans un $(document).ready.
$(document).ready(function(){ // oncodera l'ensemble de notre jeu dans cette fonction. }
Pour commencer nous allons créer notre fichier script.js et le lier à notre page html. Pour cela nous utiliserons l'attribut src de notre balise <script> : <script src="script.js">.

Etape 6: Le joueur clique
La seule action du joueur est de sélectionner avec sa souris l'une des trois propositions (pierre, feuille ou ciseaux). Nous devons maintenant coder cette action.
$("classeIcone").on("click", function(){ // on codera l'ensemble des conséquences du click du joueur dans cette fonction. }
Etape 7: Choix de l'ordi
Le choix de l'ordi reste une conséquence de l'action de click du joueur, nous continuons de coder dans notre fonction .on("click").
Si on récapitule, on doit se retrouver avec :

$(document).ready(function(){ $("classeIcone").on("click", function(){ // Création d'une variable choix de l'ordinateur } }
Comme expliqué ci-dessus, nous allons stocker le choix de l'ordinateur dans une variable et lui affecter une valeur (exemple: var choixOrdi = ...).
Le choix de l'ordinateur doit être une valeur aléatoire. Nous devons alors lui affecter une valeur comprise entre 1 et 3 et cela générée de manière aléatoire.
Petit indice --> Les fonctions Math.floor() et Math.random() peuvent nous être très utile à cette étape.

Etape 8: Affichage du choix de l'ordinateur
Pour cela nous devons créer une classe CSS qui nous permettra, de créer l'effet voulu. Cette classe sera ajoutée à l'icone correspondant au choix de l'ordinateur.
Indice --> $(".ordinateur > .fa:nth-child("+ordiChoix+")").addClass("nouvelleClasse");

Etape 9: Conditions pour interpréter tous les résultats possibles
Structure de la condition if
if (condition1) instruction1 else if (condition2) instruction2 else if (condition3) instruction3 ... else instructionN
Dans cette partie nous allons gérer tous les cas, égalité, qui gagne ... etc.

Etape 10: Score