高校時代に絵巻迷路？だったかを作ったことがあります。
巻き巻き迷路？ びろびろ迷路だったかもしれません。
イラストから伝わるでしょうか？
絵巻迷路
絵巻迷路は、巻物状になっている迷路を広げながら進みます。
ここでは、実際の絵巻と違って見える範囲が限られています。
迷路の下にある（ ← → ）ボタンで迷路を左右にスクロールしながら、ＳからスタートしてＧまでたどり着いてください。必要に応じてバックすることもできます。
やってみると気づかれると思いますが、この迷路には行き止まりが無く、袋小路に入ると同じ場所をぐるぐる回ることになります。
迷路全体が見えるとそれほど難しくはないと思うのですが、スクロールの作業をしながら目で追うのはなかなか大変かもしれません。
カウント表示、ゴール判定があれば、自己申告ですが何秒でゴールできるかとさらなる挑戦意欲が持てるそうに思いますが、私の力量では無理な話。ここまで制作できたことでひとまず良しとしました。
答えのページでは、まず絵巻迷路の全体図が見られるようにしています。
さらに答えが見たい方は、その下にある「答えの表示」をクリックすれば見られるようにしています。
全体図が見たい方、答えが見たい方はこちら
絵巻迷路のきっかけ
高校時代の作品は行方不明です。すぐ捨てた可性が大です。
何人かの友人にやってもらったのですが、あまり良い反応が得られず、続編は作りませんでした。
アーケードゲームが人気を博していた頃でした。「ラリーＸ」は、道が一部分しか見えない中を敵の車をかわしながら進むゲームです。そこから絵巻迷路を思いついたように思います。当時のアーケードゲームで地図が一部分しか見えないというのは他にもたくさんあったように思います。全体の簡易地図が見えるのも作戦に利用できました。
絵巻迷路が不人気だったのは、操作が単にびろ～んと迷路を伸ばすだけだったのが大きな原因だと思いました。ゲームなら上手く操作ができれば高得点につながる上達感も得られたので、夢中になれたのかも知れません。
使用したコード
実は横スクロール迷路を思いつくのにはきっかけがありました。
ＬＳＳさんのこの記事です。
そこで紹介されていたシンプルなコードを利用させていただきました。
<style><!--
#bgscr{background-position:0px 0px;transition:60s linear 0s;}
#cgscr:checked~#bgscr{background-position:-900px 0px;}
--></style>
<div>
<input id="cgscr" style="display: none;" type="checkbox" />
<div id="bgscr" style="width: 300px; height: 320px; background-image: url('画像ファイルのURL');">
</div>
</div>
<label for="cgscr"> ← → </label>
元画像が1800x480ピクセルなので、background-positionは-1800pxにしたところ、画像がほぼ2回分流れました。試行錯誤の結果-900pxでぴったりの様子。-1800ではなく、-900にはブラウザの表示幅等の意味があるのかも知れません。
画像の進む速度や高さ等も試行錯誤で調整しました。
height: 480だと下に余白が大きくできてしまったので、思考錯誤で320pxにしています。
進む速さも何度もテストした結果、これくらいかなあ？と60sに。
かなりシンプルですが、遊べそうな感じになったかなと思います。
ひとまずこれで完成ってことにしました。
実は、私も読者になっているアーシさんも、何年も前にスクロール迷路を作られていました。こちらは、上下左右にスクロールできる迷路。迷路のイメージを持つのにとても役に立ってくれました。
また、自分の駒を移動させる＜JSループ迷路＞もあります。
気軽に遊ぶことはできるのですが、作るとなるとどちらも私にはまだまだ手におえない感じです。どの世界にも自分のはるか先を行く開拓者がいますねぇ。
先は長いですがまずは横だけスクロール迷路から挑戦してみました。
