request_url_withoutHTTP=,canonical_url_withHTTP=,canonical_url_withoutHTTP=,request_url_withoutHTTP_realspaces=. Games (Seite 1 von 1) « Tags « Blog « Bernhard Häussner
Bernhard Häussner
Tags: Artikel mit dem Tag «Games» durchstöbern

Ein schönes Online-Spiel names adinfinitvm

29.06.2016, 12:44

Ich habe ein Online-Spiel programmiert: adinfinitvm. Es ist ein minimalistisches Puzzle-Spiel, mit unendlich vielen Levels. Es basiert auf dem Spiel ∞ loop, das als App für iOS und Android umgesetzt ist, welches wiederum auf dem Flash-Spiel „Loops of Zen“ von Dr. Arend Hintze basiert.

Ich bin anscheinend reichlich uninformiert, was die neuesten Spiele-Apps angeht: Das Loopgame wirbt mit „das beliebteste Game des Jahres 2016“ (obwohl das Jahr gerade mal zur Hälfte vorbei ist) und ich habe davon nur erfahren, da ich ein selbst-designtes T-Shirt trug mit meinem Ravello Switch Knot, welches eine Freundin an das Spiel erinnert hat.

Das T-Shirt vom Ravello Switch Knot mit dem alles begonnen hat

Das T-Shirt vom Ravello Switch Knot mit dem alles begonnen hat

Es ist schwierig aus der großen Menge der kleinen Smartphone-Spielchen herauszustechen. Bei den meisten Spielen muss man seine Geschicklichkeit unter Beweis stellen, und z.B. im Wesentlichen besonders schnell und zum richtigen Zeitpunkt klicken (Hardest Game Ever, Stack). Andere nutzen den Touchscreen (Follow the Line) oder die Neigungssensoren (Temple Run, Teeter) für neuartige Herausforderungen. Solche Spiele werden mir jedoch schnell langweilig, ab einem gewissen Zeitpunkt verbessert man sich kaum noch und alles wird sehr eintönig.

Schon etwas nachhaltig fordernder sind einige Puzzle-Spiele (Two Dots, Candy Crush Saga, Lazors). Diese werden jedoch mit der Zeit so schwer, dass man keine Level mehr schafft oder sich via In-App-Käufen Leben kaufen muss, um weiter zu kommen. Da hört der Spielspaß dann auch sehr schnell auf.

Hier ist das Loopgame eine gelungene Alternative: Die Level werden langsam schwieriger, sind aber nie unschaffbar. Die Aufmachung ist sehr minimalistisch, sodass das Spielen sehr entspannend ist. Es eignet sich perfekt um die Motorik ein bisschen auf Trab zu halten, während man Podcasts, Hörbücher oder Vlogs konsumiert.

Meine Aufmerksamkeit hat aber dies geweckt: Das Modell hinter dem Spiel ist dem des MacMahonMosaik Online Games ziemlich ähnlich, welches ich vor einiger Zeit programmiert habe. Während man beim MacMahonMosaik dreifarbige Quadrate verschieben und drehen kann, kann man im Loopgame Quadrate mit zwei „Farben“ (Pfad-Ende/freier Raum) drehen, aber nicht verschieben. Das MacMahonMosaik hat nur ein Level, welches ziemlich schwer ist. Trotzdem dachte ich, das Spiel ist schnell programmiert, wenn ich meinen alten Code vom MacMahonMosaik leicht abändere.

Als ich meinen sieben Jahre alten Code dann angesehen habe, viel mir auf, dass ich mich damals intensiv mit dem Thema OOP in Javascript beschäftigt habe. Inzwischen gibt es mit ES2015 Klassen in JavaScript. Aber ich fand mich schnell im großen Wirrwar von Javascript Transpilern, source maps, Babel und gulp, sodass ich schnell beschlossen habe, für ein so kleines Projekt lieber nicht den ganzen Konfigurationsaufwand zu betreiben. Als ich nach wachsender Codemenge dann mehrere Dateien zu einer zusammenzufügen musste (hallo cat), bin ich auf coffebar gestoßen, was ohne viel Konfiguration läuft. Und CoffeeScript hat auch Klassen, somit war die Entscheidung gefallen.

