Scratch(スクラッチ)「スライドパズル」作り方の説明

KIDSPRO

子供頃に遊んだスライドパズルを、Scratch(スクラッチ)で作りました。
ゲームの内容
  • 🏁マークをクリックすると左上から順番に「1」「2」「3」「4」「5」「6」「7」「8」までのパネルが配置され後、すぐにパネルがランダムに数百回ほど動きバラバラな位置に移動し、ゲーム開始となります。
  • 移動したいパネルをクリックすると、上下左右にパネルがなければスライド移動します。
  • 正しい順番に、「1」から「8」までのパネルを並べ替えると「9」のパネルが現れてゲームクリアとなります。
  • また、「スペースキー」を押すと、パズルの見た目が変わります。数字のコスチューム以外に、2種類のコスチュームを用意しました。

KIDSPRO

上図のスクリプトでは、各パネルの位置を指定するために、place_puzzleという名前の「リスト変数」を定義しました。例えば、1番目のplace_puzzleはパネル「1」の位置を示しています。
上図左のリスト変数の値を見ると、1番目のplace_puzzleの値は5になっており、パネル「1」は中段の右端に配置されています。5という値ならパネル「7」が配置されている位置になるのでは?と思われるかもしれませんが、その理由は次に説明します。

KIDSPRO

ここがポイント1

5の位置が中段の右端になっている理由は、起点を1ではなく0にしているからです。上左図のように1を起点とした場合、各位置の値を3で割った余りは、左列は1、中列 は2、右列は0となり、3で割った商は一行目は1 or 2、二行目は2 or 3、三行目は3 or 4と規則性がありません。

一方、上右図のように0を起点とすると、位置の値を3で割った余りが0なら左列、1なら中列、2なら右列となり、3で割った商が0なら一行目、2なら二行目、3なら三行目と規則性が出てくるので、パズルパネルの座標を指定する際などにプログラミングしやすくなります。

KIDSPRO

パネルをクリックして、パネルをスライドさせる方法について説明します。
ここがポイント1

スライドパズルは、パネルは上下左右には移動できますが斜めは移動できません。そのため、変数などを使いパネルがない場所を認識し、クリックしたパネルの上下左右に何もパネルがなければ、スライドさせるようにプログラミングする必要があり、少しアルゴリズムが複雑になります。

今回は、クリックしたパネルの上下左右にパネルがないか判定する際に、位置情報を利用するのではなく、背景と同じ黒色で長方形の角が少し欠けている形のblankという名前のスプライトを使用しました。変数などを使った位置情報による判定の場合は、上下左右4か所の判定をする必要がありますが、blankスプライトを利用した場合であれば、スプライトに触れているかを1回だけ判定するだけで良く、アルゴリズムもシンプルで分かりやすいものになります。

blankスプライトの角が少し欠けているのは、斜め左右上下のパネルにはblankスプライトが触れないようにしているためです。

KIDSPRO

Scratch 3.0(スクラッチ3.0)「スライドパズル」