Get best of the week

Linien 9753: Murmeltier-Tag

            Wenn Sie lange Zeit WĂŒrfel spielen ,
            verwandeln sie sich in BĂ€lle

Wenn Sie sich den Namen des Spiels Lines 9753 ansehen, denken Sie vielleicht, dass es sich bei dieser Geschichte um den 9753. Klon des berĂŒhmten Spiels Color Lines handelt, in dem Sie 5 BĂ€lle in einer Reihe derselben Farbe herstellen mĂŒssen. Ja, es ist ein Klon. Was könnte sonst noch neu sein? Ich werde meine Ideen und einige Feinheiten der Implementierung in HTML + CSS + JavaScript teilen. Ich werde Ihnen sagen, was die Zahlen 9753 bedeuten. Ich werde einen Weg vorschlagen, um eine andere Zahlenkombination zu finden und zu sehen, wie sich das Spiel Ă€ndert. Es wird interessanter oder langweiliger - Sie entscheiden. Haben Sie erraten, was 9753 bedeutet? Dann bitte unter Katze.

Vielzahl von Spieloptionen


Haben Sie sich jemals gefragt, woher im ursprĂŒnglichen Spiel die Felddimension 9x9 stammt? Es ist erstaunlich, wie gut nicht nur die Dimension des Spiels ausgewĂ€hlt wird, sondern auch andere Parameter. Daher ist es interessant zu spielen: Die Anzahl der Farben betrĂ€gt 7, die Anzahl der BĂ€lle in einer Reihe betrĂ€gt 5 und die Anzahl der BĂ€lle pro Spielzug betrĂ€gt 3. Diese 4 Parameter werden im Namen des Spiels angegeben - Zeilen 9753 Es sind diese vier, die im Großen und Ganzen die KomplexitĂ€t des Spiels bestimmen, die höchstwahrscheinlich nicht fĂŒr jeden geeignet ist.


Vielleicht mag jemand ein anderes Set. Zum Beispiel:

  • 3333 - Einsamkeit wie Solitaire, Sie können keine Angst haben, in eine Sackgasse zu geraten und zu versuchen, so viele BĂ€lle wie möglich gleichzeitig zu kollabieren (5 ist immer noch einfach, 6 ist schwieriger, 7 und 8 sind fast unrealistisch), geeignet fĂŒr den Fall, dass Sie ĂŒberhaupt nicht denken möchten;
  • 5643 - Auf einem 5x5-Board sind die Zellen nicht so klein wie 9x9, daher ist es praktisch, am Telefon zu spielen, aber der Schwierigkeitsgrad scheint etwas höher zu sein als bei 9753.
  • 5543 ist eine etwas einfachere Option als 5643, da die Anzahl der verschiedenen Farben geringer ist, was bedeutet, dass es wahrscheinlicher ist, dass eine Reihe von Kugeln derselben Farbe hergestellt wird.
  • 4443 - vergleichbar in der KomplexitĂ€t mit 5643, aber die BĂ€lle sind noch grĂ¶ĂŸer - nur 4 BĂ€lle auf der kurzen Seite des Bildschirms.



Ich denke, jeder wird geeignete Spieloptionen fĂŒr sich finden. Trennen Sie sich nicht vom Netzwerk und zusammen sehen wir die beliebtesten Optionen in der Tabelle auf der Website.

ZurĂŒckgehen


