1. Introduction

Que ce soit chez soi ou dans les transports publics, le sudoku est le jeu par excellence pour passer le temps. Avec ses règles de jeu simple, le casse-tête consiste à remplir une grille quadrillée (9 x 9 cases) avec une série de chiffres entre 1 et 9 sans qu'ils se situent sur la même ligne, colonne ou sous-grillage (3 x 3). Ce divertissement, qui paraît anodin, peut se trouver sur différents supports tels que les journaux et plus récemment sur les appareils électroniques ce qui permet d'y jouer à tout moment. Ce travail fait donc l'objet de la création d'un site web de sudoku en ligne.

1.1. But

L'objectif, dans un premier temps, est qu'un utilisateur puisse se connecter et jouer une partie de sudoku chronométrée, dont le score sera enregistré. Par la suite, il pourra comparer son score avec celui d'autres utilisateurs sur la même grille créant un intérêt compétitif. Pour ce qui est des grilles de sudoku, il s'agira, dans un second temps, de les générer automatiquement.

2. Matériel et méthodes

2.1. Matériel

Aucun matériel en particulier si ce n'est un ordinateur.

2.2. Méthodes

Comme dit précédemment, le travail est divisé en plusieurs parties. Il est important de séparer le travail au préalable pour optimiser la démarche. Dans cette section les différentes étapes pour la création du site seront décrites.

2.2.1. Description du site

Pour commencer, voici une description du rendu attendu du site : l'utilisateur arrive sur une page d'accueil où il pourra lancer une partie en cliquant sur un bouton et lire les règles du jeu, s'il ne les connaît pas. Ensuite, la partie la plus importante est la page de jeu. Elle consiste en un tableau, afficher comme une grille de sudoku, qui comporte 81 cellules pleines ou vides. Cette table sera remplie avec les informations venant d'une base de données et l'utilisateur pourra essayer de résoudre le sudoku en remplissant les cases. Lorsque le joueur aura terminé et validé, il saura s'il a eu juste et son temps pour finir ou s'il y a des fautes. A posteriori, il pourra éventuellement comparer son résultat avec d'autres potentiels joueurs.

2.2.2. La partie HTML

La page d'accueil et la page des règles sont de simples pages écrites avec le langage de description HTML. Le texte et les différents actions se trouvent dans des balises et l'apparence du site se fait dans un autre fichier ,lié aux pages HTML, avec un autre langage descriptif, CSS (explication des langages ici). Grâce à ces deux langages, il est possible de créer de belles pages internet, mais ces sites ne seront pas "dynamiques". C'est pourquoi on utilisera PHP qui est un langage tout à fait classique dans le monde des pages web. PHP est un langage similaire au Python et il permettra la réalisation de ce projet.

2.2.3. La base de données

