はじめに
そのままなんですが、ball sort puzzleを作ってみました。
作ったきっかけは、妻が広告がうざいというから、そんなの簡単に作れるわとうっかり言ってしまい、３連休がつぶれました。
こんな画面のものです。広告は出ませんｗ
ボールの色と深さ、空きの数を指定して、開始します。
実行環境はこちら
http://ball-sort-puzzle-yo16.herokuapp.com/
ソースはこちら
技術的なこと
いつものとおり、JavaScriptでやってしまいました。新しいことを身に着けたいと言いながら、いつも同じパターンに戻ってしまう。
d3.jsを使って、ボールを描いたり移動させました。d3.jsともだいぶ仲良しになってきましたが、もう一歩というところか。SVGでのお絵描きは、とにかくコード量が多くなります。パラメータ１つで１行かかるので。ほんとはソースをうまく分割するとよいと思います。
仕様のこと
技術的なことよりも、ball sort puzzleは仕様が意外と難しい。ボールを動かすルールではなく、適度に難しい問題を作ることが難しいです。
最終的なゴールは、それぞれの箱（フラスコ？私のソースではboxとしましたが）に同じ色のボールがすべて入れば終了なので、↓こんな感じがゴールです。
そこで私のball sort puzzleは、ゴールから遡って問題を作ることにしてみました。
まず上の図から遡って、まず１歩遡って、これ。
もう１歩遡ってこうする・・・
そうすると、もう左から２番目の箱は、遡るためにいじれないです。
なぜかというと、２番目のトップの水色を遡って動かすことは、逆に通常のプレイの時間でいうと、黄色の上にどこからか水色を乗せるということになり、ゲームのルールに沿わないためです。（説明が難しい・・・）
そんなわけで、この２番目の箱はもう手を付けられず、終了。
これが起こると同じ色の塊ができてしまい、難易度が一気に下がります。問題を作るときに工夫しないといけないです。この問題をどう回避するのかがわからないです。とりあえず、この問題が起きると動かせる回数が著しく減るので、動かす回数が少ないときは最初から作り直し、みたいにしています。
よくあるアプリでは、完全に空の箱が１個か２個あって、それ以外の箱にはみっちりバラバラで入ってます。それやりたかったんだけど、ロジックがよくわかりません。手で問題作るとできるから、もうちょっと考えればできるかも。
もしかしたら、ランダムでボールが並んでいるときに、並び替えることが可能かどうか、判定する方法があるかもしれない。
今回はひとまず作ったところまで。
今後の課題
- 問題作成モードを完成させる
- 手で問題を作るモード
- いちおう作ったけど、動きが怪しいので非表示にしてある
- 適切な問題を作れるようにする
- 終わったら「終わり」的なメッセージを出すようにする
- 達成感がいまいち