【スクラッチ】ゲーム:ハノイの塔を作る

2021年1月11日月曜日

Scratch スクラッチ パズル プログラミング

t f B! P L






スクラッチでハノイの塔のゲームを作る



スクラッチでハノイの塔を作ったので作成方法の概要をまとめます。

具体的なコードは公開されているプロジェクトを参照してください。

スクラッチ:ハノイの塔


スクラッチで用意されている機能を使えば意外と簡単にできました。




表示する画像の準備


積み上げるブロックを作る


スプライトに最初からある「ねこ」は削除します


新しいスプライトを「描く」で追加します。

好きな名前を付けて、座標をX=0、Y=0 にします。

※今回は名前を「ブロック」にしました


コスチュームを開いて ⑧ のブロックを 四角 と テキスト で作成します。

好きな色でつくりましょう。




画面の真ん中(+)と四角の真ん中(+)が重なるように配置します。

四角の幅は画面の三分の一より小さくします。


出来上がったら ⑧のブロックを複製します。

複製したコスチュームの ⑧ を ⑦ にして 四角の も変えます。


四角の も少し小さくします。

幅を変えるときは 端の● を Altキーを押しながら動かすと中心に向かってサイズをかえることがでるので作業が楽になります。




出来上がったら ⑦を複製して⑥を作ります。

① ~ ⑧ までのブロックができるまで繰り返します。


全部できたら、コスチュームの番号とブロックの番号が同じになるように変えます。

番号を同じにするのが大事です。







背景を作る


スクラッチで用意されている背景画像から好きな背景を選んでください。

※今回は「Blue Sky」を選びました


真ん中にブロックが刺さる棒を描きます。

画面の真ん中(+)と四角の真ん中(+)を合わせてX座標を真ん中にします。


左と右の棒はそれぞれ X座標が 左-120、右120 の位置になるのですがコスチューム内の画像の位置はわかりずらいので、「ブロック」スプライトのX座標を棒を描きたい位置のX座標に変更してから、それに合わせて棒を描くとぴったり合います。




棒が3本とも描けたら次に進みます。




レベル選択のボタンを作成する


Button3」のスプライトを追加します。

コスチュームの2番目は削除して、1番目を初級のボタンにします。

色などは好きな物にしましょう。





出来上がったら、初級を複製して中級を作ります。




同様に 初級中級上級神級 を作ります。

コスチュームの順番は 初級=1 ~ 神級=4 に並べ替えます。





スプライトの名前を「初級」X座標=-180Y座標=-123 にします。

コスチュームは番号1(初級)に合わせておきましょう。



まずはここまでにして次に進みます。




ブロックを移動させるボタンを作成する


ブロックを押すボタンの範囲は、各棒の回りに広めにとります。

隣に重ならないぐらいの幅にするよう気を付けましょう。


さっそく作っていきます。



新しいスプライトを「描く」で作成し名前を「中範囲」にします。

コスチュームで中心にボタン範囲の四角を描きます。

コスチュームの名前は「押せる」 にします。






「押せる」を複製して「押せない」を作ります。

色は変えても変えなくてもよいです。




ここまでで次に進みます。





「やり直す」ボタンを作る


Button3」スプライトを追加します。

コスチュームの2番目を削除して、1番目を「やり直す」ボタンにします。


好きな色に変えて、テキストで「やり直す」を描きましょう。



スプライトを X座標=208Y座標=-163大きさ=60 にします。





次に進みます。




タイトルとゲームクリアを作る


新しいスプライトを「描く」で作成します。


スプライトの名前を「タイトル」、X座標=0Y座標=0にします。



テキストを使ってタイトル文字 「ハノイの塔」を描きます。






2番目のコスチュームを「描く」で作成して、テキストで「ゲームクリア」を描きます。





これで表示する画像の準備は完了です。




コードを書く


プログラミングの詳細はプロジェクトの中身を実際に見たほうがわかりやすいと思います。

概要だけ説明します。



変数とリスト


■追加した変数:

※全部「すべてのスプライト用」で作っています


ゲームクリア:  ゲームをクリアしたかどうか(達成、未達)

レベル:選択したレベルの番号(0~8)

作るブロック:ブロックをクローンするときの番号(1~8)

