Le but est de créer une application web en temps réel. On se propose de programmer, à titre d'exercice, un jeu basique dans sa version la plus simple. Le jeu du morpion, par exemple, correspond à ce critère.
Ce TP invite à développer une solution sans chercher à l'imposer, sachant qu'il en existe d'autres.
Le jeu du morpion est un jeu de réflexion se pratiquant à deux joueurs au tour par tour. Le premier joueur parvenant à aligner trois pions sur une grille de neuf cases gagne la partie.
Le code proposé ci-dessous est très simplifié. S'il est retenu, il doit être à sauvegardé sous le nom "index.html". Il sera possible, par la suite, de l'améliorer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var jeu={};
jeu.tour=1;
jeu.numcoup=0;
jeu.case=[];
for (var i=1; i<=9; i++) jeu.case[i]="libre";
function jouer(n) {
if (jeu.case[n]=="libre") {
if (jeu.tour==1) {
document.getElementById("case"+n).src="pionrouge.gif";
document.getElementById("tour").innerHTML="jaune";
jeu.tour=2;
}
else {
document.getElementById("case"+n).src="pionjaune.gif";
document.getElementById("tour").innerHTML="rouge";
jeu.tour=1;
}
jeu.case[n]="prise";
jeu.numcoup++;
}
document.getElementById("numcoup").innerHTML=jeu.numcoup;
}
function raz() {
jeu.tour=1;
jeu.numcoup=0;
for (var i=1; i<=9; i++) {
jeu.case[i]="libre";
document.getElementById("case"+i).src="pasdepion.gif";
}
document.getElementById("tour").innerHTML="rouge";
document.getElementById("numcoup").innerHTML=0;
}
function razEtatJeu() {
}
function majEtatJeu() {
}
function voirEtatJeu() {
}
</script>
</head>
<body>
<h1>Jeu du Morpion</h1>
<p>Au tour du joueur au pion <span id="tour">rouge</span> de jouer.
Cliquez sur l'une des cases libres.</p>
<p>Coup numéro <span id="numcoup">0</span></p>
<p>
<img id="case1" onclick="jouer(1);" src="pasdepion.gif">
<img id="case2" onclick="jouer(2);" src="pasdepion.gif">
<img id="case3" onclick="jouer(3);" src="pasdepion.gif"><br>
<img id="case4" onclick="jouer(4);" src="pasdepion.gif">
<img id="case5" onclick="jouer(5);" src="pasdepion.gif">
<img id="case6" onclick="jouer(6);" src="pasdepion.gif"><br>
<img id="case7" onclick="jouer(7);" src="pasdepion.gif">
<img id="case8" onclick="jouer(8);" src="pasdepion.gif">
<img id="case9" onclick="jouer(9);" src="pasdepion.gif">
</p>
<p><button type="button" onclick="raz();">Rejouer une nouvelle partie</button></p>
</body>
</html>
Résultat obtenu :
Il est possible de récupérer les images ci-dessous (clic droit, enregistrer l'image sous...).
Quelle que soit la solution retenue pour construire cette application web, le serveur doit enregistrer l'état dans lequel se trouve le jeu. La case 3 est-elle libre ou pas? Combien de coups ont été joués?
L'état du jeu peut être sauvegardé :
Dans le cas où cette dernière solution est retenue, la table de cette base, à moins qu'il n'y en ait plusieurs, peut être définie de diverses manières.
On propose de créer la table "jeu" :
Liste des champs :
Pour gagner du temps et éviter de créer manuellement cette table, vous pouvez utiliser le fichier jeu.sql.
Le client doit pouvoir remettre le jeu à l'état initial, lorsqu'un joueur clique sur le bouton "Rejouer une nouvelle partie". On conseille donc d'écrire la fonction razEtatJeu() associée au fichier razEtatJeu.php.
Le fichier razEtatJeu.php :
La fonction razEtatJeu() :
Le client doit pouvoir, à tout moment, connaître l'état du jeu sauvegardé sur le serveur. Il pourra ainsi, le cas échéant, mettre à jour l'affichage. On conseille donc d'écrire la fonction voirEtatJeu() associée au fichier voirEtatJeu.php.
Le fichier voirEtatJeu.php :
La fonction voirEtatJeu() :
Le client doit pouvoir mettre à jour l'état du jeu sur le serveur, lorsqu'un joueur vient de jouer. On conseille donc d'écrire la fonction majEtatJeu() associée au fichier majEtatJeu.php.
Le fichier majEtatJeu.php :
La fonction majEtatJeu() :
Adapter l'ébauche de code afin d'atteindre l'objectif visé.
On pourra utiliser "window.setInterval()" pour appeller une fonction de manière répétée, avec un certain délai fixé entre chaque appel.