Canvas Tron-Game resetten

[werner]

Moin Leute,

Ich habe mir hiervon ein Tron Game gebastelt, allerdings mit etwas lesbarerem Quelltext!

Funktioniert auch soweit, allerdings bekomme ich es nicht hin, das Spiel für einen Neustart zu resetten.
Dazu wollte ich einfach "von vorne" wieder rangehen, indem das Canvas Feld neu zeichne.

http://wernersbacher.de/tron.html Hier habe ich es mal hochgeladen, einfach den Quelltext schauen - viel ist es nicht.
Start Game um Spiel bereit zu machen, mit WASD dann steuern bzw. einfach anfangen.

Ich vermute es hat einfach mit dem Event für Keyabfrage zu tun, aber wo genau der Logikfehler da ist, erschließt sich mir nicht.
Danke für Antworten!

edit: Das problem besteht nun darin, dass wenn der User erneut auf Start Game drückt, er nicht nocheinmal spielen kann.

 

[epiphora]

Hey Werner,

hab ein bisschen herumprobiert und hab die Ursache gefunden. Die Erkennung, ob der Tron seinen eigene Route nochmal kreuzt, funktioniert ja, indem geprüft wird, ob im Canvas an der aktuellen Position bereits clearRect aufgerufen wurde. Die Abfrage [kw]z[x]^=1[/kw] scheint mir ein sehr komischer Hack dafür zu sein. Im Grunde steht da ja: Rechne RenderingContext am Index x XOR 1 aus und weise das Ergebnis dem RenderingContext beim Index x zu. Ich konnte im Internet keine Dokumentation zum RenderingContext finden, in der der Index-Operator überhaupt erwähnt wurde. Meiner Beobachtung nach liefert die Funktion jedenfalls immer undefined, es sei denn, dass man für das besagte Pixel vorher clearRect aufgerufen hat, dann liefert sie 1. Das Problem scheint jedenfalls zu sein, dass der Canvas nicht zurückgesetzt wird, obwohl das schwarze Rechteck neu gezeichnet wird. [kw]z[x][/kw] liefert also weiterhin undefined, sodass das Spiel als verloren gilt.

Wenn Du den Canvas manuell hart zurücksetzt, indem Du ein Neuzeichnen erzwingst ([kw]tron.width = tron.width[/kw] reicht leider nicht), scheint der RenderingContext aber tatsächlich zurückgesetzt zu werden. Ich habe dafür an den Anfang der restart-Funktion einfach folgenden Code geschrieben:

[src=javascript]var new_canvas = document.createElement("canvas");
new_canvas.width = tron.width;
new_canvas.height = tron.height;

tron.parentNode.replaceChild(new_canvas, tron);

tron = new_canvas;

z = tron.getContext("2d");[/src]

Hat funktioniert, jetzt lässt sich das Spiel neu starten. Alternativ könnte man (anstelle des hässlichen Hacks) wahrscheinlich einfach die Farbe an der Stelle ([kw]x%w[/kw], [kw]x/w[/kw]) abfragen.

Falls Du nähere Informationen dazu findest, was das mit [kw]z[x]^=1[/kw] auf sich hat, würde mich das auch sehr interessieren. Ich hab nämlich mal versucht, das einfach durch [kw]!z[x][/kw] zu ersetzen, das hat jedoch nicht funktioniert. Die Zuweisung scheint irgendwie von Bedeutung zu sein.

 

[werner]

Das mit dem z[x] konnte ich auch nirgends finden. Bin ein absoluter Canvas Anfänger.
Das mit deiner Lösung klappt, habe es aber anders gemacht wie Du es sagtest - anstatt clearRect zum "Zeichnen" der Linie habe ich Farbe weiß genommen.

Dazu dann noch getImageData. Und da kommt das nächste Problem: Es liefert komisch Rückgabewerte. Im Chrome so etwas wie [156, 156, 156, 255, 0, 0, 0, 255], wenn ich nach unten "fahre", und [0, 0, 0, 255, 0, 0, 0, 255] wenn ich nach rechts gehe. Wieso ist das Array doppelt so groß wie erwartet?

