【Scratch入門〜中級編】Scratchで簡単なスネークゲームを作ろう！

2021/11/28

2022/08/22

【Scratch入門〜中級編】十字キーのスプライトを使ってタッチパネルからゲームを操作する方法

Pスクール厳選・優良な教材プログラムの紹介コーナー③ 〜ヘビゲーム編

【Scratch入門〜中級編】アドバンスなグラフィックエフェクトを使いこなす

前回は

Scratchで作られた簡単なスネークゲームを紹介

しました。

Pスクール厳選・優良な教材プログラムの紹介コーナー③ 〜ヘビゲーム編

Scratchのプログラミング学習で参考になる『ヘビゲーム』の中身を簡単に紹介します。

スネークゲームはScratchだけでなく、いろいろな他のプログラミング言語学習の初心者入門の題材としても良く取り上げやすい課題です。

一度実装を覚えておくと、別の言語を習得する際に役に立つかも知れません。

この記事では、そんなスネークゲームのプログラムを一から作ってみるまでを解説していきましょう。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

はじめに

Scratchプログラミングを始める前に、この記事では

変数

や

クローン

などのテクニックを既に理解されていること前提で進めていきます。

もし解説中のプログラミングの内容で、

「このブログの使い方が分からない！」とか「リストってどう使うんだ！」

等の疑問になったときは、以下のテクニックまとめ記事から分からなかったパートの説明記事をさがしてみてください。

【Scratch講座・保存版】Scratchの基礎〜中級記事リンクまとめ

これまで紹介してきたScratchの基礎〜中級レベルの記事を取りまとめた内部リンク集です。

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

ヘビを動かす・餌を置く〜基本機能を実装する

スネークゲームの紹介記事

でも紹介させていただいた、こちらの

プロジェクト

を参考に、どのように作られているのかをじっくり見ていきましょう。

なお以下が

本家のスネークゲーム

になります。

ヘビの動作〜まずは頭だけ動かす

いきなり完成プログラム全体を作っていくと頭が混乱してバグを生みやすいので、まずはヘビの頭の部分にあたるスプライトの動きを作成してみます。

適当な名前でScratchプロジェクトを新規作成し、さらにスプライトも新規作成しましょう。

新しく出来たスプライトに、以下のように大きさ

32×32

の枠線なしの正方形のコスチュームを作ります。

これをヘビの頭部分と見なして動かしていきます。

ひとまずコスチュームはこれだけ作成しておいて、ヘビのスプライトを選択して、ブロックコードをプログラミングしていきます。

まずは以下の変数の準備します。

開く/閉じる

            
            - ながさ:
    ヘビの長さ(頭は除く)を表します
- よこ:
    ヘビの横移動の進行方向を表します。
    1で右、-1で左、0は横移動しません
- たて:
    ヘビの縦移動の進行方向を表します。
    1で上、-1で下、0は縦移動しません
- そくど:
    ヘビの移動する一回分の移動量を示します

プログラムがスタートしてからキーボードの矢印キーが押された際に、スプライトに上下左右に移動が切り替えられるように、以下のブロックのようにキーボード処理を設置します。

プログラムのメインループを以下のように作成します。

ずっと

ループに入る前に、スプライトの座標位置、大きさ、各変数の初期化を行います。

このプログラムは上下左右の矢印キーに従って、正方形のスプライトが正しく動くことを確認しているだけです。

このサンプルプロジェクトは

こちら

です。

ここまでは特に難しくはないと思います。

では、次なる機能の作成に進みましょう。

エサの出現パターンを実装する

エサを出現させて、ヘビが食べるところまでを作成します。

まずはエサとなるスプライト(今回はリンゴ)をライブラリから

Apple(リンゴ)

を呼び出して使います。

このエサのスプライトは直接は使わず、クローンしたものを利用します。

プログラムがスタートした直後に大きさを適当なサイズに調整してから、非表示のままにしておくため

隠す

で画面から消しておきます。

