Beiträge von veganism

veganism · 14. Januar 2018

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 Programmierkentnisse 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 ner Info wie "Bereit?"

Ich hänge schon seit ner Woche dran, aber heute Nacht ist leider die Abgabe.. Ich wende mich wirklich nur an euch wegen dem Zeitdruck und den fehlenden Kenntnissen..

Ich habe mich schon versucht, aber leider komme ich nicht zum gewünschten Ergebnis.

Code

 <script>
function countDown(secs,elem) {
    var element = document.getElementById("status");
    element.innerHTML = "<a><b>Restzeit:</b> "+secs+" Sekunden<a>";

    if(secs < 1) {
        clearTimeout(timer);
        element.innerHTML = '<h2>Game Over</h2>';
        element.innerHTML += '<a href="game.html">Click hier für eine neue Runde!</a>';
    }
    secs--;
    var timer = setTimeout('countDown('+secs+',"status")',1000);
}
</script>

<script>
var clicks = 0;
    function clickME() {
        clicks += 1;
        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';
    };
</script>

<script>
    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';
    };
</script>

<div id="status"></div>
<div id="zaehler" onclick="clickME"><b>Klicks:</b></div>
<div id="clicker" onClick="clickME()"></div>

<script>countDown(10,"status");</script>


    <style>

        #clicker {
            background-color: #cc0000;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            position: absolute;
            top: 50px;
            left: 50px;
            transition: all 1s;
            }
        
    </style>

Alles anzeigen