Dossier 3

Projet ISN 2015
Puissance 4
Par Sasha MORONVAL
projet réalisé en coopération avec
Marine FERRAILLE et Valentin Monnier
SOMMAIRE
• Pourquoi a t-on réalisé ce projet ?
• Problématique
• Comment y avons-nous répondu ?
• Cahier des charges
• Répartition des tâches
• Ma partie de ce projet
• Avec du temps en plus, qu'aurions-nous pu faire ?
• Annexes
Pourquoi a t-on réalisé ce projet ?
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 car il est rendu plus attrayant.
Problématique
La problématique à laquelle nous avons du faire face est : Comment
recréer sur un support numérique un jeu d'autrefois ?
Comment y avons-nous répondu ?
Pour recréer ce jeu d'autrefois qui nous passionne toujours : le Puissance 4
en le rendant plus attrayant, nous avons utilisé l'outil informatique à travers
trois langages :
- Le langage HTML5 : Sert à structurer la page web, d'organiser son
contenu.
- Le langage CSS3 : Sert pour la mise en beauté de la page web.
- Le Javascript : Sert à dicter à l'ordinateur quoi faire.
Pour l'écriture des programmes nous avons utilisé les logiciels Notepad++ et
TopStyle
Cahier des charges
Afin de répondre à la problématique de la meilleure façon possible, nous
avions un cahier des charges à suivre.
Répartition des tâches :
Tâche
Rechercher les
paramètres (règles du
jeu)
Sasha
x
Marine
x
Valentin
x
Identifier et analyser
les spécifications du
projet
x
x
x
Rechercher des
solutions
x
x
x
Élaboration de
l'algorithme de
placement des pions
x
x
Élaboration de
l'algorithme
d'alignement des pions
Écriture de l'algorithme
de placement des pions
x
x
Écriture de l'algorithme
d'alignement des pions
Test et modifications si
nécessaire (placement)
x
x
x
x
x
x
x
Test et modifications si
nécessaire (alignement)
Réalisation de la page
d'accueil du site
x
x
x
Rédaction du dossier du
projet
x
x
x
Préparation de la
soutenance du projet
x
x
x
Ma partie du projet
Après avoir recherché quelles sont les règles du jeu, identifié et analysé les
spécifications du projet, cherché les solutions possibles, et réalisé la grille
en HTML, le groupe s'est scindé en deux afin de faire les différents
algoritmes en javascript : avec Marine, je me suis occupé du placement des
pions tandis que Valentin, avec l'aide de Marine, s'est occupé de
l'alignement.
Cet algorithme a été très difficile a trouver, il nous a pris plusieurs semaines
mais nous l'avons finalement trouvé. Ensuite, je l'ai tapé avec Valentin en
utilisant le logiciel TopStyle.
Ensuite des arrivée la phase de tests, mon travail a été de tester le
placement des pions afin de modifier l'algorithme si nécessaire mais ce n'a
pas été le cas, les pions se plaçaient aux bons endroits dans le grille.
Après cela, avec Marine et Valentin, j'ai réalisé le site web du projet.
Nous avons pensé à un site en quatre pages :
– une page d'accueil avec trois boutons renvoyant aux autres pages
– une page dédiée aux règles du jeu
– une page expliquant en quoi a consisté notre projet
– une page de jeu avec la grille, et les boutons permettant de
sélectionner la colonne
Nous avons amélioré le site en y incorporant des boutons renvoyant à la
page d'accueil (boutons créés en utilisant le langage HTML).
Enfin, pour l'embellir, nous avons utilisé le langage CSS.
Et avec du temps en plus, qu'aurions-nous pu
faire ?
Il est tout à fait possible d'améliorer ce Puissance 4. Avec un peu plus de
temps nous aurions cherché un moyen de sauvegarder la partie en utilisant
le langage PHP (le bouton est présent sur le site), en proposant plusieurs
niveaux de difficultés et un mode multijoueur.
Annexe : placement des pions en javascript
var p = [
[ 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0],
];
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 rechercherCoup(couleur) {
var x, e, emax, xmax;
xmax = -1;
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");}
}
Règles
Le but du jeu est d'aligner quatre pions sur une grille comptant sept 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, soit à l'horizontale soit à 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.