{"id":170,"date":"2015-12-20T18:26:48","date_gmt":"2015-12-20T18:26:48","guid":{"rendered":"http:\/\/techblog.auchmonoabspielbar.de\/?p=170"},"modified":"2015-12-20T18:51:58","modified_gmt":"2015-12-20T18:51:58","slug":"ein-kleines-javascript-spielprogramm","status":"publish","type":"post","link":"http:\/\/techblog.auchmonoabspielbar.de\/?p=170","title":{"rendered":"Ein kleines JavaScript Spielprogramm"},"content":{"rendered":"<p>In der letzten Woche habe ich durch Zufall ein JavaScript Spielprogramm gefunden. Die Spielidee ist einfach: es gibt ein Array von verschieden farbigen Kacheln. Der Anwender kann diese paarweise ausw\u00e4hlen &#8211; was dazu f\u00fchrt, dass die beiden Kacheln vertauscht werden. Dabei k\u00f6nnen aber nur direkt benachbarte Kacheln getauscht werden. Wenn es mehr als 3 zusammenh\u00e4ngende gleichfarbige Kacheln in einer Zeile oder Spalte gibt, war der Spielzug g\u00fcltig und es werden einem Punkte daf\u00fcr gut geschrieben.<\/p>\n<p>Das Original war mit einer recht kurzen Zeitschranke versehen. Ich wollte aber wissen, ob das Spiel zwingend irgendwann zum Ende kommt, weil es keine weiteren Kombinationen mehr gibt, die durch einen einfachen Austausch zu erreichen w\u00e4ren. Mein erster Versuch dazu war, dass ich im Browser versucht habe, den Timer stillzulegen. Das Programm hat sich aber gegen Ver\u00e4nderungen gewehrt, deshalb habe ich mich entschlossen, es gleich nachzuprogrammieren.<\/p>\n<p>Meine Version hat keine Zeitbeschr\u00e4nkung und zudem auch eine Hilfefunktion. Wenn man an einem Punkt nicht weiter wei\u00df, kann man sich \u00fcber eine Tipp Funktion eine M\u00f6glichkeit markieren lassen &#8211; falls es noch eine gibt. Ich habe noch nicht beobachtet, dass die Tipp-Funktion eine M\u00f6glichkeit \u00fcbersehen hat. Schon nach kurzer Zeit hat sich gezeigt, dass es im Allgemeinen ein Ende gibt. Manchmal schon nach 200 Spielz\u00fcgen. Ich habe aber auch schon 1500 Spielz\u00fcge \u00fcberstanden, ohne dass ein Ende absehbar war. Ich gehe aber davon aus, dass sich jedes Spiel irgendwann in einer Situation befindet, in dem es keine weiteren g\u00fcltigen Spielz\u00fcge mehr gibt.<\/p>\n<p>Das Spiel ist komplett in html \/ CSS \/ JavaScript programmiert. Es gibt noch nicht mal eine Image Datei. Es wird auch kein Framework, wie z.B. JQuery, verwendet. Ich wollte auch mal ausprobieren, wie gut man zu Fu\u00df mit Animationen zurecht kommt. Das eine oder andere k\u00f6nnte man mit CSS Animationen noch besser machen. F\u00fcr mich war der aktuelle Stand aber gut genug.<\/p>\n<p>Die Animationen, wie z.B. das Verschieben der Kacheln sowie ein- und ausblenden des Hilfe-Dialogs werden \u00fcber Timer-Callback Funktionen durchgef\u00fchrt. Das Skript ist relativ kurz und hat deshalb nur drei Klassen: das Spiel-Objekt, das Gitternetz im Spiel und ein Kachel-Objekt. Insgesamt etwa 100 Zeilen CSS f\u00fcr die Formatierung und 600 Zeilen JavaScript f\u00fcr die Spielausf\u00fchrung.<\/p>\n<p><a href=\"http:\/\/mmth.de\/mmth\/games\/thmflip.html\" target=\"_new\"><strong>THM-Flip: hier geht&#8217;s zum Spiel<\/strong><\/a><\/p>\n<p><a href=\"http:\/\/techblog.auchmonoabspielbar.de\/wp-content\/uploads\/2015\/12\/ThmFlip.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/techblog.auchmonoabspielbar.de\/wp-content\/uploads\/2015\/12\/ThmFlip.png\" alt=\"ThmFlip\" width=\"646\" height=\"649\" class=\"alignleft size-full wp-image-171\" srcset=\"http:\/\/techblog.auchmonoabspielbar.de\/wp-content\/uploads\/2015\/12\/ThmFlip.png 646w, http:\/\/techblog.auchmonoabspielbar.de\/wp-content\/uploads\/2015\/12\/ThmFlip-150x150.png 150w, http:\/\/techblog.auchmonoabspielbar.de\/wp-content\/uploads\/2015\/12\/ThmFlip-300x300.png 300w, http:\/\/techblog.auchmonoabspielbar.de\/wp-content\/uploads\/2015\/12\/ThmFlip-624x627.png 624w\" sizes=\"auto, (max-width: 646px) 100vw, 646px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In der letzten Woche habe ich durch Zufall ein JavaScript Spielprogramm gefunden. Die Spielidee ist einfach: es gibt ein Array von verschieden farbigen Kacheln. Der Anwender kann diese paarweise ausw\u00e4hlen &#8211; was dazu f\u00fchrt, dass die beiden Kacheln vertauscht werden. Dabei k\u00f6nnen aber nur direkt benachbarte Kacheln getauscht werden. Wenn es mehr als 3 zusammenh\u00e4ngende [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-170","post","type-post","status-publish","format-standard","hentry","category-software"],"_links":{"self":[{"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/posts\/170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=170"}],"version-history":[{"count":4,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/posts\/170\/revisions"}],"predecessor-version":[{"id":175,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=\/wp\/v2\/posts\/170\/revisions\/175"}],"wp:attachment":[{"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=170"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/techblog.auchmonoabspielbar.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}