Jitter Click Game programmieren
Hallo ihr Lieben,
ich habe Jahre lang html-seminar.de sehr erfolgreich verwendet und bin wirklich sehr dankbar, für die Inhalte die hier geteilt werden. Jetzt leider gibt es ein Problem, mit dem ich nicht weiter komme, weil meine Programmierkenntnisse nicht ausreichen.
Ziel der ganzen Sache soll ein Spiel sein, das eigentlich ganz simple zu sein scheint, ich aber wirklich dran verzweifle.
Zum Spiel:
Ein kleiner roter Kreis, der auf der Seite seine Position wechselt, wenn man diesen klickt. Soll der Timer maximal 10SEC sein und in dieser Zeit sollen die Klicks auf den Kreis gezählt werden. Nachdem die Zeit abgelaufen ist, soll eine Art Alert auftauchen, auf dem der Highscore zu sehen ist und der Spieler die Möglichkeit hat von neu zu starten. Bevor das spielt, anfängt, soll noch ein Alert auftauchen mit einer Information wie "Bereit?"
Ich hänge schon seit einer Woche dran, aber heute Nacht ist leider die Abgabe.. Ich wende mich wirklich nur an euch wegen des Zeitdruckes und den fehlenden Kenntnissen..
Ich habe mich schon versucht, aber leider komme ich nicht zum gewünschten Ergebnis.
Der hier verwendete Code
<style>
#clicker {
background-color: #cc0000;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
position: absolute;
top: 50px;
left: 50px;
transition: all 1s;
}
</style>
<div id="status"></div>
<div id="zaehler" ><b>Klicks:</b></div>
<div id="clicker" ></div>
<button id="start">
start
</button>
<script>
function los(){
alert('das spiel beginnt')
countDown(10);
clicks=0;
}
start.onclick=los
function countDown(secs) {
var element = document.getElementById("status");
element.innerHTML = "<a><b>Restzeit:</b> "+secs+" Sekunden<a>";
if(secs <=0) {
clearTimeout(timer);
element.innerHTML = '<h2>Game Over</h2>';
alert('deine clicks wahren'+clicks+'')
}else if(secs>=1){
function los(){
clicks++;
document.getElementById("zaehler").innerHTML = "<b>Klicks:</b>" + clicks;
var object = document.getElementById('clicker');
object.onclick=function(){
var x = Math.floor(Math.random()*450);
var y = Math.floor(Math.random()*450);
object.style.top = x + 'px';
object.style.left = y + 'px';
};
}
document.getElementById('clicker').onclick=los
secs--;
var timer = setTimeout(function(){
countDown(secs)},1000);
}
}
</script>