Spiel-Checkbox-schnell-klicken.php

Quell Code

<script src="/js/index.php?js=3.2.1-jquery.min.js"></script>
<div id="ganzesspiel">
<h3>Klicke in 5 Sekunden so vile Checkboxen wie möglich an </h3>
  <span id="timer"></span>
  <div id="clicker">Angeklickt 0</div>
  <div id="rec">Heutiger Record <span id="rec1"></span><br>
    Ewiger Record <span id="rec2"></span></div>
    <div id="ckeckspiel"></div><br>
    <button id="restart" type="button">Start / restart</button>
  </div>
<script>
$(document).ready(function(){
error=false;
sessionrecord=0;    
feldw=document.getElementById('ckeckspiel');  
record1=document.getElementById('rec1');     
record2=document.getElementById('rec2');   
button=document.getElementById('restart');        
recordeholen=localStorage.getItem('checkboxspiel',0);
     
if(recordeholen<=0 || recordeholen==null || recordeholen=='undefined'){
     record2.innerHTML=0;
}else{
     record2.innerHTML=recordeholen;
}
     
button.addEventListener('click',function(){
     reset();
});    

function reset(){
  element1=document.querySelectorAll('input'); 
  element1.forEach((i1) => {
     i1.disabled = false;
     i1.style.outline='0px solid green';
     if(i1.checked==true){
        i1.checked=false;
     }
  })
  spiel(0,5);
}

     
function spiel(zahlen,timer){        
    runer=setInterval(function(){
    if(timer<=1){
        clearInterval(runer);
        ab=record1.innerHTML;
        if(zahlen>ab){
           record1.innerHTML=zahlen;
           sessionrecord=zahlen;
        }  
      
        if(zahlen>record2.innerHTML){
           //newrecordinfo='Neuer Record '+zahlen;
           localStorage.setItem('checkboxspiel',zahlen);
           record2.innerHTML=zahlen; 
        }
        disabeln(); 
    }
     timer--;
     document.getElementById('timer').innerHTML='Restzeit '+timer;       },1000);

  element=document.querySelectorAll('input');
  element.forEach((i3) => {
  i3.addEventListener('click',function(){
  zahlen++;
  document.getElementById('clicker').innerHTML='Angeklickt '+zahlen;
    i3.style.outline='2px solid green';

   })
disabeln=function(){
 element3=document.querySelectorAll('input');
  element.forEach((i2) => {
    
if (i2.checked == true){
       i2.style.outline='2px solid green';
       i2.disabled = false;
  } else {
       i2.style.outline='3px solid red';
       i2.disabled = true;
  }
   })
}
})
}
                  

for (var i = 0; i < 10; ++i) {

  var neu=document.createElement('div');
  neu.className='line';
  neu.id='line'+i;
  feldw.appendChild(neu);   
 inp=document.getElementById('line'+i);
  
    for (var j = 0; j < 10; ++j) {
  var neu1=document.createElement('input');
  neu1.className='checkboxen';
    
  neu1.type="checkbox";
  neu1.onClick="display(this)";
  neu1.id="check'+i+j+'";  
  inp.appendChild(neu1); 
    }
 
}
                  
if(!error){           
  element=document.querySelectorAll('input');
  element.forEach((i) => {
     i.disabled = true;
  i.style.outline='2px solid green';
  })
}
});

</script>