Création d'un Sudoku

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:

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:

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:

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..

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

Citation:

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:

1 2 table.rows[3].cells[2]

Merci pour toutes vos indications, je vais essayé de taper sa ! :ccool: