Implementierung des Whack-a-Mole-Spiels in JavaScript

<Stil>
    #div0{
     Textausrichtung: zentriert;
     Breite: 1360px;
     Höhe: 600px;
     Rand: 60px automatisch;
     Hintergrundbild: URL("images/bg.jpg");
     Position: relativ;
    }
    #div_top{
     Textausrichtung: links;
     Farbe: braun;
     Breite: 360px;
     Höhe: 100px;
     Position: absolut;
     links: 500px;
    }
    #div_links{
     Breite: 350px;
     Höhe: 320px;
     Position: absolut;
     links: 300px;
     oben: 150px;
    }
    #tab_data{
     Breite: 350px;
     Höhe: 320px;
    }
    #div_rechts{
     Breite: 350px;
     Höhe: 320px;
     Position: absolut;
     rechts: 380px;
     oben: 150px;
    }
    #Tab{
     Breite: 320px;
     Höhe: 320px;
    }
    #tab td{
     Hintergrundbild:URL("images/00.jpg");
     Hintergrundwiederholung: keine Wiederholung;
     Hintergrundposition: Mitte;
    }
</Stil>

<div id="div0">
   <div id="div_top">
     Spielanleitung:<br/>
    Klicken Sie auf die Schaltfläche „Spiel starten“. Im Bild unten wird dann zufällig eine Maus generiert. Klicken Sie auf die Maus, um sie zu treffen, bevor sie verschwindet.<br/>
    Für einen einmaligen Mausklick bekommst du 100 Punkte, bei einem Fehlklick werden dir 100 Punkte abgezogen. Handeln Sie schnell und testen Sie Ihre Reaktion und Sehkraft! <br/>
   </div>
   <div id="div_left">
    <Tabellen-ID="Tab_Daten">
     <tr>
      <th>Spielzeit:</th>
      <td><input type="text" name="text_time" value="1" />Minuten</td>
     </tr>
     <tr>
      <th>Countdown:</th>
      <td><input type="text" name="text_CD" value="60" disabled="disabled"/>Sekunden</td>
     </tr>
     <tr>
      <th>Tritt alle auf:</th>
      <td><input type="text" name="text_hide" value="1" />Sekunden</td>
     </tr>
     <tr>
      <th>Verweildauer:</th>
      <td><input type="text" name="text_show" value="1" />Sekunden</td>
     </tr>
     <tr>
      <th>Punktzahl:</th>
      <td><span id="span_score"></span></td>
     </tr>
     <tr>
      <th colspan="2">
       <input type="button" value="Spiel starten" id="but_start"/>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="button" value="Spiel beenden" id="but_end"/>
      </th>
     </tr>
    </Tabelle>
   </div>
   <div id="div_rechts">
    
   </div>
</div>

<Skript>
   var collTd=[];//Alle td aufzeichnen
   var oTdMouse; //Zeichne das ausgewählte td auf
   //Definieren Sie die Beschriftungselemente in der variablen Datensatzseite var oButStart, oButEnd;
   var oTextTime,oTextHide,oTimeShow,oTimeCD;
   var oSpanScore;
   //Definieren Sie Variablen zum Aufzeichnen von Zeitparametern:
   var iAll, iCD, iShow, iHide, iCount, iGet;
   var iCDId,iRandomId,iShow,iChangeId;
   fenster.onload = funktion(){
    //Tabelle erstellen createTable();
    // Den Tag-Elementvariablen Werte zuweisen init();
    //Ereignis für die Schaltfläche registrieren oButStart.onclick=startGame;
    oButEnd.onclick=Spielende;
   }
   //Starte das Spiel Funktion startGame(){
    iAll=parseInt(oTextTime.Wert)*60;
    iCD=iAlle;
    //Countdown alle 1 Sekunde ausführen iCDId=window.setInterval(setCD,1000);
    iShow = parseInt (oTextShow.Wert);
    iHide=parseInt(oTextHide.value);
    iAnzahl=0;
    ichGet=0;
    //Bei jedem iShow+Hide zufällig einen td anzeigen
    ZufallsId();
    iRandomId=window.setInterval(randomId,(iShow+iHide)*1000);
    oButStart.disabled="deaktiviert";
    oButEnd.disabled="";
   }
   //Zufälliger td
   Funktion randomId(){
    ichZähle++;
    var index = parseInt (Math.random() * collTd.length);
    oTdMouse=collTd[index];
    //Hintergrundbild ändern oTdMouse.style.backgroundImage="url('images/01.jpg')";
    //Warten Sie, bis die Showzeit abgelaufen ist, und setzen Sie dann das Hintergrundbild zurück. iShowId=window.setTimeout("oTdMouse.style.backgroundImage='url(images/00.jpg)';",iShow*1000);
   }
   //Countdown-Funktion setCD(){ festlegen
    iCD--;
    oTextCD.Wert=iCD;
    //Zeichne den Punktestand jede Sekunde auf var message="Insgesamt "+iCount+" Teile, drücke "+iGet+" Teile!";
    oSpanScore.innerHTML=message.fontcolor("blau").fett();
    wenn(iCD<=0){
     Endspiel();
    }
   }
   //Beende das Spiel Funktion endGame(){
    oButEnd.disabled="deaktiviert";
    oButStart.disabled="";
    Fenster.ClearInterval(iCDId);
    Fenster.ClearInterval(iRandomId);
   }
   //Werte den Variablen des Beschriftungselements zuweisen Funktion init(){
    oButStart=document.getElementById("but_start");
    oButEnd=document.getElementById("but_end");
    
    oTextTime=document.getElementsByName("text_time")[0];
    oTextCD=document.getElementsByName("text_CD")[0];
    oTextHide=document.getElementsByName("text_hide")[0];
    oTextShow = document.getElementsByName("text_show")[0];
    
    oSpanScore = document.getElementById("span_score");
    oTextCD.Wert=60;
    oButEnd.disabled="deaktiviert";
   }
   //Tabelle dynamisch generieren Funktion createTable(){
    var oDivRight = document.getElementById("div_right");
    var oTab=document.createElement("Tabelle");
    oTab.id="Registerkarte";
    für(var i=0;i<6;i++){
     var oTr=document.createElement("tr");
     für(var j=0;j<5;j++){
      var oTd = document.createElement("td");
      oTr.appendChild(oTd);
      collTd.push(oTd);
      //Klickereignisse zu allen td hinzufügen oTd.onclick=function(){
       wenn(dies==oTdMouse){
        // Beurteilen Sie, ob das Hintergrundbild der aktuellen Zelle 01.jpg ist
        wenn(dieses.style.backgroundImage.indexOf("01.jpg")!=-1){
         //Erhalte einen Punkt iGet++;
         //Ändern Sie das Hintergrundbild in 02.jpg
         oTdMouse.style.backgroundImage="url('images/02.jpg')";
         //Warten Sie 0,2 Sekunden, um zu 00.jpg zu wechseln
         iChangeId=window.setTimeout("oTdMouse.style.backgroundImage='url(images/00.jpg)';",200);
         var message="Insgesamt "+iCount+" Teile, drücke "+iGet+" Teile!";
         oSpanScore.innerHTML=message.fontcolor("blau").fett();
        }
        
       }
      }
     }
     oTab.appendChild(oTr);
    }
    oDivRight.appendChild(oTab);
   }
</Skript>