Eine weitere Besonderheit ist vielleicht der Verzicht auf jQuery und andere JS-Bibliotheken. Im Jahr 2009 war jQuery noch eine sehr nötige Bibliothek: Nach jeder neuen Version eines Browsers hat man gleich die Acid-Tests durchgeführt, die die Kompatibilität mit grundlegenden DOM-Funktionen testen. Damals war jQuery die Rettung von vielen kleinen Inkompatibilitäten und Bugs. Das war die Zeit, in der jeder Webentwickler durch das Aussprechen von „Internet Explorer 6“ einen enormen Bluthochdruck bekommen konnte. Hier war es für mich eine kleine Herausforderung all die Funktionalitäten des Mosaiks ohne jQuery zu realisieren.

Heute hat sich das Bild geändert: Die API von jQuery wird noch immer mit jeder Version eleganter, aber dank Fortschritt der Browser und Standards entstehen neue Trends weg von jQuery: Für einfache Effekte kann man heute direkt die nativen APIs ansprechen (man denke nur an document.querySelector) und für komplexe Webapplikationen gibt es umfassendere Frameworks wie Angular 2 und React, die es einfach machen, komplexe UIs aus Komponenten mit eigenem State zusammenzustellen. Das Gemüt der Webentwickler erhitzt sich heute eher an „Mobile Safari“.

Auch meine Implementierung des Loopgames, ich nenne sie „adinfinitvm“, profitierte von „neuen“ Webtechnologien: Die Graphiken für Pfade und Dreiecke lassen sich mit SVG erstellen und die Animationen werden mit CSS' transition gemacht. So begnügt sich das Spiel mit einer index.html, den Webfonts und rund einem duzend CoffeeScript-Dateien. Der interessiere Leser kann sich den Code auf GitHub ansehen.

Kommentare: keine

1245678 Mausklicks – Tendenz steigend

24.07.2014, 14:41

Vor einem knappen Jahr habe ich eine neue Maus bekommen, die Mausklicke und Scrollrad-Betätigungen mit zählt. Inzwischen haben sich schon deutlich über einer Million Klicks angesammelt.

Der Maustreiber der Roccat Savu ist sehr umfangreich und hat viele nützliche Funktionen. Zum Beispiel kann die Zeigergeschwindigkeit sehr genau eingestellt werden. Wenn jemand meinen Computer benutzt, findet er die Maus meistens viel zu schnell, aber bei zwei Monitoren muss man sich sonst viel zu weit herumbewegen. Außerdem können die Tasten zu Funktionen und Makros zugewiesen werden. Ich habe z.B. auf die beiden Daumentasten die Funktionen Fenster-Übersicht und Virtual-Desktop-Übersicht vom Better Desktop Tool gelegt, um den Überblick über alle offenen Fenster zu behalten.

Daneben gibt es auch noch ein paar Features, die eher Spielereien sind. Das Licht an der Maus konnte ich so einstellen, dass es orange pulsiert. Und es werden die Klicks gezählt, sowie die Bewegungsdistanz gemessen. Dies ist Voraussetzung für die R.A.D.-Funktion: Hin und wieder ertönt eine Frauenstimme „congratulations, you've earned a trophy“, wenn man z.B. eine gewisse Anzahl an Klicks erreicht hat.

Nun zu den Zahlen. Das hat die Maus bisher an Klicks gemessen:

Linke Maustaste704890 Klicks
Rechte Maustaste498820 Klicks
Mittlere Maustaste33000 Klicks
Daumentasten2150 Klicks
Gesamt1238880 Klicks

Und an Scroll-Schritten:

Hoch493320 Scrolls
Runter888990 Scrolls
Gesamt1382310 Scrolls

Offensichtlich wird öfter gescrollt als geklickt. Die beim Schubsen der Maus zurückgelegte Distanz liegt bei rund 4135 m, also knapp mehr als vier Kilometern, dies alles in den vergangenen rund 240 Tagen.

