Introduction réseaux et web
Le jeu 2048, première séance
Ce document est soumis auCopyright © présent sur cette page.
Copyright © présent sur cette page.
Tous les TP se font en environnement Unix.
Vous devez redémarrer votre machine de la salle de TP sous Unix si elle est sous Windows.
Au cours de cette UE, vous développerez deux mini-projets : le jeu 2048 et un réseau social. Deux séances sont consacrées au jeu 2048. Les objectifs de cette première séance sont :
HTML,CSS à une page web,PHP,PHP côté serveur.Entre deux séances de TP, vous avez au moins 15 jours pour :
Avant la prochaine séance de TP, il est impératif que vous ayez fini la page web du jeu 2048 telle que définie dans ce sujet et que vous ayez commencé la réflexion sur la programmation du jeu côté serveur :
Nouvelle partiePour travailler depuis chez vous sur le serveur web que vous utilisez en TP, suivez les instructions sur cette page.
Pour faire ce TP, vous aurez besoin des outils suivants :
Firefox) pour afficher le sujet du TP et vos pages weble terminal local)geany) pour écrire le code de vos pages web (fichiers html, css ou php)Apache) qui héberge vos pages web et exécute vos programmes phple terminal distant)
La plupart des questions posées dans les sujets de TP sont suivies d'une Aide / Mémo.
Avant de faire une question, il faut lire l'Aide / Mémo qui suit la question.
Vous allez maintenant créer les dossiers qui vont stocker vos fichiers pour les TP sur le jeu 2048 et le réseau social : jeu-2048 et reseau-social.
Dans le terminal distant, utilisez la commande mkdir pour créer les deux dossiers. Vérifiez avec la commande ls -l la présence des dossiers jeu-2048 et reseau-social.
Pour changer de dossier, la commande UNIX est cd. Dans le terminal distant, placez-vous maintenant dans le dossier jeu-2048.
Vous allez maintenant créer la page web qui va contenir le jeu 2048.
Si vous ne connaissez pas ce jeu, cliquez ici. Pour tester le jeu, cliquez par exemple ici.
HTML contenant le jeu 2048La page web du jeu 2048 doit contenir les éléments suivants :
HTML
Editez un nouveau fichier index.html dans le répertoire distant jeu-2048 qui va contenir la page du jeu.
En vous aidant de l'encadré ci-dessous et du contenu des autres pages web éditées jusqu'à présent, ajoutez dans votre fichier index.html la structure de la page en la personnalisant. Mettez Le jeu 2048 dans le titre de l'onglet et comme titre principal à votre page.
Ouvrez votre page dans votre navigateur web et observez le résultat.
Rappel : pour gagner du temps, tout au long du TP, faites un maximum de copier/coller que ce soit pour copier une commande Unix ou du code HTML/CSS/PHP. Sous Unix, pour faire un copier/coller, il suffit de sélectionner ce que l'on veut copier, de placer le curseur de la souris là où on veut coller et d'appuyer sur la roulette de la souris pour coller le texte sélectionné.
La structure de base d'une page HTML ressemble à ceci :
<!doctype html> <!-- Ceci est un commentaire --> <html> <head> <meta charset="utf-8" /> <title>Titre de votre page</title> <link rel="stylesheet" href="style.css" /> </head> <body> Le contenu de votre page ici..... <h1>Ceci est un titre très important</h1> <h2>Ceci est un titre important</h2> <h3>Ceci est un titre un peu moins important</h3> <p>Ceci est un paragraphe</p> </body> </html>
En HTML, comme pour toute écriture d'un code structuré, il faut respecter l'indentation du code. Les balises permettent de décrire les différents éléments contenus dans une page web. Elles vont permettre au navigateur web d'interpréter leur signification pour afficher la page.
La balise <head> contient l'entête du fichier, les informations globales, telles que le titre et la feuille de styles qui va être utilisée pour définir le format et la mise en forme appliqués aux éléments de la page web.
Une balise doit toujours être refermée. Par exemple, </head> termine la définition de l'en-tête de la page.
La balise <body> contient le corps de la page qui va être affiché dans le navigateur.
Les balises <h1> ou <h2> permettent d'appliquer un style prédéfini à un titre de niveau 1 ou 2. La balise <p> définit un nouveau paragraphe... Pour faire un saut de ligne, il faut utiliser la balise <br />.
Vous allez maintenant ajouter les règles du jeu en haut de la page. Le but du jeu est de faire glisser des tuiles sur une grille, pour combiner les tuiles de mêmes valeurs et créer ainsi une tuile portant le nombre 2048. Le joueur peut toutefois continuer à jouer après cet objectif atteint pour faire le meilleur score possible.
Le jeu se présente sous la forme d'une grille 4*4. Au début de la partie, deux cases contiennent un chiffre (2 ou 4). Les nombres peuvent se déplacer à droite, à gauche, en haut ou en bas. Quand deux cases de même valeur se rencontrent, elles fusionnent en une case qui vaut la somme des 2 cases fusionnées. Après chaque action du joueur, une nouvelle case apparaît avec pour valeur 2 ou 4. Le but est donc d'obtenir une case valant 2048 avant que la grille ne soit pleine et qu'aucun mouvement ne soit plus possible. Si plus aucun mouvement n'est possible, la partie est perdue.
Affichez un petit paragraphe avec les règles du jeu. Placez également le score dans la page. Au début de la partie, le score est 0.
Testez l'affichage de votre page dans le navigateur web.
styles2048.css.
Affichez le code source de la page du sujet de TP ainsi que celui de la feuille de styles associée et répondez aux questions suivantes en comparant le code et l'affichage. Vous pouvez aussi utiliser les outils de développement de Firefox.
h2section, de titre dit normal.
Ouvrez votre feuille de styles en tapant geany styles2048.css & dans le terminal distant. Améliorez votre page web en ajoutant un peu de couleurs, en justifiant le texte des paragraphes, en mettant le score en gras...
N'oubliez pas de vérifier l'affichage obtenu dans votre navigateur.
Le CSS permet d'appliquer des styles, mises en forme, positionnement de certains éléments de la page web. Il existe deux façons d'utiliser le CSS. Vous pouvez inclure des éléments de styles directement dans une balise HTML ou définir les styles dans un fichier séparé. Cela est préférable pour ne pas alourdir le code source de la page web. Voici un exemple très simple de feuille de styles :
p { color: blue; }
h1, h2 { color: red; font-size: 40px; }
.question { background-color: #FFFFFF; }
Cette feuille de styles affiche le texte des paragraphes en bleu, celui des titres de type h1 et h2 en rouge avec une taille de police de 40 pixels. Enfin, tous les éléments se réclamant de la classe question se verront appliquer la couleur blanche comme couleur de fond.
Pour structurer une page web et positionner correctement les différents objets d'une page web, on définit des conteneurs ou blocs grâce à la balise div. Il est ensuite possible d'appliquer un ensemble de propriétés de styles à un bloc grâce à l'attribut class.
Par exemple, le code ci-dessous permet de mettre un fond blanc au titre et au paragraphe contenus dans le bloc.
<div class="question"> <h2> Un titre </h2> <p> Un paragraphe <br/> sur plusieurs <br/> lignes. </p> </div>
Créez un bloc contenant les règles du jeu écrites précédemment et changez l'apparence du bloc en ajoutant une couleur de fond différente et des coins arrondis.
La grille du jeu est une grille 4*4. Il s'agit donc d'un tableau à deux dimensions avec 4 lignes et 4 colonnes.
Affichez une grille de 4*4 cases en dessous de votre titre et de votre paragraphe. Chaque case contiendra la valeur 0 pour l'instant. Cette valeur devra être centrée dans la case de la grille.
Pour créer un tableau en HTML, il faut utiliser la balise <table> ... </table> pour délimiter l'ensemble du tableau.
La balise <tr> ... </tr> permet de définir une nouvelle ligne et la balise <td>valeur</td> permet de définir une cellule et de lui donner une valeur à afficher.
Il faut donc imbriquer les balises <td> dans les balises <tr>.
Pour définir la taille d'une cellule, vous utiliserez les propriétés CSS width:100px; et height:100px;
Pour centrer un nombre dans une cellule, vous utiliserez les propriétés CSS margin et/ou padding. Aidez vous de l'Inspecteur pour visualiser où les marges et espacements s'appliquent !
Changez l'apparence de votre grille pour que toutes les cases soient des carrés gris, de même taille avec une bordure noire pour les cellules et une bordure rouge pour la grille.
Pour définir une grille, on peut également utiliser des blocs div plutôt qu'un tableau comme vous venez de le faire. Il s'agit alors de définir un bloc div qui va contenir toute la grille, lequel va contenir un autre bloc pour chaque nouvelle ligne, lequel contiendra également d'autres blocs pour chaque nouvelle cellule de la ligne. Il faut donc imbriquer les blocs div et appliquer les styles CSS appropriés à chaque type de bloc selon qu'il s'agit de la grille entière, d'une ligne ou d'une case de la grille.
En dessous de votre première grille, affichez une nouvelle grille en utilisant des blocs div imbriqués auxquels vous appliquerez des styles comme suit :
<div class="grille"> ... </div> pour la grille<div class="ligne"> ... </div> pour une ligne<div class="cellule"> ... </div> pour une celluleCette nouvelle grille doit avoir la même apparence que la première : des cases grises avec une bordure noire, une bordure rouge pour la grille et le nombre centré dans la case. Testez l'affichage : vos deux grilles doivent avoir la même apparence !
Pour que la taille de la grille s'adapte à son contenu et ne prenne pas toute la page, vous pourrez appliquer les styles
.grille { width : auto; height : auto; position : absolute; top : 200px; left : 100px; }
Pour que les cellules se placent les unes à côté des autres, vous utiliserez
.cellule { display: inline-block; }
Vous pouvez désormais afficher un tableau avec des cases carrées de taille identique, indépendamment du contenu. Cependant, si la taille de la fenêtre du navigateur change (sur un écran plus petit par exemple), votre grille ne sera pas redimensionnée en fonction de la taille de la fenêtre. Pour cela, vous pouvez définir les dimensions des cellules en pourcentage plutôt qu'en nombre de pixels.
Vous n'allez garder qu'une seule grille dans votre page. Vous pouvez choisir celle que vous voulez, cela est équivalent pour la suite du TP.
Pour prendre en compte l'action du joueur, il faut, soit intercepter un événement comme l'appui sur une touche du clavier ou un clic de souris, soit permettre au joueur de cliquer sur un lien ou un bouton dans la page du jeu. Nous allons utiliser les liens et/ou les boutons pour prendre en compte l'action du joueur car la première méthode nécessite l'utilisation du langage javascript qui sera vu en L2.
Ajoutez sur votre page un lien vers la page web de l'UE (http://perso.univ-lyon1.fr/olivier.gluck/supports_enseig.html#LIFRW). Cette page doit s'ouvrir dans un nouvel onglet lorsque l'on clique sur le lien. A quoi sert le #LIFRW dans l'URL ?
Ajoutez un autre lien qui permet de recharger la page de jeu c'est à dire un lien vers la page index.html qui se trouve dans le dossier jeu-2048.
Cliquer sur un lien hypertexte est une action qui permet d'ouvrir une autre page web que la page actuelle. Il s'agit donc de charger dans le navigateur une nouvelle URL. La nouvelle page peut s'ouvrir soit en remplaçant la page actuelle (comportement par défaut), soit dans un nouvel onglet ou une nouvelle fenêtre.
Pour définir un lien, utilisez <a href="URL du lien">ici</a>. Le texte ici devient alors un lien cliquable (en bleu souligné par défaut, sauf si défini autrement dans la feuille de style) vers l'URL du lien. Pour ouvrir le lien dans un nouvel onglet, utilisez l'attribut target="_blank" dans la balise <a>.
Un bouton cliquable est un élément d'un formulaire. Un formulaire peut contenir plusieurs types d'éléments : des boutons, des cases à cocher, des zones de texte à remplir... On parle aussi des champs d'un formulaire. Quand le formulaire est soumis, toutes les valeurs saisies dans les champs du formulaire sont transmises au serveur web et une action est exécutée. Généralement, l'action consiste à exécuter un programme PHP qui va traiter les valeurs du formulaire et renvoyer une nouvelle page HTML au client. Cette page est dite dynamique car son contenu est généré dynamiquement en fonction de ce qui a été saisi dans le formulaire.
Cliquer sur un bouton est donc une action qui va permettre l'exécution d'un programme PHP sur le serveur.
En vous aidant de l'aide ci-dessous, ajoutez un bouton centré au-dessus de la grille permettant de démarrer une nouvelle partie. Ce bouton doit être inclus dans un formulaire dont l'action sera l'exécution d'un programme nommé jeu-2048.php.
Le nom du bouton doit être action-joueur.
Le texte qui s'affiche dans le bouton doit être Nouvelle partie.
Complétez votre feuille de styles pour améliorer l'apparence du bouton. Vous pourrez par exemple mettre un fond jaune-orange et une bordure invisible.
Ajoutez sous la grille les 4 boutons permettant les actions du joueur : gauche, haut, droite, bas. Ils seront insérés dans le même formulaire que précédemment. Un clic sur l'un de ces boutons exécutera également jeu-2048.php. Le nom de tous les boutons doit être action-joueur. Ce qui permettra de distinguer le bouton cliqué sera la valeur du bouton qui sera transmise au programme PHP.
Positionnez les 4 boutons de manière intuitive pour le joueur.
A ce stade, vous avez construit une page web statique jeu-2048/index.html qui contient la page de démarrage du jeu. Nous allons maintenant construire l'interaction avec le serveur web qui va exécuter les programmes permettant de traiter les actions du joueur.
PHP
Le serveur web est distant : il ne s'exécute pas sur votre machine de la salle de TP. A chaque fois que le joueur veut faire une action, le navigateur web construit une nouvelle requête HTTP qui contient non seulement le nom du programme que le serveur doit exécuter pour traiter l'action du joueur mais aussi les informations sur l'action qui doit être réalisée.
Pour toutes les questions ci-dessous, après chaque clic sur un bouton, utilisez les outils de développement de Firefox pour observer les requêtes/réponses HTTP avec l'outil Réseau. Il faut cliquer sur une requête pour voir les en-têtes, les paramètres et la réponse.
Cliquez sur le bouton Nouvelle partie. Que se passe t-il ? Pourquoi ? Quelle est l'URL qui s'affiche dans la barre du navigateur ?
Cliquez maintenant sur un des 4 boutons de direction qui permet au joueur de jouer un coup. Quelle est l'URL qui s'affiche dans la barre du navigateur ? Qu'est-ce qui a changé par rapport au clic sur le bouton Nouvelle partie ?
Cliquez sur les autres boutons de direction et comparez l'URL.
Modifiez les valeurs saisies dans le formulaire qui se trouve un peu plus haut dans la page du sujet de TP (cette page !). Vous pouvez saisir un texte, changer la case à cocher et le bouton radio.
Cliquez sur le bouton Reset. Que se passe t-il ? Est-ce que l'URL a changé ? Cliquez maintenant sur l'un des deux boutons de soumission. Que se passe t-il ? Observez le contenu de l'URL et vérifiez que vous retrouvez toutes les valeurs que vous avez saisies dans les différents champs du formulaire.
Comme le formulaire de la page du jeu utilise la méthode get, ces informations sont transmises au serveur via l'URL. Celle-ci contient donc le nom du programme à exécuter et toutes les variables du formulaire. Cette URL est transmise au serveur web dans la requête HTTP qui est fabriquée par le navigateur web et envoyée au serveur web en passant par le réseau Internet.
Quand le serveur reçoit la requête HTTP, il récupère le nom du programme et l'exécute en lui transmettant les variables du formulaire. Le programme s'exécute, traite l'action du joueur et doit renvoyer une nouvelle page web qui va s'afficher dans le navigateur web du joueur.
Il faut donc maintenant commencer à écrire le programme PHP qui va traiter les actions du joueur ! Dans un premier temps, vous allez simplement afficher un message qui permet de savoir sur quel bouton le joueur a cliqué.
Dans le terminal distant, exécutez la commande geany jeu-2048.php &.
Copiez/Collez le petit programme ci-dessous dans jeu-2048.php et testez le dans votre navigateur. Décrivez le contenu de chacune des sept variables affichées.
Ajoutez dans votre programme PHP un appel à la fonction phpinfo(). Que fait cette fonction ?
Un programme PHP peut contenir soit du code HTML soit du code PHP. Le code PHP doit se situer à l'intérieur de la balise prévue à cet effet comme suit : <?php Votre code php ici ?>.
Pour afficher un message en PHP, il faut utiliser la commande echo.
Pour mettre des commentaires dans un code PHP, il faut utiliser /*...*/ ou //.
Pour définir/utiliser une variable, il faut utiliser $. Voici un premier exemple :
<!-- jeu-2048.php --> <html> <head> <meta charset="utf-8" /> <?php /* ici commence le code PHP qui va être éxécuté par le serveur */ $TITRE = "2048"; // TITRE est une variable qui contient "2048" ?> <title> <?php echo $TITRE; ?> </title> </head> <body> <h2>Bienvenue dans le jeu 2048 !</h2> <?php echo "HTTP_USER_AGENT="; echo $_SERVER['HTTP_USER_AGENT']; echo "<br />"; echo "HTTP_HOST="; echo $_SERVER['HTTP_HOST']; echo "<br />"; echo "DOCUMENT_ROOT="; echo $_SERVER['DOCUMENT_ROOT']; echo "<br />"; echo "SCRIPT_FILENAME="; echo $_SERVER['SCRIPT_FILENAME']; echo "<br />"; echo "PHP_SELF="; echo $_SERVER['PHP_SELF']; echo "<br />"; echo "REQUEST_URI="; echo $_SERVER['REQUEST_URI']; echo "<br />"; echo "action-joueur="; echo $_GET['action-joueur']; echo "<br />"; ?> </body> </html>
Désormais, vous savez comment on récupère la valeur des champs saisis dans un formulaire. Ces champs permettent l'interactivité entre le client et le serveur.
Pour prendre en compte les actions du joueur, vous auriez pu utiliser des liens hypertextes plutôt que des boutons d'un formulaire. Comment feriez-vous cela ? Quel serait le lien hypertexte correspondant à un clic sur le bouton bas par exemple ?
Pour changer l'action du joueur, comment feriez-vous sans cliquer ni sur un bouton ni sur un lien hypertexte ?
Le problème de la programmation en PHP est que le code s'exécute côté serveur. C'est donc plus difficile à débugger qu'un programme qui peut faire des affichages pendant son exécution. Pour pallier au problème, vous allez créer un fichier de logs qui contiendra tous les messages que vous souhaiteriez voir affichés à l'écran par votre programme PHP.
Vous allez créer un fichier PHP qui va contenir toutes les fonctions qui vous seront utiles pour le jeu 2048. Cela permet d'alléger la page du jeu et de séparer le code des fonctions PHP de la page qui gère l'exécution du jeu.
Dans ce fichier, vous allez écrire une nouvelle fonction qui permet d'ajouter un message dans un fichier texte, le fichier de logs. Dans un premier temps, ce fichier contiendra toutes les actions réalisées par le joueur. Par la suite, vous pourrez utiliser ce fichier pour débugger votre programme à chaque fois que cela sera nécessaire.
Ouvrez un nouveau fichier fonctions-2048.php dans votre éditeur. Ajoutez dedans une fonction affiche_sept_variables() qui contient le code permettant d'afficher les sept variables vues précédemment. N'oubliez pas que tout code PHP ne sera exécuté par le serveur que s'il est situé entre les balises <?php //mon code PHP ici; ?>. Dans le cas contraire, le code s'affichera dans la page du navigateur.
Dans jeu-2048.php, remplacez les lignes qui affichent les sept variables par l'appel à votre fonction. Testez et vérifiez que l'affichage est correct dans le navigateur.
Dans le terminal distant, placez vous dans le dossier jeu-2048 et copiez/collez la commande touch logs-2048.txt Cette commande permet de créer un fichier vide qui vous appartient. Si cette opération n'est pas faite, le fichier sera créé par le serveur web et vous ne pourrez plus le modifier ou le supprimer !
Ajoutez dans le fichier fonctions-2048.php, une fonction write_log($mesg) qui prend en paramètre une chaîne de caractères (le message) et l'ajoute dans le fichier de logs logs-2048.txt.
Appelez la fonction write_log($mesg) pour ajouter dans le fichier de logs un message indiquant sur quel bouton le joueur a cliqué. Testez les cinq cas et vérifiez avec la commande Unix cat que les messages s'ajoutent correctement dans votre fichier de logs. Exécutez la commande Unix ls -l dans le dossier qui contient le fichier de logs. Qui est propriétaire de ce fichier ? Quels sont les droits Unix sur ce fichier ? Avez-vous le droit de le modifier ?
Pour pouvoir utiliser vos fonctions, il faut inclure le fichier fonctions-2048.php dans jeu-2048.php. Pour cela, ajoutez <?php require_once 'fonctions-2048.php'; ?> en haut du fichier jeu-2048.php.
Une fonction en PHP se définit ainsi :
function nom_fonction ($param_fonction) { instructions; }
Pour ajouter le texte de la variable $log à la fin du fichier $file, appelez la fonction
file_put_contents($file, $log, FILE_APPEND).
Voyons maintenant comment consulter aisément le fichier de logs sans passer par le terminal distant du serveur. Vous pouvez soit utiliser une commande Unix dans le terminal local soit afficher les logs dans votre navigateur web. Pour cela, vous allez écrire une fonction permettant la lecture du fichier de logs et l'écriture de son contenu dans une page HTML destinée au navigateur web.
Dans le terminal local, tapez la commande suivante :
ssh lifrw.univ-lyon1.fr "tail -f -n 5 jeu-2048/logs-2048.txt"
Dans la page du jeu, cliquez sur les boutons et vérifiez l'affichage des logs en temps réel dans le terminal.
A quoi sert -n 5 ? Et -f ? Utiliser la commande Unix man tail pour répondre à ces questions.
Dans le navigateur web, ouvrez une nouvelle fenêtre dans laquelle vous chargerez le fichier de logs en mettant son nom dans l'URL. Cela pourrait être satisfaisant mais ne permet pas un rechargement automatique de la page.
Pour ce faire, il faut impérativement charger une page HTML ou PHP.
Editez un nouveau fichier affiche-logs.php.
Ajoutez la structure habituelle d'une page HTML. Dans l'en-tête, insérez la balise meta qui permet le rechargement automatique de la page toutes les 5 secondes.
Dans fonctions-2048.php, ajoutez une fonction affiche_logs($nbl) qui ouvre le fichier de logs, lit les $nbl dernières lignes et les renvoie dans la page HTML destinée au client.
Enfin, appelez cette fonction dans affiche-logs.php et testez l'affichage dans le navigateur.
Pour recharger la page courante toutes les 5 secondes, ajoutez
<meta http-equiv="refresh" content="5" /> entre <head> et </head>
Pour ouvrir un fichier, on utilise la fonction file("nom_fichier.txt") qui renvoie le contenu du fichier sous la forme d'un tableau, chaque élément du tableau correspondant à une ligne du fichier.
Stockez le résultat de la fonction dans une variable $logs.
Pour afficher le fichier ligne par ligne, il faut donc utiliser une boucle qui va afficher chaque élément du tableau.
Pour n'afficher que les $nbl dernières lignes, il faut donc récupérer la taille du tableau avec sizeof($logs);.
Pour tester une condition en php, il faut utiliser le if :
if ($a <5) { instruction1; } else { instruction2; }
Adaptez et utilisez la boucle suivante pour n'afficher que les éléments souhaités du tableau :
foreach ($logs as $i => $line)
{
// $logs est un tableau qui contient toutes les lignes du fichier
// $i est l'indice du tableau donc le numéro de la ligne - 1 (l'indice commence à 0)
// $line contient la ligne d'indice i
echo "Ligne " . ($i+1) . " : " . htmlspecialchars($line) . "<br />\n";
}
Le . permet la concaténation de chaînes de caractères.
La fonction htmlspecialchars($ch) renvoie la chaîne de caractères contenue dans $ch après avoir remplacé les caractères spéciaux (& " ' < >) par leur équivalent en HTML. \n permet un saut de ligne dans le code source de la page HTML alors que <br /> permet un saut de ligne dans la page qui s'affiche dans le navigateur.
Vous pouvez maintenant lire et écrire dans votre fichier de logs. Pensez à l'utiliser lors des prochaines séances de TP pour vous aider à résoudre vos problèmes en PHP.
Si vous avez le temps, faites la question ci-dessous sinon vous pourrez la faire chez vous avant la prochaine séance.
Améliorez l'affichage des logs en ajoutant des styles à la page affiche-logs.php : si l'action est Nouvelle partie, affichez la ligne en gras ; si l'action est un bouton de direction, affichez la ligne dans une couleur différente selon la direction (bleu pour gauche, rouge pour droite, vert pour haut et orange pour bas).
Pour que le fichier de logs ne devienne pas trop volumineux, faites en sorte qu'il ne contienne pas plus de 50 lignes. Pour cela, dès que les 50 lignes ont été atteintes, il faut supprimer la ligne la plus ancienne, décaler toutes les lignes vers le haut et insérer la nouvelle ligne à la fin du fichier.
Entre deux séances de TP, vous avez au moins 15 jours pour :
Avant la prochaine séance de TP, il est impératif que vous ayez fini à minima :
index.html qui affiche la grille initiale du jeu avec le score, le bouton Nouvelle partie et les 4 boutons de directionaffiche-logs.php qui affiche les logs stockés dans logs-2048.txt jeu-2048.php qui inclut fonctions-2048.php et appelle la fonction write_log($mesg) pour ajouter un log lors de chaque clic sur un des 5 boutonsfonctions-2048.php qui contient à minima la fonction write_log($mesg) Il faut également que vous ayez commencé la réflexion sur la programmation du jeu côté serveur :
Nouvelle partiePour travailler depuis chez vous sur le serveur web que vous utilisez en TP, suivez les instructions sur cette page.