docJavaScript
download 
Plainte Transcription
JavaScript
JavaScript - Sudoku
Vous mourrez d’envie de réaliser une interface pour le jeu Sudoku qui ressemble à ce qui est présenté
en figure 1. Hormis les ressources à intégrer pour bénéficier de Bootstrap, jQuery et jQuery UI, votre
solution devra contenir 3 fichiers :
— sudoku.html
— sudoku.css
— sudoku.js
Figure 1 – Interface Sudoku
La structure du fichier sudoku.html est la suivante :
Syntaxe
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
1
<title>Sudoku</title>
<link rel="stylesheet" href="ressources/jquery-ui.min.css">
<link rel="stylesheet" href="ressources/bootstrap.min.css">
<link rel="stylesheet" href="sudoku.css">
</head>
<body>
<!-- the body -->
<script src="ressources/jquery-2.1.4.min.js"></script>
<script src="ressources/jquery-ui.min.js"></script>
<script src="ressources/bootstrap.min.js"></script>
<script src="sudoku.js"></script>
</body>
</html>
Pour le plateau (board), on pourra construire un élément <table> contenant 9 lignes (<tr>)
de 9 cellules (<td>). Chaque élement <td> contiendra un élément <div> avec 2 attributs data-r
et data-l. Par exemple la dernière cellule de la première ligne aura respectivement 1 et 9 comme
valeurs de data-r et data-l. Saviez-vous que pour les attributs “personnels”, il fallait préfixer par
data- ? Finalement dans chacun des ces éléments <div>, on glissera un élément <span> qui aura
pour rôle de contenir un chiffre (c’est-à-dire, une valeur entre 0 et 9).
Pour assurer un bon affichage de la grille (et notamment que les cellules soient carrées), on pourra
utiliser l’astuce de cette page. Cela donne en supposant que l’attribut id de note élement <table>
a la valeur "board" :
Syntaxe
#board {
...
}
#board td {
...
position: relative;
}
#board td::after {
content: "";
display: block;
margin-top: 100%;
}
#board td div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
Pour le JavaScript, on pourra utiliser les facilités de jQuery. Une bonne idée pour éviter toute
redondance est de gérer directement les chiffres placées à l’intérieur des éléments HTML. Pourquoi ne
pas partir sur la définition de ces trois fonctions, déclarées dans un objet représentant le jeu (créer un
objet évite de polluer l’objet global avec de nouvelles variables et fonctions).
2
Syntaxe
// Retourne la cellule (div) dont les coordonnees sont donnees.
cellAt: function (row, col) {
/* 1 seule ligne en jQuery */
},
// Retourne le chiffre dans la cellule dont les coordonnes sont donnes
// Retourne 0 si pas de valeur
getDigitAt: function (row, col) {
/* 2 lignes devraient suffire */
},
// Positionne le chiffre donne (potentiellement la chaine vide) dans la
cellule dont les coordonnes sont donnes.
// Le parametre fixed indique si le chiffre est initialement donnee dans
la grille.
setDigitAt: function (row, col, digit, fixed) {
/* 4 lignes au plus, si on veut gerer les chiffres figes (en
utilisant une classe ?) */
},
3
