| スタイルシート 迷路 の説明 |
|
|
|
JavaScript を使わず，スタイルシートだけで迷路ゲームを作ってみます． 使い方と仕組みについて説明します． 使い方 「迷路選択」で迷路のパターンを選びます． スタート位置は左上隅，ゴールは右下隅です．現在位置が青い丸で示されます． 現在位置から壁までの間の道をクリックすると，クリックした位置に移動します．クリックを繰り返してゴールを目指してください． 移動させる方法 迷路は縦 10 個 × 横 10 個の全部で 100 個のマス目で構成されます． 100 個のマスに対応して 100 個のラジオ ボタンを使います．ラジオ ボタンは非表示にしておき，各ラジオ ボタンに対してラベル（LABEL タグ）を関連付けます． ラベルを各マスの位置に配置して，マスをクリックすると対応するラジオ ボタンがチェックされるようにします．その :checked 状態でそのマスを現在位置にします．移動できるマスは縦位置または横位置が現在位置と同じものだけなので，それ以外のマスのラベルは Z オーダーの設定で背面に隠して，クリックできないようにします．また，現在位置のマスのラベルも背面に隠して，クリックできないようにします． これに次の「壁の作り方」のようにして，壁より先には移動できないような処理を加えます． 壁の作り方 マスとマスの間に壁を作ります． 壁を作れる位置は，横の壁（縦方向に移動できない）が縦 9 個所 × 横 10 個所の 90 個所，縦の壁（横方向に移動できない）が縦 10 個所 × 横 9 個所の 90 個所になります． この位置に対応して縦／横それぞれに 90 個の HTML 要素（以下「壁要素」という）を用意します．壁要素を使って，壁より先に移動できないようにする処理と壁の表示を行います． 壁要素は壁の分だけ用意すればよいのですが，迷路のパターンを変えられるようにするため，壁を作れる位置のすべてに対応して壁要素を用意し，使わないものは Z オーダーの設定で背面に隠しています． 壁が現在位置に対してどちら側にあるかによって処理が変わります． 横の壁が現在位置より上にあるときは，壁より上に移動できないようにします．現在位置より下にあるときは，壁より下に移動できないようにします． 同様に，縦の壁が現在位置より左にあるか右にあるかによって，壁より左または右に移動できないようにします． 壁要素は移動させる処理のためのラベルの前面に配置します． 移動できない部分のマスを覆うように壁要素の位置と大きさを設定して，ラベルをクリックできないようにします． 横の壁が現在位置より上にあるときは，壁要素の下のボーダーを使って壁を表示します．現在位置より下にあるときは，壁要素の上のボーダーを使って壁を表示します． 同様に，縦の壁が現在位置より左にあるときは右，右にあるときは左のボーダーで壁を表示します． このおもちゃは Firefox 78 以上および Opera 74 以上用に作っていますが，Google Chrome 107 で動くことが確認できています．Google Chrome の他のバージョンでの動作は未確認です． |
|
|
