Jeux de mots à rayer

Soyez le premier à donner votre avis sur cette source.

Vue 32 612 fois - Téléchargée 1 143 fois

Description

Voici un exemple de jeu avec des mots à rayer.
On sélectionne le mot puis la direction dans lequel on le lit et enfin la premiére lettre du mot que l'on a trouvé dans la grille.
Si l'on a bon alors le mot dans la liste et le mot dans la grille se colorent ...

Source / Exemple :


<HTML>
<HEAD>
<TITLE>Mots à rayer By Corsica </TITLE>
<style> 
.used { color:Gray; }
html, body  {
		padding:0px;
		margin:10px 10px 10px 10px;
		font-family:"Trebuchet MS", Arial, sans-serif;
		font-size:11px;
		color:blue ; 
		background: gray;
		text-align:center;	
  		}
div.titre   {
		padding:0px;
		margin:0px 0px 0px 0px;
		font-family:"Trebuchet MS", Arial, sans-serif;
		font-size:16px;
		color:blue ; 
		text-align:center;
		background: white;
		border: double 2 2 2 2 blue;
		width:80%;
		vertical-align: middle;
  		}
table.lettres {
		background-color:white;
		border:dotted 1 1 1 1;
		text-align:center; 
		vertical-align:middle;
		}
table.fleches {
		background-color:white;
		border:dotted 1 1 1 1;
		text-align:center;
		vertical-align:middle; 
		font-family:"Wingdings";
		width:100%;
		}
table.mots	{
		background-color:white;
		border:dotted 1 1 1 1;
		width:100px;
		text-align:left; 
		vertical-align:top;	
		}
table.mots	{
		background-color:white;
		border:dotted 1 1 1 1;
		width:100px;
		text-align:left; 
		vertical-align:top;	
		}
td.divMot  {
		font-family:"Trebuchet MS", Arial, sans-serif;
		font-size:14px;
		width:200px;
		}
td.divDir  {
		font-family:"Wingdings";
		font-size:14px;
		width:200px;
		}
td.divOKKO	{
		font-family:"Wingdings";
		font-size:32pt;
		text-align:center;
		width:50px;
		}
a.lettres 		{ text-decoration:none; width:100% ; color: blue}
a.lettres:visited { }
a.lettres:hover 	{ font-size:14px; border:solid 1px ; background-color : white ; color: red ; }
a.lettres:active 	{ }
a 		{ text-decoration:none; width:100% ; color: blue}
a:visited 	{ }
a:hover 	{ background-color : blue ; color: white }
a:active 	{ }
td.fleche   { text-align:center; vertical-align:middle; font-family:"Wingdings" }
td.ct		{ text-align:center; vertical-align:top;		}
td.cm		{ text-align:center; vertical-align:middle;	}
td.lt		{ text-align:left; vertical-align:top;		}
td.lm		{ text-align:left; vertical-align:middle;	}
td.rt		{ text-align:right; vertical-align:top;		}
td.rm		{ text-align:right; vertical-align:middle;	}
</style>
<script>
Cols = 15;
Rows = 15;
var selMot;
var selDir;
var selOKKO;
var jsMot = "";
var jsDir = "";
var txtDir = "";
var txtMot = "";
var Ok = false;
var tabToGray = new Array();
var iToGray = 0;
tabData = new Array( Rows );

tabChaine = "uessetlaceercas" +
		"ainfanteihadech" +
		"epslccrhtvaniea" +
		"deiihoceesittth" +
		"nscaarunueeserc" +
		"aerialerrqijoas" +
		"bttnrmaetmiyadu" +
		"erotetnpiiadime" +
		"nmeneeatelsabne" +
		"ibtgguiritdanac" +
		"hsluegqseeronpn" +
		"piseenmimproati" +
		"urrluetetumgnor" +
		"aeelbonsoeeirep" +
		"delliatctolemac"	;