Es ist erlaubt, Bewegungen zurĂŒck zu machen. Es war einmal, als die BĂ€ume hoch waren und ich noch Student war, musste ich Color Lines spielen. Das Spiel hat mir sehr gut gefallen. Einmal, nachdem ich einen halben Tag verloren und mehrere tausend Punkte erzielt hatte, kam ich zum Stillstand. Die Erkenntnis kam, dass es ein Unfall war, dass die BĂ€lle erfolgreich herausfielen und dass ich in naher Zukunft nicht so weit gehen konnte. Um meinen eigenen Rekord zu brechen, muss ich zehnmal mehr Zeit töten, und wenn ich GlĂŒck habe. Seitdem habe ich dieses Spiel schon lange nicht mehr gespielt. Das GefĂŒhl der universellen Ungerechtigkeit ist tief in meiner Seele. Und es blieb dort, bis sich der heimtĂŒckische Plan der Rache herauskristallisierte - dasselbe Spiel zu machen, aber mit der FĂ€higkeit zum ZurĂŒckspulen zumindest zum Anfang zurĂŒckzukehren. Diese Option war fĂŒr mich der Hauptgrund, das Spiel auf meine eigene Weise zu schreiben.

ZufÀlligkeit behoben


Einige Spieler sagten, dass das Auto manchmal absichtlich BĂ€lle an unbequemen Stellen platziert, um die Passage zu erschweren. Besonders wenn nur noch sehr wenige freie Zellen ĂŒbrig sind, ist es unmöglich, auf den richtigen Ball am richtigen Ort zu warten. Mit anderen Worten, ZufĂ€lligkeit im Spiel ist alles andere als zufĂ€llig. Bei einer neuen Möglichkeit zum ZurĂŒckspulen wĂ€re es nicht logisch, jedes Mal einen neuen Platz fĂŒr neue BĂ€lle anzubieten. Es wĂ€re also möglich, hin und her zu gehen, bis der richtige Ball an der richtigen Stelle erscheint. Daher werden im Spiel alle Bewegungen der Maschine bestimmt und hĂ€ngen zufĂ€llig von der Zugnummer und der Position der BĂ€lle auf dem Spielfeld ab. Außerdem spielt jeder das gleiche Spiel. Das heißt, das Spiel beginnt mit der gleichen Anordnung (der ersten Bewegung des Autos), und dann hĂ€ngen die Bewegungen des Autos davon ab, wie der Spieler geht: Wenn die Spieler den gleichen Weg gehen,dann haben sie auf dem Feld die gleiche Anordnung von BĂ€llen. Auf diese Weise können Sie objektiv und unabhĂ€ngig von der Möglichkeit verschiedene Lösungen vergleichen. Einige Leute messen gerne, wer als nĂ€chstes kommt, wer schneller ist ... Entscheidungen in Form einer Folge von SpielerzĂŒgen werden an den Server gesendet. Die Bewegungen des Autos werden nach demselben Zufallsalgorithmus berechnet. Der Server kann nicht ausgetrickst werden, die gesamte Sequenz wird auf Richtigkeit ĂŒberprĂŒft und erst dann wird das Ergebnis in die Tabelle eingetragen. Alle DatensĂ€tze werden zusammen mit der Reihenfolge der Spielerbewegungen gespeichert. Anschließend analysieren und veröffentlichen wir die besten Entscheidungen derjenigen, die 9999 Punkte erzielen. Es muss festgelegt werden, nach welchen Kriterien die besten ausgewĂ€hlt werden sollen.Die Bewegungen des Autos werden nach demselben Zufallsalgorithmus berechnet. Der Server kann nicht ausgetrickst werden, die gesamte Sequenz wird auf Richtigkeit ĂŒberprĂŒft und erst dann wird das Ergebnis in die Tabelle eingetragen. Alle DatensĂ€tze werden zusammen mit der Reihenfolge der Spielerbewegungen gespeichert. Anschließend analysieren und veröffentlichen wir die besten Entscheidungen derjenigen, die 9999 Punkte erzielen. Es muss festgelegt werden, nach welchen Kriterien die besten ausgewĂ€hlt werden sollen.Die Bewegungen des Autos werden nach demselben Zufallsalgorithmus berechnet. Der Server kann nicht ausgetrickst werden, die gesamte Sequenz wird auf Richtigkeit ĂŒberprĂŒft und erst dann wird das Ergebnis in die Tabelle eingetragen. Alle DatensĂ€tze werden zusammen mit der Reihenfolge der Spielerbewegungen gespeichert. Anschließend analysieren und veröffentlichen wir die besten Entscheidungen derjenigen, die 9999 Punkte erzielen. Es muss festgelegt werden, nach welchen Kriterien die besten ausgewĂ€hlt werden sollen.


