Wertix: Tetris

HI Leute,
Ich brauche eure Hilfe!
Ich muss für die Schule Tetris mit Javascript programmieren und ich weis nicht wie ich die Steine per Knopfdruck drehen kann. Ich zerbreche mir schon etwas länger den Kopf dadran und weis einfach nicht weiter. Bitte helft mir mit ein paar Befehlen oder anderen Tipps, danke schonmal im vorraus,
                                                                    Wertix

  1. Ich muss für die Schule Tetris mit Javascript programmieren und ich weis nicht wie ich die Steine per Knopfdruck drehen kann. Ich zerbreche mir schon etwas länger den Kopf dadran und weis einfach nicht weiter. Bitte helft mir mit ein paar Befehlen oder anderen Tipps, danke schonmal im vorraus,
                                                                        Wertix

    http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onkeydown@title=onkeydown wäre ein Anfang.

    Tendentiell würde ich dir zur Umsetzung aber ein Framework empfehlen - jQuery oder vergleichbares.

  2. Lieber Wertix,

    Ich muss für die Schule Tetris mit Javascript programmieren

    warum?

    und ich weis nicht wie ich die Steine per Knopfdruck drehen kann.

    Hat man Dir keinen Unterricht angedeihen lassen, in dem die nötigen Voraussetzungen besprochen worden wären?

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
  3. Hallo Wertix,

    ... die Steine per Knopfdruck drehen kann. ...

    woran hapert es denn? Am Knopfdruck? Da helfen die onkey...-Events. Oder klappt das Drehen nicht? Das geht auch mit Javascript nicht. Du benötigst für jede Richtung ein neues Bild. Bilder per Javascript austauschen ist dann wieder einfach.

    Gruß, Jürgen

    1. Hi Juergen.

      Oder klappt das Drehen nicht? Das geht auch mit Javascript nicht. Du benötigst für jede Richtung ein neues Bild. Bilder per Javascript austauschen ist dann wieder einfach.

      Bilder? Wuerde ich dringend von abraten. Nicht nur wegen des Datenaufkommens fuer die Bilder, sondern weil das Gefuzzel mit der absoluten Positionierung der Bilde eine Katastrophe waere, denke ich.

      Mein Vorschlag (und der einzig praktikable, denke ich): Das Spielfeld ist ne Tabelle, und die Steine belegen dann jeweils ein paar Tabellenzellen. Dann ist alles mit Javascript problemlos moeglich.

      Jetzt wart noch mal gerade fuenf Minuten, bis hier einer schreibt, dass das nicht gehe, weil Tetris-Steinchen ja keine tabellarischen Daten seien, und dann such Dir die beste Loesung aus ;-)

      Viele Gruesse,
      der Bademeister

      1. Hallo Bademeister,

        Bilder? Wuerde ich dringend von abraten.

        warum? Jedes Motiv wird in den zwei bzw. vier Richtungen einmal vorgeladen.

        Nicht nur wegen des Datenaufkommens fuer die Bilder, sondern weil das Gefuzzel mit der absoluten Positionierung der Bilde eine Katastrophe waere, denke ich.

        Warum? Left und top können problemlos gesetzt werden, die ganzen Schneeflockenscripte funktionieren z.B. so. Hast du schon mal probiert, Bilder zu bewegen? Bei mir hat es auf jeden Fall geklappt.

        Mein Vorschlag (und der einzig praktikable, denke ich): Das Spielfeld ist ne Tabelle, und die Steine belegen dann jeweils ein paar Tabellenzellen. Dann ist alles mit Javascript problemlos moeglich.

        Geht bestimmt auch, ist aber nicht der "der einzig praktikable" Weg. Und was schneller geht, top und left setzen oder bis zu 8 Tabellenfelder umfärben, muss ein Test zeigen.

        Gruß, Jürgen

        1. Hi,

          Und was schneller geht, top und left setzen oder bis zu 8 Tabellenfelder umfärben, muss ein Test zeigen.

          Der sollte ja erst mal (deutlich) zeigen, wer bei der Gegenüberstellung der Auslieferung von zig kleinen Bildchen von verschieden geformten Klötzchen in verschiedenen Farben in verschiedenen Drehrichtungen und dem clientseitigen Einfärben von Tabellenzellen per background-color schon verliert ...

          MfG ChrisB

          --
          Light travels faster than sound - that's why most people appear bright until you hear them speak.
          1. Hallo ChrisB,

            ich weiß nicht, wie du auf zig Bilder kommst. Wenn ich mich recht erinnere, gibt es sechs Formen und vier Richtungen, bei Symmetrien weniger, also weniger als 24 Bilder. Wenn es knatsch-bunt sein soll, sind es vieleicht 100. Die werden einmal vorgeladen und dann nur noch nach Bedarf geklont und geschoben. Ist das wirklich so aufwendig? Vor einiger Zeit war doch mal jemand hier im Forum, der Polygone nachgeflogen ist. Dabei hat sich das Flugzeug immer in die Flugrichtung gedreht. Er hatte, glaube ich, so ca. 50 Bilder für die Richtungen. Das ganze lief recht flüssig.

            Ich gebe allerdings zu, das der IE (6?) hin und wieder so konfiguriert ist, dass er bei jedem Klonen das Bild neu von Server anfordert.

            Gruß, Jürgen

            1. ich weiß nicht, wie du auf zig Bilder kommst. Wenn ich mich recht erinnere, gibt es sechs Formen und vier Richtungen, bei Symmetrien weniger, also weniger als 24 Bilder.

              Dann warst Du aber ein äußerst schlechter Tetris-Spieler. Die meisten Leute schaffen es irgendwann, eine Zeile vollzukriegen, die dann verschwindet, und dann verschwinden manche Klötzchen von einigen Steinen und die anderen bleiben stehen. ;-)

              Man braucht also viel (VIEL!) mehr Bildchen oder ziemlich unhandliche Tricks, um die Bildchen teilweise zu verstecken. Oder eben nur Bildchen für die einzelnen Klötzchen. Dann kann man sie auch gleich weglassen und sich den Quatsch mit dem dauernden Erzeugen und Vernichten von Bild-Elementen sparen. Ich hab im Grunde nicht viel Ahnung von JavaScript, aber meine Vermutung ist, dass genau das die Bilder-Lösung um ein Vielfaches langsamer macht als die Tabellen-Lösung.

              Viele Grüße,
              der Bademeister

              1. Hallo Bademeister,

                Dann warst Du aber ein äußerst schlechter Tetris-Spieler. Die meisten Leute schaffen es irgendwann, eine Zeile vollzukriegen, die dann verschwindet, und dann verschwinden manche Klötzchen von einigen Steinen und die anderen bleiben stehen. ;-)

                jetzt, wenn ich es lese, kann ich mich auch wieder erinnern. Ich glaube, da wird die Bilderlösung doch recht aufwändig.

                Gruß, Jürgen

              2. @@Bademeister:

                nuqneH

                Dann warst Du aber ein äußerst schlechter Tetris-Spieler. Die meisten Leute schaffen es irgendwann, eine Zeile vollzukriegen, die dann verschwindet, und dann verschwinden manche Klötzchen von einigen Steinen und die anderen bleiben stehen. ;-)

                Und wo siehst du das Problem?

                Fürs Spielfeld Breite und Höhe angeben, dazu 'position: relative' (damit die Bilder* darin absolut positioniert werden können) und 'overflow: hidden'.

                Qapla'

                * lies: Elemente mit Hintergrundbild

                --
                Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                1. Hi Gunnar.

                  Und wo siehst du das Problem?

                  Fürs Spielfeld Breite und Höhe angeben, dazu 'position: relative' (damit die Bilder* darin absolut positioniert werden können) und 'overflow: hidden'.

                  Hier:

                  _
                   _____ _ _____ _| |
                  |  ___| |  ___| | |_    <-- Zeile 3
                  |_|_____|_|_____|_ _|   <-- Zeile 2
                  |_______| |_______|     <-- Zeile 1

                  Zeile 2 wird nun gelöscht und Zeile 3 fällt runter. Wenn man nur die Bildchen runtersetzt, wird ein Klötzchen in dem einen freien Feld von Zeile 1 auftauchen, das gar nicht mehr existiert.

                  Viele Grüße,
                  der Bademeister

            2. Hi,

              ich weiß nicht, wie du auf zig Bilder kommst. Wenn ich mich recht erinnere, gibt es sechs Formen und vier Richtungen, bei Symmetrien weniger, also weniger als 24 Bilder. Wenn es knatsch-bunt sein soll, sind es vieleicht 100. Die werden einmal vorgeladen und dann nur noch nach Bedarf geklont und geschoben. Ist das wirklich so aufwendig?

              Das ist 100 x 1 zusätzlicher HTTP-Request.

              MfG ChrisB

              --
              Light travels faster than sound - that's why most people appear bright until you hear them speak.
              1. Ist das wirklich so aufwendig?

                Das ist 100 x 1 zusätzlicher HTTP-Request.

                Ich verstehe nicht, was ihr das so kompliziert herumhantiert - warum keine CSS-Sprites - ein einziges Bild in dem alle Formen drin sin).

                Oder anders: jeden Klotz aus 4 div- oder span-Elementen zusammensetzen (per position), mit einer Hintergrundfarbe ausstatten und mit einer alphatransparenten Grafik (einer art Bumpmap) überlagern, damit die Dinger Struktur bekommen.

                Für jede Form eine komplette Grafik zu verwenden ist ohnehin unklug, spätestens wenn eine Reihe entfernt wird, werden die Klötze ja aufgebrochen.

                1. Hi,

                  Ich verstehe nicht, was ihr das so kompliziert herumhantiert - warum keine CSS-Sprites - ein einziges Bild in dem alle Formen drin sin).

                  Oder anders: jeden Klotz aus 4 div- oder span-Elementen zusammensetzen (per position), mit einer Hintergrundfarbe ausstatten und mit einer alphatransparenten Grafik (einer art Bumpmap) überlagern, damit die Dinger Struktur bekommen.

                  Immer noch alles komplizierter, als einfach Tabellenzellen einzufärben.

                  Für jede Form eine komplette Grafik zu verwenden ist ohnehin unklug, spätestens wenn eine Reihe entfernt wird, werden die Klötze ja aufgebrochen.

                  Quatsch, overflow:hidden existiert :-)

                  MfG ChrisB

                  --
                  Light travels faster than sound - that's why most people appear bright until you hear them speak.
        2. @@JürgenB:

          nuqneH

          Bilder? Wuerde ich dringend von abraten.

          warum? Jedes Motiv wird in den zwei bzw. vier Richtungen einmal vorgeladen.

          Warum? Alles ist in einer Grafik: CSS-Sprites.

          Qapla'

          --
          Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
          1. Hallo Gunnar,

            Warum? Alles ist in einer Grafik: CSS-Sprites.

            da habe ich auch dran gedacht, wollte Wertix aber nicht noch mehr verwirren. Inzwischen glaube ich (weiß es aber nicht), das die "Klötzchen-Variante" - siehe Beitrag von Micha - besser funktioniert.

            Gruß, Jürgen

  4. Hallo Wertix,

    ich nutze eine einfache Tabelle als Spielfeld. Die Spielsteine habe ich in einem booleschen Array abgelegt. Für doe Rotation nutze ich eine Drehmatrix, wobei nur Drehungen um 90° vorkommen und sich diese somit stark vereinfacht ;-)

    Den Rest kannst Du Dir ja selbst ansehen im Tetris-Spiel.

    Mit freundlichem Gruß
    Micha

    --
    kostenlose JavaScript Spiele: Snake, MineSweeper oder Sudoku
  5. Der Wertix kommt nimmer.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)