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="http://www.miracleart.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

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

  <a href="http://www.miracleart.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="http://www.miracleart.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="http://www.miracleart.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="http://www.miracleart.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="http://www.miracleart.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

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

  <a href="http://www.miracleart.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="http://www.miracleart.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="http://www.miracleart.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="http://www.miracleart.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!