HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spiel</title>
<style>
#spielbereich{
display: none;
}
#spielkreis{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
border: 1px solid black;
position: absolute;
top: 300px;
left: 350px;
transition: all 1s ease-in;
}
#spielkreis:hover{
cursor: pointer;
}
</style>
<script>
window.onload = function(){
var spielEnde = document.getElementById("spielende");
spielEnde.style.display = "none";
var startButton = document.getElementById("startGame");
startButton.addEventListener("click", start);
function start(){
alert("Spiel beginnt!");
startGame(10);
clicks = 0;
document.getElementById("score").innerHTML = 0;
document.getElementById("endscore").innerHTML = 0;
}
function startGame(seconds){
var spielbereich = document.getElementById("spielbereich");
var startButton = document.getElementById("startGame");
var spielEnde = document.getElementById("spielende");
var circle = document.getElementById('spielkreis');
var time = seconds;
if(time > 0){
startButton.style.display = "none";
spielEnde.style.display = "none";
spielbereich.style.display = "block";
circle.onclick=add;
function add(){
clicks += 1;
document.getElementById("score").innerHTML = clicks;
var kreis = document.getElementById('spielkreis');
var x = Math.floor(Math.random() * 300);
var y = Math.floor(Math.random() * 300);
kreis.style.top = x + "px";
kreis.style.left = y + "px";
}
time = seconds -= 1;
document.getElementById("time").innerHTML = time;
var countdown = setTimeout(
function(){
startGame(seconds)
}
,1000
);
} else{
startButton.style.display = "block";
spielEnde.style.display = "block";
spielbereich.style.display = "none";
document.getElementById("endscore").innerHTML = clicks;
clearTimeout(countdown);
}
}
}
</script>
</head>
<body>
<button id="startGame">Game starten</button>
<section id="spielbereich">
<div id="spielkreis"></div>
<div id="spielinfos">
<p>Time: <span id="time"></span></p>
<p>Score: <span id="score"></span></p>
</div>
</section>
<section id="spielende">
<p>Ihre Punktzahl: <span id="endscore"></span></p>
</section>
</body>
</html>sogeht es .. aber frag mich nicht warum der eventlistener solche fehler macht ,das weiss ich nicht vieleichtkann das wer anders erklären.
du hast aber auch functions namenids die gleichennamen haben . ist auch nicjt gerade praktisch
