スタイルシート 15 ゲームの説明

スタイルシート 15 ゲームの説明

JavaScript を使わず，スタイルシートだけで 15 ゲームを作ってみます．
全くのお遊びです．これが何か実用の役に立つようなことは多分無いでしょう．スタイルシートは本来，動作を記述するものではありませんので，かなり力ずくで作っています．

（これはキャプチャ画像です．これで遊ぶことはできません．）

なお，「遊び部屋」にある他の 15 ゲームでは隣接する 2 つまたは 3 つの駒を一緒に動かせますが，このおもちゃでは動かせるのは空いているマスの隣の駒だけです．

仕組みについて説明します．

駒の位置の保持

このゲームでは，現在の駒の配置によって次に動かせる駒が決まります．そのような処理を行うには，各駒の位置を保持しておく必要があります．そのためにラジオボタンを使っています．
1 番から 15 番までの各駒に対して，16 個のマス目に対応するラジオボタンを使います．

16 個のラジオボタン

1 番の駒 ● ○ ○ ○ … ○ ○

2 番の駒 ○ ● ○ ○ … ○ ○

3 番の駒 ○ ○ ● ○ … ○ ○

・
・
・

15 番の駒 ○ ○ ○ ○ … ● ○

○ チェックされていないラジオボタン
● チェックされているラジオボタン

チェックされているラジオボタンが，その駒があるマスを表します．
ただし，各ラジオボタンは先頭から順に 1 番目のマス，2 番目のマス，… というように，マスの位置と順番に対応している訳ではありません．ゲームを開始すると駒をシャッフルしますが，スタイルシートでラジオボタンのチェック状態を変更することはできませんので，ラジオボタンとマスの位置の対応を変えることでシャッフルをしています．
たとえば，ラジオボタンとマスの位置の対応がこのようになっている場合

1 番目のラジオボタン 5 番目のマス

2 番目のラジオボタン 3 番目のマス

3 番目のラジオボタン 9 番目のマス

・
・
・

3 番目のラジオボタンがチェックされていれば，その駒は現在 9 番目のマスにあるということになります．

○ ○ ● ○ … ○ ○

駒の移動

以下のような方法で，動かす駒をクリックしたときにラジオボタンのチェック状態が変更されるようにします．

動かせる駒は空いているマスの隣にあるもの（最大 4 個）です．その駒の位置をクリックすると，駒の 16 個のラジオボタンのうち，空いているマスの位置に対応するものがチェックされるようにします．
ラジオボタンは非表示にしておき，各ラジオボタンに対してラベル（LABEL 要素）を関連付けます．動かせる駒について，空いているマスに対応するラジオボタンに関連付けたラベルを駒の上に重ねます．
たとえば，駒A がマスa にあり，隣のマスb が空いているとします．

マスa マスb

駒A ○ ○ … ● … ○ … ○

マスb に対応するラジオボタンに関連付けたラベルをラベルb とすると，ラベルb をマスa の位置に置きます．

ラベルb をクリックすると，マスb に対応するラジオボタンがチェック状態になります．つまり，駒A がマスb に移動することになります．

マスa マスb

駒A ○ ○ … ○ … ● … ○

空いているマスに対応するもの以外のラベルや動かせない駒のラベルは，位置を画面外に設定してクリックできないようにします．
スタイルシートで HTML 要素をクリックできないようにするには pointer-events:none を指定するのが普通だと思いますが，pointer-events だと条件によって設定値を変える計算式で設定することができません．
Z オーダーを変えて背面に隠してもいいのですが，クリックできるラベルについては位置を設定しますので，位置と Z オーダーの両方で制御するより位置だけで制御する方が簡単です．

シャッフル

