今回つくるゲーム
難易度
今回はブロック崩しゲームを作っていきます。スクラッチでつくるブロック崩しゲームは矢印キーで移動させますが、それではパソコンでしか遊べないので、気軽に遊べるようにスマホ対応にしていきます。
※スクラッチ初心者の方は、まずこちらの、
もぐらたたきゲームの作り方(初級)
からチャレンジしてみてください。
準備
まずは、こちらにアクセスして、リミックスをしてください。
ビンゴおじさん崩し(素材)
リミックスの方法が分からないという方はこちらの記事を参考にしてください。
こちらにはすでにおじさんブロックのスプライトが用意されています。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-11-22.01.13-1024x518.png?resize=1024%2C518&ssl=1)
おじさんブロックを並べる
おじさんを並べる方法は怒るおじさんゲームの作り方でもやりましたが、ここでは二重の繰り返しを活用してもう少しスマートなコードを書きます。
今回使うおじさんブロックが白色で、背景に溶けてしまうので、まず、背景に色をつけます。ステージの背景を選択して好きな色に塗りつぶしましょう。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-11-22.09.09.png?resize=943%2C609&ssl=1)
ここからおじさんブロックのスプライトに戻って、ブロックを並べるコードを書いていきます。
書くコードは下記の通りとなります。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-11-22.10.03.png?resize=834%2C562&ssl=1)
”行目”と”列目”の変数を作って、2重の繰り返しでクローンを作っていきます。
以下のように順番にクローンが作られていきます。
1行目・1列目→1行目・2列目→1行目・3列目→・・→1行目・10列目
2行目・1列目→2行目・2列目→2行目・3列目→・・→2行目・10列目
・
・
5行目・1列目→5行目・2列目→5行目・3列目→・・→5行目・10列目
そして、そのクローンをどこに配置するかが”クローンされたとき”に記述されます。
下図で解説している通り、例えば4行目・3列目だと
Xは-250に45を3回分足した場所になり
Yは180から20を4回引いた場所になります。
ここで45や20というのはブロックの大きさによりますので、自分でブロックを作る場合はその大きさに合わせて調整してください。
Xを-250から足しているのは(-240ではないのは)なるべく左端に始まりの位置をもってくるためです。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-11-23.37.03.png?resize=835%2C549&ssl=1)
緑の旗を押してみてください。おじさんブロックが整列すれば成功です。
バーを作る
つぎに玉を反射させるバーを作っていきます。
まず、バーのスプライトを作っていきます。右下の猫アイコンから”描く”を選んでバーを描いていきます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-11-23.43.37.png?resize=492%2C274&ssl=1)
今回は以下のように色:40,鮮やかさ:100,明るさ:100の黄緑色のバーを作成しました。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-11-23.45.29-1024x518.png?resize=1024%2C518&ssl=1)
次に、バーのスプライトのコードを書いていきます。
バーのY座標を−160に固定して左右に動かすようにします。
シューティングゲームの作り方(その1)でも解説していますが、スマホで遊べるように矢印キーで動かすのではなく、マウスポインターに向けて10歩動かすという指示で動くようにします。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-11-23.47.13.png?resize=513%2C503&ssl=1)
以下のように動けば成功です。
ボールを動かす
次にボールを動かしていきますが、まずはボールをセットしましょう。
ボールのスプライトはデフォルトで用意してある”Ball”を使います。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-11-23.58.36.png?resize=492%2C274&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-11-23.58.59.png?resize=254%2C235&ssl=1)
Ballのスプライトに以下のコードを書きます。
大きさと・場所と最初の動きを記述し、端に着いたら跳ね返るという指示を出します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-12-0.02.01.png?resize=445%2C375&ssl=1)
そうすると、下の動画のようにボールが画面の中を跳ね返りながら進むのがわかります。
次に、バーとブロックに当たった時に跳ね返るようにします。下図のように白色と緑色に触れたら
180ー向きの方向にします。この色は、ブロックとバーで設定した色と全く同じ色に設定してください。色の設定は配色を同じ値にしても良いですし、スポイトで指定することもできます。
また、バーに当たらなかった時、つまりY<−170の時に、スクリプトを止めて、ゲームオーバーになるようにします。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-12-0.03.40.png?resize=660%2C424&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-12-0.59.01.png?resize=523%2C474&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-12-0.59.24.png?resize=334%2C369&ssl=1)
下の動画のように跳ね返るようになれば成功です。
ブロックを崩す
次にブロックを崩していきます。
おじさんブロックのスプライトにもどって、下図のようにBallに触れたらクローンを削除するという設定を追加していきます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-12-1.04.37.png?resize=612%2C398&ssl=1)
これで、ブロック崩しの動きができるはずです。
しかし、実際に動かしてみた時に、下の動画のようにボールが跳ね返らずにブロックを貫通してしまう場合があります。これは、跳ね返るより前にクローンを削除してしまっているからです。
これはどうやらコードを組んだ時の順序によるもののようです。
貫通を避けるために、下図のようにクローンを削除する前に”0秒待つ”という指示をいれてあげます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-12-0.44.10.png?resize=677%2C442&ssl=1)
これで問題なく、ブロック崩しの動きができるようになったと思います。
ゲームクリアを作る
最後に、すべてのブロックを崩し終わった時にゲームが終了されるようにします。
下図のように”カウント”という変数を追加し、初期値を0にして、クローン生成の度に1ずつ増やすことでブロックの数をカウントに設定。今回の場合は50。
そしてゲームスタート後に、ブロックを崩す度に1ずつ減らしていき、0になったらゲーム終了です。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-12-1.13.53.png?resize=667%2C579&ssl=1)
反射角度を微調整
最後に微調整をします。今のコードだと完璧に跳ね返ってしまうのでゲームとして面白みに欠けてしまいます。様々な調整のやり方がありますが、今回は調整の中でも一番簡単な方法として、反射角度を少しだけランダムにします。Ballのスクリプトで”180ー向き”の180の部分をランダムな値にすることでゲームとして少し面白くなります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/07/スクリーンショット-2021-07-12-1.21.57.png?resize=735%2C449&ssl=1)
さらに、得点を表示したり、ゲームオーバーの画面を出すなど工夫してみてください。
ここで紹介したコードはこちらで確認できます。
ビンゴおじさん崩し