SUDOKU
Le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sudoku Generator</title>
<style>
#sudoku-table {
border-collapse: collapse;
margin: 20px auto;
width: 360px;
height: 360px;
}
#sudoku-table td {
width: 40px;
height: 40px;
text-align: center;
font-size: 18px;
border: 2px solid #000000;
box-sizing: border-box;
color: #000000;
background-color: #FFFFFF;
vertical-align: middle;
}
#sudoku-table .empty-cell input {
width: 100%;
height: 100%;
text-align: center;
font-size: 18px;
border: none;
outline: none;
background-color: #FFFFFF;
color: #FF0000;
}
#sudoku-table .thick-border {
border-width: 3px;
}
button {
display: block;
margin: 10px auto;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #555555;
color: #FFFFFF;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #777777;
}
</style>
</head>
<body>
<table id="sudoku-table"></table>
<button onclick="generateSudoku('facile')">Facile</button>
<button onclick="generateSudoku('moyen')">Moyen</button>
<button onclick="generateSudoku('difficile')">Difficile</button>
<script>
function generateSudoku(difficulty) {
const base = 3;
const side = base * base;
// Fonction pour vérifier si un nombre peut être placé à une position donnée
function isSafe(board, row, col, num) {
for (let x = 0; x < side; x++) {
if (board[row][x] === num || board[x][col] === num) {
return false;
}
}
const startRow = row - row % base, startCol = col - col % base;
for (let i = 0; i < base; i++) {
for (let j = 0; j < base; j++) {
if (board[i + startRow][j + startCol] === num) {
return false;
}
}
}
return true;
}
// Fonction backtracking pour remplir la grille
function fillBoard(board) {
for (let row = 0; row < side; row++) {
for (let col = 0; col < side; col++) {
if (board[row][col] === 0) {
const nums = shuffle([...Array(side).keys()].map(n => n + 1));
for (let num of nums) {
if (isSafe(board, row, col, num)) {
board[row][col] = num;
if (fillBoard(board)) {
return true;
}
board[row][col] = 0;
}
}
return false;
}
}
}
return true;
}
function shuffle(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
const board = Array.from({ length: side }, () => Array(side).fill(0));
// Remplir la grille avec le backtracking
fillBoard(board);
// Déterminer le nombre de cases vides en fonction de la difficulté
let numHoles;
if (difficulty === 'facile') {
numHoles = 35;
} else if (difficulty === 'moyen') {
numHoles = 45;
} else if (difficulty === 'difficile') {
numHoles = 55;
}
// Supprimer des numéros pour créer le puzzle
while (numHoles > 0) {
let row = Math.floor(Math.random() * side);
let col = Math.floor(Math.random() * side);
if (board[row][col] !== 0) {
board[row][col] = 0;
numHoles--;
}
}
const table = document.getElementById('sudoku-table');
table.innerHTML = '';
for (let r = 0; r < side; r++) {
const row = document.createElement('tr');
for (let c = 0; c < side; c++) {
const cell = document.createElement('td');
if (board[r][c] !== 0) {
cell.textContent = board[r][c];
} else {
cell.classList.add('empty-cell');
const input = document.createElement('input');
input.setAttribute('maxlength', '1');
input.setAttribute('pattern', '[1-9]');
cell.appendChild(input);
}
if (r % base === 0) {
cell.classList.add('thick-border');
cell.style.borderTopWidth = '3px';
}
if (c % base === 0) {
cell.classList.add('thick-border');
cell.style.borderLeftWidth = '3px';
}
row.appendChild(cell);
}
table.appendChild(row);
}
}
generateSudoku('moyen');
</script>
</body>
</html>
1) Pour modifier le jeu, copiez le code ci-dessus et collez-le dans un éditeur de texte, exemple Notepad++ (gratuit et disponible en ligne).
2) Ensuite, enregistrez le fichier (enregistrer sous...) avec l'extension .html (HyperText Markup Language)
Par exemple : sudoku.html
3) Double-cliquez sur ce fichier enregistré pour l'ouvrir dans votre navigateur web préféré et commencez à jouer.
Explications Détaillées
1. La Structure de la Page (HTML)
Le HTML constitue la base de mon générateur de Sudoku, définissant les différents éléments visibles à l'écran :
Tableau du Sudoku : C’est la grille principale où le puzzle est affiché. Elle est configurée pour avoir 9x9 cases, chacune pouvant contenir un numéro ou un champ de saisie pour l'utilisateur.
Boutons de Difficulté : Trois boutons permettent de générer des grilles de Sudoku de niveaux de difficulté "Facile", "Moyen" et "Difficile". Chaque bouton déclenche la génération d’un nouveau puzzle adapté au niveau choisi.
2. Le Style du Générateur (CSS)
Le CSS gère l’apparence visuelle du générateur de Sudoku, assurant une interface claire et attrayante :
Disposition : Le tableau est centré sur la page avec des marges automatiques. Chaque cellule du tableau est stylisée pour avoir une taille uniforme et une bordure distincte (en cours !)
Design :
Tailles et Proportions : Chaque cellule mesure 40x40 pixels, avec une police de taille 18px pour une bonne lisibilité.
Couleurs : Les couleurs sont choisies pour offrir un bon contraste, avec des cellules vides permettant la saisie par l’utilisateur en rouge pour les différencier des cellules pré-remplies.
Effets Visuels : Des bordures plus épaisses délimitent les sous-grilles 3x3, aidant à visualiser la structure du Sudoku.
Interactivité des Boutons : Les boutons changent de couleur au survol pour indiquer leur interactivité, offrant une expérience utilisateur agréable et intuitive.
3. La Logique du Générateur (JavaScript)
Le JavaScript apporte la logique et l’interactivité au générateur de Sudoku, permettant de créer et de manipuler dynamiquement les puzzles :
Génération Aléatoire de Sudoku :
Remplissage de la Grille : Utilise une méthode de backtracking pour remplir la grille de manière aléatoire tout en respectant les règles du Sudoku.
Vérification de Sécurité : Avant de placer un numéro, le script vérifie que ce dernier ne viole pas les contraintes du Sudoku (absence de doublons dans les lignes, colonnes et sous-grilles).
Gestion des Niveaux de Difficulté :
Facile, Moyen, Difficile : En fonction du niveau choisi, le script supprime un nombre spécifique de cellules pré-remplies pour ajuster la difficulté du puzzle. Plus le niveau est élevé, plus le nombre de cellules vides augmente.
Création Dynamique du Tableau :
Remplissage des Cellules : Le script génère les cellules du tableau en fonction de la grille de Sudoku générée, insérant des numéros fixes ou des champs de saisie selon qu’une cellule est pré-remplie ou vide.
Validation des Entrées : Les champs de saisie sont limités à un seul caractère numérique, garantissant que seules des valeurs valides peuvent être entrées par l’utilisateur.
Initialisation et Interaction :
Chargement Initial : Au chargement de la page, un puzzle de niveau moyen est généré par défaut.
Interaction Utilisateur : Les utilisateurs peuvent cliquer sur les boutons de difficulté pour générer de nouveaux puzzles adaptés à leur niveau de compétence.
Sébastien Crittin .com
© 2024. All rights reserved.