Game: Reaktionsmesser
Hey zusammen,
ich befasse mich gerade mit JavaScript und habe einen Reaktionsmesser programmiert inklusive Score liste, Spiel starten mit neuem Namen und erneut spielen.
Das Spiel funktioniert so weit auch. Das Problem, was ich habe, ist, dass ich in einer Funktion einen EventListener habe, der nach dem ersten Spiel mehrfach neu erzeugt wird. Dieses Problem hatte ich schonmal. Damals habe ich die Eventlistener dann außerhalb des Click Events platziert damit sie nicht mehrfach generiert werden. Jetzt ist es so, dass dieser Eventlistener jedoch nicht außerhalb platziert werden kann, weil sonst das Spiel nicht mehr funktioniert.
Es geht um den Eventlistener in dem die Scores in die Arrays eingefügt werden und ausgegeben werden. Im Anhang ist ein Bild der die Scoresliste nach dem 2ten Spieldurchlauf zeigt.
Ich habe schon echt viel getestet und weiß nicht weiter...
Habt ihr Tipps? Ratschläge?
Der hier verwendete Code
<html lang="de">
<head>
<style>
main{
height:150px;
}
#stop{
width:100px;
height:30px;
font-size:22px;
position:absolute;
top:100px;
}
.line{
display:flex;
}
table{
width:80vw;
margin:0 auto;
border:1px solid black;
}
th,td{
border:1px solid black;
width:32%;
}
</style>
</head>
<body>
<main>
<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>
</main>
<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;
}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>
</body>
</html>