ゲーム作成
ゲームをつくろう
簡単なゲームを作る
1. 起動方法
Bit Arrowの起動方法や、プロジェクトの作り方は、共通の説明を参照してください。
2. ファイルを作る
プロジェクトができたら、ファイルを作っていきます。①ファイル→②新規と順に選択します。
すると、入力欄が出てくるので、先頭文字を大文字にしてGameと入力します。
OKを押すと、左に書かれたプロジェクト名の下に、今入力したファイル名が表示されます。
また、画面中央には、HTMLとJavaScriptと書かれています。
3. キャラクタを表示させる
はじめに、キャラクタを画面に表示させましょう。
HTMLが選択されている(ピンク色になっている)ことを確認し、コードを記述します。ここでは、ネコの画像をキャラクタとして扱います。
上の例では<img>タグの中身をスペースの都合で改行していますが、1行で記述することもできます。その場合、
<img src="images/neko1.png" name="neko"/>
と、nameの直前に半角スペースを入れて記述してください。
実行すると、ネコの画像が表示されます。
4. キャラクタを動かす
次に、キャラクタを動かしてみましょう。
キャラクタを動かすためには、繰り返しを使って文字を動かしたコードを参考にします。
ここではJavaScriptのコードを記述するので、JavaScriptを選択します。
実行してみると、キャラクタが右に移動し続けるようになります。
5. ボタンを使ってキャラクタを動かす
実際のゲームでは、キャラクタは勝手に動くのではなくプレイヤーが動かします。そこで、ボタンを配置し、キャラクタを自分で動かせるようにしてみましょう。
ボタンを画面に出すために、HTMLを書き足します。
実行するとボタンが出てきたのが分かります。
しかし、このままでは4と同じようにキャラクタが右に移動していってしまいます。勝手に移動しないように、JavaScriptを書き換える必要があります。
まず、while文で繰り返される内容の中でxを加算している部分を削除します。
次に、ボタンが押されたときにすることを記述します。
ここでは、関数という仕組みを使います。関数は、ある処理の固まりに名前をつけてまとめたものです。キャラクタを動かすために使ったmoveや、一定時間処理を止めるときに使ったwaitなども関数です。
さて、では、左ボタンを押されたときの関数を書いてみましょう。
次に、右ボタンが押されたときの関数を書いてみましょう。
これで関数が2つ出来上がりました。関数を作るにはまずfunctionと書きます。次に一つ目の関数にはleft、二つ目の関数にはrightと書いてあります。これが、関数の名前になります。名前に続いて()が書かれています。最後に、繰り返し行われるwhile文と同じように { } が書かれています。この波括弧で、関数が呼ばれたときに行われる処理を囲みます。
これらの関数を作ることによって、
「left という命令を行えと言われたら、 x-=10; をするんだよ」
「right という命令を行えと言われたら、 x+=10; をするんだよ」
ということをコンピュータに教えてあげることができます。
関数は、作っただけでは実際に動作（x+=10; や x-=10; など）を行なうわけではありません。動作を実際に行うには関数を「呼び出す」必要があります。
関数を試しに呼び出してみましょう。先ほど、while文の中で、xの加算部分を消しました。ここで、right関数を呼び出してみましょう。
実行すると、キャラクタが右に動いていきます。これは、プログラムがwhile文の中のright()に到達するたびにright関数の中身を処理しているからです。
さて、関数を作り、動作を確認したところで、ボタンで動かせるようにしましょう。ボタンを押したときに何か動作をさせたいときには、onClickという関数を使います。
onClickは、要素名を指定して、その要素がクリックされたときに、指定された関数を行うように指示する命令です。
お試しでwhile文の中に記述したright();という行も忘れずに消しておきましょう。
実行してみましょう。これでようやく、キャラクタを操作できるようになりました。
練習問題：左に押したときに左に動くようにしてみましょう。
6. ボールを動かしてみる
キャラクタが動かせるようになったので、次は敵を登場させましょう。
敵キャラとして、ボールを画面に表示させるので、HTMLを書き加えます。
この状態で実行すると、ボールが画面左上に現れます。
次に、このボールが上から降ってくるようにしましょう。
JavaScriptにコードを書き加えます。
まずは、ボールのx,yを決めます。
そして、繰り返し文の中で、キャラクタを動かした後、ボールも動かしましょう。
また、ボールが下に落ちていくように、ボールのyを加算する処理も追加しておきましょう。
ボール(ball)のxとyを表す変数には、bx,byと名前を付けました。変数を使うときには、半角英数字とアンダーバーなどを組み合わせて名前をつけます。名前は2文字以上でもかまいません(bxといっても、数学のようにbとxを掛け算することではないことに注意しましょう)。また、変数名の一番最初には数字が来ることはありません。そして、英字は大文字と小文字を区別します。ボール(ball)のxだからbx、というように、何の変数なのかが分かる名前をつけましょう。
この状態で実行すると、ボールが落ちていくのが分かります。
7. ボールが画面下に行ったら上に戻す
6の時点で、ボールは下に落ちていくとそのまま落ち続けます。これではすぐにゲームが終わってしまうので、下に落ちたら上からまた落ちてくるようにしましょう。
とはいえ、そのためのコードを書くとwhile文の中身が長くなり、見通しが悪くなります。
なので、ここでボールを動かす処理をする関数moveBallを作りましょう。
moveBall関数の中では、ボールを動かす処理と、ボールのyを加算する処理が書かれます。そして、1.6のwhile文ではこの処理が書かれていた場所でmoveBallを呼び出すように書き換えましょう。
次に、ボールが画面の下に落ちたら上に戻すという処理を書いていきます。現段階では、ボールのy(by)を際限なく加算しているため、下に落ち続けてしまいます。そのため、
「もし、ボールのy(by)がある値より大きくなったら、ボールのy(by)を0にする」
という処理を記述します。
この処理を記述するためには、「if文」を使います。実際にmoveBall関数の中に記述してみましょう。
このif文は、
if ( by>400 ) {
byが400より大きい時だけ実行したい命令
}
という作りになっています。
by>400という文は、「byが400より大きい」ということをあらわします。if文では、この ( ) で囲まれた中の式が成立するときに { } で囲まれた中身が実行されます。
byが400より大きくなったら、このif文の中のby=0;が実行されるので、画面の下まで落ちるとボールのyが0になる(上に行く)という動作になります。
8. ボールとぶつかったか判定する
7までを終え、キャラクタを動かし、ボールが何度も落ちてくるようになりました。次は、キャラクタとボールがぶつかったかどうかを判定してみます。
xとyでキャラクタの現在位置が、bxとbyでボールの現在位置が分かります。では、その現在位置がお互いに重なりあっているということを知るためにはどうすればいいでしょう。
まずは、重なっているときのお互いの位置がどうなるかを確認してみましょう。
ボールとネコの画像はどちらも32×32のサイズです。
まずは縦の位置(y)について見てみましょう。ボールの画像のyがネコの画像のyと30ぐらいずれていれば、ぶつかっていると考えられます。つまり、byが、y-30より大きくて、かつ、byがy+30よりも小さい時ということになります。
また、横幅も同じ大きさのため、横の位置についても同様に考えられます。bxが、x-30よりも大きくて、かつ、bxがx+30よりも小さい時ですね。
さて、これらの条件が成り立つときが、ネコとボールがぶつかっているときになります。
もしネコとボールがぶつかっていたら、ネコを画面から消すようにしましょう。
もし、という言葉が出てきたので、ここでもif文を使います。
数学では、bxがx-30より大きくて、x+30よりも小さいと書くときには「 x-30 < bx < x+30 」と書くことができます。しかし、プログラミングでは、これを2つに分ける必要があります。
「 bx > x-30 」と「 bx < x+30 」です。この式を、if文の中で使用します。
moveBallの中に、これらの条件が成り立つときにyを-100にして画面からネコを消すようなif文を書き足しましょう。
※ moveBallのみ抜粋
さて、「&&」という見慣れないものが出てきました。これは、その前後の式が両方成り立つ時、ということを表します。なので、( ) で囲まれた4つの式がすべて成り立つときだけ、y=-100が処理されます。
実行してみましょう。
ネコとボールがぶつかると、ネコが画面からいなくなるはずです。
9. ボールの横の位置をランダムで変える
ボールとキャラクタの衝突判定をし、ぶつかったらネコが画面から消えるようになりました。ただ、このゲームはボールが決まったところからしか落ちてきません。これでは、一度よけてしまえば自分から当たりに行かないとぶつかることはありません。
ボールが上に行くときに、横の位置がランダムで変わるようにしましょう。ボールが上に行く処理は、1.7で書いたif文に書かれています。そこで、ボールのy(by)だけでなくボールのx(bx)の値を変更します。
ランダムの値を取得するためには、rndという命令を使います。0から後ろの ( ) の中にいれた値より小さい値をランダムで取得できます。これで、bxは0から400未満の値のどこかに設定されます。実行して動作を確認してみましょう。
10. スコアを追加する
このゲームは、ネコとボールがぶつからないように逃げ続けています。ボールを避けただけスコアが加算させるようにしてみましょう。
まず、HTMLで、スコア表示を追加します。
実行すると、スコア：という表示が出てきました。次はJavaScriptのコードも追記しましょう。ここでやることは、
- スコア変数の初期化
- ボールを避けた時のスコアの加算
- スコアをテキストに表示
という3点になります。
スコア変数の初期化は、はじめにキャラクタのxやyを設定しているところで、スコアの加算とテキストに表示はmoveBall関数の中、ボールが上に行くタイミングで行いましょう。
実行すると、ボールが上に行くたびにスコアが10増えていきます。
setTextをすることで、HTMLに追加したscoreというnameの領域にscoreを表示させることができます。
11. ボールの数を増やす
ボールの数を増やしてゲームの難易度を上げてみましょう。
まずはHTMLに追記してボールを5つにします。
注意することは、最初にあったボールのname=”ball”を、name=”ball0”にすることです。0から4までの5つのボールができました。
この状態で実行すると、ボールが5つ出現しますが、一つも移動してくれません。
これまで、moveBallでは、ballという名前のついたボールを動かしていましたが、今書き換えたことでballという名前のついたボールがなくなってしまったからです。ここからは少しやることがあります。
まず、ボール5つ分のxとyを設定します。
今まではbx = 100; と by = 10; とだけ設定していました。これを5つ分設定するために、bx1=OO;bx2=OO…と書けばよいでしょうか。
ここでは、配列というものを使って書きます。
ひとまず、bxとbyを配列を使って書いてみましょう。
これまでbxとbyの初期位置を設定していた行が、上の枠内のように変わります。
bx = [ 0, 100, 200, 300, 400];
と書くことで、5つのボールのxの値を設定することができます。
これまでの書き方では、bxは1つの値を覚えることができましたが、この配列を使うことで複数の値を覚えさせることができます。ここではbxに5つの値を覚えさせました。この配列の中から一番最初の値を操作したいときは、bx[0]と書くことになります。その次はbx[1]です。
つまり、
bx = [ 0, 100, 200, 300, 400];
と記述すると、 bx[0] = 0; bx[1] = 100; bx[2] = 200; bx[3] = 300; bx[4] =400;
という中身になります。
同じようにbyにも、5つの値を設定しました。このbxとbyの値がそれぞれ、左からball0,ball1,ball2,ball3,ball4の座標になるので、ball0は(0,0)に、ball1は(100,10)に出現するようになるはずですが、これで終わりではありません。
それぞれのボールを動かすためにはmoveBallをボールの数だけ呼ばなければいけません。
先ほどまで、moveBall()の ( ) の中には何も書いてありませんでしたが、この中に0から4の数値が入りました。この値は、ボールの番号を指定するためのものです。
そして、moveBall関数の中身も変える必要があります。これは変える場所が多いので、注意してください。
変更点を整理します。
一つ目は、moveBallの直後の( ) の中に i と書きます。これは、5個のボールのうちどれを動かすかを受け取るためのものです。
二つ目はmove(“ball”,bx,by);の”ball”の後ろに +i が追加されたところです。これは、文字列と数値の足し算になり、iの値が0ならば、”ball” + 0 = “ball0” となります。これを使って動かすボールのnameを決めることができます。
最後に、この関数の中に書かれたbx,byの後ろに [i] が追加された点です。これは、配列のi番目の値を指定するために必要なものです。
課題: ボタンが画面の上のほうにあると操作がしにくいので、画面の下のほうに出るようにしてみましょう。
課題: ネコがボールとぶつかると、ゲーム画面からは消えますが、ボールが落ちるたびにスコアが増えてしまいます。ボールがぶつかると、y=-100 が行われるので、スコアを加算している個所を、「もし、yが-100でなければ、スコアを加算する」というプログラムにしてみましょう。
この先は自由に改造してみましょう。
使える命令は命令一覧へ
