スクラッチで青鬼オンライン風ゲームの作り方

今回つくるゲーム

難易度

今回はスクラッチで青鬼オンライン風ゲームを作っていきます。時間とともに増える青鬼から何秒逃げられるかを競います。部屋は３つ用意されていて、部屋のあいだはプレイヤーも青鬼も行ったり来たりできます。敵キャラクターである青鬼をどのように部屋のあいだを移動させるかというのが今回のプログラミングのポイントになります。

まずは実際にゲームをプレイしてみてください。

youtube解説

こちらの動画でもわかりやすくゲームの作り方をざっくり解説していますのであわせてチェックしてください。チャンネル登録もよろしくお願いします！

【ざっくり解説】スクラッチで青鬼オンライン風ゲームの作り方

はじめに

まず、以下をリミックスしてください

青鬼オンライン風ゲーム_素材

こちらにはゲームを作るのに必要な素材が揃っています

全体マップを見る

まず、全体マップを確認しましょう。ステージ（背景）を選択すると、３つのエリアが用意されているのがわかります。

エリア１、２、３は以下のようなマップとして繋がります。これらのエリアを行ったり来たりしながら鬼から逃げるのが今回作るゲームです。エリアは青いマス目になっていて、このマス目に沿ってプレイヤーと青鬼が動きます。わかりやすいようにマス目を書いていますが、最終的にはこのマス目は外します。

プレイヤー（おじさん）のうごきを作る

まずはプレイヤーである”おじさん”の動きを作っていきます。先ほど説明したように、青いマス目にそってプレイヤーは動きます。このようなマス目にそってプレイヤーを動かすようなゲームを作るときは、まずターゲットを作って、そのターゲットに従ってキャラクターが動くようにします。このことはボンバーマン風ゲームの作り方でも詳しく解説していますのでそちらもあわせてご確認ください

スクラッチでボンバーマン風ゲームの作り方

今回はボンバーマン風ゲームを作っていきます。マス上のステージを動きまわり、爆弾を設置して、ブロックを崩し、敵をやつけていきます。今回ポイントとなるのは「１マス動かす」と「敵キャラのランダムな動き」です。これができるようになると、ロールプレイングゲームやすごろくゲームなども作れるようになります。

ターゲットをマス目にそって動かす

まずはターゲットの動きを作っていきます。黄色い丸のターゲットのスプライトに移動します。黄色い丸はちょうど青いマスにおさまる大きさに作られています。

ターゲットのコードに移動して、以下のようにコードを書いてください。
これらはマス目にそって動かす定番のコードになりますので覚えてしまいましょう。
ここもボンバーマンの作り方で詳しく解説しています。

できたら、実際に上下左右の矢印で動かしてみましょう。以下のように動くことを確認してください。

エリアを行ったり来たりする

最初はエリア１にいますが、エリア２、エリア３も行ったり来たりできるようにしましょう。
以下のようにコードを追加します。

とても長いコードですが、やっていることは単純です。ターゲットが左端（つまりx<-225）になると、ステージ１の左端に来たと判断して、ステージ２の右端（x=225）に移動します。
同じことをすべてのエリアの往復でコードを書いていきます。（部屋の数がもっと多くなるとさらにコードは複雑になります）

コードがかけたら、ちゃんとエリアを行ったり来たりできるか確認しましょう。

プレイヤーをターゲットに合わせて動かす

次に、プレイヤー（おじさん）をターゲットにあわせて動かします。
おじさんのスプライトに移動して、以下のコードを書きます。

大きさや向きなどを初期設定したら、あとはずっとターゲットへ行くということになります。

このままでは、ただおじさんのイラストが黄色い丸にひっついて動くだけなので、押したキー（上下左右の矢印）にあわせて、おじさんの動きを作っていきます。

まず以下のように、大枠のコードを書いて、右向き・左向き・上向き・下向きそれぞれの動きを規定していきます。

以下が規定した動きです。
用意してあるコスチュームをそれぞれのキーを押している間（”押された”ではないまで）繰り返し表示することで動くように見せます。

ここまでできたら、実際に動かしてみてください。以下のようにターゲットに合わせてプレイヤーが動いているように見せることができます。

青鬼のうごきを作る

ここから青鬼の動きを作っていきます。かなり長いコードになるので頑張ってください。

時間とともに青鬼が出てくるようにする