ゲームを開始すると駒をシャッフルします．駒をランダムな並びにするために乱数が必要ですが，スタイルシートには乱数を生成する関数はありませんので，自前で擬似乱数の処理を作ります．
駒をシャッフルするには，最初に駒を番号順に並べておいてから，ランダムに 2 つの駒を選んで入れ替えることを何回か繰り返す方法や，ランダムに駒を選んで順に並べていく方法などがありますが，何れもスタイルシートで行うには向きません．
ある処理を繰り返し実行するというようなことはできないので，やるとすれば繰り返す回数分同じ処理を書くような形になりますが，スタイルシートとしては重い処理になります．
また，ランダムに選んだ 2 つの駒が同じものだった場合のことも考慮する必要があります．確率は非常に低いですが，繰り返しのすべてで同じ駒が選ばれてしまう可能性もあり，その場合は全くシャッフルがされないことになります．同じ駒が選ばれた場合は，違う駒が選ばれるまでやり直すなどという処理は，スタイルシートではできません．
同様に，ランダムに駒を選んで順に並べていく方法でも，すでに選ばれている駒がまた選ばれた場合，まだ選ばれていない駒が選ばれるまでやり直すなどという処理はできません．
［追記］
2024年に W3C の Working Draft で乱数に関する機能が提案されました．

そのような問題を回避するため，線形合同法という擬似乱数の生成方法を使っています．線形合同法で生成される乱数には比較的単純な周期性があります．それは乱数としては好ましくないことなのですが，逆にその性質を利用して，連続する数値を同じ数値が二度現れないようにランダムに並べることができます．その数値を各駒と空いているマスに対応させて，駒を重複無しにランダムに並べます．

線形合同法では，次のような漸化式で乱数列を生成します．

Ｘ_ｎ＋1 ＝ (ａＸ_ｎ＋ｃ) mod ｍ

ａ，ｃ，ｍは定数で，mod は剰余演算を表します．Ｘ₀ を乱数列の開始値として，そこから順次Ｘ₁，Ｘ₂，… と乱数を求めていきます．

各パラメータを特定の規則に従って選ぶと，0 ～ｍ－1 の数値が重複せずにランダムに現れます．ｍ＝ 16 とすれば，0 ～ 15 の重複しない数値列を得られます．
たとえばａ＝ 5，ｃ＝ 1，ｍ＝ 16 とし，Ｘ₀ ＝ 1 とすると，次のような乱数列が得られます．

1， 6，15，12，13， 2，11， 8， 9，14， 7， 4， 5，10， 3， 0

Ｘ₀ を変えると別の乱数列が得られます．ただし，Ｘ₀ を変えればいくらでも違う乱数列が得られる訳ではなく，得られる乱数列のパターンは最大 16 種類になります．
ａやｃを変えた場合も別の乱数列が得られます．ａを特定の規則に従って変えると 4 種類のパターンが得られます．ｃを特定の規則に従って変えると 8 種類のパターンが得られます．
ａ，ｃ，Ｘ₀ の値の組み合わせで最大 512 種類の乱数列を作ることができます．

4×8×16 ＝ 512

ただし，その中には

0， 1， 2， 3， 4， 5， 6， 7， 8， 9，10，11，12，13，14，15

という，数値順通りに並んでしまうもの（完成形に対応します）があるので，それを避けるために，その形が生成されるＸ₀ は除いてＸ₀ を 15 種類としています．そのため，生成される乱数列は 480 種類になります．

4×8×15 ＝ 480

このようにして 480 種類の盤面を作りますが，まだこれだけでは不充分です．
ランダムに駒を並べると，50% の確率で完成できない配置になってしまいます．完成できない配置の場合は，どれか 2 つの駒同士を入れ替えると，完成できる配置になります．
そのため，一旦駒を並べた後，完成できる配置かどうかを調べ，完成できない配置の場合は最初の 2 つの駒を入れ替えます．

擬似乱数のパラメータの決定方法

上述のように，擬似乱数を使って駒の並びを決めるのですが，乱数生成の各パラメータをランダムに選ばなければなりません．そのために，アニメーションの機能を使います．
各パラメータに対応するカスタムプロパティを定義しておいて，パラメータの規則に従ってその値が変化するアニメーションを無限に繰り返すように設定します．そして，「ゲーム開始」をクリックしたらアニメーションを停止し，その時点のプロパティの値を使って乱数生成を行います．こうすれば，「ゲーム開始」をクリックするタイミングによって異なるパラメータが使われます．

