作ろうと思った経緯
友達がjsでブラウザゲーームを作っていて、おもしろそうだなぁと思ったのがきっかけです。
大学では少しプログラミングをかじっているので、いいアウトプットになると思って、今回制作しました。
今回は以下のサイトを見ながらオリジナルのゲームを作っていこうと思います。
参考記事(簡単にゲーム制作が学べるのでおすすめ、マジ感謝です)→ https://hothukurou.com/blog/post-599
ゲームの内容
たこ焼きが好きな私が、空からいろんな種類のたこ焼きが降ってきて食べれたらいいなぁということで、ゲーム化しました。
たこ焼きが上から降ってくるので、それをタップして食べるゲームです。
たこ焼きを食べるごとに難易度が上がっていき、全部残さず食べれたらClearです。
今までやっていたこと
今までは、参考にしたwebサイトをじっくーり読んで、以下の機能を実装しました。
- レイアウトを整える(タイトルやGAMEOVERの文字などを整えた)
- 背景やたこ焼きなどの画像やbgmを追加
- スタート画面とGameOver画面の追加/遷移ボタンの配置
基本的なループなどはサイトを見ながら作りました(といってもほぼそのままでパラメータだけ変えて上から降ってくる感じにしました)。ほかにも背景画像やbgmなどは、ダウンロードして変数で扱えばいいので、すぐ実装できました。
スタート画面は終了画面と同じく、Sceneオブジェクトのインスタンスを作り、それを画面に追加する形で実装をしました。
終了画面からスタート画面に行くボタン、リスタートボタンを追加しようとした際に、そのままリトライボタンと同じくstate=0にしたまま、
game.popScene(); game.pushScene(startScene);
でスタート画面に戻ると裏でゲームが始まってしまい、スタート画面にいるのに、ゲームオーバーになってしまう現象が起きたので少し悩みました。
game.onenterframeのところで
state==0(start画面の状態、常にstate=0)とstate==0.1(main画面の状態、呼び出したらstate=1にする)
で分けることによって、裏でゲームが実行されずに、スタート画面を表示することができました。
//初期値(start画面)
if (state == 0) {
takoyakiImg.x = 150;
takoyakiImg.y = -200;
point = 0;
state = 0;→ここの値を0にしないとゲームが実行されてしまう
}
//初期値(main画面)
if (state == 0.1) {
takoyakiImg.x = 150;
takoyakiImg.y = -200;
point = 0;
state = 1;→main画面に移ったらstate=1にしてゲームが始まる
}
//リトライボタン
retryBtn.ontouchend = function () {
state = 0.1;
game.assets[buttonclickSndUrl].clone().play();
game.replaceScene(mainScene);
};
//リスタートボタン
tweetBtn.ontouchend = function () {
state = 0;
game.assets[buttonclickSndUrl].clone().play();
game.popScene();
game.pushScene(startScene);
};
これからやっていきたいこと
- ボタンなどの画像の制作
- bgmの修正(画面をタップしないとbgmが再生されない、どういうこと？)
- メニューボタン・メニュー画面の追加
- 必殺技ボタンの実装
- 同時に複数のたこ焼きを降らせるようにしたい
