Création d'un Sudoku

Invité · 03/04/2010, 11h43

Bonjour, je souhaite crée un Sudoku généré entièrement en JavaScript, pour l'instant j'ai encore un niveau très faible en JS et je maitrise pas vraiment,

voici mon début

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<body>
	<h1>Sudoku</h1>
		<form>
			<div id="grille"></div>
		</form>
<script type="text/javascript" src="javascript.js"></script> 
</body>

JavaScript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
var grille = document.getElementById("grille");
 
// Génération de 3 tableaux sur la 1er ligne
for (var j=0; j<3;j++){
	for (var i = 0; i < 3; i++) {
		grille.innerHTML += "<div class=\"caseBlanc\"><input class=\"inputText_caseBlanc\" name=\"field_"+j+"_"+i+"\" id=\"field_0_"+i+	"\" type=\"text\</div>";
	}
	for (var i = 0; i < 3; i++) {
		grille.innerHTML += "<div class=\"caseGris\"><input class=\"inputText_caseGris\" name=\"field_"+j+"_"+i+"\" id=\"field_0_"+i+"\" type=\"text\</div>";
	}
	for (var i = 0; i < 3; i++) {
		grille.innerHTML += "<div class=\"caseBlanc\"><input class=\"inputText_caseBlanc\" name=\"field_"+j+"_"+i+"\" id=\"field_0_"+i+"\" type=\"text\</div>";
	}
}
 
// Génération de 3 tableaux sur la 2eme ligne
for (var j=0; j<3;j++){
	for (var i = 0; i < 3; i++) {
		grille.innerHTML += "<div class=\"caseGris\"><input class=\"inputText_caseGris\" name=\"field_"+j+"_"+i+"\" id=\"field_0_"+i+"\" type=\"text\</div>";
	}
	for (var i = 0; i < 3; i++) {
		grille.innerHTML += "<div class=\"caseBlanc\"><input class=\"inputText_caseBlanc\" name=\"field_"+j+"_"+i+"\" id=\"field_0_"+i+"\" type=\"text\</div>";
	}
	for (var i = 0; i < 3; i++) {
		grille.innerHTML += "<div class=\"caseGris\"><input class=\"inputText_caseGris\" name=\"field_"+j+"_"+i+"\" id=\"field_0_"+i+"\" type=\"text\</div>";
	}
}
 
// Génération de 3 tableaux sur la 3eme ligne
for (var j=0; j<3;j++){
	for (var i = 0; i < 3; i++) {
		grille.innerHTML += "<div class=\"caseBlanc\"><input class=\"inputText_caseBlanc\" name=\"field_"+j+"_"+i+"\" id=\"field_0_"+i+	"\" type=\"text\</div>";
	}
	for (var i = 0; i < 3; i++) {
		grille.innerHTML += "<div class=\"caseGris\"><input class=\"inputText_caseGris\" name=\"field_"+j+"_"+i+"\" id=\"field_0_"+i+"\" type=\"text\</div>";
	}
	for (var i = 0; i < 3; i++) {
		grille.innerHTML += "<div class=\"caseBlanc\"><input class=\"inputText_caseBlanc\" name=\"field_"+j+"_"+i+"\" id=\"field_0_"+i+"\" type=\"text\</div>";
	}
}

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
body {
	background-color:gray;
	margin:auto;
	width:800px;
	text-align:center;
}
 
#tab {
	text-align:center;
	margin:auto;
	position:absolute;
}
 
#tab td {
	background-color:white;
	height:35px;
	width:35px;
}
 
.caseBlanc {
	width:35px;
	height:35px;
	display:inline-block;
	background-color:#fff;
	border:groove;
	border-color:grey;
}
 
.caseGris {
	width:35px;
	height:35px;
	display:inline-block;
	background-color:#fff;
	border:groove;
	border-color:grey;
	background-color:grey;
}
 
#grille {	
	width:400px;
	height:400px;
}

Donc j'ai déjà le tableau du sodoku qui se génère avec pour différencier les différentes zones du tableau par un tableau blanc ou gris.. comme vous pouvez le voir, mon code javascript est très loin d'être optimiser, j'ai essayer juste avec un algo et utilisé des variables, mais sans résultat... si quelqu'un pouvais me mettre sur la piste pour utilisé une variable et modifié sa propriété pour la couleur. Et j'aimerais savoir comment affecté à mes différentes zones de mon tableau des valeurs de 1 à 9..

**SpaceFrog** · 03/04/2010, 12h56

vous en reviez ? javatwister l'a fait ...
http://javascript.developpez.com/sou...=divers#sudoku

**Gsnalf** · 04/04/2010, 14h08

Envoyé par Gsnalf

Clair que ça pourrait l'aider, mais là notre monsieur veut générer une "grille de sudoku" pas juste un bête alert qui affiche des nombres générés

PS : si tu cherchais déjà à générer un tableau au lieu d'utiliser des divs

Pour mon plaisir personnel je viens de faire ça en utilisant un <table> HTML.

j'ai généré un table HTML et ensuite je le rempli avec le tableau de sudoku généré par la fonction donnée par spacefrog:
J'ai modifié la fonction pour qu'elle retourne un tableau au lieu de l'afficher.

http://www.jsfiddle.net/9Gmp2/30/

Je te conseille d'éviter les '<div>' c'est plus difficile alors qu'avec un vrai tableau tu accèdes plus facilement aux éléments :
ex :
cellule [2,3] (premiere cellule étant en 0,0) en JS tu vas l'écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part