var tabMots = new Array();
var iMots = 0;
tabMots[ iMots++ ] = "abdiquer"; 
tabMots[ iMots++ ] = "altesse"; 
tabMots[ iMots++ ] = "avenement"; 
tabMots[ iMots++ ] = "bandeau"; 
tabMots[ iMots++ ] = "bleu"; 
tabMots[ iMots++ ] = "camelot"; 
tabMots[ iMots++ ] = "charte"; 
tabMots[ iMots++ ] = "chateau"; 
tabMots[ iMots++ ] = "couronne"; 
tabMots[ iMots++ ] = "courtisan"; 
tabMots[ iMots++ ] = "dauphin"; 
tabMots[ iMots++ ] = "diademe"; 
tabMots[ iMots++ ] = "edit"; 
tabMots[ iMots++ ] = "etiquette"; 
tabMots[ iMots++ ] = "imperatrice"; 
tabMots[ iMots++ ] = "infant"; 
tabMots[ iMots++ ] = "legitimiste"; 
tabMots[ iMots++ ] = "lis"; 
tabMots[ iMots++ ] = "majeste"; 
tabMots[ iMots++ ] = "monarchie"; 
tabMots[ iMots++ ] = "negus"; 
tabMots[ iMots++ ] = "noble"; 
tabMots[ iMots++ ] = "page"; 
tabMots[ iMots++ ] = "palais"; 
tabMots[ iMots++ ] = "prince"; 
tabMots[ iMots++ ] = "regent"; 
tabMots[ iMots++ ] = "reine"; 
tabMots[ iMots++ ] = "roi"; 
tabMots[ iMots++ ] = "royalisme"; 
tabMots[ iMots++ ] = "sacre"; 
tabMots[ iMots++ ] = "schah"; 
tabMots[ iMots++ ] = "sire"; 
tabMots[ iMots++ ] = "taille"; 
tabMots[ iMots++ ] = "tole"; 
tabMots[ iMots++ ] = "trone"; 

// 10
for 	( var  r = 0 ; r < Rows ; r++ )
    	{
      var tempRow = new Array( Cols );
	for 	( var c = 0 ; c < Cols ; c++ )
    		{
		tempRow[ c ] = tabChaine.substring( ( r * Cols ) + c , ( r * Cols ) + c + 1) ;
		}
	tabData[ r ] = tempRow;
	}		