ヘビ(正方形)のスプライト側に戻って、以下のようにメイン処理のブロックを修正してみます。

ここではエサ(りんご)のスプライトのクローンを作るタイミングが追加になっています。

ずっと

ループの中の、

もし<<Apple>に触れた>なら

条件ブロックで、ヘビがエサを食べた直後に、新しいエサをクローンによって生成させています。

ヘビがエサを食べたら、このループは

えさをたべた

イベントを送ってループの動作を一旦止めます。

<〇〇(イベント)>を送って待つ

ブロックは、そのイベントを受け取った他のスクリプトの処理が全て完了するまで処理が再開するのを待つ際に使います。

ここでは何を待っているかというと、エサのクローンを削除するまで待機させるために使います。

エサ側のスプライトに戻って、以下のようにブロックを仕込みましょう。

エサのクローンを確実に消去した後で、再度

<Apple>のクローンを作る

ブロックで次のエサのクローンを生成します。

このエサのスプライトがクローンされた時の挙動を以下のように定義しましょう。

これでヘビの頭(ここでは正方形のスプライト)がエサに当たるまで、画面のランダムな位置に現れるようになります。

ここでの

<<●色に触れた> ではない> まで繰り返す

ブロックで、クローンがヘビに当たるまではずっとその状態を持続しておくようにしておけます。

逆にクローンされる際に、この条件ブロックがないと、クローンの終了条件がないので、クローンの数はその都度増殖し、さらにプログラム終了まで消えずにクローンがずっと居座り続けることになります。

ひとまずこれで、正方形のスプライトが、ランダムに現れるエサをひたすら追いかけるだけのプログラムになりました。

このサンプルプロジェクトは

こちら

です。

さらに機能を追加するため、次に進みます。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

付加的な機能を実装する〜スコアを付ける・壁に当たると終了する

先程までのプログラムだと、ヘビがいくら壁面に当たって死なないので、画面外側に色付きの枠線を設けて、その枠線の色に触れてもゲームが終了するように仕立て直します。

まずは背景のコスチュームを新規作成し、ステージの外枠を囲うように適当な色で枠線を描きます。

ヘビ(正方形)のスプライトのコード部分に戻り、メインのブロックコードを以下のように修正します。

この修正の内容は簡単で、先程作成した枠線の色に当たるとプログラムが終了するだけです。

またスネークゲームはエサを食べてどこまでヘビを長くできるかを競うゲームですので、スコア結果は

ヘビの長さ

そのものになります。

スコアとして、終了時に

ながさ

を言ってプログラムを終了させます。

ここまでで完成したプログラムは以下です。

このサンプルプロジェクトは

こちら

です。

ヘビの胴体を増やす＆繋げる

次にエサを食べると胴体が伸びる、という処理をここから作ります。

まずは理解しやすいように、

胴体の長さ１(=ヘビの長さは２)

のプログラムで動くかどうかやってみましょう。

まずはここで、頭を覗く胴体の座標を記憶しておくための空のリスト(配列)をヘビという名前で新規作成しておきます。

ヘビが動く度に、その頭が通った座標を記録するために利用するリストです。

今回、記録すべき座標(xとyセット)は、ヘビの頭を除く、胴体の数×２が必要です。

このヘビゲームでは、リストをどう使うかを理解するのが重要になります。

またここからはヘビの描画も、スプライトの表示/非表示を直接切り替えるやり方ではなく、

拡張機能のペン

を使うやり方に変えます。

拡張機能は画面左下のアイコンをクリックし、

ペン

を選択することでブロックパレットで利用できるようになります。

ではヘビ(正方形)のスプライトのメインブロックを以下のように変更してみましょう。

上の図でコメント形式に説明を加えたもの以外を解説します。

まず

①

の箇所ですが、リスト(

ヘビ

)の最後に現在の

x座標

、

y座標

の順番で追加します。

これは現在のスプライトの位置(ヘビの頭)が動くたびにリストへ追加する形で記録され続けます。

