✔ Canvas Game starten

[Eurocid]

Hallo Leute

Heute poste ich zum ersten mal im Javascript Forum.

Nur zur info, meine Kenntisse in Javascript sind sehr schlecht, hab mich eher nur ins Canvas eingelesen.

Folgendes Problem/Frage habe ich:

Ich habe einen Button der mich zu einer neuen Seite verlinkt. Wenn ich auf diesen klicke komme ich auf eine Seite wo ein Canvas Game gespielt werden soll. Ich habe es jetzt mal so geschrieben das beim aufrufen der Seite, nur der Titel des Spiels gezeigt wird.

-> GameStart();

Nun will ich das man mit einem Klick auf einen StartButton das Game starte kann.

-> GameLoop();

Stirbt man, kommt.

-> GameOver();

Soweit funktioniert das Game ja, aber nur wenn ich die Function GameLoop(); (Die ja das Canvas immer wieder neu zeichnet) von anfang an ausführe.

Jetzt bräuchte ich einen Button der mir die Function GameStart(); in GameLoop(); ändert.

---------------------

Mein Versuch war eine Start Variable zu machen die auf FALSE steht und beim klick auf den Button auf TRUE gesetzt wird. Leider baut der Button scheinbar die Seite neu auf und somit wird automatisch wieder FALSE gesetzt. (glaube ich jedenfalls )

Kann mir da einer einen kleinen Codeschnipsel zukommenlassen wie ich das Game starten kann.

Danke im voraus, Grüße Cid

 

[timestamp]

Zeig doch mal den entsprechenden Code (ggf. kürzen).

 

[Eurocid]

Guten Morgen

Naja, ich denke mir der Inhalt von den einzelnen Funktionen wird für euch nicht wichtig sein, ich versuch mal den Code gekürzt zu posten.

Hier der HTML Code, eigentlich nichts ausser dem Canvas und einem Startknopf.

<div class="canvas" align="center">
<canvas id="c" style="border: black solid 8px;" width="500" height="500"></canvas>
    <script language="javascript" type="text/javascript" src="game.js"></script>

    <button name="start" type="button" onclick="GameLoop()">Start</button>
</div>

Wenn man die Seite betritt, soll im JavaScript die Function GameStart() ausgeführt werden, die sieht ca. so aus. Zeigt eigentlich nur den Titel des Spiels.

var GameStart = function()
{
        clear();
        ctx.fillStyle = "Black";
        ctx.font = "38pt Cooper Black";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("Gamename", width / 2, height / 2 - 60);
        ctx.font = "14pt Cooper Black";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("By Bla", width / 2, height / 2 - 20);
}

Und wenn man dann auf den Knopf klickt, soll der GameLoop() starten.

var GameLoop = function()
{
    clear();           

...

Hier kommen alle möglichen funktionen rein die pro Loop gemacht werden.

...

    if(state)
    {
        gLoop = setTimeout(GameLoop, 1000 / 50);
    }
}

Stirbt der Spieler wird state auf FALSE gesetzt und die Funktion GameOver() beginnt.

Und das wars eigentlich.

Grüße Cid

 

[Eurocid]

Hi Leute hab mich heute noch ne weile gespielt und jetzt hab ich eine Lösung für mein Problem gefunden. Scheinbar hab ich es schlecht erklärt, da es wahrscheinlich eine Anfänger Frage ist.

Lösung:

Die Funktion GameStart() bei onload ausführen.

Mit dem Button GameLoop() starten.

Am Ende der GameOver() Funktion die Variable state wieder auf TRUE setzen.


Und das wars.
Grüße Cid