前回の記事の結果によれば、このトピックは一般の人にとって興味深いものであることがわかったので、もう少し複雑な資料を用意しました。
スクリプトはまだなく、HTML / CSSのみがあります。
ビデオを見て、猫の下で。
もちろん、これまでの話は本格的なゲームに関するものではありませんが、コンセプトをお見せします。
私はこのゲームを「交通渋滞が友人を見つけるのを助ける」と呼びました。
彼女はネクサスを構築し、友人を「訓練」することでこれを行うことができます。 したがって、ゲームの目標は、コルクが友達を作るのを助けることです。
行きましょう。
まず、CSSでは、ゲーム全体がチェックボックスとラジオボタン、および「〜」セレクターに関連付けられています。 したがって、可変要素はページの上部になければなりません。
それらを「状態」と呼びましょう
<!-- --> <!-- --> <input type="radio" name="button-level-2" id="default-state-level-2"> <input type="radio" name="button-level-1" id="default-state-level-1"> <input type="radio" name="unit" id="default-state-unit"> <!-- --> <!-- --> <input class="state build-button probe" type="radio" name="button-level-1" id="build-button"> <!-- --> <input class="state build-nexus start-build" type="radio" name="button-level-2" id="build-nexus"> <!-- --> <input class="state build-probe-1" type="checkbox" id="build-probe-1"> <input class="state build-probe-2" type="checkbox" id="build-probe-2"> <input class="state build-probe-3" type="checkbox" id="build-probe-3"> <input class="state build-probe-4" type="checkbox" id="build-probe-4"> <input class="state build-probe-5" type="checkbox" id="build-probe-5"> <!-- / --> <!-- --> <input class="state unit probe" type="radio" name="unit" id="start-probe"> <input class="state unit nexus" type="radio" name="unit" id="nexus-select"> <!-- / --> <!-- / -->
セレクター「〜」が同じレベルの要素を選択するため、それらが最上位にあるという事実に加えて、それらはまだブロックの中にあるべきではありません。
つまり、マークアップを持つ
<input type="radio" name="unit" id="default-state-unit"> <div id="map"> <div class="some">Hiho</div> </div>
このセレクターは何も選択しません
#default-state-unit:checked ~ .some
これは、.someが#mapにネストされている、つまり、異なるネストレベルにあるためです。
この場合、セレクターは同じレベルの最も近い要素から開始する必要があります。
#default-state-unit:checked ~ #map .some
メッシュ
ご存じのとおり、スタークラフトの建物は格子状に配置されています。 したがって、同じグリッドを作成する必要があります。
これは、このセルが取り得る特定の状態を含むブロックで構成されます。たとえば、その上にネクサスが構築されます。
<!-- --> <div class="cell-label"> <!-- --> <label for="cell_6_nexus" class="nexus status unit"> <span class="inner"></span> </label> <input type="checkbox" id="cell_6_nexus" class="cell-state"> <label class="view nexus unit" for="nexus-select"> <div class="probes"> <div class="probe"></div> <div class="probe"></div> <div class="probe"></div> <div class="probe"></div> <div class="probe"></div> </div> </label> </div> <!-- / -->
最終的な表示には、.viewブロックがあります（さまざまな状態で多数存在する場合があります）。
対応するラベルをクリックすると状態がオンになります。チェックボックスをオンにします-.viewが表示されます：
#map .cell-label .cell-state:checked + .view{ display: block; }
ラベル自体も特定の条件下で表示されます。 たとえば、ネクサスを構築する場合、この状態を担当する「表示」（表示：ブロック）ラベルがあります。
.state.build-nexus:checked ~ #map .cell-label:hover label.status.nexus{ display: block; }
セルの上にマウスを移動すると、まず建物がどのように立つかを確認します。 これを行うには、ネストされたラベルスパンのスタイルを設定します（スパンはラベルよりも大きく、ラベルはセルのサイズです）。
そのため、建物の仮の位置はわかりますが、ブロックと画像は隣接するセルを閉じているため、状態：ホバー（仮の建物の表示を開始するだけ）に打ち勝つことは困難です。
神に感謝、私たちはすでにCSS4プロパティを使用することができます
pointer-events: none;
このプロパティを使用すると、マウスイベントに対するブロックの応答を無効にして、マウスに対して透過的にすることができます。
クリックも要素のガイダンスも認識されません。 開発者パネルの虫眼鏡を使用してアイテムを選択することもできません。 さらに、彼はそのzレベルで正確に自分自身にはっきりと見えます。
単位
複数のユニットと建物があり、これらの各要素を選択すると、タスクバーに異なるボタンが表示されます。
これは、ラジオボタンを切り替えることで実現されます。これは、毎回1つの建物/ユニットしか選択できないためです（元の建物ではそうではありません）。
おわりに
ユニット/建物が強調表示されたときにパネルの状態を担当するいくつかのラジオボタンのデフォルト状態にリセットしたかったのです。
彼は、ラベルの内容をクリックするとコンテナがクリックされることを期待して、ラベルをラベルのラベルに貼り付けました。 しかし、驚いたことに、これは機能せず、内部ラベルをクリックするだけです。
<!-- --> <input type="radio" name="button-level-2" id="default-state-level-2"> <input type="radio" name="button-level-1" id="default-state-level-1"> <input type="radio" name="unit" id="default-state-unit"> <!-- --> <label for="default-state-level-2" class="reset"> <label for="default-state-level-1" class="reset"> <label for="default-state-unit" class="reset"></label> </label> </label> <!-- / -->
もちろん、これは単なる概念実証であり、ここで多くのことを仕上げ、リメイクすることができます。反射の方向を示しただけです。