1. Introduction

''Le sudoku est un jeu en forme de grille défini en 1979 par l’Américain Howard Garns, mais inspiré du carré latin, ainsi que du problème des 36 officiers du mathématicien suisse Leonhard Euler. Le but du jeu est de remplir la grille avec une série de chiffres (ou de lettres ou de symboles) tous différents, qui ne se trouvent jamais plus d’une fois sur une même ligne, dans une même colonne ou dans une même région (également appelée « bloc », « groupe », « secteur » ou « sous-grille »). La plupart du temps, les symboles sont des chiffres allant de 1 à 9, les régions étant alors des carrés de 3 × 3. Quelques symboles sont déjà disposés dans la grille, ce qui autorise une résolution progressive du problème complet.'' Wikipedia


Ce n'est pas facile d'inventer des nouveaux jeux. Souvent, lorsqu'un programmeur débutant (ou même expérimenté) apprend un nouveau langage/technologie, il teste ses nouvelles connaissances acquises en programmant quelque chose qui existe déjà. C'est exactement ce que j'ai fait dans ce projet. Le sudoku est un jeu ni trop trop complexe, ni trop facile, ce qui en fait un bon jeu à programmer pour un débutant.

L'essence de ce projet est de comprendre les règles du Sudoku et penser à une manière de les traduire en code. Pour rendre le projet plus intéressant, j'ai décidé de rajouter un classement, pour que les joueurs puissent se comparer entre eux. Finalement, je me suis intéressé à l'algorithme qui permet de générer des grilles de Sudoku. Initialement j'utilisais l'API d'un autre site web, mais j'ai fini par choisir de générer les grilles moi-même. Évidemment, l'utilisateur ne perçoit aucune différence lorsqu'il utilise le site mais cela rajoute un couche de complexité à mon projet intéressante.

Les enjeux inhérents de ce projet sont d'utiliser ces langages de programmation : JAVASCRIPT, PHP, Le langage de requête MySQL, Ainsi que les langages de descriptions HTML et CSS.

2. Matériel et méthodes

2.1 Matériel

  • Serveur (Genève, Infomaniak)
  • Base de données MySQL
  • L'outil phpMyAdmin
  • Ordinateur personnel
  • IDE (VS Code)
  • WAMP (Pour exécuter du PHP en local)

2.2 Méthode

Le site web final est composé de 3 pages :
I. Page index depuis laquelle on peut accéder à
II. Jeu du Sudoku ou
III. classement des meilleurs joueurs.

Le fond et la forme des pages est écrit en HTML et CSS respectivement. Afin de gérer l'interaction avec l'utilisateur sur la page du jeu, j'utilise du JavaScript ainsi que du PHP pour envoyer le score au serveur. Pour afficher le scoreboard sur la 3ème page, j'utilise du PHP qui accède à une base de données MySQL.

Plutôt que de créer un système de login, j'ai décidé de simplement demander le nom au joueur lorsqu'il enregistre son score. En plus de me simplifier la tâche sur un point qui n'était pas le but essentiel de mon projet, c'est plus agréable pour l'utilisateur de ne pas avoir besoin de se souvenir de son mot de passe pour un simple site de jeu.

Puisque tout le jeu est programmé en JavaScript, il fallait que je trouve un moyen d'envoyer une information au serveur depuis le JavaScript. Pour faire cela, j'ai utilisé l'API fetch(). Celle ci est similaire aux requêtes XMLHttp. Ensuite, côté serveur, je récupère donc le nom et le temps du joueur, et je l'insère dans une table SQL. À l'inverse, la page de classement va chercher les informations dans la table SQL, l'ordonne avec ORDER BY, et affiche l'information par un petit script PHP. La table avait la structure suivante:
Une colonne à id unique pour chaque ligne,
Une colonne contenant un STRING qui sauvegarde le nom du joueur
Et une dernière colonne contenant un INT qui équivaut au temps, en secondes.

L'unique particularité dans mon code HTML pour le Sudoku (que je génère dans le JavaScript) est qu'au lieu de simplement faire une table de 9 colonnes et 9 lignes, j'ai fait un tableau de 3 colonnes et 3 lignes, dont chaque case contient un nouveau tableau de 3 cases et 3 lignes. C'était il me semble nécessaire pour que je puisse dessiner la bordure plus épaisse autour des 9 "grosses" cases comme on a l'habitude de faire dans un Sudoku classique (voir image en début de blog). Il y a sûrement un autre moyen de parvenir au même résultat mais c'est celui qui m'a paru le plus simple.

Lorsqu'on commence un projet dans un nouveau langage, on est souvent un peu perdu : internet est une bibliothèque fascinante qui nous guide
pour l'apprentissage d'à peu près n'importe quel savoir. Lorsque je travaillais, il m'arrivait souvent, voir tout le temps, d'avoir une dizaine d'onglets ouverts en même temps. Les liens que je suivais souvent étaient ceux de w3schools, StackOverflow (forum) et parfois YouTube.

3. Résultats

Après l'effort, le réconfort : les résultats !

Voici la page index depuis laquelle on accède soit au jeu, soit au classement des joueurs.