まず、時間が経過すると青鬼が順番に出てくるように設定します。このような全体に関わるコードはステージ（背景）に書くようにします。ステージに移動して、以下のようにコードを書きます。時間と鬼の数の変数を作り、５秒ごとに鬼が出現してくるように指示を書きます。
ここで作ったメッセージ”鬼１出現”、”鬼２出現”・・・は後ほど使います。

また、時間と鬼の数はゲーム上に表示しておきたいので、変数の部分のチェックボックスにチェックを入れ、左上に配置をします。

これで準備完了です。

鬼を出現させる

ここから鬼を出現させていきます。まず鬼１（１体目の鬼）について考えていきます。２体目以降は内容を複製していきます。

スタートから５秒経つと鬼１（１体目の鬼）が出現しますが、以下のルールで設定することとします

・１〜３のどのエリアに出現するかはランダムに決められる
・各エリアの中で出現する場所は５箇所あり、ランダムで決められる

これらのルールをもとに鬼１ターゲット（青い丸）のスプライトに以下のコードを書いていきます。

ここで、大切なポイントがあります。鬼エリア、鬼１がいる、位置番号の３つの変数をここでは使っていますが、鬼エリアと位置番号の２つについては”このスプライトのみ”にチェックを入れるようにしてください。変数はふつうはあまり考えずに”すべてのスプライト用”に設定して問題ないですが、今回のプログラムでは鬼のプログラムをどんどん複製していくので、このように変数をスプライトのみでの適用にしておくと、複製が楽になります。

ステージを移動時の鬼出現

次に、プレイヤーがステージ間を移動した時の鬼の出現についてコードを書いていきます。例えばプレイヤーがステージ１からステージ２に移動した時、鬼１がステージ２にいる場合は鬼１を出現させないといけません。先ほどのコードに加え、鬼１ターゲットのコードに以下を追加します。

鬼出現は先ほど作ったものと同じ定義を再活用しています。

鬼を自動で動かす

プレイヤーは上下左右の矢印キーで動かしましたが、鬼は自動で動かないといけません。ボンバーマンやパックマンで作ったコードと同じ考え方です。鬼１ターゲットのコードに以下を追加してください

ステージ間を移動させる

鬼もステージ間を移動させられるようにしましょう。先ほどに引き続き以下のコードを追加します。
鬼がどこにいるかは常に”鬼エリア”の変数で管理します。

隣のエリアから鬼が出現する

例えばプレイヤーがエリア１にいて、鬼がエリア２にいたとすると、エリア１は完全に安全なエリアになってしまいます。それではゲームとしては微妙なのでエリア２からエリア１に鬼が移動してくることも考えなければなりません。隣のエリア（ゲーム画面に見えていないエリア）での鬼の動きはブラックボックスなので、１０秒に１回の確率で隣のエリアから出現してくるというプログラムを組みます。

とてつもなく長いコードですが、やっていることはとても単純です。

それぞれ拡大すると以下の通りとなります

青鬼をターゲットにあわせて動かす

ここまでできたら、青鬼のキャラクターをターゲットにあわせて表示させていきます。
コードの考え方はプレイヤーの時と近いですが、そのステージに鬼がいる（つまり鬼１がいる＝１）のときだけ表示させて、それ以外の時は隠さなければなりません。

右向き・左向き・上向き・下向きの定義については以下の通りです。
プレイヤーとは違い鬼は動き続けるので、向きが変わるまで繰り返すというコードになります。

青鬼の動きを確認する

これでとても長かった青鬼のコードは終了です。
実際にゲームをプレイしてみて、青鬼が自動で動くか確認してみてください。

鬼の配置はランダムなので、以下の動画は一例ですが、５秒経ったときに鬼１はエリア２に出現したため、プレイヤーがステージ２に移動すると出現します。その時出現した位置は（x:-75.y:15）となっています。そしてプレイヤーがエリア１に行った後に、鬼１もエリア２からエリア１に移動してきています。
これは１０秒に１回の確率で起こったことです。

青鬼を複製する

ここまできたらあとは青鬼を複製していくだけです。鬼１ターゲットから鬼２ターゲットを、鬼１から鬼２をそれぞれ複製します。

鬼２ターゲットのコード

鬼１ターゲットの複製をそのままは使えないので、改変を加えていきます。
鬼２ターゲットのコードに移動して、以下のように変更していきます。赤矢印箇所が変更ポイントです。
鬼エリアと位置番号をそのまま使えるのは、変数設定時に”このスプライトのみ”に設定していたからです。もし鬼１エリアのように、それぞれの鬼のエリアを変数として分けていたら大変なことになります。