Daraus ergeben sich ganz erstaunliche Mittelwerte pro Tag. Ich klicke meine Maus durchschnittlich 5162 Mal pro Tag, das bedeutet alle 17 Sekunden einmal, dabei ist all die Zeit, die ich nicht am Computer verbringe mit eingerechnet! An einem Tag bewege ich meine Maus im durchschnittlich 1723 cm weit, und das auf einem Mauspad der Fläche 23x21 cm.


Eine Runde im Spiel League of Legends soll Vergleichswerte liefern.

Nun habe ich mich natürlich gefragt, wie solche Werte zustande kommen. Während bei normaler Büroarbeit wohl hauptsächlich die Tastatur zum Einsatz kommt und die Maus nicht so starkt belastet wird, könnten bei einem Computerspiel die Dinge schon anders stehen. Also habe ich ein League of Legends Match gespielt und die Werte vor und nach der ca. 40-minütigen Runde gemessen. Die Differenzen:

Linke Maustaste190 Klicks
Rechte Maustaste5400 Klicks
Mittlere Maustaste0 Klicks
Daumentasten0 Klicks
Gesamt5590 Klicks

Die Bewegungsdistanz stieg um 21 Meter an.

Man kann jetzt also die Mittelwerte in einem Spiel berechnen. Ich klickte meine Maus in den 40 Minuten 5590 Mal, das bedeutet 140 Mal pro Minute oder je 429 Millisekunden einmal. In einer Minute bewege ich meine Maus im durchschnittlich 53 cm weit.

Wenn wir nun mit diesen Werten gerüstet die Statistik ansehen, dann könnten die gesamten Mausklicks in nur 222 Spielen angesammelt werden, also nicht ganz jeden Tag eines.

Eine weitere Statistik zeigt aber, dass eher selten gespielt wurde:

Wenn ich mehr zocken würde, wäre der Anteil an Rechtsklicks wohl deutlich höher.

Ich hoffe nun also, dass meine Maus noch viele Millionen Klicks durchhält, und vielleicht denke ich daran, diesen Blogeintrag bei 10 Millionen Klicks zu aktualisieren. Wenn es so weiter geht, wie bisher, wird das am 15. März 2019 erfolgen.

Kommentare: keine

Symmetrisch Zeichnen

17.12.2009, 10:43

Neben Symmetrie in der Natur bin ich auch begeistert von den Symmetrien, die der Computer erstellen kann. Und was wäre diese Symmetrie ohne die, für den Computer typische, Interaktivität? Also habe ich (zunächst mit Processing aber dann mit) HTML5-Canvas eine kleine Javascript-Sache gebastelt, mit der man direkt im Browser symmetrisch zeichnen kann.

Irgendwie macht das Spaß und, naja, es sieht auch oft erstaunlich gut aus.

[Updated 2011-09-29] Da mir das einfache herumzeichnen schnell zu langweilig wurde, habe ich das Script immmer weiter ausgebaut. Deswegen finden sich unter dem Link nun mehrere Variationen, die es sich auszuporbieren lohnt![/Updated]

Zum Zeichenbrett

Und hier noch ein Video:


Drawing Symmetry (6)

Viel Spaß beim Malen!

Kommentare: 2 Einträge

MacMahonMosaik Online Game

09.07.2009, 18:05
Mac Mohan Mosaik

Mac Mohan Mosaik

Da ich beim Känguru-Wettbewerb 2009 mitgemacht habe, habe ich auch das MacMahonMosaik in die Hände bekommen. Es ist ein kleines Rätsel ähnlich wie Sudoku. Weil es interessant zu Modellieren ist, habe ich das MacMahonMosaik als Online-Spiel erstellt. Hier ein paar Details zu Implementierung:

Modell

