2018年5月1日火曜日

ルービックキューブを解く(その3:解法アニメーション)

 20手で解けることがわかったので、できれば回転をアニメーションで表示したい。
 以下のサイトを参考にルービックキューブを動かす。
 CSSとJavascriptでルービックキューブのアニメーションを実現するRoofpigを以下からダウンロード。

使用方法は至ってシンプル。
まず、jQuery 3.1.1とRoofpigのソースにある「roofpig_and_three.min.js」を読み込む。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"</script>
<script src="roofpig_and_three.min.js"</script>
CSSでroofpigクラス(大きさなど)を定義し、表示したい場所に<div class=roofpig data-config=・・・>を記載する。
data-configは、回転のアルゴリズムや各面の色の指定などを行う。
<style type="text/css">
.roofpig {width:160px; height:210px; float: left; margin:4px;}
&lt/style>
<div class=roofpig data-config="alg=L' U2 L U2 R U' L' U R'|colors=F:b B:g U:r D:o R:w L:y">
上記は、正面が青(F:b)、上面が赤(U:r)、右面が白(R:w)などで、左面を反時計回り(L')、上面を2回転、左面を時計回りなどという設定。
最終的な各面の色がcolorsで指定してあるので、回転を指定することで元の位置からのアニメーションが出来上がるという仕組み。
以下、デモページ。
 そして、今回のWeb場での実装画面は以下。


Javascriptでルービックキューブのアニメーション。よくできてます。
徒然なるままに、今日も明日も。