CSSとの時間旅行：ターゲット

CSS、チェックボックス、ラジオボタンのテクニックを使用してゲームを作成することは悪名高い（または広く知られています）。しかし、ユーザー入力に基づいた他の要素は、ゲーミフィケーションに巧妙に利用し、使用することもできます。開発者は、多くの非常にクールなCSSゲームケースを作成しました。これは、:hoverpseudo-categoryに基づいています。 :valid

しかし、私は：ターゲット:targetを使用すると、選択したジャンプリンクに基づいて任意の要素をスタイリングできます。狂った科学者になり、それが私たちをどこに連れて行くことができるか見てみましょう。 CSSの無敵AI これらの言葉を一緒に接続しましたか？特異点に到達するまでCSSを必死に使用する必要がありますか？下のスタイルシートでTic Toeゲームを倒して、自分で決めるようにしてください。

スタイルシートでは、ゲームがネクタイで終了することがあるため、少なくとも銀色の裏地があります。

心配しないでください！ CSSはまだSkynetになっていません。他のCSSトリックと同様に、ゲームの数でゲームを実装できるかどうかを判断するための経験則は、ゲームの状態数で可能です。 4×4 Sudokuソルバーを作成できたときにこれに気付き、9×9バージョンを実装することはほぼ不可能であることがわかりました。これは、CSSトリックが最終的にユーザー入力に応答してゲーム状態を非表示にして表示するセレクターに依存しているためです。

Xが最初に進むと、TIC TOEには5478の法的状態が達成でき、あらゆる法的状態で最高の動きを計算できるよく知られているアルゴリズムがあります。したがって、CSSを完全に使用してTIC TOEゲームを実装できます。

わかりました、どうやってそれを行うのですか？ ある意味では、私たちはCSSをまったく割れているのではなく、CSSを神の意志として使用しています。 「スマート」は、HTMLが生成される方法にあります。これは、Tic-Toeマルチバースのすべての可能な状態を含む「あなた自身の冒険を選ぶ」本のようなもので、空の正方形がコンピューターの最良の次の動きにつながっています。

Rubyに実装されたMinimaxアルゴリズムのバリアントを使用して生成します。 CodepenがHaml（Ruby Blocksをサポート）をサポートしていることをご存知ですか、Rubyの遊び場として密かに使用できますか？今、あなたは知っています。

私たちのhamlによって生成された各状態は、htmlでこのように見えます：

驚くほどシンプルなCSSだけで、

セレクターを使用して、現在選択されているゲームステータスのみを表示できます。また、コンピューターの歴史的な動きに

クラスを追加します。これにより、コンピューターの最新の動きで手書きアニメーションのみをトリガーします。これにより、私たちはボードでゲームをしているように感じます。実際には、ドキュメントのさまざまな部分の間でジャンプしています。

<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>

空の正方形をクリックしてジャンプリンクを選択すると、:targetpseudoクラスに更新されたゲームステータス（.s）が表示され、コンピューターに設定された事前に計算された応答がアニメーション化されています（.c）が表示されます。

ゲームを開始するときの特別な状況に注意してください：ユーザーがジャンプリンクを選択する前に、最初の空のグリッドを表示する必要があります。 スタイルのコンテンツは最初に設定されていないため、ジャンプリンクが選択されると、:targetセレクターを使用して初期状態を非表示にします。同様に、:body:has(:target) #---------を使用して実験を作成する場合、ユーザーがページとの対話を開始する前に、最初のビューをレンダリングする必要があります。 :target

要約

JavaScriptの「より簡単な」アプローチを使用するのではなく、CSSにこれを実装する理由の深さにはなりません。これは、CSSの境界を推進するための楽しく教育的な方法です。たとえば、クラシックなチェックボックスのトリックを使用してこれを行うことができます。実際、誰かがそれを行ったことです。

を使用する興味深いものはありますか？そうだと思います。なぜなら：:target

• CSSでゲームを保存できます！ 残して返品したステータスブックマークを使用して、いつでもURLにアクセスします。
• ブラウザの「バック」および「フォワード」ボタンをゲームコントロールとして使用できます。 動きは、戻ることで取り消すことができます。 Braidの伝統の中でタイムトラベルメカニッ​​クとゲームを作成するために、をチェックボックスのトリックと組み合わせることを想像してください。 :target
• ゲームのステータスを共有します。 これには、ワードルのような見せびらかしの権利を獲得する可能性があります。 Invincible CSS TIC TOEアルゴリズムに勝つか、描画することができれば、URLを共有することで世界に成果を示すことができます。
• 完全にセマンティックなHTMLです。 チェックボックスのトリックでは、チェックボックスまたはラジオボタンを非表示にする必要があるため、アクセシビリティに関しては常にスキルと痛みを伴う掘り出し物です。この方法には間違いなくトリックがありません。なぜなら、ジャンプリンクとDIVとそのスタイルを使用しているからです。これは、より簡単なアクセスエクスペリエンスを提供するために、「簡単に言う」とさえするかもしれません。しかし、それは箱から出して簡単にアクセスできると言っているわけではありません。

以上がCSSとの時間旅行：ターゲットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。