Jedes Quadrat im Spiel hat 4 Kanten, die in 3 verschiedenen Farben markiert sein können. Daher lässt sich jede Anordnung als 4-Tupel einer 3-Menge auffassen. Diese 81 Tupel wiederum können den natürlichen Zahlen von 0-80 zugeordnet werden. Somit habe ich als Objekte zunächst die 24 Quadrate (die anderen fallen weg, da sie durch Drehung erreicht werden können), die jeweils eine Zahl speichern. Sie müssen sich nun z.B. drehen können. Dazu wird die Zahl in das Tupel umgerechnet und die Einträge des Tupels um eine Stelle verschoben, wobei der letzte Eintrag der erste wird. Um zu Überprüfen, ob zwei Quadrate aneinander passen, dreht man eines der beiden zweimal und schaut dann einfach ob in der gewünschten Richtung die selben Farben stehen. Dadurch sieht die Prüffunktion im Javascript sehr kurz aus:

p.checkMatch=function(other,pos){
  var mycodes=this.getColorCodes(); // Tupel aus Zahl
  var o=other.clone(); // Neues Quadrat mit selber Zahl
  var othercodes=o.rotate().rotate().getColorCodes(); // anderes Q. 2x drehen
  return (mycodes.charAt(pos)==othercodes.charAt(pos)); //prüfen
}

Zusätzlich haben die Quadrate noch ein paar Darstellungsrelevante optionale Eigenschaften und Methoden. Ist ihnen ein <Canvas>-Element im HTML-Baum delegiert, können sie ihm die passenden Event-Handler für das interaktive Drehen und Bewegen zuweisen und eine graphische Repräsentation ihrer selbst zeichnen. Und sie speichern einige Daten für drag & drop.

Doch beim Ziehen und Ablegen kommt das zweite Objekt ins Spiel: Das Feld in dem die Quadrate abgelegt werden können. Wann immer man ein Quadrat bewegt, frag dieses Quadrat beim Gitter nach, ob es sich einrasten kann. Das Gitter gäbe dann die Pixel-Koordinaten des Einrastpunkts auf dem Bildschirm und die Koordinaten innerhalb des Gitters zurück. Wird das Quadrat dann fallen gelassen, registriert es sich im Gitter.

Das Gitter hat dazu ein zweidimensionales Feld hinterlegt, in dem es Pointer zu den abgelegten Quadraten speichern kann. Wenn jetzt ein Quadrat im Raster abgelegt wird und sich registriert hat, weist es das Raster an, sich zu revalidieren - Das Gitter ruft für jedes Quadrat und je seine vier Nachbarn die Prüffunktion auf. (Da das „Passen“ symmetrisch ist, ließe sich die Komplexität des Algorithmus vielleicht noch optimieren, doch das hätte wieder mehr Code zur Folge und bei 24 Einheiten...) Da das Gitter nur Zeiger zu den Quadraten speichert, ist bei einer Drehung eines Quadrats keine weitere Registrierung nötig. Falls also ein Quadrat angeklickt wird, rotiert es sich, aktualisiert die eigene Darstellung und gibt den Revalidierungsbefehl an das Raster.

Für die Darstellung hat das Gitter auch eine recht einfache Methode, die den Feldhintergrund rötlich färbt, sollte ein Fehler vorliegen und eine Gratulation meldet, sollten alle Quadrate an einem passenden Ort sein, also das Spiel gewonnen.

Ablaufdiagramm

Hier mal ein kleiner Flowchart. Man beginne das Lesen bei den Event-Handlern: (erstellt mit U+2500-U+257F: Box Drawing)

Quadrat
├ Zahl ◁──────┐ {Umrechnung}
├ (Tupel) ◁───┘
├ Drehen() ◀────────┐◁──┐─┐▷─────┐
├ Prüfen(Quadrat) ──◆───┊─┊──────┊──┐
├ [Darstellung]     │   │ │      │  │
│  ├ Visualisieren◁─┊───┊─┘      │  │
│  └ [Handler]      │   │        │  └──┐
│     ├ Klick ──────┊───┘        │     │
│     ├ Packen  ────┊────────────┊──┐  │
│     ├ Bewegen ◀───┊───┐        │  │  │
│     └ Ablegen ────┊─────────┬▷─┤  │  │
└ Kopieren() ►──────┘   │     │  │  │  ▼ bool
                     [XY,XY]  │  │  │  │