カスタムプロパティの定義

このプログラム（？）では，多くのカスタムプロパティを @ルールの @property で定義しています．
@property の定義は，たとえばこのように書きます．

@property --a {
  syntax:'<integer>';
  inherits:true;
  initial-value:0;
}

カスタムプロパティを @property で定義している理由はいくつかあります．

ひとつは，アニメーションを使うためです．
上述のように，乱数生成のパラメータを決めるためにカスタムプロパティのアニメーションを使っています．その他に，カスタムプロパティの値の変化にディレイを入れるために transition を使っているところがあります．カスタムプロパティに計算値によるアニメーションや transition を使うためには，プロパティのデータ型を定義する必要があります．
@property で syntax に <integer> や <time> を指定することで，そのプロパティを計算値によるアニメーション可能にしています．

もうひとつは，計算結果の切り捨てのためです．
計算結果の小数部の切り捨てを行うために，整数のカスタムプロパティを定義して，計算結果を一度そのプロパティに設定することで切り捨てを行っています．
ただし，整数プロパティに小数値を設定した場合の丸めは四捨五入です．また，負の数で小数部が 0.5 の場合は負の無限大方向に丸められます（少なくとも Opera 76 では）．切り捨てのために整数プロパティを使う場合は，その点を考慮して使用する必要があります．

@property で定義することが必須なのは上記の 2 つですが，その他にも多くのプロパティを @property で定義しています．それは処理の効率化のためです．
値が整数であることが決まっているプロパティは整数型と定義しておくと，どうも処理の効率がよくなるようです．
このプログラムでは，スタイルシートとしてはかなり複雑な計算を行いますので，少しでも処理効率がよくなるよう，値が整数に限定されるプロパティは @property で定義しています．

条件分岐

スタイルシートでは，プログラミング言語のように if 文などで条件を判定して処理を分けるようなことができません．プロパティの設定はすべて式として書かなければなりません．また，直接数値の大小を比較するような機能もありません．
そのため，条件によって値を変えるところは，すべての条件の場合の値を計算しておいてから，そのうちのどれかが選ばれるような式を書くような形になります．C 言語の条件演算子（? :）や Visual Basic の If 演算子のようなものがあれば便利なのですが，今のところそのような機能は無いようです．

たとえば --x に，ある条件を満たす場合は --n1，満たさない場合は --n2 の値を設定するという場合，条件を満たす場合に 1，満たさない場合に 0 となるようなプロパティ --b を計算しておいて

--x:calc(var(--b) * var(--n1) + (1 - var(--b)) * var(--n2));

と書きます．
--b はプログラミング言語で言うブール変数に相当します．
--b の計算の仕方は，たとえば --v が整数を表すプロパティである場合，その値が 42 に等しいかどうかを表す --b はこのように計算できます．（小数の場合はもう少し面倒です．）

--w:calc(var(--v) - 42);
--b:calc(1 - min(var(--w) * var(--w), 1));

こんな風にも書けます．

--w:clamp(-1, var(--v) - 42, 1);
--b:calc(1 - var(--w) * var(--w));

abs() が実装されていれば，もう少し簡単に書けます．

--b:calc(1 - min(abs(var(--v) - 42), 1));

--b1，--b2 を条件の真偽を表すプロパティ（1／0）とすると，論理演算は次のように計算できます．

論理積（AND）
  var(--b1) * var(--b2)

論理和（OR）
  min(var(--b1) + var(--b2), 1)

否定（NOT）
  1 - var(--b1)

このような考え方で，条件分岐的な処理を力業で書いています．

このおもちゃは Opera 76 以上用に作っていますが，Google Chrome 107 で動くことが確認できています．Google Chrome の他のバージョンでの動作は未確認です．