Reaktions-Spiel.php

Quell Code

<p>Teste Deine Reaktionszeit!</p>
<label>Schwirigkeitsgrad</label>
<select id="schwer">
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option>  
</select> <br>
<input type="text" id="name" value="basti1012">
<input type="button" value="start" id="start">  
<input type="button" value="stop" id="stop">
<div class="line">
    <input type='button' id='restart' value='Nochmal Spielen'>
    <input type='button' id='newname' value='Neuen Namen eingeben'>  
</div>
<div id="info"></div>
<div id="ergebniss"></div>
<div id="tabelle"></div>



<script>
var startTime=new Date();
var endTime=new Date();
var startPressed=false;
var Started=false;
var maxWait=5;// maxzeit bevor es los geht
var minspeed=500;//level 4 und 5
var maxspeed=2000;//level 4 und 5
var randomspeed=10;

a = new Date();
b = a.getHours();
c = a.getMinutes();
d = a.getSeconds();
var zeit = b+':'+c+':'+d;
var timerID,randtimer,responseString;
let playerList = [];  

var yourname=document.getElementById('name');

var newname=document.getElementById('newname');

var inf= document.getElementById('info');
var stoppen=document.getElementById('stop');
var starten=document.getElementById('start'); 

var restart=document.getElementById('restart'); 
var schwer=document.getElementById('schwer'); 
var erg=document.getElementById('ergebniss');   

stoppen.style.display='none';
restart.style.display='none'; 
newname.style.display='none';   
stoppen.addEventListener('click',function(){
     stopTest()
});
  
starten.addEventListener('click',function(){
     starten.style.display='none'; 
     yourname.style.display='none'; 
     stoppen.style.display='block';
       inf.innerHTML='';
     startit()
});

restart.addEventListener('click',function(){
     restart.style.display='none';  
     newname.style.display='none'; 
     stoppen.style.display='block';
     startit()
});  

newname.addEventListener('click',function(){
    yourname.style.display='block'; 
    yourname.value='';
    restart.style.display='none';
    newname.style.display='none'; 
    starten.style.display='block';
});  
  
function random_position(y,x){
    randleft = Math.floor( Math.random() * (window.innerWidth-y) + 1 );
    randtop = Math.floor( Math.random() * (window.innerHeight-x) + 1 ); 
    return {'le':randleft,'to':randtop};
}

function startTest(){
  var color,randleft,randtop,toppx;  
  if(schwer.value==1){
    color='blue'; 
    randtop='100px';
    randleft='10px';
  }else if(schwer.value==2){
    toppx=random_position(100,30);
    randleft=toppx['le'];
    randtop=toppx['to'];
    color='red'; 
  }else if(schwer.value==3){
    color='green'; 
    stoppen.style.width='30px';
    stoppen.style.height='15px';
    toppx=random_position(30,15);
    randleft=toppx['le'];
    randtop=toppx['to'];
    stoppen.style.fontSize='12px';
  }else if(schwer.value>=4){
    function level4(){
       var randomspeed = Math.floor( Math.random() * maxspeed + minspeed );
       console.log(randomspeed)
       toppx=random_position(100,30);
       randleft=toppx['le'];
       randtop=toppx['to'];
       document.getElementById('stop').style.top=randtop+'px'; 
       document.getElementById('stop').style.left=randleft+'px'; 
       if(schwer.value==5){
         color='orange';
       }else{
          document.getElementById('stop').style.transition='all '+randomspeed+'ms'; 
          color='yellow';
       }
       randtimer=setTimeout(level4,randomspeed);
    }
   level4();
  }
  stoppen.style.top=randtop+'px';
  stoppen.style.left=randleft+'px';
  stoppen.style.background=color;
  Started=true;
  startTime=new Date();
}

function remark(neededTime){
      if(neededTime < 1){
         responseString ="Super Reaktion! Du hast "+neededTime+" Sekunden benötigt";
      } else if(neededTime > 1 && neededTime < 3){
         responseString ="Gute Reaktion! Du hast "+neededTime+" Sekunden benötigt";
      } else{
         responseString ="Deine Reaktion war okay! Deine Zeit"+neededTime+" Sekunden";
      }
        return responseString;
}

function stopTest(){
	if(Started){
		endTime=new Date();
		var responseTime=(endTime.getTime()-startTime.getTime())/1000;
    stoppen.style.background="white";  
    stoppen.style.display='none';
    stoppen.style.transition='all 0ms'; 
    restart.style.display='block';
    newname.style.display='block';  
    na=yourname.value;
    clearTimeout(randtimer);
    erg.innerHTML=na+" <br>" + remark(responseTime);
    playerList.push([na,''+responseTime+'',zeit,schwer.value]);
    anzeigen();
		startPressed=false;
		Started=false;
        /*
        $.ajax({
            type: 'POST',
            url: 'myscript/Reaktions-Spiel.php',
            data: {name:na,retime:responseTime,time:zeit,stufe:schwer.value},
            success: function(datachat){ 
               // console.warn(datachat);
            }
        });       
        
        */
        
	}else{
		if (!startPressed){
	     inf.innerHTML="Um den Test zu starten, zuerst auf start klicken";
		}else{       
		   clearTimeout(timerID);
       clearTimeout(randtimer);
		   startPressed=false;             
		   inf.innerHTML="Schummler! Du hast zu zeitig geklickt!<br> Nochmal zurück";
       starten.style.display='block';  
       stoppen.style.display='none';    
		}               
	}
}

function randNumber(){  
   timeback=Math.floor( Math.random() * maxWait*1000 + 10); 
   console.log(timeback);
   return timeback;
}
function startit(){
	if(startPressed){
      inf.innerHTML="Es wurde bereits gestartet. Um zu stoppen, klicke auf stop";
		  return;
	}else{
      erg.innerHTML='';
      stoppen.style.width='100px';
      stoppen.style.height='30px';
      stoppen.style.top='100px';
      stoppen.style.left='10px';
      stoppen.style.fontSize='22px';
		  startPressed=true; 
		  timerID=setTimeout('startTest()', randNumber());
	}
}

  
function anzeigen(){
  tab=document.getElementById('tabelle');
  var sammeln=`
<table>
    <tr>
       <th>Name</th>
       <th>Reaktionzeit</th>
       <th>Uhrzeit</th>
       <th>Stufe</th>
  </tr>
<tbody>`;
  if(playerList.length>0){
    for(a=0;a<playerList.length;a++) {
       sammeln+=`
<tr>
    <td>${playerList[a][0]}</td>
    <td>${playerList[a][1]}</td>
    <td>${playerList[a][2]}</td>
    <td>${playerList[a][3]}</td>
</tr>`;
    }
    sammeln+=`</tbody></table>`;
  }
  tab.innerHTML=sammeln;
}  
</script>
</div>