Gitter                  │     │  │  │  │
├ Feld[X,Y]             │     │  │  │  │
├ KoordinatenBei(XY) ───┘     │  │  │  │
├ Registrieren(Quadrat)  ◀─XY─┘  │  │  │
│ └ Un-Registrieren() ◀─────XY───┊──┘  │
├ Alle Prüfen()  ►────────┐─▷────│─────┘
└ Darstellung erneuern() ─┘  ◁───┘
  └ Färben(), Gratulation()

Wie das Gitter überprüft, ob auch am Rand rote Kanten liegen? Statt weiteren Code für den Rand zu basteln, wird das Gitter mit voll-roten Quadraten ohne graphische Repräsentation außerhalb das Gitters vorbelegt. Das hat den kleinen Nebeneffekt, das auch out-of-bounds-Fehler im Prüfalgorithmus vermieden werden, da ja z.B. bei negativen Gitterkoordinaten -1 stets ein solches „virtuelles“ Quadrat liegt.

Wie man also sieht, kann man an diesem Spiel schon einige lustige Code-Spar-Methoden benutzen. Eigentlich sparen sie nicht nur Code, sondern auch Nachdenken, wenn man sie „sieht“.

Javascript Umsetzung

JS-Closures habe ich in letzter Zeit immer mehr zu schätzen gelernt. (Man muss in PHP übrigens auch nicht mehr lange darauf verzichten) Sie lassen den Programmierer Funktionen, also mehr oder weniger Code, wie ein String oder eine Zahl an andere Funktionen übergeben oder in Variablen spichern, sodass mit anonymen Funktionsobjekten als Closures in JS eigene Kontrollstrukturen definiert werden können, wie diese zweifache for-Schleife, um über Koordinaten bzw. Zweidimensionales zu loopen:

function loopXY(w,h,cb) {
  for (var x=0;x<w;x++) {
    for (var y=0;y<h;y++) {
      cb(x,y);
    }
  }
}
var m=[];
loopXY(5,7,function(x,y){
  m.push("("+x+","+y+")");
});
alert(m);

Wie man sieht stehen in Javascript in den Closures alle äußeren Variablen zur Verfügung. Das wiederholte verwenden des Namens einer äußeren Variable führt trozdem noch dazu, dass in der Closure diese lokal verwendet wird und außen der alte Wert erhalten bleibt. Ein bischen gewöhnungsbedürftig ist die Verwendung von this in JS. Im oben gezeigten Code würde z.B. in der Schleife this auf window zeigen. Das lässt sich mit der Function.call oder der Function.apply-Funktion kompensieren, wie in diesen Code-Schnippseln für Event-Handler.

Für die Erstellung von Objekten (außer reinen Datenspeichern, die mit {} einfach erstellt werden können) verwende ich folgende Grundstruktur:

function Square(id) { // constructor
	this.id=id; // Eigenschaften initialisieren
}
(function(){
  var p=Square.prototype; // shortcut zum Prototype
  p.setId=function(id) { // einfacher Setter
    this.id=id;
    return this; // macht Setter chainable
  };
  var privat; // kann nur von den Objektmethoden gesehen werden
  function privatauch() {} // dito
})();
var s=new Square (3);

Allerdings bin ich mir nicht sicher, ob das wirklich besser ist, als alles in Konstruktoren zu packen.

Der Code des Onlinegames ist vielleicht nicht ganz so interessant zu lesen, wie es war ihn zu erstellen, aber ich denke, hinein schauen lohnt sich. Ich bin natürlich immer interessiert an weiteren Javascript-Techniken und Tipps zur Code-Gestaltung.

Kommentare: keine
[ Seite 1 ]
 
Χρόνογραφ
© 2008-2017 by Bernhard Häussner - Impressum - Login
Kurz-Link zur Homepage: http://1.co.de/