動かした数:ブロックを移動させた手数(0~)

抜いたブロック:持ち上げているブロックの番号(0~8)

抜いた棒:持ち上げたブロックが刺さっていた棒の番号(0~3)




■追加したリスト:


ブロックの数:レベル番号別のブロックの数

棒右:右側の棒に刺さっているブロックの番号

棒左:左側の棒に刺さっているブロックの番号

棒中:真ん中の棒に刺さっているブロックの番号



作った変数やリストは、出来上がる最後まで表示チェックをONにしておくと動きがわかりやすいです。


動かした数」変数だけは最後まで表示ONにしておいてください。




「タイトル」のプログラムを書く


■ はたが押されたとき

リセットをする」メッセージを送って待つだけです。



■ (リセットする)を受け取ったとき

タイトルとレベル選択を行うシーンを表示するために、各変数、各リストの値を初期化します。


レベル」はプレイヤーが初級~神級を選択したときに値が決定されるので初期値は0です。

ブロックの数リストは次のような内容になります。

初級(1番目)=ブロック3個
中級(2番目)=ブロック4個
上級(3番目)=ブロック6個
神級(4番目)=ブロック8個



その他のリスト(棒左棒中棒右)の中身は空にします。
プレイヤーがレベルを選択してから中身を設定するためです。

※ リストの表示チェックをONにすると動きがわかりやすいです


最初はタイトル文字を表示するので、コスチュームをタイトルにしておきます。




■ (ゲーム開始)を受け取ったとき


プレイヤーがレベルを選択した後に棒左のリストの中身を初期化します。


棒左、棒中、棒右の各リストには最後に0を追加しておきます。

これは、ブロックが何も刺さっていないことを識別するためです。


設定が終わったらゲーム中なのでタイトル文字を消すため「隠す」で表示を消しています。




■ (ゲーム達成)を受け取ったとき


ゲームクリア」を表示するためコスチュームを変更して「表示する」で画面にだします。





レベル選択ボタンのコードを書いて複製する


レベル選択ボタンの「初級」にコードを作っていきます。



■ はたが押されたとき

実行されてからずっと、自分のボタンが押されるのを監視します。


自分のボタンが押されたかどうかの判定条件は次のとおりです。

  • 「レベル」変数が0であること
  • マウスのポインターが自身の画像に触れている事
  • マウスが押された状態であること

上記3つの条件を全て満たした場合は、自分のボタンが押された処理を行います。



自分に設定されているコスチューム番号 = レベル番号 になります。


なので、自分のボタンが押されたら「レベル」に自分のコスチューム番号を格納します。
この時点で「レベル」が0ではなくなったため、レベル選択ボタンが押されることはありません。


ゲームを開始する準備ができたので、「ゲームを開始」メッセージを送ります。




■ (リセットする)を受け取ったとき


リセット後はレベル選択になるので、レベル選択ボタンを「表示する」にします。




■ (ゲーム開始)を受け取ったとき


ゲーム中はレベル選択ボタンは表示しないので、「隠す」にします。



中級 ~ 神級を複製する


初級」のレベル選択ボタンが完成したので、「初級」のスプライトを複製します。

複製したスプライトの名前を「中級」にして、コスチュームを2番目に変えます。
中級」を X座標=-60 にします。

同様に「初級」を複製して名前を「上級」にして、コスチュームを3番目に変えます。
上級」を X座標=60 にします。

同様に「初級」を複製して名前を「神級」にして、コスチュームを4番目に変えます。
神級」を X座標=180 にします。



これでレベル選択画面が完成しました。





ブロック移動ボタンのコードを書いて複製する



■ はたが押されたとき


ブロック移動範囲はうっすら見えるように「幽霊」の効果を使います。

幽霊」の効果を80ぐらいにして「隠す」で非表示にしておきます。




■ (リセットする)を受け取ったとき


スプライトは「隠す」にしていても「マウスのポインターに触れた」の判定が有効になっているので、コスチュームを「押せない」にして隠しておきます。




■ (ゲーム開始)を受け取ったとき


移動させるブロックよりも常に後ろに表示させておきたいので、「最背面」へ移動しておきます。


ゲーム中はずっとボタンが押されたかどうかを監視します。


