Les mots croisés
<body>
<style>
 
#desc{
background-color:white;
}
#cw {
border: 1px solid black;
  border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
   width: 100%;
}
td {
 
width : 2em;
border: 1px solid black;
background-color: white;
text-align: center;
-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
transition: background-color 0.3s;
 
}
 
td.hidden {
 
border-style: none;
 
}
 
td.selected {
 
background-color: #FACC2E;
 
}
 
tr {
 
height : 2em;
 
}
 
#in {
text-align: center;
}
 
</style>
 
<table id="cw">
</table>
<div id="desc">
Description :
</div>
<div style="text-align:center; background-color: white;">
<b>MOT : </b><input id="in" type="text" class="input" value="" oninput="ecriture(this);" style="background-color:#FACC2E;">
</div>
 
<script>
//Début de mots-croisés
 
var totorLaZoneInput = document.getElementById('in');
totorLaZoneInput.addEventListener('keypress', function(event){
    var s = this.selectionStart;
    this.value = this.value.substr(0, s) + this.value.substr(s + 1);
    this.selectionEnd = s;
}, false);
 
var temp;
 
var allText = "<cw><number>15</number>" +
     "<word>" + "<index>0</index>" +
     "<description>Langue officielle d'Oneiroi</description>" +
     "<mode>V</mode>" +
     "<x>4</x>" +
     "<ystart>0</ystart>" +
     "<yend>6</yend>" +
     "</word>" +
     "<word>" +
     "<index>1</index>" +
     "<description>Conceptions du Docteur</description>" +
     "<mode>V</mode>" +
     "<x>7</x>" +
     "<ystart>0</ystart>" +
     "<yend>5</yend>" +
     "</word>" +
     "<word>" +
     "<index>2</index>" +
     "<description>Ils veulent être cool</description>" +
     "<mode>H</mode>" +
     "<y>5</y>" +
     "<xstart>3</xstart>" +
     "<xend>10</xend>" +
     "</word>" +
     "<word>" +
     "<index>3</index>" +
     "<description>Utilisent l'anormal pour améliorer la condition humaine</description>" +
     "<mode>V</mode>" +
     "<x>9</x>" +
     "<ystart>4</ystart>" +
     "<yend>16</yend>" +
     "</word>" +
     "<word>" +
     "<index>4</index>" +
     "<description>A trahi la Fondation</description>" +
     "<mode>H</mode>" +
     "<y>8</y>" +
     "<xstart>0</xstart>" +
     "<xend>11</xend>" +
     "</word>" +
     "<word>" +
     "<index>5</index>" +
     "<description>Unité de terrain des fervents athées</description>" +
     "<mode>V</mode>" +
     "<x>0</x>" +
     "<ystart>5</ystart>" +
     "<yend>9</yend>" +
     "</word>" +
     "<word>" +
     "<index>6</index>" +
     "<description>Cherche le profit avant tout</description>" +
     "<mode>V</mode>" +
     "<x>7</x>" +
     "<ystart>7</ystart>" +
     "<yend>9</yend>" +
     "</word>" +
     "<word>" +
     "<index>7</index>" +
     "<description>Grand prophète des cultes Sarkiques</description>" +
     "<mode>V</mode>" +
     "<x>11</x>" +
     "<ystart>6</ystart>" +
     "<yend>8</yend>" +
     "</word>" +
     "<word>" +
     "<index>8</index>" +
     "<description>Monsieur loyal sous les feux de la piste</description>" +
     "<mode>H</mode>" +
     "<y>13</y>" +
     "<xstart>6</xstart>" +
     "<xend>18</xend>" +
     "</word>" +
     "<word>" +
     "<index>9</index>" +
     "<description>Ville de l'Esprit</description>" +
     "<mode>V</mode>" +
     "<x>6</x>" +
     "<ystart>12</ystart>" +
     "<yend>18</yend>" +
     "</word>" +
     "<word>" +
     "<index>10</index>" +
     "<description>Prêcheur du métal</description>" +
     "<mode>H</mode>" +
     "<y>18</y>" +
     "<xstart>1</xstart>" +
     "<xend>6</xend>" +
     "</word>" +
     "<word>" +
     "<index>11</index>" +
     "<description>QG des vagabonds</description>" +
     "<mode>V</mode>" +
     "<x>17</x>" +
     "<ystart>2</ystart>" +
     "<yend>13</yend>" +
     "</word>" +"<word>" +
     "<index>12</index>" +
     "<description>Divinité d'acier</description>" +
     "<mode>H</mode>" +
     "<y>9</y>" +
     "<xstart>14</xstart>" +
     "<xend>20</xend>" +
     "</word>" +
     "<word>" +
     "<index>13</index>" +
     "<description>Ils dirigent les mercenaires</description>" +
     "<mode>H</mode>" +
     "<y>6</y>" +
     "<xstart>15</xstart>" +
     "<xend>21</xend>" +
     "</word>" +
     "<word>" +
     "<index>14</index>" +
     "<description>Couleur de la reine</description>" +
     "<mode>H</mode>" +
     "<y>3</y>" +
     "<xstart>15</xstart>" +
     "<xend>19</xend>" +
     "</word>" +"</cw>";
 