function initTab()
{
	//
	// Génération du tableau de lettres
	//
	var myObj = document.getElementById("myHTMLTab");
	var myTmpHTML = "";
	myTmpHTML += "<table class=\"lettres\" >";
	for 	( var  r = 0 ; r < Rows ; r++ )
    	{
		myTmpHTML += "<tr>";
      	var tempRow = new Array( Rows );
		tempRow = tabData[ r ] ;
		for 	( var c = 0 ; c < Cols ; c++ )
    			{
			myTmpHTML += "<td width=\"20px\">";
			MyCoord = "R" + ( r < 10 ? "0" + r : r ) + "C" + ( c < 10 ? "0" + c : c ) ;
			myTmpHTML += "<a href=\"javascript:setLettre('" + MyCoord + "');\" id=\"" + MyCoord + "\">" + tempRow[ c ] + "</a>";
			myTmpHTML += "</td>";
			}
		myTmpHTML += "</tr>";
	}
	myTmpHTML += "</table>";
	myObj.innerHTML = myTmpHTML; 	

	//
	// Génération du tableau des mots
	//
	var myObj = document.getElementById("myHTMLMot");
	myTmpHTML = "<table class=\"mots\">";
	myTmpHTML += "<tr>";
	iMots--;
	nbTab = (( iMots - ( iMots % Rows )) / Rows ) + 1;
	for 	( var  m = 0 ; m < nbTab ; m++ )
    	{
		myTmpHTML += "<td valign=\"top\">";
		myTmpHTML += "<table class=\"mots\">";
		var Init = ( m * Rows ) ;
		var Max = (( m + 1 ) * Rows );
		for 	( var  mm = Init ; mm < ( Max > iMots ? iMots + 1 : Max ) ; mm++ )
    		{
		myTmpHTML += "<tr>";
		myTmpHTML += "<td>";
		myTmpHTML += "<a href=\"javascript:setMot('" + tabMots[ mm ] + "');\" id=\""+ tabMots[mm] + "\">&nbsp;" + tabMots[ mm ] + "</a>";
		myTmpHTML += "</td>";
		myTmpHTML += "</tr>";
		}
		myTmpHTML += "</table>";
		myTmpHTML += "</td>";
	}
	myTmpHTML += "</tr>";
	myTmpHTML += "</table>";
	myObj.innerHTML = myTmpHTML; 	

	// Generation du tableau de sélection de direction
	myObj = document.getElementById("myHTMLDir");
	myTmpHTML = "<table class=\"fleches\" border=1>" +
			" <tr>" +
			"     <td rowspan=\"3\">" +
			"		<table class=\"statut\">" +
			" 		  <tr><td id=\"txtMot\" class=\"divMot\"></td>" +
			"     	      <td id=\"divMot\" class=\"divMot\">&nbsp;</td>" +
			"     	      <td id=\"divOKKO\" class=\"divOKKO\" rowspan=\"2\"></td></tr>" +
			"     	  <tr><td id=\"txtDir\" class=\"divMot\"></td>" +
			"     	      <td id=\"divDir\" >&nbsp;</td></tr>" +
			"           </table>" +
			"     </td>" +
			"     <td><a href=\"javascript:setDir('NO','õ');\" alt=\"Vers le haut à gauche\">õ</a></td>" +
			"     <td><a href=\"javascript:setDir('N','ñ');\" alt=\"Vers le haut\">ñ</a></td>" +
			"     <td><a href=\"javascript:setDir('NE','ö');\" alt=\"Vers le haut à droite\">ö</a></td>" +
			" </tr>" +
			" <tr><td><a href=\"javascript:setDir('O','ï');\" title=\"Vers la gauche\">ï</a></td>" +
			"     <td><a href=\"javascript:setDir('C','J');\" title=\"Effacer les sélections\">J</a></td>" +
			"     <td><a href=\"javascript:setDir('E','ð');\" alt=\"Vers la droite\">ð</a></td></tr>" +
			" <tr><td><a href=\"javascript:setDir('SO','÷');\" alt=\"Vers le bas à gauche\">÷</a></td>" +
			"     <td><a href=\"javascript:setDir('S','ò');\" alt=\"Vers le bas\">ò</a></td>" +
			"     <td><a href=\"javascript:setDir('SE','ø');\" alt=\"Vers le bas à droite\">ø</a></td></tr>" +
			"</table>";
	myObj.innerHTML = myTmpHTML;

	// Récupération des objets de sélections de mot et direction
	selDir = document.getElementById("divDir");
	selMot = document.getElementById("divMot");
	selOKKO = document.getElementById("divOKKO");
	txtMot = document.getElementById("txtMot");
	txtDir = document.getElementById("txtDir");
	setDir("C");
}
function ctrlOKKO()
{
	if ( jsMot == "" || jsDir == "" )
	{
	selOKKO.style.color = "red";
	selOKKO.innerHTML = "û";
	Ok = false;
	}
	else
	{
	selOKKO.style.color = "#00ff00";
	selOKKO.innerHTML = "ü";
	Ok = true;
	}
}

