Zeitreikende CSS mit: Ziel

Spiele mit CSS, Kontrollkästchen und Optionsknopftechniken erstellen sind berüchtigte (oder allgemein bekannt). Es stellt sich jedoch heraus, dass auch andere Elemente, die auf Benutzereingaben basieren, geschickt genutzt und zur Gamification verwendet werden können. Entwickler haben viele sehr coole CSS-Spielfälle erstellt, die auf der :hover -Pseudo-Kategorie und sogar Spiele basieren, die auf der :valid -Kategorie basieren.

stellte ich jedoch fest, dass die :target Pseudoklasse in diesem Bereich der CSS-Fähigkeiten unterbelastet zu sein scheinen. Nachdem Sie darüber nachgedacht haben, handelt es sich um eine unterschätzte leistungsstarke CSS-Funktion: : Ziel ermöglicht es uns, jedes Element auf der Grundlage des ausgewählten Sprunglinks zu stylen, was bedeutet, dass der Browser eine einfache Version des Client-Routings hat! Lassen Sie uns verrückte Wissenschaftler werden und sehen, wohin es uns führen kann.

Invincible AI in CSS

Habe ich diese Wörter miteinander verbunden? Sollten wir CSS verzweifelt verwenden, bis wir die Singularität erreichen? Versuchen Sie, das TIC -Zehenspiel im Style Sheet unten zu besiegen und selbst zu entscheiden.

Stylesheets lassen das Spiel manchmal in einer Krawatte enden, sodass Sie zumindest einen Silberstreifen haben.

Mach dir keine Sorgen! CSS ist noch kein Skynet geworden. Wie bei jedem CSS -Trick ist die Faustregel, um festzustellen, ob ein Spiel mit CSS implementiert werden kann, in der Anzahl der Spielstaaten möglich. Ich erkannte dies, als ich einen 4 × 4 -Sudoku -Solver erstellen konnte, und stellte fest, dass die 9 × 9 -Version fast unmöglich zu implementieren war. Dies liegt daran, dass CSS -Tricks letztendlich von Selektoren abhängen, die auf Benutzereingaben reagieren, um das Spielstatus auszublenden und anzuzeigen.

Wenn X zuerst geht, hat Tic Toe 5478 Rechtszustände, die erreicht werden können, und es gibt einen bekannten Algorithmus, der die beste Bewegung in jedem Rechtszustand berechnen kann. Daher können wir CSS voll verwenden, um Tic -Toe -Spiele zu implementieren.

Okay, wie geht es mir?

In gewissem Sinne knacken wir überhaupt keine CSS, sondern verwenden CSS als Willen Gottes: Verstecken, Zeigen und Animationsinhalte. "Smart" liegt in der Art und Weise, wie HTML erzeugt wird. Es ist wie ein Buch "Wählen Sie Ihr eigenes Abenteuer", das alle möglichen Zustände im Tic-Toe-Multiversum enthält, wobei leere Quadrate mit dem besten nächsten Schritt des Computers verbunden sind.

Wir verwenden eine Variante des in Ruby implementierten Minimax -Algorithmus, um ihn zu erzeugen. Wussten Sie, dass CodePen HAML unterstützt (Rubinblöcke), und können wir ihn heimlich als Ruby -Spielplatz verwenden? Jetzt weißt du.

Jeder von unserem Haml erzeugte Zustand sieht in HTML so aus:

<div>
  <svg><circle></circle></svg><a href="https://www.php.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

  <svg><circle></circle></svg><svg><circle></circle></svg><div></div>

  <a href="https://www.php.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

Mit nur einer kleinen Menge an überraschend einfachem CSS können wir den

-Auskurs verwenden, um nur den aktuell ausgewählten Spielstatus anzuzeigen. Wir werden den historischen Bewegungen des Computers auch eine :target -Klasse hinzufügen, damit wir nur Handschriftanimationen in den neuesten Schritten des Computers auslösen. Dadurch haben wir das Gefühl, dass wir Spiele auf einem Brett spielen, und in Wirklichkeit springen wir zwischen verschiedenen Teilen des Dokuments. .c

<div>
  <svg><circle></circle></svg><a href="https://www.php.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

  <svg><circle></circle></svg><svg><circle></circle></svg><div></div>

  <a href="https://www.php.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

Bei der Auswahl des Sprunglinks durch Klicken auf das leere Quadrat zeigt die :target Pseudo-Klasse den aktualisierten Spielstatus an (.s), und die vorbereitete Antwort auf den Computer wird in animierter Weise angezeigt (.c).

Bitte beachten Sie die besondere Situation, wenn wir das Spiel starten: Bevor der Benutzer einen Jump -Link auswählt, müssen wir das anfängliche leere Netz anzeigen. Der Inhalt des Stils ist zu Beginn nicht festgelegt. Sobald der Sprungverbindungslink ausgewählt ist, verwenden wir den :target -Auskörper, um den Ausgangszustand zu verbergen. Wenn Sie ein Experiment mit :body:has(:target) #--------- erstellen, müssen Sie die erste Ansicht rendern, bevor der Benutzer mit der Interaktion mit der Seite beginnt. :target

Zusammenfassung

Ich werde nicht in die Tiefe gehen, warum wir dies in CSS implementieren werden, anstatt JavaScripts "einfachere" Ansatz zu verwenden. Dies ist nur eine unterhaltsame und pädagogische Möglichkeit, die CSS -Grenzen zu überschreiten. Zum Beispiel können wir dies mit klassischen Checkbox -Tricks tun - tatsächlich hat es jemand getan.

Gibt es etwas Interessantes zu verwenden

? Ich denke ja, weil: :target

• Wir können Spiele in CSS speichern! Zugriff jederzeit mit dem von Ihnen verlassenen Status -Lesezeichen auf die URL zugreifen und kehren Sie zurück.
• Sie können die Tasten "zurück" und "vorwärts" des Browsers als Spielsteuerung verwenden. Die Bewegung kann durch Zurückgehen oder Wiedergabebewegungen durch Fortschritte wiedergegeben werden. Stellen Sie sich vor, Sie kombinieren mit Checkbox -Tricks, um ein Spiel mit einem Zeitreisemechaniker in Braids Tradition zu erstellen. :target
• Teilen Sie Ihren Spielstatus. Dies hat das Potenzial, workdelähnliche Show-Off-Rechte zu erlangen. Wenn Sie es schaffen, den unbesiegbaren CSS Tic Toe -Algorithmus zu gewinnen oder zu ziehen, können Sie der Welt Ihre Erfolge durch das Teilen von URLs zeigen.
• Es ist vollständig semantisch html. Kontrollkästchen -Tricks müssen Kontrollkästchen oder Optionsschaltflächen ausblenden, sodass es immer eine Fähigkeit und ein schmerzhaftes Schnäppchen ist, wenn es um Zugänglichkeit geht. Diese Methode ist wohl ohne Tricks, da wir nur Sprungverbindungen und Divs und ihre Stile verwenden. Dies kann es sogar schaffen - ich sage es - „leichter“, ein einfacheres Zugangserlebnis zu bieten. Aber das heißt nicht, dass es einfach ist, auf die Box zuzugreifen.

Das obige ist der detaillierte Inhalt vonZeitreikende CSS mit: Ziel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!