parser = new DOMParser();
xmlDoc = parser.parseFromString(allText,"text/xml");
 
var N = 23;
 
var T = document.getElementById("cw");
 
var S = "";
 
var selected = -1;
 
var descArray = [];
var indexMatrix = [];
 
var cellMatrix = [];
for(var i=0; i<N; i++) {
    cellMatrix[i] = new Array(N);
}
 
for(var i = 0;i<N;i++){
for(var j = 0;j<N;j++){
    cellMatrix[i][j] = -1;
}
}
 
var index;
var word;
var tab;
var mode;
var y;
var x;
var x1;
var x2;
var y1;
var y2;
 
temp = xmlDoc.getElementsByTagName("number")[0].childNodes[0].nodeValue;
var words = xmlDoc.getElementsByTagName("word");
for(var i = 0; i < temp; i++){
 
    word = words[i];
    descArray[i] = word.getElementsByTagName("description")[0].childNodes[0].nodeValue;
    mode = word.getElementsByTagName("mode")[0].childNodes[0].nodeValue;
 
    tab = [];
 
    if (mode == "H") {
 
     y = parseInt(word.getElementsByTagName("y")[0].childNodes[0].nodeValue);
     x1 = parseInt(word.getElementsByTagName("xstart")[0].childNodes[0].nodeValue);
     x2 = parseInt(word.getElementsByTagName("xend")[0].childNodes[0].nodeValue);
 
     for(x = x1; x <= x2; x++){
 
     tab.push([y,x]);
     cellMatrix[y][x] = i;
 
     }
 
    } else {
 
     x = parseInt(word.getElementsByTagName("x")[0].childNodes[0].nodeValue);
     y1 = parseInt(word.getElementsByTagName("ystart")[0].childNodes[0].nodeValue);
     y2 = parseInt(word.getElementsByTagName("yend")[0].childNodes[0].nodeValue);
 
     for(y = y1; y <= y2; y++){
 
     tab.push([y,x]);
     cellMatrix[y][x] = i;
 
     }
 
    }
 
    indexMatrix[i] = tab;
 
}
 
for (var i = 0; i < N; i++) {
   S += "<tr>";
   for (var j = 0; j < N; j++) {
    temp = "class=\"\"" + ">_</td>";
 
    if(cellMatrix[i][j] == -1){
     temp = "class=\"hidden\""+ "></td>";
    }
 
    S+= "<td id=\"cell-" + i + "-" + j + "\" onclick=\"clic(this);\" " + temp;
 
   }
   S += "</tr>";
}
 
T.innerHTML = S;
 
function clic(elt){
 
    var c = elt.getAttribute("id");
    var y;
    var x;
    var i = c.indexOf("-");
    var j = c.indexOf("-", i + 1);
 
    y = parseInt(c.substring(i + 1, j));
    x = parseInt(c.substring(j + 1));
 
    if(selected != -1){
 
     for(var i = 0;i < indexMatrix[selected].length; i++){
 
     var k = indexMatrix[selected][i][0];
     var l = indexMatrix[selected][i][1];
     var e = document.getElementById("cell-"+k+"-"+l);
     e.setAttribute("class","");
 
     }
 
    }
 
    selected = cellMatrix[y][x];
    document.getElementById("desc").innerHTML = "Description : " + descArray[selected];
    if (document.getElementById("desc").innerHTML == "Description : undefined") {
     document.getElementById("desc").innerHTML = "Description :";
    }
 
    if(selected != -1){
    temp = "";
     for(var i = 0;i < indexMatrix[selected].length; i++){
 
     var k = indexMatrix[selected][i][0];
     var l = indexMatrix[selected][i][1];
     var e = document.getElementById("cell-"+k+"-"+l);
     e.setAttribute("class","selected");
     temp += e.innerHTML;
     }
    document.getElementById("in").value = temp;
    document.getElementById("in").maxLength = indexMatrix[selected].length;
    }else{
    document.getElementById("in").value = "";
    document.getElementById("in").maxLength = 0;
    }
 
}
 
function ecriture(elt){
 
    var s = elt.value;
 
     for(var i = 0;i < indexMatrix[selected].length; i++){
 
     var k = indexMatrix[selected][i][0];
     var l = indexMatrix[selected][i][1];
     if(i < s.length) {
     document.getElementById("cell-"+k+"-"+l).innerHTML = s.charAt(i);
     } else {
     document.getElementById("cell-"+k+"-"+l).innerHTML = "_";
     }
 
     }
 
}
 
</script>
</body>
Sauf mention contraire, le contenu de cette page est protégé par la licence Creative Commons Attribution-ShareAlike 3.0 License