Jeux de lettres en JavaScript

Version imprimable

Bonjour à tous.
J'essaie de créer un petit jeu de mots mélés pour mon site.
J'ai écrit ce script en js et php.
Il contient 2 onclick :
- le 1er prend un mot au hasard dans une liste, mélange l'ordre des lettres.
- le 2ème affiche le même mot dans le bon ordre.
Ca fonctionne, sauf que, sans recharger la page, c'est toujours le même mot qui est proposé. (testez sur http://scrab88.fr/d.php).
Quelle solution pour pallier ce problème?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <script language="JavaScript" type="text/javascript"> function AFFICHE(tirage){ document.getElementById('mon_div').innerHTML = ''+tirage+''; } </script> </head> <body> <a href="#" onclick="javascript:AFFICHE('<?php $mot = array ("COXER", "PUCER", "TISER", "ACHAR", "ADJAR", "AFTER", "ALEVI", "ALTER", "ANITE", "APREM", "ASADO", "AVIEN"); $tirage = rand(0, count($mot) - 1); echo "<font face=Arial narrow size=5 color=#050000>".str_shuffle($mot[$tirage])."</font>"; ?> ');">Tirage</a> <div id="mon_div"></div> <a href="#" onclick="javascript:AFFICHE(' <?php echo "<font face=Arial black size=5 color=#050000>".$mot[$tirage]."</font>"; ?> ');">Solution</a> </body> </html>

31/12/2013, 11h39
danielhagnoul
Bonjour

Logique avec la détermination de l'index par le tirage d'un nombre aléatoire en PHP. :mouarf:

Vous devez utiliser Math.random(), Exemple :
Code:

1 2 3 // Return a random number between 1 and 10: Math.floor( ( Math.random() * 10 ) + 1 );

Merci Daniel.
Débutant en javascript, je parviens maintenant à :
- prendre un mot au hasard dans une liste
- mélanger les lettres de ce mot
- afficher le tirage ainsi obtenu
- afficher la solution (mot original).

Je voudrais maintenant combiner l'ensemble avec un bouton qui :
- 1/ affiche la solution du tirage proposé,
- 2/ affiche un autre tirage
- etc...
Une piste?

Mon script actuel :

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
<html>
<head>	
   <script language="JavaScript" type="text/javascript">  
  function shuffle(a)
{
   var j = 0;
   var valI = '';
   var valJ = valI;
   var l = a.length - 1;
   while(l > -1)
   {
		j = Math.floor(Math.random() * l);
		valI = a[l];
		valJ = a[j];
		a[l] = valJ;
		a[j] = valI;
		l = l - 1;
	}
	return a;
 }	
 </script>
</head>
<body>
<script language="JavaScript" type="text/javascript">  
var mot = new Array('DICTIONNAIRE', 'CHOCOLAT', 'SUNLIGHT', 'TROUSSE', 'EPOXY', 'SHETLAND', 'WURMIEN', 'MARYLAND', 'JONAGOLD'); 
var solution =  mot[Math.floor(Math.random() * ((mot.length - 1) - 0 + 1))];	 //prend un mot au hasard
var tirage = (solution.split(""))  //sépare les lettres du mot
shuffle(tirage);	 //mélange les lettres 
 
document.write(tirage.join("")); //affiche le tirage
document.write('<br>'); 
document.write(solution); //affiche la solution
 </script>
</body>
</html>

04/01/2014, 11h39
NoSmoking

Bonjour,

Citation:

Je voudrais maintenant combiner l'ensemble avec un bouton qui :
- 1/ affiche la solution du tirage proposé,
- 2/ affiche un autre tirage
- etc...
Une piste?

il te faut structurer ton code en fonction, et surtout OUBLIER ton document.write, mais je pense qu'auparavant il va te falloir acquérir les bases du langage ;)

Citation:

Envoyé par NoSmoking

mais je pense qu'auparavant il va te falloir acquérir les bases du langage ;)