La base de données est un outil important pour ce site. Elle facilite la création et la correction du sudoku et permettra aussi l'enregistrement des scores des joueurs. Ici, on a à disposition cette base de données, qui est langage SQL et compatible avec le PHP.
Pour commencer, il s'agira d'écrire le code du site avec un unique sudoku et faire en sorte que tous les objectifs, tels que l'affichage de la grille, la correction, etc..., soient fonctionnels avant de s'occuper d'ajouter d'autres grilles de sudoku. Pour cela, on remplit un tableau de la base de données avec ce sudoku. On utilise alors un schéma entité-relation pour visualiser tout le travail qui sera effectué à l'aide de la base de données MySQL.
(Lien pour le schéma entité relation pour ce projet Schema.pdf.
Le tableau "cellule" est rempli "à la main" et comporte les données du sudoku de test qui permettront de coder le site.

2.2.4. Le Sudoku

La grille de sudoku est la partie la plus importante du site et voici l'explication du code (fichier sudoku.php dans le git), divisée en deux parties : l'affichage de la grille et la correction.

2.2.4.1. La grille

La grille du sudoku est un tableau, sans en-tête, de 9 lignes et 9 colonnes. Dans un premier temps, on va sélectionner les informations de la table "cellule" dans la base de données et les mettre dans une variable et pour cela (après s'être connecté à MySQL) on écrit :
$results=mysql_query("SELECT * FROM `cellule` WHERE `sudoku`=1 ORDER BY `ligne` ASC, `colonne` ASC", $rdbms);
Ceci prend l'information dans la table "cellule" pour le sudoku numéro 1. La variable $results contient désormais les données nécessaire pour la création de la grille."ORDER BY" permettra à insérer les futurs sudoku automatiquement dans la base de données.
Ensuite on génère la table à l'aide d'une boucle et de l'information saisie juste avant. La grille de sudoku comporte comme dit précédemment 9 lignes et 9 colonnes, donc on écrit dans le code que les variables $ligne et $colonne, préalablement initialisées à 0, ne dépassent pas 8 (0, 1, 2, 3, 4, 5, 6, 7, 8 -> 9 lignes ou colonnes). Et arrivée à 8 colonnes, la variable $ligne augmente de 1 ($ligne++;) et la variable $colonne revient donc à 0. Cela donne :

while ($row = mysql_fetch_assoc($results) and $colonne < 9) {

     if ($colonne == 8) {

           $colonne = 0;

           $ligne++;

       } else { 

           $colonne++; } 

}

Il ne reste plus qu'à afficher la grille. Pour cela, on a déjà la boucle et il suffit d'y ajouter les balises de table (<table>, <tr>, <td>) au bon endroit. Maintenant la partie importante est d'y insérer les valeurs issues de la base de données. Dans notre cas, il nous faut afficher uniquement les valeurs "visibles" et laisser le reste des cellules avec une possibilité à l'utilisateur d'entrer une valeur. Pour ceci, on utilise if ($row['visible']!= 0) pour n'afficher que les valeurs visibles. $row est la variable qui va chercher l'information depuis la base de données. À partir de là, on imprime les valeurs ou les balises <input>, qui sont les formulaires et se trouvent entre les balises <form> :

<?php if ($row['visible']!= 0) {
               print $row['valeur'];
       } else {
                 ?><input type="text" maxlength="1" name"">
}

Tout cela donne une grille avec des cellules vides et pleines, mais pour l'esthétique, il faut aussi afficher les carrées 3 x 3 avec des traits plus épais. Pour cela, vu que l'on peut utiliser le fait que les colonnes et les lignes s'ajoutent au fur et à mesure grâce à la boucle, on peut indiquer une classe (dont le style est dans le fichier CSS) aux bonnes lignes et colonnes. Avec l'opération modulo (%), on peut indiquer les classes voulues aux troisièmes lignes et colonnes. Par exemple : 

if ($ligne > 0 and ($ligne + 1) % 3 == 0) {
                    print '<tr class="bordb">';
       }

Tout ceci permet donc d'afficher la grille du sudoku.

2.2.4.2. La correction

Passons à la correction du sudoku qu'un utilisateur remplirait. Il s'agit ici de comparer les valeurs entrées par cet utilisateur avec les valeurs enregistrées dans la base de données, vu qu'elles sont justes. Les valeurs correctes sont sous la forme d'une liste, il faut donc faire en sorte que les valeurs de l'utilisateur soient sous cette forme. Pour cela, on commence par donner un nom à la balise <input> : 

name="reponse[<?php print 9*$ligne+$colonne ?>]"

Avec cet attribut, on peut récupérer les réponses de l'utilisateur plus bas avec la fonction $_GET spécifique au langage PHP. 9*ligne+colonne est l'algorithme qui permet de donner le numéro de chaque cellule, en l'occurrence ici pour chaque cellule vide (ligne et colonne sont les variables qui étaient définies au début. On peut maintenant définir une variable pour ces réponses, par exemple :

$sudoku = $_GET['réponse'];

Voilà pour les réponses de l'utilisateur, il reste à récupérer les solutions depuis la base de données. Pour ceci, on définit une variable $solution avec en plus le numéro de la cellule en question, on réutilise donc l'algorithme d'au-dessus (9*ligne+colonne). Et on définit ceci avec les valeurs de la base de données :

$solution[9*$ligne+$colonne] = $row['valeur'];

Il ne reste plus qu'à comparer les variables $sudoku et $solution :

if (isset($_GET['réponse'])) {
       if ($sudoku == $solution)  {
                       print '<p>Bravo !</p>';
               } else {
                       print '<p>Il y a des erreurs.</p>';
               }
       }

La partie if (isset($_GET['réponse'])) permet d'appliquer ce code uniquement lorsque l'utilisateur à entrer des réponses. Le formulaire est envoyé avec un input de type submit pour appliquer la correction.

3. Résultats

3.1. Le site

Voici le lien vers le site : http://dev.gyp.ch/1516/omid.karimi/projetp/index.php
Quant au code source, il se trouve dans le git (lien ci-dessous).

4. Discussion

Avec ce projet, les connaissances vues en classe en HTML/CSS, PHP et en base de données (MySQL) ont été appliquées pour obtenir ce résultat. Beaucoup de recherche personnelle ont dû être fait pour tenter de compléter les lacunes, mais cela n'a pas suffit à atteindre le but dans son ensemble. Le site, tel qu'il est en ce moment, manque de quelques petits détails, et aussi d'autres gros objectifs qui n'ont pas été bien appréhendés. Ces objectifs ont été sujet de quelques recherches et tentatives, mais malheureusement sans succès.
Par exemple, au niveau de la correction, le programme aurait pu indiquer à l'utilisateur les cellules qui ne sont pas remplies ou erronées. Ceci fut essayé sans succès. L'idée était, si l'entier des réponses ne correspondaient pas aux solutions, de comparer chaque valeur pour trouver celles qui seraient incorrects et à partir de la changer le style (en rouge par exemple).
Un autre objectif était d'indiquer le temps mis pour résoudre le casse-tête par l'utilisateur. En PHP, il aurait fallu enregistrer l'heure à laquelle la page web s'ouvre et l'heure à laquelle l'utilisateur à terminer correctement la grille. En soustrayant ces valeurs, on pourrait donc afficher le temps de l'utilisateur.
Encore une chose serait un système de session, ou d'identification, pour que les utilisateurs puissent comparer leurs résultats sur différentes grilles entre eux. Le sujet fut à peine essayer.

Un des objectifs principaux de ce projet restait tout de même la génération de sudoku, qui fut très vite mis de côté, parce qu'il était plus important d'avoir un site de jeu fonctionnel, avant d'avoir un générateur qui ne servirait à rien. L'idée était de générer aléatoirement des nombres entre 0 et 9 (dans une matrice 9 x 9 ?) avec des conditions, comme par exemple aucun même nombre sur la même ligne, colonne ou région carrée, et ensuite indiquer un certains nombre de ces nombres comme étant visibles ou non. Puis insérer le tout dans la base de données.

5. Conclusion

Dans ce projet, l'objectif était de créer un site de sudoku en ligne. La partie "jeu" est acquise, un utilisateur peut venir faire une partie de sudoku et savoir s'il a rempli la grille juste ou non. Le problème des joueurs qui compareraient leurs résultats n'a pas été accompli, de même que la génération de sudoku, qui sera peut-être fait à titre personnel par la suite. C'est une bonne chose d'avoir commencer par cette partie "jeu", car le site est tout de même utilisable, malgré le manque de sudokus disponibles et sans le système de comparaison. Ce projet a permis de pratiquer les connaissances vues en classe (PHP et MySQL principalement), mais cela n'a pas suffit à atteindre complètement l'objectif initial.

6. Références

  1. Le git, pour le code source : http://dev.gyp.ch/git?p=gypoci-1516...
  2. Wikipédia : https://fr.wikipedia.org/wiki/Sudok...