ポケモン風ゲームを作ってみた その3
これの続き
なんかプログラミング講座みたいになってしまったが、作り方を教えてほしいといわれたので、伝わるように書こうと思ったらこんな感じになった。続けてサンプルプログラムをいじっていきたい。
前の続きだが、一応前まで進めたやつを貼っておく。
http://www.samenohada331100.shop/blog/answer2/sample2.zip
今回は前回のやつに、バトル描写を追加して、ゲームっぽくしたい。
[音を鳴らす]
まずはtoki.pngを押すと攻撃音が鳴るようにしてみる。例のごとくA,Bをコピペして実行してみてほしい。
A
const toubai = "toubai.wav";
game.preload([toubai]);
game.preload([toubai]);
B
tokiImg.ontouchend = function()
{
game.assets[toubai].clone().play();
}
{
game.assets[toubai].clone().play();
}
[2種類のイベントについて理解しよう]
イベントを発生させるには2種類ある。
1.ボタンを押すと発生するもの
2.自動的に始まり、常に実行し続けるもの
前項で実装したものは1であり、ボタンを押したら、tokioimg.ontouchedの{}に入っている音を鳴らす処理 game.assets[toubai].clone().play();が1回発生する。
2で同じ音を鳴らす処理をしたらどうなるのか考えてみてほしい。
わからない場合は実践してみよう。(音量注意)
①画像の赤□部分を消す
②Aをコピペ
game.onenterframe = function () {
game.assets[toubai].clone().play();
}
game.assets[toubai].clone().play();
}
③メモ帳上書き、ゲーム画面更新
④ゲーム画面のどこかを触ってみる
[画像に動きをつけよう]
次に、ホルードがピカチュウを攻撃するようなアニメーションをつけたいと思う。
まずは単純にホルードを動かしてみる。ついでに、勝手になり続けるうるさい音は元に戻す。
①Aをコピペ
game.assets[toubai].clone().play();
②Bをコピペ
tokiImg.x -=5;
ちなみに、tokiImg.x -=5; はtokiImgのx座標を-5してくださいという意味で、game.onenterframe = function () の{}内に入れることで、x座標を-5し続けるといった結果になる。要するに左にスライドする。
[決まった場所までストロークしたらストップさせよう]
さっきの実行結果だと、そのままスライドしていって終了してしまう。決まった場所にいったときにストップする感じにしてみたい。こういうときは、if文を使う。
以下をコピペ
if(tokiImg.x > 80 )
{
tokiImg.x -=5;
}
{
tokiImg.x -=5;
}
こうすると、一定の位置まで来るとホルードが止まってくれる。
ホルードのx座標の初期値はtokiImg.moveto(100,118)の文で100であり、5ずつ減っていき、80未満になると、ifの条件を満たさなくなり、tokiImg.x -=5の処理が行われなくなるため、動きが止まるのだ。
[フラグと条件文を加えて、ボタンを押したら攻撃している感じにしよう]
つぎにフラグと条件文を加えて、ボタンを押したら攻撃している感じにしてみる。とりあえず書いてある通りにしてみてほしい。
①Aをコピペ
let flag = 0;
②Bをコピペ
flag = 1;
③Cをコピペ
if(flag == 0)
{
tokiImg.x = 100;
}
if(flag == 1)
{
{
tokiImg.x = 100;
}
if(flag == 1)
{
④Dをコピペ
else
{
flag = 0;
}
}
{
flag = 0;
}
}
この処理の説明をすると、①でフラグ管理用のflagを0にし、②でボタンが押されたらflagを1にする、③部分はflagが0か1の場合分けを行い、flagが1の場合は後ろに動かし、flagが0の場合はホルードを元のx=100に戻し突撃している風に動かす。といった感じだ。④はホルードが下がり切ったらflagを0に戻し突撃させているように見せる。
どういった結果になるかは君の目で確かめてほしい。
結果をカンニングする。