ボタンが押されたかどうかの判定はレベル選択ボタンとほとんど同じですが、次の条件が追加されています。

  • ゲームクリアしていないこと


マウスが押され続けている間は何度もこの条件を通過してしまうので、押された処理を実行したら、マウスが離されるまでコスチュームを「押せない」にしておきます。

「押せない」コスチュームのときは何もしません。



ボタンが押された後は、「抜いたブロック」にブロック番号が入っているかどうかで処理が変わります。


「抜いたブロック」が0のときは、棒中 リストの1番目の値を取り出して「抜いたブロック」に格納します。


「抜いたブロック」が0以外のときは、抜いたブロック」の値を取り出して棒中 リストの1番目に挿入します。


「抜いたブロック」を元の棒に戻すときは手数を増やさないようにします。




左範囲と右範囲を複製する


「中範囲」スプライトを複製して「左範囲」スプライトを作成します。

そして、 棒中 リストを使っているコードを全て 棒左 リストに変えます。
左範囲」を X座標=-120 にします。


同様に、「中範囲」スプライトを複製して「右範囲」スプライトを作成し 棒中 リストを使っているコードを全て 棒右 リストに変えます。
右範囲」を X座標=120 にします。


また、「右範囲」はブロックのゴールになるのでコスチュームの色を変えました
幽霊」の効果も20にして透明度を低くしています。

そのため、棒が見えづらくなるためコスチューム自体に棒を描くようにしました。




「やり直す」ボタンのコードを書く



■ はたが押されたとき


レベル選択ボタンと同じようにボタンが押されたかどうかを監視します。

ゲーム中に表示されるボタンなので、「レベル」が0以外のときにボタンを押せるようにしてあります。


ボタンが押されたら、「リセットする」メッセージを送るだけです。



■ (リセットする)を受け取ったとき


タイトルとレベル選択画面では非表示にします。



■ (ゲーム開始)を受け取ったとき

ゲーム中は表示にします。

※いつでもリセットできるようにします



ここまでできたら、変数とリストの表示をチェックして画面に出すとほぼゲームができてしまいます





最後にブロックの移動でゲームが遊べるようにしていきます。




ブロックのコードを書いてクローンする



■ (リセットする)を受け取ったとき


自身がクローンされていれば削除します。




■ (ゲーム開始)を受け取ったとき


棒左 リストに登録されたブロック番号のブロックをクローンします。

※このメッセージをうけとれるのはオリジナルだけです



■ 最初のブロックを積む


ブロックの ① から順にレベル別のブロック数だけクローンをしていきます。



■ クローンされたとき


自分のブロック番号のコスチュームに変更した後、ずっと棒左棒中棒右の各リストと「抜いたブロック」を監視して、自身の座標を適切な位置に移動させます。



■ 棒左に表示、棒中に表示、棒右に表示


各棒 のリスト内に自身のブロックの番号が見つかれば、その位置に座標を変更します。

ただし、ブロック番号=① を 棒右 に表示するときに「ゲームクリア」判定を行うようにしています。



■ 抜いた棒に表示


ブロックが「抜いたブロック」にある場合は、抜かれた棒の上に座標を変更します。


これで、ブロック表示でゲームがプレイできるようになりました。






おわりに


作った内容を簡単に説明しました。

スクラッチの便利な機能を使ったおかげで、コードが少なくすることができました。

実際にプロジェクトをみてさわってもらえると、より理解しやすいと思います。


シンプルな題材ですが意外とゲームっぽく仕上がるので良かったかなと思います。

この記事を最後まで読んで頂きありがとうございました。


他の作品記事もよければ読んでみてください。


このブログを検索

ブログをよくする

自己紹介

自分の写真
はじめまして。はるはるです。 中2の息子と小5の娘を抱える2児の父です。今はゲーム会社で働いています。 子供のプログラミング学習に協力できるように教え方を勉強中です。 このブログでは簡単なゲームを作りながら自分が学んだことを少しずつ共有していきます。 情報処理の試験をたまに受けます。 第二種情報処理技術者 ソフトウェア開発技術者 基本情報処理技術者 応用情報処理技術者 twitter: https://twitter.com/amaruchan007

連絡フォーム

名前

メール *

メッセージ *

ブログ アーカイブ

QooQ