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

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

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

子供頃に遊んだスライドパズルを、Scratch(スクラッチ)で作りました。

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

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

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なら三行目と規則性が出てくるので、パズルパネルの座標を指定する際などにプログラミングしやすくなります。

次に、パネルをクリックして、パネルをスライドさせる方法について説明します。

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

【スライドパズル Slide Puzzle Game】

【関連する投稿ページ】

・Scratch(スクラッチ)「ブロック崩しゲーム」作り方説明動画

・Scratch(スクラッチ)「野球ベースボールゲーム」作り方の説明

・Scratch(スクラッチ)「イントロ用動画」作り方の説明

・Scratch(スクラッチ)「タイピング風の文字表示」作り方の説明

・Scratch(スクラッチ)「スキャニメーション」作り方の説明

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

・Scratch(スクラッチ)「100%ペンによる動的な三角関数グラフ」作り方の説明

・Scratch(スクラッチ)「日本語サウンドボード」作り方の説明

・Scratch(スクラッチ)「イライラ棒ゲーム (Frustration Game)」作り方の説明

・Scratch(スクラッチ)「蛇ゲーム(Snake Game)」作り方の説明

・Scratch(スクラッチ)「インタラクティブ・ストーリー」作り方の説明

・Scratch(スクラッチ)「ハロウィン脱出ゲーム」作り方の説明

・Scratchプログラミングでsin(サイン)cos(コサイン)を使用する方法

・Scratch(スクラッチ)ビデオモーション機能を使ったゲーム作り方の説明


【Scratch(スクラッチ)コースの紹介動画】

【無料体験コースの詳細について】

・Scratch無料体験コース(小学生以上向け)

・レゴWeDo+ScratchJr無料体験コース(5~7歳幼児向け)