Einige Kriterien finden Sie in der Statistik, die durch Klicken auf den rechten oder unteren ZĂ€hler verfĂŒgbar ist. Wenn Sie andere interessante Kriterien finden, senden Sie mir, ich werde versuchen, die Berechnung zu formalisieren und hinzuzufĂŒgen.

Prompt


Die Positionen und Farben der folgenden Kugeln werden angezeigt. Aufgrund der Tatsache, dass das Spiel vorwĂ€rts und rĂŒckwĂ€rts zurĂŒckgespult werden kann, macht es keinen Sinn, die nĂ€chsten ZĂŒge zu verbergen. Es wĂ€re möglich, mehrere ZĂŒge nach vorne zu zeigen, aber es kam nicht zu einer einfachen BenutzeroberflĂ€che (denken Sie daran, dass sich die ZĂŒge des Autos Ă€ndern, wenn die Zellen aufgrund der Aktionen des Spielers besetzt sind).

Wertung


Die Wertung erfolgt nach der klassischen Formel N * (1 + N - DIMENSION), wobei N die Anzahl der BĂ€lle in der Linie und DIMENSION die Dimension des Spielfelds ist. Das heißt, 5, 6, 7, 8 der zusammen gesammelten BĂ€lle ergeben 5, 12, 21 bzw. 32 Punkte. FĂŒr die Spieloption 3333 werden 3, 8, 15, 24 erhalten, wenn 3, 4, 5 und 6 BĂ€lle zusammenfallen.

Grafik


Die Grafiken sind nur Vektoren - ich mag es nicht, Artefakte zu skalieren, insbesondere unscharfe RĂ€nder. Die wichtigsten animierten grafischen Elemente: ein Vintage-TonbandgerĂ€t und springende BĂ€lle mit Glanzlichtern und Verlaufsbeleuchtung. Sie werden mit CSS erstellt und mit JavaScript gewĂŒrzt. ZunĂ€chst wurde ein dunkles Farbschema erstellt. Sie können es versuchen, indem Sie es in den Einstellungen aktivieren. Es sieht jedoch alles dĂŒster aus. Ich mag das Licht besser.

Dreidimensionale Kugel


So paradox es klingt, aber aus 3 ineinander verschachtelten Rechtecken wird eine dreidimensionale Kugel erhalten:


  1. Container, der die GrĂ¶ĂŸe und Position auf dem Bildschirm angibt
  2. rundes Quadrat, das eine zweidimensionale Form erzeugt, sich beim HĂŒpfen zusammenzieht und streckt
  3. Ein Quadrat mit einer elliptischen VerlaufsfĂŒllung, die die Farbe und Beleuchtung der Kugel definiert und eine dritte Dimension hinzufĂŒgt.

Mit einem Container ist alles einfach. Die CSS-Attribute position, left und top geben die Koordinaten des Balls auf dem Feld an, und die SchriftgrĂ¶ĂŸe legt die GrĂ¶ĂŸe fest, relativ zu der die beiden anderen Quadrate skaliert werden. Ein rundes Quadrat ist wie die ĂŒberwiegende Mehrheit der Runden auf unseren Webseiten nur ein Quadrat mit den am meisten abgerundeten Ecken. Wenn wir mit der Maus darauf klicken, schmeichelt es, drĂŒckt von oben und erweitert die Seiten. Und wenn sich herausstellt, dass der Klick so schnell wie ein Mausklick ist, beginnt der Ball zu springen.


@keyframes flat {
            0%   {height: 1.0em; width: 1.0em; top: 0; left: 0em;}
            100% {height: 0.9em; width: 1.05em; top: 0.1em; left: -0.025em;}
        }

