いろラボブログ

ビジュアルプロミング言語「Viscuit(ビスケット)」の使い方、プログラミング作品やゲーム、プログラミング教育のアイデアなどを掲載していきます。

ビスケットプログラミングで「ブロックくずしゲーム」をつくろう!

f:id:koba1426:20190313103931p:image

今日は、けっこうむずかしいゲームをつくってみます!

「ブロックくずしゲーム」です。

 

⬇︎もとネタは、こちらです!

youtu.be

実は、ビスケットプログラミング入門の本でもつくり方がしょうかいされているのですが、

このブログでのつくり方は、オリジナルようそをくわえた、もっとややこしいつくり方です!

メガネ34こも、つかっちゃいます。

もっとシンプルなつくり方は、上の本をぜひ読んでみてかくにんしてくださいね!

 

じゅんび  Viscuit(ビスケット)を開く

f:id:koba1426:20190313105039j:image

「Viscuit(ビスケット)」のアプリをひらいて…

①「ひとりでつくる」をえらんで、

②どこでもいいので、すきな色のへやをえらんで、

③「えんぴつ」ボタンをおしてください。

 

f:id:koba1426:20190314064227j:image

  • ほうがんしモードは、右から2番目のマスの大きさにしています。
  • 画面のたて・よこ「ループしない」せっていにしています。

 

ステップ1  かべと天井をつくろう!

パーツの絵をかこう!

左のかべ

f:id:koba1426:20190313182706p:image

天井
f:id:koba1426:20190313182715p:image

右のかべ
f:id:koba1426:20190313182711p:image

 

パーツをしきつめて、ゲームのステージをつくろう!

左のかべ

f:id:koba1426:20190313182901p:image

天井
f:id:koba1426:20190313182856p:image

右のかべ(ステージ完成!)
f:id:koba1426:20190313182851p:image

 

ステップ2   ボールの動きをつくろう!

ボールの絵を4しゅるいかこう!

左上にすすむボール

f:id:koba1426:20190313225822p:image

右上にすすむボール
f:id:koba1426:20190313225834p:image

右下にすすむボール
f:id:koba1426:20190313225828p:image

左下にすすむボール
f:id:koba1426:20190313225838p:image

ボールの動きをメガネでつくります。
f:id:koba1426:20190313225815j:image

⬆︎何もないところでは、それぞれの向きにずっと進みつづけるようにします。


f:id:koba1426:20190313225819j:image

⬆︎かべや天井にぶつかったとき、

こんなふうにはね返るルールにしてみました。

(音符♪マークをメガネの右に入れているので、ぶつかったときにポン♪となります)

 

分かりにくいので、あそぶ画面で見てみます!

左上にすすむボールが…

f:id:koba1426:20190313232946p:image

かべにぶつかったとき、
f:id:koba1426:20190313232959j:image

右上にすすむボールに変わります
f:id:koba1426:20190313232917p:image

右上にすすむボールが…

天井にぶつかったとき、

f:id:koba1426:20190313233009j:image

右下にすすむボールに変わります
f:id:koba1426:20190313233003p:image

右下にすすむボールが…

かべにぶつかったとき、
f:id:koba1426:20190313232929j:image

左下にすすむボールに変わります
f:id:koba1426:20190313232939p:image

左下にすすむボールが…

画面の外に出ると、

f:id:koba1426:20190313232943j:image

ゲームオーバー!(そしてだれもいなくなった)
f:id:koba1426:20190313232951p:image

 

ステップ3  パドルの動きをつくろう!

プレイヤーがうごかせるバー(パドル)の絵をかこう!

パドル

f:id:koba1426:20190314063711p:image

⬆︎真ん中よりも、ちょっと上の方にかいています

 

パドルを動かすメガネをつくろう!

f:id:koba1426:20190314065314j:image

  • パドルの右をさわったら、右に2マス動く
  • パドルの左をさわったら、左に2マス動く

ようにしてみました。

 

パドルの右をさわると…

f:id:koba1426:20190314071344p:image

右に2マス動きます。
f:id:koba1426:20190314071348j:image

パドルの左をさわると…
f:id:koba1426:20190314071353p:image

左に2マス動きます。
f:id:koba1426:20190314071341j:image

 

ボールがパドルではね返える動きをつくろう!

f:id:koba1426:20190314063636j:image

⬆︎右下にすすむボールがパドルのどの部分にぶつかっても、右上に動くようにしました。
f:id:koba1426:20190314063643j:image

⬆︎左下にすすむボールがパドルのどの部分にぶつかっても、右上に動くようにしました。

 

右下にすすむボールがパドルにぶつかったら…

f:id:koba1426:20190314071540p:image

右上にすすむボールになって、はね返えりせいこう!
f:id:koba1426:20190314071536j:image

(さっきつくったメガネのおかげで、どんなぶつかり方でもはね返えりますね!)

 

 

ステップ4  ボールがブロックをくずす動きをつくろう!

ブロックの絵をかこう!

ブロック

