Amélioration d'un pendu

Amélioration d'un pendu - Javascript/Node.js - Programmation

Marsh Posté le 27-05-2015 à 20:19:41    

Bonjour , Merci d’abord de lire ce sujet .
Pendant plusieurs cours d'ISN notre groupe a progressé dans un pendu ( dont le professeur nous avait donner la base )  
Mais notre professeur nous a alors demander de faire :  un tableau et que les lettres sur lesquels  le joueur a cliqué s'affichent dedans à la place d'un changement de couleur mais j'ai alors rencontré des problèmes . Je ne trouve aucun moyen d'afficher les lettres dans le tableau que j'ai crée ( notre  professeur nous a demander de supprimer le changement de couleur )  
 
Voici le code source :  
 

Code :
  1. <html>
  2. <head>
  3.     <meta charset=UTF-8>
  4.  <title>Jeu de pendu en Javascipt</title>
  5.  <link rel=Stylesheet type="text/css" href=stylePendu.css>
  6.  <script language="JavaScript">
  7.   <!--
  8.    var motSecret;
  10.    var now=new Date();   // Date d'aujourd'hui
  11.    var tableauMot=new Array(); // Le tableau qui contient les lettres du mot à trouver
  12.    var mots=new Array();  // Le tableau qui contient tous les mots possibles
  14.    var tailleMot;    // Le nombre de lettres du mot à trouver
  15.    var coupsManques=0;   // Le nombre de lettres fausses essayées
  16.    var lettresTrouvees=0;  // Le nombre de lettres trouvées
  17.    var fini=false;    // true si le jeu est terminé
  19.    mots[0]="CONSOLE";
  20.    mots[1]="MANETTE";
  21.    mots[2]="POLICIER";
  22.    mots[3]="CANAPE";
  23.    mots[4]="TELEVISION";
  24.    mots[5]="GLADIATEUR";
  25.    mots[6]="ARMOIRE";
  26.    mots[7]="CAMION";
  27.    mots[8]="HORLOGE";
  28.    mots[9]="MARGUERITE";
  29.    mots[10]="ELEPHANT";
  30.    mots[11]="IGLOO";
  31.    mots[12]="SINGE";
  34.    motSecret=mots[Math.floor(Math.random() * 13)];
  35.    tailleMot=motSecret.length;
  42.    // Permet de changer la couleur des touches du clavier
  43.    function changeCouleur(element,couleur){
  44.     element.style.backgroundColor=couleur;
  45.    }
  47.    // Gère tous les traitements à faire lorsqu'on appuie sur une touche
  48.    function proposer(element){
  51.     if(element.style.backgroundColor=="black" ||fini) return;
  54.     var lettre=element.innerHTML;
  57.     // On met la variable trouve à false;
  58.     var trouve=false;
  60.     // On parcours chaque lettre du mot, on cherche si on trouve la lettre séléectionnée au clavier
  61.     for(var i=0; i<tailleMot; i++) {
  63.      // Si c'est le cas :
  64.      if(tableauMot[i].innerHTML==lettre) {
  65.       tableauMot[i].style.visibility='visible'; // On affiche la lettre
  66.       trouve=true;
  67.       lettresTrouvees++;
  68.      }
  70.     }
  72.     // Si la lettre n'est pas présente, trouvé vaut toujours false :
  73.     if(!trouve){
  74.      coupsManques++;
  75.      document.images['pendu'].src="images/pendu_"+coupsManques+".jpg"; // On change l'image du pendu
  77.      // Si on a raté 9 fois :
  78.      if(coupsManques==9){
  79.       alert("Dommage mec ! tu es nul  !" );
  80.       for(var i=0; i<tailleMot; i++) tableauMot[i].style.visibility='visible';
  81.       fini=true;
  82.       // on affiche le mot, on fini le jeu
  83.      }
  84.     }
  85.     if(lettresTrouvees==tailleMot){
  86.      alert("Bravo ! T'es trop un bonhomme !" );
  87.      fini=true;
  88.     }
  89.    }
  90.   -->
  91.  </script>
  92. </head>
  96. <body>
  98. <center>
  99. <div id="page">
  101. <img name="pendu" class="pendu" src="images/pendu_0.jpg">
  103. <h1>Jeu de pendu</h1>
  105. <h2>Entrez une lettre grâce au clavier ci-dessous ; si elle est dans le mot secret, elle sera affichée mais sinon... la sentence se rapprochera !</h2>
  107. <table id="clavier">
  108.  <tr>
  109.   <td onclick="proposer(this);" >A</td>
  110.   <td onclick="proposer(this);" >B</td>
  111.   <td onclick="proposer(this);" >C</td>
  112.   <td onclick="proposer(this);" >D</td>
  113.   <td onclick="proposer(this);" >E</td>
  114.   <td onclick="proposer(this);" >F</td>
  115.   <td onclick="proposer(this);" >G</td>
  116.   <td onclick="proposer(this);" >H</td>
  117.   <td onclick="proposer(this);" >I</td>
  118.   <td onclick="proposer(this);" >J</td>
  119.  </tr>
  120.  <tr>
  121.   <td onclick="proposer(this);" >K</td>
  122.   <td onclick="proposer(this);" >L</td>
  123.   <td onclick="proposer(this);" >M</td>
  124.   <td onclick="proposer(this);" >N</td>
  125.   <td onclick="proposer(this);" >O</td>
  126.   <td onclick="proposer(this);" >P</td>
  127.   <td onclick="proposer(this);" >Q</td>
  128.   <td onclick="proposer(this);" >R</td>
  129.   <td onclick="proposer(this);" >S</td>
  130.   <td onclick="proposer(this);" >T</td>
  131.  </tr>
  132.  <tr>
  133.   <td onclick="proposer(this);" >U</td>
  134.   <td onclick="proposer(this);" >V</td>
  135.   <td onclick="proposer(this);" >W</td>
  136.   <td onclick="proposer(this);" >X</td>
  137.   <td onclick="proposer(this);" >Y</td>
  138.   <td onclick="proposer(this);" >Z</td>
  139.  </tr>
  141. </table>
  142. <br>
  143. <a class="lien" href="javascript:location.reload();">Nouvelle partie</a>
  145. <table id="mot">
  146.  <tr>
  147.   <script language="javascript">
  148.    for(var i=0; i<tailleMot; i++) document.write("<td> <p id=\""+i+"\">"+motSecret.charAt(i)+"</p></td>" );
  149.   </script>
  151.  </tr>
  152. </table>
  153. </table>
  155.  <table border="1" style="border: medium solid #FFFF00">
  156.   <caption><h2>Lettres utilisés</h2></caption>
  157.   <tr>
  158.       <th width=150 height=50></th>
  159.    <td> </td>
  160.   </tr>
  163.   </tr>
  164.  </table>
  166. <script language="javascript">
  167.  for(var i=0; i<tailleMot; i++) tableauMot[i]=document.getElementById(i);
  168. </script>
  170. <center>
  171. </div>
  172. </body>
  173. </html>


 