Certes, Nosmoking, je reconnais ma grande incompétence en matière de javascript, mais à 54 ans, sans bases, pas facile d'assimiler..:cry:

Voilà où j'en suis maintenant : ça fonctionne comme je le souhaite, à un détail près : sans recharger la page, c'est toujours le même tirage qui est proposé !!!

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html> 
<head>
 <script language="javascript" type="text/javascript">
  function shuffle(a)
{
   var j = 0;
   var valI = '';
   var valJ = valI;
   var l = a.length - 1;
   while(l > -1)
   {
		j = Math.floor(Math.random() * l);
		valI = a[l];
		valJ = a[j];
		a[l] = valJ;
		a[j] = valI;
		l = l - 1;
	}
	return a;
 }	
 </script> 
 
  <script language="javascript" type="text/javascript">
var mot = new Array('DICTIONNAIRE', 'CHOCOLAT', 'SUNLIGHT', 'TROUSSE', 'EPOXY', 'SHETLAND', 'WURMIEN', 'MARYLAND', 'JONAGOLD'); 
var solution =  mot[Math.floor(Math.random() * ((mot.length - 1) - 0 + 1))];	 //prend un mot au hasard
var tirage = (solution.split(""));  //sépare les lettres du mot
shuffle(tirage);	 //mélange les lettres 
var tirage = tirage.join("");
 </script> 
 
 <script language="javascript" type="text/javascript">
function modifierContenu()
{
var objet = document.getElementById("texte"); 
if (document.forms['formulaire'].yesNo.value=="tirage") 
{objet.innerHTML = solution;}
else 
{objet.innerHTML = tirage;} 
}
 </script>
 
<script language="JavaScript"> 
function change()
{ 
if (document.forms['formulaire'].yesNo.value=="tirage") 
{document.forms['formulaire'].yesNo.value="solution";} 
else 
{document.forms['formulaire'].yesNo.value="tirage";} 
} 
</script>
 
 
</head> 
 
<body>
 
<form name='formulaire' > 
<input type=button name='yesNo' value="tirage" onClick="change();modifierContenu()" /> 
</form><p id="texte"></p 
</body> 
</html>

04/01/2014, 21h54
NoSmoking

Citation:

Certes, Nosmoking, je reconnais ma grande incompétence en matière de javascript, mais à 54 ans, sans bases, pas facile d'assimiler..:cry:

tu sembles quand même être sur la bonne voie ;)

Citation:

Voilà où j'en suis maintenant : ça fonctionne comme je le souhaite, à un détail près : sans recharger la page, c'est toujours le même tirage qui est proposé !!!

il te faut également faire une fonction de récupération du tirage.

Pour info, inutile de répéter le balisage <script language="javascript" type="text/javascript">, tout ton code peut être entre des balises uniques <script type="text/javascript"> </code>.
05/01/2014, 03h35
Watilin
J'aimerais donner mes quelques conseils pour acquérir les bases de JavaScript. C'est pas forcément évident quand on vient d'une autre branche de l'informatique. À mon aivs, la première chose à savoir c'est que le web évolue encore plus vite que les autres branches. Il vaut mieux préférer les sites web aux livres : bien choisis, les sites sont des sources fraîches, régulièrement mises à jour, alors qu'un livre est très vite dépassé. Ma principale source, sans hésiter, c'est le Mozilla Developer Network. Et j'ajoute que w3schools n'est pas une source fiable, mais ce n'est que mon avis.

Ensuite, avec JS, il y a plusieurs aspects fondamentaux.

Il y a le Document Object Model (DOM), c'est ce qui relie un script à sa page web. Par exemple, getElementById est une méthode du DOM. Des createElement utilisés de concert avec appendChild ou insertBefore sont les successeurs, bien plus flexibles, de document.write. Et si on est fainéant il y a toujours innerHTML.

Il y a le modèle objet, déroutant pour le profane car il repose sur les prototypes et non pas sur les classes.