@keyframes jumping {
            0%   {height: 0.9em;   width: 1.025em; top: 0.1em;   left: -0.0125em;}
            10%  {height: 1.02em;  width: 1.0em;   top: -0.02em; left: 0em;}
            40%  {height: 1.008em; width: 1.0em;   top: -0.18em; left: 0em;}
            50%  {height: 1.01em;  width: 1.0em;   top: -0.2em;  left: 0em;}
            60%  {height: 1.0em;   width: 1.0em;   top: -0.18em; left: 0em;}
            70%  {height: 1.0em;   width: 1.0em;   top: -0.1em;  left: 0em;}
            90%  {height: 1.0em;   width: 1.0em;   top: 0em;     left: 0em;}
            100% {height: 0.9em;   width: 1.025em; top: 0.1em;   left: -0.0125em;}
        }

Die maximale Anzahl von Farben betrÀgt 15.


Nicht alle Farben haben selbst auf einem guten Monitor recht glatte FarbverlĂ€ufe, daher habe ich die Farben fĂŒr das Auge ausgewĂ€hlt. Je mehr Farben, desto schwieriger ist es, BĂ€lle auf dem Spielfeld nach Farbe zu unterscheiden. Es scheint, dass 15 Farben genug sind.

ZĂ€hler


Das Hauptgeheimnis des ZĂ€hlers sind BĂ€nder mit Zahlen. Jedes MenĂŒband ist in einem Rechteck versteckt, durch das nur eine Ziffer sichtbar ist. Die Kanten dieses Rechtecks ​​sind leicht abgedunkelt, um einen Rundungseffekt zu erzielen, als ob sich im Inneren kein Band, sondern eine Scheibe befindet. Die Geschwindigkeit der Bildlaufanimation ist proportional zum verbleibenden Inkrement des ZĂ€hlers und wird durch einige vernĂŒnftige Werte begrenzt. Die letzte Ziffer dreht sich 1 Sekunde.


Klang


GerĂ€usche (Explosion und Springen) sind synthetisch. Sie werden durch unkomplizierte mathematische Formeln erzeugt. Dies erzeugt einen Nachgeschmack der 80er Jahre, als die meisten Sounds in Spielen mit einem Einzelfrequenz-Frequenzgenerator erzeugt wurden. Zu den Pluspunkten gehört die Kompaktheit des Programms: Ein einfacher Generator solcher Soundeffekte, der in JavaScript geschrieben ist, ist viel kleiner als eine MP3-Datei. WĂ€hlen Sie fĂŒr jeden Ball Ihr eigenes Paar LowFreq- und HighFreq-Noten aus (siehe Wikipedia ) und fĂŒllen Sie den Audiopuffer wie folgt :

    var soundUpBuffer = audioCtx.createBuffer(1, frameCount, sampleRate);
    for (var i = 0; i < frameCount; i++) {
      var x = i / frameCount; // from 0.0 to 1.0
      var time = duration * x;
      var volume = Math.sin(x * Math.PI);
      var freq = lowFreq + Math.sqrt(x) * (highFreq - lowFreq);
      buffer[i] = volume * Math.sin(2 * Math.PI * freq * time);
    }

Hier Ă€ndert sich die Frequenz entlang der Kurve x Âœ von lowFreq zu highFreq und das Volumen sin (π x).

Bei einer Explosion nimmt die LautstĂ€rke gemĂ€ĂŸ der Formel 1 / (1 + 10 * x + 1000 * x * x) ab und die Frequenz wird zufĂ€llig von der ersten bis zur fĂŒnften Oktave ausgewĂ€hlt.

GrĂ¶ĂŸe des adaptiven Dialogfelds


