今開発中のゲームのとりあえずの説明です。
パズルゲーム本体
http://ameblo.jp/knife1968/entry-11836175120.html
まず、パソコンのマウス環境で動作確認をしています。
スマホやタブレットでも、パソコンモードでのみ、動作はしますが、マウス使用時との挙動が若干ことなります。
ブログがすべて読み込み終わると、画面に12個の黒丸を辺上に持つ直角三角形と、赤文字で600という数字が表示されます。
基本的な操作は、黒丸にマウスカーソルを当てたり、クリックないしタップするだけです。
黒丸にマウスカーソルを当てると、黒丸が大きくなり、その図形の内角がrad（ラジアン）と、deg（デグリー）の2つが表示されます。
この値を見てわかるひとがいるかもしれませんが、これは気にしなくても良いです。
まだ開発中なので、私がデバッグ用に表示させているだけですので、そのうち表示すらしないように変更する可能性もあります。
黒丸をクリックないしタップすると、その黒丸は二重丸になります。
これは、この黒丸が固定されたと考えてください。
更に、別の黒丸にマウスカーソルを当てると、先の固定された黒丸と、今マウスカーソルを当てている黒丸の間にグレーの直線があらわれ、len=でこの2点間の距離を示します。
2つめの黒丸を固定し、3つめの黒丸にマウスカーソルを当てると、先の2つの固定された黒丸を中心とする円がグレーで表示され、今マウスカーソルを当てている黒丸の移動先は、その2円の2交点のどちらかに移動できる可能性があることを示しています。
先の2つの固定された2点を結ぶ線分を底辺とし、3つめの点をその固定された2点からピンと貼って出来る三角形の面積（Area of Triangle:AoT）を示します。
AoTが整数になる場合、3つめの黒丸をクリックないしタップすることで、図形が変形される場合があります。
AoTが整数であっても、変形されないものは、まだ私が組み込んでいない、今後も組み込む気がないところだと考えてください。
この1回の変形を1手として、数えることとします。
このパズルゲームは、ある手数で、ある面積の、ある図形に変形させるというクエストをクリアするパズルです。
図形の辺上の12個の点は、隣り合う点との距離を便宜上10と設定しています。
初期状態のピタゴラス三角形の面積が600と赤文字で表示されるのもこのためです。
底辺40×高さ30÷2＝面積600
ということですね。
では、簡単なチュートリアルとして、1手で面積900の正方形に変形してみましょう。
ピタゴラス三角形の直角の点から、時計回りに、3個目、9個目と固定し、6個目とやることで、
底辺30×高さ30＝面積900
の正方形が出来上がります。
それでは、まだ説明していない操作方法を説明します。
マウスを黒丸以外でドラッグすると、図形だけの表示位置を移動できます。
続いて、右下のアイコンを説明します。
例えば、正方形の対角の頂点を固定し、(V)ボタンか(H)ボタンをクリックないしタップします。
すると、その2点が(V)は垂直、(H)は水平になるように図形が回転し、図形を12角形として考えた場合の重心を中心として、垂直・水平移動します。
クエストには、菱形や平行四辺形など様々な形を想定していますので、この垂直や水平に向き揃えることで、見た目をわかりやすくすることが可能となっています。
固定された黒丸を解除するには、二重丸の黒丸のどちらかをクリックします。
(A)ボタンは、ある1つの黒丸を固定した状態で、(A)ボタンをクリックないしタップすると、緑色の方眼の一番近い交点に垂直・水平移動します。
(V)、(H)をしたあと、(A)で特定の点を方眼に合わせることで、面積を割り出しやすくすることも可能かと思います。
(G)ボタンは、(V)や(H)をしたときに重心を中心に移動したものそのものです。
図が、画面からはみ出してしまったりしたとき、使うと便利だと思います。
(C)ボタンは、クエストの判定ボタンなのですが、まだ実装していません。
(R)ボタンは、リセットします。
最後に、出来上がった図形を画像として取り込める場合があります。
プリントスクリーンでスクリーンショットを撮ってもよいのですが、Firefoxなどブラウザによっては図形を右クリックで画像として保存できる場合がありますので、ブログなどで解答する場合などに使えるかもしれません。
こんな感じで、図形の変形を楽しんでください。
クエストは別の記事にしましょうかね。
↧
ヘルプ
↧