小中高生向けプログラミングスクールTechChance!

【小学生必見】スクラッチの操作方法を解説【ゲームサンプルあり】

WRITER
 
この記事を書いている人 - WRITER -
プログラミング教室TechChance!の運営担当。 広島県広島市出身。広島大学総合科学部数理情報科学コース卒業。 大学2年生の時にプログラミングの魅力に引き込まれ、アプリ開発やゲーム開発、Webサイト制作など幅広い分野でのプログラミングの知識と技術をベースに、立ち上げ当時からテックチャンスの運営に携わる。 大学受験進学塾「広大研」の数学科講師としてのスキルも生かし、教材作成力と指導力を駆使して、小中高生のプログラミンングへの好奇心とモチベーションを刺激するべく日々奮闘している。

こんにちは!テックチャンスブログ編集部の國貞です!

以前の記事で、小学生でも学べるプログラミング教材としてスクラッチをご紹介しました!

 

記事を読んで

「何か作ってみたい!」

「どうやって作るんだろう?」

と思った方も多いと思います!

 

そこで今回は、スクラッチの使い方を、実際にゲームを作りながら解説していこうと思います!

一緒に取り組んでみてプログラミングに興味を持ったときは、ぜひテックチャンスの体験授業を受けにきてくださいね!

 

それでは早速始めていきましょう!

※ このブログでは「スクラッチ3.0」を使って解説を行っています。

 

今回スクラッチで作るゲーム

 

ゲームを作りながら、一緒にスクラッチの操作方法を覚えていきましょう!

 

今回作るゲームは「りんごエスケープ」です!

飛んでくるりんごをジャンプでかわしていきましょう!

りんごに当たったらゲームオーバーです!

 

 

それではいよいよスクラッチの使い方からみていきましょう!

 

スクラッチの基本操作

 

以下のリンクからスクラッチのトップページを開いてみましょう!

https://scratch.mit.edu/

 

マウスを操作して左上の「作る」「左クリック」します。

 

すると次のようにスクラッチのゲーム作成画面が出てきます。

 

画面は大きく5つの部分に分かれていて、それぞれブロック画面プログラム画面ゲーム実行画面スプライト画面ステージ画面となっています。

主に使っていく画面は、ブロック画面プログラム画面ゲーム実行画面となります!

 

それでは、画面にいるネコをプログラムで動かしていきましょう!

 

プログラムの作り方

 

プログラムは、左側のブロックを組み合わせることで作ることができます。

ブロックはマウスを使って操作します。

ブロックの操作は「ドラッグ」という方法で行います。

 

「ドラッグ」は、マウスの左クリックを押さえたままマウスを動かすことで、ブロックを指定の場所まで移動することができます。

 

使うブロックをプログラム画面へ移動しながら組み合わせていきます。

一番上の「10歩動かす」のブロックを、右のプログラム画面へ「ドラッグ」してみましょう!

 

うまく移動できましたか?

 

移動したブロックがやっぱり必要ない場合は、左のブロックがあったところ(どこでも大丈夫)にドラッグすると消すことができます。

※使わないブロックは左へ移動して消す!

 

ブロックには種類があり、そのブロックの性質によって色分けされています。

様々な命令が書かれたブロックをタテにつなげていくことによって、複雑な命令を完成させます。

 

背景画面の設定

 

それではここからゲームを作っていきます!

まずは背景を設定しましょう!

画面右下のボタンから背景にする画像を選びます。

 

今回は背景として、「Blue Sky」を選びました!

 

 

ゲーム実行画面がこのようになっていればOKです!

 

 

次はネコがジャンプするようにプログラムしてみましょう!

 

ネコのプログラムを作る

 

今スプライト画面に注目すると、「スプライト1」という名前のネコのキャラクターが選択されていますね!

この状態でプログラム画面にブロックを組み合わせると、ネコを動かすことができるようになります!

 

ネコを移動する

 

まずはゲーム開始時点でネコを地面の上に移動させましょう。

 

ブロック画面の左側から黄色の「イベント」をクリックしてみましょう!

表示されるブロックが黄色に変わるはずです。

そのブロックの中から、一番上の「旗が押されたとき」というブロックをプログラム画面に「ドラッグ」します。

 

 

これで、このブロックの下につなげたブロックは旗が押されたあとに順番に実行されます

このブロックの下に、ネコの場所を変更するブロックを組み合わせてみましょう。

 

ブロック画面の左側から青色の「動き」をクリックして、「x座標を◯、y座標を◯にする」というブロックを探しましょう!

そして、先ほどのブロックの下に「ドラッグ」します。

組み合わせるときは、グレーの影が出るまでブロック同士を近づけてください。

 

 

ブロック同士がくっついたら、ブロックに書いてある数字を変えていきます。

 

「y座標を◯にする」の◯の中を「-120」に書き換えてみてください!

※ 数字をクリックすると入力できるようになります。

 

 

そうしたら、プログラム実行画面左上の緑の旗をクリックしてみましょう!

今作ったプログラムが実行されて、ネコの位置が変わりましたね!

 

 

※ 余裕があるひとは、◯の中の数字をいろいろ変えて、どのように変わるか試してみてください!

 

ネコをジャンプさせる

 

次はいよいよネコをジャンプさせてみましょう!

ちょっとレベルが上がるので、頑張ってついてきてください!

 

左のブロック画面から、オレンジ色の「制御(せいぎょ)」をクリックします。

 

オレンジ色のブロックの中から「ずっと」と書かれたブロックを、先ほど作ったブロックの下に「ドラッグ」します。

 

 

さらに、同じオレンジ色のブロックから、今度は「もし<>なら」というブロックを探して、先ほどの「ずっと」ブロックの【中に】「ドラッグ」します!

 

 

この「ずっと」や「もし<>なら」は、制御構文(せいぎょこうぶん)と呼ばれていて、プログラミングではとても便利な、なくてはならない仕組みです。

 

これらを効果的に組み合わせることによって、シンプルかつ複雑なプログラムを作ることができるようになります!

 

少しずつ覚えていきましょう!

 

さて、「もし<>なら」「<>」の中に【条件】を入れていきましょう!

 

ここではジャンプするための条件を入れます。

 

今回のジャンプは「スペースキー」が押されたときに飛び上がるようにしていきましょう。

 

ブロック画面の右側から水色の「調べる」をクリックします。

 

水色のブロックの中から「スペースキーが押された」というブロックを「<>」の中に「ドラッグ」します!

 

下のように、「<>」にブロックを近づけていって、フチが白く光ったら離すタイミングです!

 

 

ここまでのプログラムは次のように処理されます。

 

①  旗が押されたら

②  ネコの位置を、x座標が0、y座標が-120に移動する

③ 「ずっと」【その中身】を実行する

④ 「もしスペースキーが押されたとき」には【その中身】を実行する

 

そして、スペースキーが押されたときに実行するのは「ジャンプ」ですね!

 

今回は簡単なジャンプを実行してみましょう!

 

「もし<スペースキーが押された>なら」の中身にブロックを追加していきます!

 

ブロック画面左側の青色の「動き」をクリックして、青色のブロック中から、「y座標を◯ずつ変える」「もし<>なら」の中「ドラッグ」します。

さらに数字の部分を「100」に書き換えましょう!

 

 

ここで、ゲーム実行画面左上の旗を押してみましょう!

スペースキーを押すと、ネコが空中に移動しますね!プログラムが正しく動いています!

ただ、このままだとネコが戻ってこないので、きちんと地上に戻ってくるようにしていきます!

 

先ほどのブロックの下に、先ほどと同じ「y座標を◯ずつ動かす」「ドラッグ」して、数字を「-100」に変えます!

 

 

しかし、これで旗を押してゲームを始めると、スペースキーを押してもネコがジャンプしてくれません…

 

これはブロック1つ1つの実行速度が早すぎて一瞬でネコが上下するため、結果的に全く動いていないように見えるからです。

 

なので、「y座標を100ずつ変える」と「y座標を-100ずつ変える」の間に、少し待つためのブロックをはさみます。

 

ブロック画面左側のオレンジ色の「制御(せいぎょ)」をクリックし、オレンジ色のブロックの「1秒待つ」というブロックを、先ほどの2つのブロックの間に「ドラッグ」してみましょう!

 

また、中の数字は「0.7」に変えておきましょう!

 

 

これでジャンプするプログラムは完成です!

 

旗を押してプログラムを実行してみましょう!

スペースキーを押すと、ネコがジャンプします!

 

ここまで順調に完成しましたか?

次はいよいよ、飛んでくる「りんご」をプログラムしていきますよ!

 

りんごのプログラムを作る

 

いま画面にはネコしかいませんね。

なので、りんごは新しく用意する必要があります!

 

りんごのスプライトを追加する

 

まずゲーム画面にりんごを用意します!

ネコやりんごなどのキャラクターをスクラッチでは「スプライト」と呼びます。

スプライトを追加するには、スプライト画面右下の図のボタンをクリックします!

 

 

スプライトの一覧画面が開くので、「りんご」を探してクリックしましょう!

 

 

これでスプライト画面とゲーム実行画面に「りんご」が追加されました。

プログラム画面はりんご専用のプログラム画面に切り替わったので、まだ何もブロックが置かれてないですね!

 

 

クローンを利用する

 

りんごは右から次々と飛んでくるから、今回は「クローン」っていう仕組みを使ってプログラムしていくよ!

まずは次のようにプログラムしていこう!

 

左のブロック画面から、適切なブロックを選んで組み合わせてみてね!

※ ブロックの色を頼りに探すとわかりやすいかも!

 

 

これで、旗が押されたときに、1秒ごとにクローンが作られるよ!

 

クローンができる条件を少しゲーム用にアレンジしていこう!

 

新しいブロックを使うよ!

 

ブロック画面の左側から緑色の「演算(えんざん)」をクリックして、緑色の「1から10までの乱数」といううブロックを、さっきの「1秒待つ」の「1」の部分に入れてみよう!

 

 

次のようにハマっていればOKだよ!

 

 

さらに、数字をそれぞれ「2」と「4」に変えてこう!

 

 

旗を押してゲームを始めてみよう!

実はまだクローンは出てこないんだ。

 

次はクローンが作られたら、そのあとどのように動くのかをプログラムしていこう!

 

クローンを出そう

 

クローンを出すには、オレンジ色の「制御(せいぎょ)」をクリックして、オレンジ色のブロックから「クローンされたとき」をドラッグするよ。

 

 

このブロックの下に、クローンされた「りんご」のプログラムを組み合わせていきましょう!

 

次のようにブロックを組み合わせてみてね!

※ ブロックの色に注目するとわかりやすいです!

 

 

旗を押してゲームを実行してみると、りんごが右から流れてくるね!

 

ただし、問題が2つあるんだ。

 

① 頭の上のりんごがずっとある

②流れてきたりんごが左端にたまっている

 

それじゃあ、もう少しプログラムを直してよりゲームらしくしていきましょう!

 

ブロック画面の右側から紫色の「見た目」をクリックして、「隠す」「表示する」ブロックを次のように「ドラッグ」してみましょう!

 

 

もういちど、旗を押してゲームを実行すると、頭の上のりんごが表示されなくなりましたね

 

これは

 

最初はりんごを隠して(見えなくして)、クローンが作られたあとのりんごだけ表示するようにしているんです!

 

次は左端にたまったりんごを消していきましょう!

次のようにプログラムしていきます!

どちらも「制御(せいぎょ)」のオレンジのブロックの中にありますね。

 

 

この「もし<>なら」の条件が難しいです。

 

まず、ブロッック画面の右側の「演算(えんざん)」から「◯<50」のブロックを探してきて、「<>」の中に「ドラッグ」します。

 

 

そのブロックの「◯」のなかに、ブロック画面の左の青色の「動き」をクリックして、少し下の方の「x座標」「ドラッグ」します!

 

 

右の数字の「50」を「-180」に変えておきましょう!

 

 

旗を押してゲームを実行してみよう!

りんごが右から現れて、流れてくるね!

 

できたかな?流れてくるりんごをジャンプでよけてみよう!

 

当たったらわかるようにしてみよう!

 

ここまででほとんど完成なんだけど、ネコとりんごが当たったかどうかいまいちわかりにくいね…

 

最後におまけで、ネコがりんごに当たったらわかるようにしてみよう!

 

今度はネコのプログラムを改良していくよ!

 

スプライトを切り替える

 

プログラムするスプライトを切り替えるときは、スプライト画面からプログラムしたいスプライトをクリックしよう!

 

 

次のように、ネコのプログラムに切り替わったかな?

 

 

それじゃあプログラムを次のようにしてみよう!

同じようにプログラムできるかな?

 

 

ここまでできた君は、もうスクラッチ初心者を卒業だ!

 

遊んでみよう!

 

旗を押してゲームを遊んでみよう

スペースキーを押すと、「ネコ」がジャンプして「りんご」をよけるよ!

 

 

りんごに当たると全ての動きが止まっちゃうね!

 

ゲーム完成おめでとう!!

 

まとめ

 

さらにプログラミングを学んでいくと、より本格的なゲームを作ることもできるようになるよ!

 

次のページは今回のゲームをもう少しアレンジして動きをリアルにしてみたよ!

重力ジャンプでバナナエスケープ

ぜひ遊んでみてね!

 

実際にスクラッチでゲームを作ってみていかがでしたか?

「もっと学んでみたい!」

「どうやってプログラミングを学んだらいいか分からない…」

という場合はプログラミングスクールを検討してみるのもいいですね!

プログラミング教室テックチャンスでは毎週定期的に無料体験授業を行なっています。

小学校低学年のお子様には、キーボード入力不要でブロックを組み合わせながらビジュアル型プログラミングを学べる「Scratchプログラミングコース」

小学校高学年〜高校生のお子様には実際にキーボードでプログラムを打ち込み、マインクラフトの世界でロボットを思い通りに動かしながらテキスト型プログラミングが学べる「マインクラフトプログラミングコース」

プログラミングに慣れてきたら自分の手でアプリやゲームを開発できる「Unityアプリ・ゲーム開発コース」

お子様のレベルに合わせたコースを多数ご用意しています!

まずは無料体験授業へお越しください!一緒に楽しくプログラミングを学びましょう!

この記事を書いている人 - WRITER -
プログラミング教室TechChance!の運営担当。 広島県広島市出身。広島大学総合科学部数理情報科学コース卒業。 大学2年生の時にプログラミングの魅力に引き込まれ、アプリ開発やゲーム開発、Webサイト制作など幅広い分野でのプログラミングの知識と技術をベースに、立ち上げ当時からテックチャンスの運営に携わる。 大学受験進学塾「広大研」の数学科講師としてのスキルも生かし、教材作成力と指導力を駆使して、小中高生のプログラミンングへの好奇心とモチベーションを刺激するべく日々奮闘している。

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© TechChance! 公式ブログ , 2021 All Rights Reserved.