Es wurde ein Algorithmus zur Auswahl der GrĂ¶ĂŸe des Dialogfelds implementiert, damit es so viel Platz wie möglich einnimmt und nicht ĂŒber die Grenzen des sichtbaren Bereichs hinausgeht. Das Problem ist, dass auf verschiedenen GerĂ€ten die GrĂ¶ĂŸe der Dialoge unterschiedlich ist - manchmal fĂ€llt sie zu klein aus und manchmal wird der Bildschirm nicht angezeigt. Ich habe die GrĂ¶ĂŸe der Dialoge von der SchriftgrĂ¶ĂŸe abhĂ€ngig gemacht (CSS-Einheiten em). Als nĂ€chstes sortiere ich die SchriftgrĂ¶ĂŸe so, dass der Dialog nicht mehr als 95% der Bildschirmabmessungen einnimmt. Ich musste mich also nicht fĂŒr adaptives CSS aussprechen.


Kleine ProgrammgrĂ¶ĂŸe


Das ganze Spiel passt in eine HTML-Datei von ca. 150Kb. Etwa 3000 Zeilen Quellcode (natĂŒrlich ohne Serverseite). Es wurden keine JavaScript-Bibliotheken und Frameworks verwendet - alles ist natĂŒrlich, wie in der Steinzeit. Manchmal möchten Sie sich einfach nicht mit einer Drittanbieter-API befassen, und manchmal ist es hilfreich zu verstehen, um wie viel Frameworks das Leben eines Fahrraderfinders und eines neuen RechenprĂŒfers vereinfachen. Es ist nĂŒtzlich, zuerst selbst zu ĂŒberlegen, wie diese oder jene Idee umgesetzt werden soll, und erst dann zu vergleichen, wie andere es getan haben. Beispielsweise benötigt die Version fĂŒr Android nur 250 KB. Es besteht aus einem dĂŒnnen WebView-Wrapper und einer Packung PNG-Shek fĂŒr verschiedene Telefonauflösungen. Png-shki könnte ĂŒbrigens durch einen Vektor xml-koy ersetzt werden. Es hĂ€tte sich genau im Geiste des Minimalismus herausgestellt.

Forum


Das Forum lÀuft auf phpBB . Mit dem Konto können Sie:

  • Speichern Sie Ihre Erfolge auf dem Server, damit sie beim Wechseln Ihres Telefons oder Computers nicht verloren gehen
  • Spielen Sie abwechselnd auf einem GerĂ€t und dann auf einem anderen
  • Hinterlassen Sie Nachrichten und stellen Sie Fragen an andere Spieler oder Entwickler.

i18n und l10n


Internationalisierung und Lokalisierung. Das Spiel wurde ins Russische und Englische ĂŒbersetzt. Nur 35 kurze SĂ€tze. Ich wĂŒrde die kostenlose UnterstĂŒtzung bei der Übersetzung in mehrere populĂ€rere Sprachen (Chinesisch, Deutsch, ...) nicht verweigern.

Keine Werbung


Sie können oft die Meinung hören, dass wenn das Programm kostenlos und ohne Werbung ist, es einen Trojaner, eine HintertĂŒr, einen Virus bedeutet ... Mit anderen Worten, kostenloser KĂ€se befindet sich nur in einer Mausefalle. Ansonsten warum? Warum ist jemand bereit, kostenlos etwas fĂŒr andere zu tun? Ich kenne die allgemeine Antwort nicht. DarĂŒber hinaus weiß ich nicht genau, warum ich es selbst mache. Ich bin nur Neugierig. Wenn Ihnen etwas gefĂ€llt, frage ich mich oft, wie es dem Autor gelungen ist. Ich wĂŒrde gerne versuchen, dasselbe oder noch besser zu machen. Manchmal mag ich alles, mit Ausnahme einiger Details, und es besteht der Wunsch, so etwas zu tun, aber mit meinem Blackjack und meinen Fingerspitzen.

Fazit


Das ist alles fĂŒr jetzt. Ich hoffe, Ihnen gefĂ€llt das Spiel genauso gut, wie ich daran interessiert war, es zu erstellen. Ich freue mich ĂŒber Kommentare.

Verweise


More articles:


All Articles