FERRAILLE Marine TS1 29/05/2015. Les deux autres membres du groupe : Projet ISN MONNIER Valentin MORONVAL Sasha COLBERT 4

Transcription

1 FERRAILLE Marine TS1 29/05/2015 Les deux autres membres du groupe : Projet ISN MONNIER Valentin MORONVAL Sasha COLBERT 4

2 SOMMAIRE I) Présentation du jeu -Règle du jeu -Page d accueil du site II) Analyse des besoins -Enjeu -Problématique -Cahier des charges III) Répartition des tâches -Démarche collaborative IV) Partie personnelle -Démarche de mon travail -Les difficultés rencontrées V) Partie commune VI) Bilan et perspectives ANNEES

3 I) Présentation du jeu Règle du jeu : Le puissance 4 est un jeu qui se joue à deux. Le but du jeu est d'aligner quatre pions sur une grille comptant six rangées et sept colonnes. Chaque joueur dispose de vingt et un pions. Tour à tour les deux joueurs placent un pion dans la colonne de leur choix, le pion coulisse alors jusqu'à la position la plus basse possible. Ensuite c'est à l'adversaire de jouer. Le vainqueur est celui qui arrivera le premier à aligner soit en diagonale, à l'horizontal ou encore à la verticale quatre pions de la même couleur. Si toute la grille est remplie, mais qu'il n'y a pas d'alignement de quatre pions pour aucun des joueurs, dans ce cas la partie est déclarée nulle. Page d'accueil du site :

4 II) Analyse des besoins L'enjeu : Les loisirs prennent de plus en plus de place dans notre société. Les jeux vidéos n'échappent pas à cette règle. Pouvoir jouer sur son ordinateur, sa tablette ou son téléphone à un jeu qui nous a passionné autrefois, intéresse de nombreuses personnes. La problématique : Comment recréer sur un support numérique un jeu d'autrefois? Le cahier des charges : Fonctionnalités attendues du projet Créer une page web dynamique, en utilisant les langages HTML 5, CSS 3 et JavaScript afin de recréer le jeu «Puissance 4». Présenter dans une fenêtre pop-up la règle du jeu. Proposer aux utilisateurs un niveau de difficultés (2,3 ou 4). Proposer aux utilisateur de jouer à plusieurs ou contre l'ordinateur. Afficher le score des parties.

5 III) Répartition des tâches Rechercher les paramètres ( règles du jeu ) Identifier et analyser les spécifications du projet FERRAILLE Marine MONNIER Valentin MORONVAL Sasha Recherche de solutions Élaboration de l'algorithme de placement des pions Élaboration de l'algorithme d'alignement des pions Écriture du programme de placement des pions Écriture du programme de l'alignement des pions Test et modification si nécessaire ( placement ) Test et modification si nécessaire ( alignement ) Réalisation de la page d'accueil du site Rédaction du dossier du projet Préparation de la soutenance du projet Démarche collaborative :

6 A chaque fin de cours on s'échangeait sur nos clés USB tout ce qu'on avait fait durant la séance et pendant les vacances on s'échanger aussi des informations par boîte mail. IV) Partie personnelle Démarche de mon travail Durant ce projet je me suis concentrée sur l'élaboration des deux algorithmes, celui du placement des pions et celui de l'alignement des pions. Pour cela j'ai essayer d'écrire des algorithmes sur mon cahier. Ensuite je suis passée à l'écriture du programme de l'alignement des pions, pour cela j'ai utilisé les logiciels Topstyle et Notepad et j'ai réalisé mon programme avec le langage JavaScript. Pour la réalisation du programme j'ai été aidée de Valentin MONNIER qui était chargé de l'écriture du programme avec moi. Pour se faire j'ai réaliser un programme pour l'alignement des pions à l'horizontal puis à la verticale avec des boucles «pour». Pour ce programme j'ai créé une fonction «evaluer», celle-ci permet à l'ordinateur d'évaluer où est-ce qu'il pourra mettre son pion en fonction de l'alignement des pions déjà placés, c'est pour cela que j'ai choisi une boucle «pour», celle-ci va être exécutée jusqu'à temps que l'ordinateur puisse mettre son pion. Ensuite j'ai créé une fonction «agagner», celle-ci permet de savoir si quelqu'un à gagné. Pour cela j'ai aussi créé des boucles «pour». Cette fonction est réaliser pour l'horizontale et la verticale, si 4 pions sont alignés à l'horizontale la personne ou l'ordinateur à gagné et il en va de même pour la verticale. Les difficultés rencontrées : N'ayant jamais réaliser de programme auparavant ça m'a semblé complexe à réaliser. Le HTML et le CSS ça était, je n'ai pas trouvé ça trop compliqué, mais la partir sur le JavaScript m'était trop compliquée. Il m'a fallu beaucoup de temps pour comprendre et il y a encore beaucoup de choses que je ne sais pas. J'ai eu besoin de beaucoup d'aide pour réaliser cette partie. Mais malgré ces difficultés ça m'a plu, car c'est intéressant de pouvoir créer un jeu et ensuite le faire partager à d'autres personnes. V) Partie commune