function setDir( Dir , Img )
{
	if ( Dir == "C" )
	{
	selDir.innerHTML = jsDir = "";
	selMot.innerHTML = jsMot = "";
	txtMot.innerHTML = "Choisissez un mot dans la liste";
	txtDir.innerHTML = "Choisissez un sens de lecture";
	}
	else
	{
	selDir.innerHTML = Img;
	txtDir.innerHTML = "Sens de lecture : ";
	jsDir = Dir;
	}
	ctrlOKKO();
}
function setMot( Mot )
{
	selMot.innerHTML = jsMot = Mot;
	txtMot.innerHTML = "Mot sélectionné : ";
	ctrlOKKO();

}
function setLettre( Lettre )
{
	try {
	myCol = eval(Lettre.substring( 4 , 7 ));
	myRow = eval(Lettre.substring( 1 , 3 ));
	myLength = jsMot.length;
	if ( Ok == false ) return;	myString = "";
	iToGray = 0;
	myTmpCol = myCol;
	myTmpRow = myRow;
	for 	( var  i = 0 ; i < myLength ; i++ )
    	{
      		tempRow = tabData[ myTmpRow ] ;
		myString += tempRow[ myTmpCol ];
		tabToGray[ iToGray++ ] = getCoord( myTmpRow , myTmpCol );
		if ( jsDir == "E" || jsDir == "NE" || jsDir == "SE" )  myTmpCol++;
		if ( jsDir == "O" || jsDir == "NO" || jsDir == "SO" )  myTmpCol--;
		if ( jsDir == "N" || jsDir == "NE" || jsDir == "NO" )  myTmpRow--;
		if ( jsDir == "S" || jsDir == "SE" || jsDir == "SO" )  myTmpRow++;
	}
	if ( jsMot != myString ) return;
	Griser();
	myTmpObj = document.getElementById(jsMot);
	myTmpObj.style.color = "black";
	}
	catch ( e )
	{
	//window.status = e;
	}
}
function set2DEC( Valeur )
{
	if ( valeur < 10 ) return "0" + Valeur;
	else               return Valeur;
}
function getCoord( r , c)
{
	return "R" + ( r < 10 ? "0" + r : r ) + "C" + ( c < 10 ? "0" + c : c ) ;
}
function Griser()
{
	for ( var i=0 ; i < iToGray ; i++ )
	{
	myTmpObj = document.getElementById(tabToGray[i]);
	myTmpObj.style.color = "white";
	myTmpObj.style.backgroundColor = "gray";
	}
}
</script>
</HEAD>
<body onLoad="initTab()">
	<center><div class="titre"><br>Mots à rayer<br>&nbsp;</div><br>
	<table cellpadding="5px">
		<tr>
			<td id="myHTMLTab" class="rt"></td>
			<td id="myHTMLMot" class="lt"></td>
		</tr>
		<tr>
			<td colspan="2" class="rt" id="myHTMLDir">
			</td>
		</tr>
	</table>
	</center>
</body>
</html>

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
5
Date d'inscription
lundi 3 octobre 2005
Statut
Membre
Dernière intervention
14 avril 2008

Effectivement corsica, je n'ai pas eu la présence d'esprit d'aller voir sous IE, mais avec Firefox les flèches ne s'affichent pas, tu as des lettres accentuées à la place.
Sinon ça marche sous IE, merci.
Messages postés
147
Date d'inscription
lundi 13 mai 2002
Statut
Membre
Dernière intervention
15 février 2010

Je reprends mon explication :
1°) On sélectionne le mot que l'on a trouvé dans la liste de droite.
2°) On sélectionne la direction dans laquelle on a trouvé le mot.
3°) On clique sur la premiére lettre du mot dans la grille de gauche

Par exemple :
Clic sur le mot "ALTESSE" dans la liste de droite.
Clic sur la flêche vers la gauche
Clic sur le "A" de la premiére ligne ( 8ème lettre en partant de la gauche )

Le mot se positionne en couleur inverse ...

Par contre j'ai détecté un bug d'affichage sous FireFox : Le style de la page n'est pas pris en compte alors que sous I.E. il n'y a pas de soucis...

Je cherche !!

Pour les autres grilles , il suffit juste d'en saisir d'autre sous mysql par exemple et de générer la page en automatique ...
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
même souci pour utiliser... alors que tout est dit dans la description !
° On sélectionne le mot
° puis la direction dans lequel on le lit
° et enfin la premiére lettre du mot que l'on a trouvé dans la grille
simplifier ou mieux expliquer ?

c'est sympa... mais très très dommage de n'avoir qu'une seule grille !
Messages postés
5
Date d'inscription
lundi 3 octobre 2005
Statut
Membre
Dernière intervention
14 avril 2008

Salut corsica
Ca à l'air sympa ce que tu as fait, mais je n'arrive pas à en trouver le fonctionnement.
Si tu pouvais indiquer comment utiliser le jeu ce serait super.
Merci

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.