日曜大工ならぬ日曜コーディングでパズルゲームを作ってみました。買い物バッグからメロンを取り出すという設定ですが、ゲームのルールは昔からある「箱入り娘」です。⇒操作説明
メロン救出パズル
初級レベルか通常レベルを選ぶとゲームがスタートします。上の黄色矢印はメロンだけが通れます。
手数
XXXX
問題レベル:
不具合があれば問い合わせフォームよりお知らせください。
◆◆操作説明◆◆
- 買い物バッグからメロンだけを取り出してください。
- 上の出口からはメロンしか出せません。
- 各アイテムをクリック又はタップすると動きます。
- ２以上の方向に動かせる場合はクリックすると移動可能な方向がピンクになります。動かす方向を選択してください。
- 手数は同じアイテムを連続で動かした場合は、2コマ以上動かしても1手としてカウントします。
- アイテムを動かして元に戻した場合も1手としてカウントされます。
素人の日曜コーディングです
ド文系の経理屋が趣味でプログラミングを楽しんでいます。
公開するのはこれが初めてです。設定は買い物バッグからメロンだけを取り出すというものですが、美的センスのなさと、HTMLとCSSの技量のなさで、設定を表現することはできませんでした。。。
ライブラリも使えず、素人が使えるforとifだけで力業で1日かけて作りました。
一応動きます。一番ハマったのは、そもそも普通レベルがクリアできずにクリアできたときの動作を確認できなかったことです。
そのために、初級レベルとしてピースを2つ抜いたものを作りました。
いまだに普通レベルは手も足もでません。。。
作り方は素人感満載です
作り方としては、以下のような感じです。
- htmlで6×9のマス目を作って壁の部分を紺色にする。
- png画像でアイテムを作る（パワーポイントで作りました。）
- JavaScriptで6×9の配列を作って、初期配置を作る
- JavaScriptの初期配置に対応した画像をJavaScriptのAddChildメソッドでhtmlのマス目に表示させる
- 画像をクリックしたときにJavaScriptで動ける方向の判定する。
- 移動させる場合は、AddChildメソッドで移動させる。
- メロン画像の左上の画像がゴール位置に来たらゴールの判定をする。
今回は、2×1・1×2・2×2の大きさのアイテムはすべて1×1の画像を並べているので、スマホでは解像度や拡大によっては、アイテムに継ぎ目が見えてしまうことがあります。
ゲーム用のライブラリなど使えばもっときれいに作れるんだと思いますが、そこまではまだ手が出せません。
コメント