7 Après avoir chacun écrit notre programme, nous les avons tous rassemblé pour pouvoir créer le jeu. Puis ensuite nous avons créé tous les trois la page d'accueil, et toutes les autres pages comme celle avec la règle du jeu... VI) Bilan et perspectives Par la suite, si nous avions eu plus de temps, on aurait amélioré le jeu en le rendant plus compliqué parce que avec le jeu actuel on peu gagner en quatre coups seulement, on aurait fait en sorte de pouvoir aussi aligner les pions en diagonale. On aurait utiliser le langage PHP, c'est un langage de programmation qui permet de créer des pages HTML. Le script PHP est exécuté sur le serveur et non sur le poste client (contrairement par exemple au JavaScript), cela permet de créer des pages web interactives (réponse à des formulaires, liaison avec des bases de données...). Donc ce langage nous aurait permis de faire en sorte que les personnes puisent sauvegarder leurs parties. Ce projet m'a apporté des connaissances en informatique, car avant je ne connaissais rien de l'informatique. J'ai découvert comment créer un site et cela m'a beaucoup, même si j'ai eu beaucoup de difficultés. J'ai trouvé ça très intéressant et très instructif. Ça été une nouvelle expérience que j'aimerai bien reproduire par la suite, en créant de nouveau site avec d'autres jeux ou même encore d'autres choses que des jeux.

8 ANNEES var p = [ ]; function ajouterjeton(couleur,colonne) { for(var y = 6; y>=0; y--) { if (p[y][colonne] == 0) { p[y][colonne] = couleur; break; return y; function retirerjeton(colonne) { for(var y = 0; y<7; y++) { if (p[y][colonne]!= 0) { p[y][colonne] = 0; break; function evaluer() { var x, y, e, i, c; e = 0; for(y=0; y<7; y++) { for(x=0; x<6; x++) { c = p[y][x]; if ((c == p[y][x+1]) && (c!= 0)) { i = 0; if (x>0) { if (p[y][x-1]!= -c) i++; if (x<5) { if (p[y][x+2]!= -c) i++; e += c * i;

9 for(y=0; y<6; y++) { for(x=0; x<7; x++) { c = p[y][x]; if ((c == p[y+1][x]) && (c!= 0)) { i = 0; if (y>0) { if (p[y-1][x]!= -c) i++; if (y<5) { if (p[y+2][x]!= -c) i++; e += c * i; e = e * agagne(); return e; function agagne() { var x, y, c, joueur; joueur = 0; for(y=0; y<7; y++) { for(x=0; x<4; x++) { c = p[y][x]; if ((c == p[y][x+1]) && (c == p[y][x+2]) && (c == p[y][x+3]) && (c!= 0)) joueur = c; for(y=0; y<4; y++) { for(x=0; x<7; x++) { c = p[y][x]; if ((c == p[y+1][x]) && (c == p[y+2][x]) && (c == p[y+3][x]) && (c!= 0)) joueur = c; return joueur; function recherchercoup(couleur) { var x, e, emax, xmax; xmax = -1;

10 for(x=0; x<7; x++) { if (p[0][x]==0) { ajouterjeton(couleur,x); e = evaluer(); retirerjeton(x); if ((xmax==-1) (e*couleur > emax*couleur)) { emax = e; xmax = x; return xmax; function findejeu(message) { document.getelementbyid("ligneboutons").style.display = "none"; alert(message); function jouer(colonne) { var x,y; if (p[0][colonne]==0) { x = colonne; y = ajouterjeton(1,x); document.getelementbyid("j"+y+x).classname += " couleur1"; if (agagne()==1) findejeu("vous avez gagne"); else { x = recherchercoup(-1); y = ajouterjeton(-1,x); document.getelementbyid("j"+y+x).classname += " couleur2"; if (agagne()==-1) findejeu("l'ordianteur a gagne"); else {alert("la colonne est pleine");