ずっと座標が記録され続けても困るので、必要な記録だけはリストに残し、要らない座標データは捨て去る、という処理をどこかで作る必要があります。

その処理をしているのが

②

の箇所になります。

今回、プログラムのテストということで、ヘビの長さを２で固定しています。つまりヘビの頭に付いてくる胴体は１個ということです。

この胴体１つをどの位置に描画すると良いかは、一つ前にヘビの頭だった位置をリストに記録しておけば、そのリストをx座標とy座標を読み出してスタンプをすることで胴体が描けます。

ということは、

<<へびの長さ(配列の長さ)> / 2> + 1

が現在の

ながさ

よりも長い場合のx座標とy座標の記録は不要ですので、

しっぽをけす

というイベントを作って、リストから不要な座標データを消してあげる処理を作ります。

しっぽをけす

という名前にしているのは、ヘビの長さよりも長くなったときに、ヘビが通過した後の背景を元の無地に戻す、という処理を示しています。

ヘビが通過した背景を元に戻すため、背景の色に合わせてた正方形のコスチュームを新規追加しておきます。

しっぽをけす

イベントの実装は以下のようにします。

これで、リストに記録しているxとyのデータセットの長さ(リスト２個分の長さに注意)が、ヘビの長さよりも大きくなった時に、不要(もっとも古い１番目にあるデータ)になったxとy座標を使って、ペンで背景の色に戻しています。

メインの処理ブロックで最後残っていた

③

の箇所は、

ながさ

がヘビの長さ以下の時にそのままヘビのコスチュームが描画される処理です。

ということで、これらをプログラムに反映すると以下のように、長さ２のヘビが動き回ります。

このサンプルプロジェクトは

こちら

です。

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

ヘビゲームのプログラムを完成させる！

上記のパートまでで、大体のプログラムの実装ポイントを説明してきました。

ここいらで残りの処理を完成させてヘビゲーム全体を仕上げます。

まずは前のコードそのままでも良いのですが、進行方向を分かりやすくするためヘビの頭と胴体の色を少し変えてみます。

既存のコスチュームを複製してから、少し薄いピンクにしておきます。これをヘビの胴体の色として使います。

また、ヘビゲームでは、長くなった自分の胴体部分と当たってしまったときも、壁面にぶつかった時と同様、ゲームオーバーにする必要があります。

そこで、この胴体の色と同じ色を壁面にも指定しておきます。

ということで、ヘビのスプライトのメイン処理ブロックを以下のように修正します。

図中にちょっとした解説を加えた通りですので、さほど難しいポイントはないと思います。

①

の箇所は、ヘビの頭(スプライトの本体)と胴体(クローンのコスチュームからペンで描画)の描き分けをしていますので、ブロックの順序が乱れるとヘビが上手く描画されません。

最後にエサ(リンゴ)のスプライトの処理ブロックもヘビの色に合わせて条件を修正すれば終わりです。

以下がこの記事の解説で出来たヘビゲームになります。

このサンプルプロジェクトは

こちら

です。

少しヘビの動き回る位置やリンゴが表示される位置が微妙に噛み合わないので、気に入らなければ初期表示位置を修正してもらったり、コスチュームのサイズを座標を計算して描いてみたりと、各自工夫してみてください。

いろいろとプログラミング言語の練習題材としても使われるヘビゲームのScratch的実装方法でした。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

まとめ

簡単にヘビゲームを作成する手順をじっくり順を追って説明していきました。

今回のプログラミングで、特に難しいポイントとなるのは、

クローン

と

リスト

の利用法を良く理解していることでしょうか。

また、クローンと併用して使われる拡張機能の

ペン

も、通常のスプライトと背景画像の違いを良く知っていないと、ペンをなんとく使うだけではScratchプログラミングも上達しないでしょう。

疑問に思ったら、その都度ネット検索するか、このブログ記事無いのリンクを辿ってテクニックの裏の裏までその「なぜ」を調べて見てください。

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。

カテゴリー

記事のおしながき

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選