Et ici on a la page de jeu, avec le temps écoulé sur la droite.
À noter qu'il y a seulement le bouton 'Nouvelle Partie', car la grille n'est pas encore remplie.

La même page, avec la grille remplie. Deux éléments apparaissent :
une zone de saisie de texte pour mettre son nom et un bouton pour faire valider la grille (et enregistrer son score si on a réussi).

Voici enfin la page de classement. Tous les éléments nécessaires sont présents, mais j'aurais travaillé un peu plus sur la forme si j'avais le temps.

4. Discussion

Liste non exhaustive des choses non implémentées ou problèmes non résolus :
J'ai choisi de ne pas implémenter de système de connexion. J'ai appris à en faire en PHP MySQL mais je me suis finalement rendu compte que ce n'était pas idéal pour mon site web. Je ne voulais pas qu'un joueur soit contraint à créer un compte juste pour jouer au sudoku.
En plus, il faudrait que l'utilisateur se rappelle d'un nouveau mot de passe puisqu'il ne devrait pas faire confiance à ce petit site d'encrypter ses données. J'ai donc finalement opté pour l'option simple, un champ dans lequel le joueur inscrit son nom à chaque fin de partie.

Je n'ai pas eu le temps d'implémenter mon propre algorithme de génération de grille sudoku.
Finalement, l'utilisateur n'y voit que du feu, que ce soit moi ou quelqu'un d'autre qui génère les grilles.
Comme c'est un sujet qui m'intéresse, je vais probablement m'attaquer à cela pendant les vacances d'été !

Je n'avais initialement aucune idée comment je pourrais empêcher des tricheurs d'utiliser un solveur de sudoku pour faire des temps records,
finalement, une solution assez simple aurait été d'enregistrer l'ordre dans lequel un joueur remplit les cases du Sudoku.
Si cet ordre est suspect, comme par exemple si il remplit les cases de haut en bas et de bas à gauche, je pourrais manuellement enlever son score de la base de données (on pourrait même imaginer un système qui fait cela automatiquement).
Ce système antitriche non plus, je n'ai pas eu le temps de l'implémenter.

Finalement, détail important dont je me suis rendu compte qu'à la rédaction de ce blog : J'ai oublié de faire en sorte que le jeu soit jouable sur téléphone. Effectivement, pour jouer au sudoku il faut taper les nombres au clavier. Pourtant, ce n'est pas très compliqué de le rendre compatible pour les téléphones. Il suffit d'ajouter une rangée de case en dessous de la grille avec les chiffres de 1 à 9. Lorsqu'un joueur appuie sur une de ces cases le nombre est inscrit dans la case du Sudoku qu'il avait sélectionnée.

Plusieurs raisons sont à l'origine du problème de manque de temps dans la réalisation de mon Projet P.
La première raison est la plus évidente : manque d'autodiscipline. Que ce soit pour l'informatique ou pour d'autres matières scolaires, cette procrastination m'a souvent causé des problèmes. Néanmoins, j'ai fait des progrès depuis le projet H. Normalement ce ne sera plus un problème dans mes études supérieures.

Un autre facteur qui a lié à ce manque de temps, plutôt paradoxal, est que je me suis pris trop à l'avance. En effet, avant même que mon idée de projet soit confirmée, je me suis lancé dans mon idée. Quand j'ai appris que mon idée n'était pas suffisante dans le cadre de ce Projet P, j'étais démotivé. Au lieu de repartir d'aussi bon rythme, j'ai procrastiné.
Finalement, j'ai passé pas mal de temps à m'engouffrer dans des sujets pour essayer de comprendre comment fonctionnait les langages. Ma culture générale informatique en était agrandie mais ce n'était pas très utile à la réalisation du projet.

Il n'y a pas de solution évidente au premier problème, la procrastination.
Par contre, j'ai appris ma leçon pour le second et à l'avenir je m'assurerai que mon idée est validée.

5. Conclusion

L'objectif principal de ce projet à été réalisé. J'ai crée un site web sur lequel on peut jouer au jeu du Sudoku, en utilisant les langages HTML, CSS, JavaScript, PHP et MySQL. On peut aussi accéder au classements des joueurs.

De manière générale, la réalisation de ce projet à éveillé en moi un intérêt réel à tout ce qui est technologie web. Lorsque j'avais fait un peu de HTML et CSS il y a quelques années, je pensais que ces technologies étaient un peu ennuyantes. Finalement, je me rends compte que c'est un vaste monde intéressant.

En travaillant sur 'Online Sudoku', j'ai aussi appris à utiliser des technologies avec lesquelles je n'étais pas familier. J'aurais donc un peu moins peur de me lancer dans un projet du même type dans le futur.

Je me suis surtout rendu compte que j'ai envie de comprendre comment tout ces langages fonctionnent. Le niveau d'abstraction est tellement élevé (comparé au peu de C que j'ai fait dans ma vie) que j'en étais intrigué. Je suis fasciné par le travail des compilateurs / interpréteurs / parseurs. Peut-être cette fascination aura un impact sur quels cours je choisis en option informatique à l'EPFL ?

Références