f:id:koba1426:20190314072007p:image

⬆︎これも、真ん中よりも、ちょっと上の方にかいています。

 

そして、てきとうにステージにブロックをならべよう!
f:id:koba1426:20190314072011p:image

 

あとは、ボールとブロックがぶつかったらきえる動きをつくろう!

f:id:koba1426:20190314071818j:image

⬆︎下からぶつかったときと、上からぶつかったときで4つのメガネが必要です。これも、ボールがブロックにぶつかったら、すすむ方向が変わるようにしてみました。

 

あそぶ画面でかくにん!

ぶつかると…

f:id:koba1426:20190314072357p:image

ブロックきえて、向き変わる
f:id:koba1426:20190314072412p:image

ぶつかると…
f:id:koba1426:20190314072416p:image

ブロックきえて、向き変わる
f:id:koba1426:20190314072348p:image

ぶつかると…
f:id:koba1426:20190314072353p:image

ブロックきえて、向き変わる
f:id:koba1426:20190314072401p:image

かべにぶつかると…
f:id:koba1426:20190314072420p:image

向き変わる
f:id:koba1426:20190314072406p:image

これでもう、かなりゲームっぽくなってきましたね!

全部のブロックをくずしたら、クリアー!ですね。

 

プレイヤーは、パドルをうまい具合にそうさして、ボールを落とさないようにしよう!

 

チャレンジ  「パドルブーストシステム」をつくろう!

ここから、オリジナルなルールをもりこんでいこうと思います!

 

まず、こんな絵をかきます。

ブースター(モンスターじゃないよ)

f:id:koba1426:20190314073209p:image

⬆︎ちょっと大きめに、うすい色でかいてます。

 

上にすすむボール

f:id:koba1426:20190314073302p:image

f:id:koba1426:20190314073407j:image

⬆︎何もないところでは、上にずっと進みつづけるよう、新しくメガネをつくります。

 

そして、パドルブーストシステムのメガネをつくろう!

 

ステップ3でつくったこのメガネをかいぞうします。

「パドルを動かすメガネ」を

f:id:koba1426:20190314084418j:image

⬇︎

こういう風に、変えます。

f:id:koba1426:20190314073614j:image

なんじゃこりゃ?

パドルを動かすメガネの右の部屋に

「パドルの絵と、さっきかいたブースターの絵を重ねて」おいているのが、分かるでしょうか?

もう一つブースターがすぐに消えるメガネをつくっています。

 

パドルとブースターを重ねておいているじょうたいを「ブーストモード」と名づけます。(かっこいい)

 

こうすることで…

  • パドルの右をさわったら、右に2マス動きブーストモードになる
  • パドルの左をさわったら、左に2マス動きブーストモードになる
  • ブースターはすぐに消える

という新ルールになります。

 

そして…

ブーストモードのときは、

「ボールがパドルにぶつかると、ボールは上向きにはね返える」というルールにします。

f:id:koba1426:20190314073640j:image
f:id:koba1426:20190314073635j:image

⬆︎このメガネ6こを新しくつくろう!

ブーストモードのときにボールがどの方向からパドルにぶつかっても、ボールは上向きにすすむようになります。

(一回はね返えると、ブーストモードはかいじょされます。)

 

 

 

こんな感じです!

ここで、左をさわると…

f:id:koba1426:20190314085910p:image

ブーストモード発動!
f:id:koba1426:20190314085852p:image

ブーストモードのときにパドルにぶつかったので、ボールは上向きにはね返えりました!
f:id:koba1426:20190314085902p:image

 

そして…

上にすすむボールも、こんな風にブロックがくずせるようにしよう!

f:id:koba1426:20190314090333j:image

⬆︎ブロックにぶつかると、

右下にはね返えるか、左下にはね返えるか

ランダムに変わるようにしました。

 

これで…

f:id:koba1426:20190314085902p:image
f:id:koba1426:20190314090519p:image
f:id:koba1426:20190314090523j:image

⬆︎ちゃんと上にすすむボールも、ブロックをくずせるようになりましたね!

 

動画でみてみよう!

⬇︎メイキングムービーでもつくり方をかくにんしてみましょう!(今回めっちゃ長いです)

 

youtu.be

 

⬇︎今日のプログラムはこちらから開けます。

(Viscuitアプリが必要です)

https://develop.viscuit.com/env/view.html?control=edit%3A00300014%3A5945%2F1-1%2F023.json%3A1-1%3A

viscuit
viscuit
開発元:Digital Pocket Limited Liability Company
 
 
 
 

さいごに

今日はちょっと大ネタでした。

ビスケットにかなりなれてきたら、チャレンジしてみると楽しいと思います!

 

工夫したら、もっと色んなオリジナルルールもつくれそうですね。いろいろつくってみましょう!

 

 

⬇︎メガネ125この究極のブロックくずしは、こちらです!

www.irolaboblog.com

 

⬇︎はじめての人は、こちらもビスケットプログラミング入門記事もおススメです!

www.irolaboblog.com