Il y a la portée des variables, qui se rit des blocs if, for et autres while, mais qui au contraire ne connaît que les fonctions. Une bonne habitude : toujours déclarer une variable avec var, même une globale. (Et il y a ce phénomène appelé hoisting qui peut poser problème dans certains cas).

Il y a les objets anonymes (var monObjet = {}) qui correspondent aux tableaux associatifs de PHP, et la réflexivité (window["x"] est la même chose que window.x) qui permet de faire des choses bien puissantes.

Il y a Ajax ! Le vrai nom de la chose est moins chantant : XMLHttpRequest.

Il y a la valeur undefined, ses raisons d'être et ses différences avec null.

Il y a quelques autres trucs encore, en vrac, qui peuvent dépanner quand on les connaît :
- l'objet JSON et ses deux méthodes parse et stringify ;
- le constructeur Error et les structures throw et try/catch/finally (le catch n'est pas conditionnel, hélas) ;
- les méthodes d'itération des tableaux : forEach, map, reduce, etc. (mais il faut utiliser des polyfills pour s'assurer que ça marche partout) ;
- setTimout et setInterval (préférer leur passer une fonction anonyme plutôt qu'une string) ainsi que leurs associés clearTimeout et clearInterval ;
- etc.
Et enfin, il y a la providentielle console, quel que soit son nom (Firebug, « Outils de développement », « F12 », etc.) qui permet de déboguer, tracer, logger (console.log()) et que tous les navigateurs actuels fournissent.

Voici les quelques points qui me paraissent importants à survoler quand on veut avoir les bases de JavaScript. Au fait juste comme ça, le standard s'appelle ECMAScript et la version actuellement en vigueur est la 5 (ES5).

Pour les détails lire les Cours JavaScript

il te faut également faire une fonction de récupération du tirage.

Maintenant, j'obtiens bien des tirages aléatoires successifs, mais les solutions sont elles aussi aléatoires et ne correspondent pas au tirage !!!

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
<html>
<head> 
<script language="javascript" type="text/javascript">	  
 
function melange(a)  // mélange les lettres
{
   var j = 0;
   var valI = '';
   var valJ = valI;
   var l = a.length - 1;
   while(l > -1)
   {
		j = Math.floor(Math.random() * l);
		valI = a[l];
		valJ = a[j];
		a[l] = valJ;
		a[j] = valI;
		l = l - 1;
	}
	return a;
 }	 
 
function tirage()  //modifie tirage/solution et bouton
{
	var mot = new Array('DICTIONNAIRE', 'CHOCOLAT', 'SUNLIGHT', 'TROUSSE', 'EPOXY', 'SHETLAND', 'WURMIEN', 'MARYLAND', 'JONAGOLD'); 
	var solution =  mot[Math.floor(Math.random() * ((mot.length - 1) - 0 + 1))];
	if (document.forms['formulaire'].bouton.value=="tirage") 
	{document.getElementById("affichage").innerHTML = melange(solution.split("")).join("");document.forms['formulaire'].bouton.value="solution";}
	else 
	{document.getElementById("affichage").innerHTML = solution;document.forms['formulaire'].bouton.value="tirage";} 
}  
 
 </script>
</head>	
<body>
	<form name='formulaire' >  
	<input  value="tirage"   type="button" name="bouton" onclick="tirage();">  
	<div id="affichage"> </div>  
	</form> 
</body>
</html>

Citation:

mais les solutions sont elles aussi aléatoires et ne correspondent pas au tirage !!!

tu fais une mauvaise approche dans ta fonction, tu recalcules à chaque fois une nouvelle valeur, donc à chaque clic tu réinitialises le tout.

Ce que je te propose c'est une solution simple, que tu pourras améliorer
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 // déclaration globale des variables var solution, tirage; /** * la fonction d'initialisation **/ function getTexte() { var mot = new Array('DICTIONNAIRE', 'CHOCOLAT', 'SUNLIGHT', 'TROUSSE', 'EPOXY', 'SHETLAND', 'WURMIEN', 'MARYLAND', 'JONAGOLD'); solution = mot[Math.floor(Math.random() * ((mot.length - 1) - 0 + 1))]; //prend un mot au hasard tirage = (solution.split("")); //sépare les lettres du mot shuffle(tirage); //mélange les lettres tirage = tirage.join(""); }
maintenant il faut appeler celle ci à bon escient, c'est à dire sur le click du bouton quand celui ci affiche solution, pour info cela veut dire que l'on a cliqué 'tirage'.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function modifierContenu() { var objet = document.getElementById("texte"); if (document.forms['formulaire'].yesNo.value == "tirage") { objet.innerHTML = solution; } else { getTexte(); objet.innerHTML = tirage; } }
on en profite tout de suite pour passer par la méthode getElementById plus propre que ton écriture document.forms['formulaire'].yesNo, il faut pour cela mettre une ID à ton bouton.

Code:

<input id="yesNo" type=button name='yesNo' value="tirage" onclick="modifierContenu()" />

et on en profite pour mettre l'appel à la fonction change() dans la fonction modifierContenu().
La fonction devient :
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 function modifierContenu() { var oBtn = document.getElementById("yesNo"); var objet = document.getElementById("texte"); // la partie change if(oBtn.value == "tirage") { oBtn.value = "solution"; } else { oBtn.value = "tirage"; } // la partie modification if(oBtn.value == "tirage") { objet.innerHTML = solution; } else { getTexte(); objet.innerHTML = tirage; } }
cette fonction est améliorable mais je n'ai aucun doute quant à ta capacité à le faire ;)

Une solution 100% 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
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>		
	</head>
	<body>		
		<div id="divRandomized"></div>					  
		<button type="button" id="btnSolution">Solution</button> <button type="button" id="btnTirage">Tirage</button> 
		<div id="divSolution"></div>					  
	</body>	
</html>
 
<script type="text/javascript">
 
		var words = ['DICTIONNAIRE', 'CHOCOLAT', 'SUNLIGHT', 'TROUSSE', 'EPOXY', 'SHETLAND', 'WURMIEN', 'MARYLAND', 'JONAGOLD'];
		var randomWord = '';
		var randomizedWord = '';
 
		var getRandomInteger = function(maxValue) {
			return Math.floor(Math.random()*(maxValue+1));
		}		
 
		var randomizeWord = function(word) {
			var result = '';
			var array = word.split('');			
			for (var i=0; i<word.length; i++) {
				var index = getRandomInteger(array.length-1);
				var character = array.splice(index,1)[0];
				result += character
			}
			return result;
		}
 
		var tirage = function() {
			randomWord = words[getRandomInteger(words.length-1)];
			randomizedWord = randomizeWord(randomWord);
			$('#divSolution').text('');
			$('#divRandomized').text(randomizedWord);							 
		}		
 
		$('#btnSolution').on('click', function (event) {		
			$('#divSolution').text(randomWord);
		});
 
		$('#btnTirage').on('click', function (event) {		
			tirage();
		});
 
		tirage();
</script>

06/01/2014, 17h58
hindioriental

Merci Nosmoking, je n'y serais jamais parvenu seul...
J'ai remplacé l'applet java par ton script sur mon site.
Plus de message de sécurité à chaque chargement!!!

La solution de npuzin est intéressante aussi, mais je préfère n'utiliser qu'un seul bouton.

Citation:

J'ai remplacé l'applet java par ton script sur mon site.

je vois que tu ne t'ai pas donné la peine de simplifier la fonction, c'était pourtant à ta portée ;)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function modifierContenu() { var oBtn = document.getElementById("yesNo"); var objet = document.getElementById("texte"); if( oBtn.value == "tirage") { oBtn.value = "solution"; getTexte(); objet.innerHTML = tirage; } else { oBtn.value = "tirage"; objet.innerHTML = solution; } }
Citation:

La solution de npuzin est intéressante aussi, mais je préfère n'utiliser qu'un seul bouton.

c'est quand même un peu utiliser une massette pour enfoncer une punaise :aie: