Scratchで簡単なゲームを作る Part 1

## はじめに

この記事はQiita株式会社の行っている小学校向けの出張授業の内容を記事化したものになります

- プレスリリースの記事
    - [日本最大級のエンジニアコミュニティ「Qiita」が小学生向けプログラミング教育を支援](https://corp.qiita.com/releases/2022/09/school-visit-20220927/)

# 今回作るゲームについて

今回はScratchでこちらのコウモリを捕まえるゲームを作っていきます
左右の移動とジャンプでコウモリくんを捕まえるゲームになります


こののゲームは下のサイトで遊ぶことができます

https://scratch.mit.edu/projects/694608738

このゲームで学べることは4点です
- キーボード入力での操作の作り方
- 条件分岐(もし〇〇ならXXする)
- ループ（○回繰り返す）
- 変数の使い方

プログラミングの基本的なことを一通り体験することができます

## ゲームを作り始める

https://scratch.mit.edu/ 

Scratch のサイトにアクセスしましょう

![スクリーンショット 2022-05-22 19.11.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/fd3c7267-266e-3cf8-031f-ba3562bfc068.png)

サイトの作るをクリックしてプロジェクトを作成しましょう

![scratch.mit.edu_projects_editor__tutorial=getStarted.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/80d21e48-6862-7c5e-2672-9af232abaedc.png)

こちらの画面でゲームのプログラミングを行っていきます

![scratch.mit.edu_projects_editor__tutorial=getStarted (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/85fb6fcd-043a-6e82-cbbe-d2e3184475cf.png)

ここからは画面のそれぞれの使い方をざっくり解説していきます

### コード置き場

プログラムを組み立てていく場所になります

### ステージ

作ったプログラムの動きを確認する場所になります

### コードブロック

コード置き場に移動するプログラムのパーツの置き場になります

### スプライト

スプライトはこの画面でいえばネコのキャラクター(スクラッチキャット)のことです
ここの画面でスプライトの追加や編集などを行っていきます
ここで選んだスプライトに対しての動きをコードブロックで組み立てていきます

### 背景

背景を変更する画面になります

## 下準備を行う

### 背景の設定

まず背景の設定を行なっていきます

![スクリーンショット 2022-05-25 8.57.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/4ad5e395-f185-7b8c-73ec-4c8496b9d230.png)

背景の下部のボタンを背景を選ぶをクリックします

![scratch.mit.edu_projects_editor__tutorial=getStarted (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/e2dfa9f8-5c4c-1764-8f88-b072ead86581.png)

この中から好きな背景をクリックしてください

![scratch.mit.edu_projects_editor__tutorial=getStarted (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/c0d0f767-ca7f-62aa-1299-b202da92bdae.png)

ステージに選んだ背景が表示されています
これで背景の設定は完了です

### スプライトを配置

このままではスプライトが浮いてしまっているので地面に移動します
ステージ上のスプライトをクリックしながら移動することで配置することができます

![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/7bd8034e-7fc6-403c-cb36-9f5eb22e81e0.gif)


## プログラミングをはじめる

では動きを作っていきましょう

### 右に動くを作る

キーボード上の → キーを押すことでキャラクターが右に動くプログラムを作っていきます

![scratch.mit.edu_projects_editor__tutorial=getStarted (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/f1e07420-5fcf-be0d-e4f5-85c597a23178.png)

コードブロック内の動きを選択して10歩動かすをコード置き場に移動させてください

![scratch.mit.edu_projects_editor__tutorial=getStarted (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/a563f34e-e26e-8259-01e2-e261f4968a81.png)

コードブロック内のイベントを選択してスペースキーが押されたときをコード置き場の10歩動かすにの上にくっつけるように配置してください
このようにブロックをくっつけていくことで1つのプログラムとして動いてくれます

![スクリーンショット 2022-05-25 9.31.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/3282ff44-db8d-4efd-fe37-bb76ab24e786.png)

このままではスペースが押された時に右に動くのでスペースの部分をクリックして右向き矢印に変更します
ここまで完成したら実際に→キーを押してキャラクターが右に動くことを確認しましょう

### アニメーションをつける

今はキャラクターが横にスライドしているように見えます
2つの絵を使ってキャラクターが動くアニメーションをつけましょう

![スクリーンショット 2022-10-13 12.17.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/7a5b8446-4dfa-48b2-30c1-e187de0bde66.png)


![スクリーンショット 2022-10-13 12.04.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/a87bd87d-44e9-01a4-c286-663cd309cb85.png)

見た目のコードブロックには表示に関係するコードが入っています
次のコスチュームにするを10歩動かすの上に近づけると差し込むことができます
完成したら実際に→キーを押してキャラクターの動きを確認しましょう

ここまでで「右向き矢印キーが押されたとき」といったイベントを起点に見た目を変えて10歩動かすプログラムが完成しました

### 左に動くを作る

今度は反対の左側にも動くことができるようにしましょう

![スクリーンショット 2022-10-13 12.23.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/efec4436-d34c-ea91-606a-4d0e90f5956b.png)

まず右に動くプログラムをコピーしましょう
コードブロック状で右クリックをすることで複製することができます

![スクリーンショット 2022-10-13 12.30.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/4bd8fd65-667a-1335-a8d5-36d3bbe8b17f.png)

複製できたら右向き矢印を左向き矢印に変更します
ここまで完成したら実際に←キーを押してキャラクターの動きを確認してみましょう
まだ右に10歩動いてしまします

では左向きに動くように変更しましょう

![スクリーンショット 2022-10-13 12.33.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/b91af0ed-9899-5863-4d50-812a306b71c7.png)

左向き矢印キーが押されたときの下に動きのコードブロックの90度に向けるを差し込んでみましょう

![スクリーンショット 2022-10-13 12.37.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/307abc43-1f26-72d6-0e31-889be0b76578.png)

90度に向けるの90のところをクリックすると時計のような表示がでてくるので左向きになるように矢印を動かしましょう
時計のような表示がでてこない場合は-90と入力することでも変更することができます

ここまで完成したら実際に←キーを押してキャラクターの動きを確認してみましょう

![スクリーンショット 2022-10-13 12.40.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/c6dafa9d-2696-8a5c-6d1c-58f96a90995f.png)

キャラクターが逆さまになってしまいます
なので動きのコードブロックの回転方向を左右のみにするを追加します

![スクリーンショット 2022-10-13 12.43.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/a65275bf-1dbf-4a2e-f619-20f33592ef44.png)

最後にいまのままでは右側に動かなくなっているので右側に90度に向けるを追加しましょう

![スクリーンショット 2022-10-13 14.02.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316631/acf79201-041a-bfb2-e26b-a99f2f49a531.png)


これで左右にキャラクターを動かすことができるようになりました

### まとめ

今回の記事でキーボード入力での操作の作り方をご紹介しました


### 次の記事

https://qiita.com/kiitan/items/c0bf592f69fedba87932