Es läuft zwar jetzt im Chrome, musste aber die Abfrage auf (d.data[0] == 0 || d.data[4] == 0) machen, um zu checken, ob die Koordinate schwarz ist.
Im Firefox geht das ganze deshalb nicht, weil da das Array nicht so lang ist. Aber mir beim "runterfahren" nicht [0,0,0,255] gibt. Das verstehe ich einfach nicht.

Hab das jetzt schon so gelöst. Die Linie war 2 Pixel breit, deshalb hat es sich quasi selbst überprüft.

Jetzt aber noch eine wichtige Frage: Wenn ich während des Spielens auf Reset klicke, dann läuft mein Tron von alleine. Zeichnet dann uU auch schräge Linien. Ich hab kein Schimmer warum, ich probiere erstmal weiter herum


Danke dir schonmal für die Hilfe.

 

[theSplit]

Hi,

warum der Player immer weiterläuft - weil "var E = undefinied" deklariert aber nicht nichts ist. Wenn du die Deklaration herausnimmst, funktioniert auch der HardReset.
Das "e.which" würde ich ganz rausnehmen, da du einen KeyPressDown Event abfragst, der oft nur "undefinied" ist und gar nichts mit ".which" hervorbringen kann und einen Fehler liefert.

Die Richtung könntest du so mit etwas wie "KeyPress(e) { e = event.keyCode; }" schreiben und dann die Zeichenroutine weiter so ausführen lassen, bis ein neuer keyPress/keyPressed Event einen anderen Tastaturcode auf "e" belegt, also weiter so zeichnen mit { if (e === keyCodeXX) { drawAtX } else if (e ===....".

 

[werner]

Danke für deine Antwort - hatte sogar selbst die Lösung gefunden.

Das fertige Ergebnis habe ich auch aktualisiert, nochmal hier zu sehen http://wernersbacher.de/tron.html

Danke an euch beide.

 

[theSplit]

Sieht doch gut aus, schreib nochmal das mit "e = event" zu "key = event.which" um, dann hast du dir einen kleinen Umweg erspart.
Ich mag den Death Screen, der ist wirklich belohnend, da will man gleich nochmal ran..

 

[werner]

Gut, das versuche ich damit zu erreichen

 

[n87]

Bei mir bleibt's komplett schwarz. :/

 

[gelöschter Benutzer]

Du musst WASD drücken.

 

[n87]

Danke dir. Habe noch ein Problem gefunden.
Ich habe bei Firefox eingestellt, dass dieser automatisch Suchen soll, sollte ich ohne Tastenfeld etwas eintippen.

Drücke ich jetzt W, beginnt die Linie zu fahren, alle weiteren gedrückten Tasten werden allerdings ins Suchfeld geschrieben.
Das Problem ist auf anderen Seiten nirgends.

 

[BurnerR]

epiphora:
Das game ist im Rahmen einer golfing challenge entstanden:

219 bytes tron
With some coworkers, we challenged each other to write the smallest possible game of tron in javascript (an exercise known as javascript golfing).

Auf der Seite heißt es:

This expression is one of the nicest parts of the code. There's a lot going on here:

The grid is never initialized, so it starts out with all the values set to undefined.

The ^= (bitwise xor assignment) operator lets us update the grid while checking for a collision:

If the value in the grid has never been visited, we set the grid value to 1 and return 1.

If the value in the grid has been visited, we return 0.


Using the ternary ?: operator, we draw a white pixel at the tron's position when the game has not ended.

Aus Seite 10 und 11 der Code Erklärung.

 

[epiphora]

Danke!

 

[werner]

Wobei ich dazu keine Dokumentation bisher finden konnte!

 

[BurnerR]

Unten auf der Seite, die du verlinkt hast, im Kapitel "code", wird in 13 Abschnitten der Code schnipselweise erläutert.

 

[werner]

Ja, das habe ich auch gelesen.

Es geht mir darum, dass ich sonst nichts dazu im Netz finden konnte. Irgendwo hat es der Dev der 219 Bytes Tron Version ja auch her