Jeux de lettres en JavaScript

**hindioriental** · 31/12/2013, 09h43

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 :

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

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>

**danielhagnoul** · 31/12/2013, 11h39

Bonjour

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

Vous devez utiliser Math.random(), Exemple :

Code :

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

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

**hindioriental** · 02/01/2014, 14h57

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 :

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

**NoSmoking** · 04/01/2014, 11h39

Bonjour,

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

**hindioriental** · 04/01/2014, 21h32

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

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 :

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

**NoSmoking** · 04/01/2014, 21h54

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

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

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

**Watilin** · 05/01/2014, 03h35

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

**hindioriental** · 05/01/2014, 12h00

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 :

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

**NoSmoking** · 05/01/2014, 14h42

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 :

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

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 :

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

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 html :

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

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

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

**npuzin** · 06/01/2014, 14h56

Une solution 100% 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
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>

**hindioriental** · 06/01/2014, 17h58

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.

**NoSmoking** · 07/01/2014, 18h59

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 :

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
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;
    }
}

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

Jeux de lettres en JavaScript

JavaScript

Discussions similaires

Partager

Partager