Felix Riesterer: Browsergame rein mit HTML & CSS

Liebe Mitlesende,

bin gerade am Nachschauen von Vorträgen auf dem 39C3. Dabei ist mir dieser Talk aufgefallen, der gut zu unseren Themen passt: CSS Clicker Training: Making games in a "styling" language

Was man nicht alles mit <details> anstellen kann…

Liebe Grüße

Felix Riesterer

  1. Guten Morgen,

    A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀

    https://codepen.io/t_afif/full/JoKYwXO

    A Chrome-only experimentation using modern CSS.

    Herzliche Grüße
    Matthias Scharwies

    1. @@Matthias Scharwies

      A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀

      https://codepen.io/t_afif/full/JoKYwXO

      A Chrome-only experimentation using modern CSS.

      Ich hasse diese Lügen. Es gibt andere Chromium-Browser als Googles Spyware Chrome: Brave, Opera, Microsofts Spyware Edge, … Und in denen funktioniert das genauso, nichts mit „Chrome-only“.

      🖖 Live long and prosper

      --
      “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
      — Bruce Springsteen, Manchester 2025-05-14
    2. Lieber Matthias,

      A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀

      https://codepen.io/t_afif/full/JoKYwXO

      das ist ein vollmundiges Versprechen, das nicht eingelöst wird. Es ist eben kein Game, sondern nur eine Animation. Ja, man kann den Mario steuern, aber es gibt kein erreichbares Ziel. Also kein Game.

      A Chrome-only experimentation using modern CSS.

      Also Software Discrimination? SCNR

      Liebe Grüße

      Felix Riesterer

      1. Lieber Felix,

        diese ganzen „nur mit CSS“-Sachen hatten mich 2oo9 begeistert – für die Englisch-Qizze hatte ich z.B. Spiegeleier "sunny-sideup" mit border-radiuserstellt.
        (Und immer Angst vor JS gehabt, weil Dein PG-CMS das aus den Inhaltsseiten rausgefiltert hatte.)


        Mir wäre wichtig zu zeigen, wie man wenige Zeilen JS so einsetzt, dass man eben keine CSS-Hacks benötigt.

        Allerdings sehe ich auch, dass heute mit Scratch und Python eingestiegen wird und Webseiten mit HTML uncool sind.[1]

        Herzliche Grüße
        Matthias Scharwies


        1. Auf dem39C3 gab es die Webseite zum #diday mit lauter divs ohne Überschriften-Auszeichnung, worüber sich Casey Kreer aufgeregt hatte.
          Eine weitere Webseite mit Protokollen hatte eine feste Schriftgröße von 14px ohne Möglichkeit zum Skalieren. ↩︎

  2. Hallo,

    sind diese Spielereien technisch irgendwie sinnvoll? Das Argument, dass man z.B. auf Javascript verzichtet, pulverisiert sich doch irgendwie selber, wenn das CSS selbst einer Scriptsprache nahekommt.

    Ähnlich übrigens, aus meiner Sicht, als HTML 5 herauskam - natürlich konnte man damit auf gewisse Plugins verzichten, weil ähnliche Möglichkeiten zur Animation etc. bereits integriert waren. Die spannendere Frage, ob diese Mittel sinvoll sind und einen Mehrwert z.B. in punkto Informationsvermittlung darstellen, wurde dadurch einfach elegant ausgeklammert.

    Gruß Peter

    1. Guten Morgen,

      sind diese Spielereien technisch irgendwie sinnvoll? Das Argument, dass man z.B. auf Javascript verzichtet, pulverisiert sich doch irgendwie selber, wenn das CSS selbst einer Scriptsprache nahekommt.

      Ich hatte in einem Zweig gestern das geantwortet:

      diese ganzen „nur mit CSS“-Sachen hatten mich 2oo9 begeistert – ...

      Mir wäre wichtig zu zeigen, wie man wenige Zeilen JS so einsetzt, dass man eben keine CSS-Hacks benötigt.

      Genau richtig erkannt: Es sind Spielereien!

      Ähnlich übrigens, aus meiner Sicht, als HTML 5 herauskam - natürlich konnte man damit auf gewisse Plugins verzichten, weil ähnliche Möglichkeiten zur Animation etc. bereits integriert waren. Die spannendere Frage, ob diese Mittel sinvoll sind und einen Mehrwert z.B. in punkto Informationsvermittlung darstellen, wurde dadurch einfach elegant ausgeklammert.

      Ja! Deshalb ist unsere Baustelle für den Januar der Bereich Animation.

      Animationen sollen Änderung von Zuständen sichtbar machen, nicht irgendwelche Gimmicks und Show-Effekte zeigen. Da hirnen wir noch, wie wir unsere Tutorials überarbeiten.

      Herzliche Grüße
      Matthias Scharwies