le css ( on sait jamais) :

Code :
  1. #page {
  2. background-color:#0040FF;
  3. border:1px solid black;
  4. text-align:left;
  5. width:60%;
  6. padding:30px;
  7. height:450px;
  8. }
  10. h1 {
  11. font-size:30px;
  12. font-family:Arial, sans serif;
  13. }
  15. img.pendu {
  16. float:right;
  17. }
  19. h2 {
  20. font-size:16px;
  21. font-family:Arial, sans-serif;
  22. }
  24. #mot {
  25. margin:30px 0 0 0;
  26. clear:both;
  27. top:100px;
  28. }
  30. #mot td {
  31. padding:10px;
  32. background-color:#2EFE2E;
  33. border:2px inset black;
  34. width:30px;
  35. height:30px;
  36. font-weight:bold;
  37. font-size:1.5em;
  38. text-align:center;
  39. }
  41. #mot p{
  42. visibility:hidden;
  43. }
  45. #clavier{
  46. border:5px outset black;
  47. padding:20px;
  48. background-color:#8A0808;
  49. }
  51. #clavier td {
  52. background-color:Blue;
  53. border:2px solid black;
  54. width:35px;
  55. height:25px;
  56. text-align:center;
  57. font-weight:bold;
  58. cursor:pointer;
  59. }
  61. a.lien{
  62. color:Red;
  63. text-decoration:none;
  64. font-size:30px;
  65. }
  67. a.lien:hover{
  68. color:green;
  69. font-weight:bold;
  70. text-decoration:underline;
  71. }


 
Voila en espérant une aide précieuse pour le tableau =) ( si possible avant vendredi )


Message édité par sharto le 28-05-2015 à 16:30:41
Reply

Marsh Posté le 27-05-2015 à 20:19:41   

Reply

Marsh Posté le 27-05-2015 à 22:42:59    

> script language="JavaScript"
 
Donc ça fait quoi dans la section Java?
 
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 27-05-2015 à 23:22:48    

Désolé de l'erreur c'est réparé la section est la bonne je pense A + =)

Reply

Marsh Posté le 28-05-2015 à 11:05:52    

J'aurais mis ça en Javascript, mais pourquoi pas...
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed