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

Jeux de lettres en JavaScript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager