AntigravityとCodexで作った、10秒連打とバトルで遊べる「連打バトルウォッチ」
子どもの頃の連打遊びを、Webサイトで作ってみたい
今回もAIを使ってサイトを作りました。ただ、これまでの2つとは少し方向を変えています。
今度は「役に立つサイト」ではなく、気軽に遊べるものを作ってみたい。そう考えたとき、ふと思い出したのが、子どもの頃に流行ったハドソンの「シュウォッチ」でした。
高橋名人の16連射に憧れながら、10秒間で何回ボタンを押せるか夢中になって競う。やることは、ただボタンを連打するだけです。それなのに、なぜかもう一度やりたくなるんですよね。
「あの楽しさを、Webサイトでも作れないだろうか？」
そこから「連打バトルウォッチ」の制作が始まりました。
10秒測定と連打バトルの2つのモードを選べるトップ画面です。
HTML、CSS、JavaScriptだけでゲームは作れるのか
とはいえ、作るのはゲームです。HTML、CSS、JavaScriptだけで、本当にそこまでできるのでしょうか。
サーバーも、データベースも、ログイン機能も使わない。スマートフォンのブラウザを開けば、そのまま遊べる1ページのサイトにしたい。AIに相談してみると、「十分に作れる」という答えが返ってきました。
それなら、やってみよう。まずは次のような設計図を作ります。
- 10秒間の連打回数を測る「測定モード」
- 連打で敵を倒していく「バトルモード」
- 自己ベストをブラウザ内に保存する機能
- 結果画像の保存とSNSへの共有
- スクロールや画面拡大など、スマホ連打中の誤操作対策
最初から見た目を作り込むのではなく、まずはゲームとして動かす。その後でデザインや演出を足していく方針です。
最初のデザインは、思っていたものと違った
初期版はAntigravityを使って実装しました。10秒のタイマー、タップ数の計測、敵のHPを減らす仕組み。基本の機能は、思ったよりもスムーズに動きます。
「お、ゲームになってるやん」
そこまではよかったのですが、画面を見てみると、何かが違います。黒と紫を使ったサイバー風のデザインで、自分が思い描いていたレトロゲームとはかなり離れていました。
機能は動いている。でも、これでは遊んでみたい気持ちにならない。最初の大きな壁は、ゲームの仕組みではなく見た目でした。
そこでCodexを使い、目指す雰囲気の画像を先に作ることにしました。黄色い筐体、液晶画面、黒いボタン、そしてハチの代わりになるトラのマーク。完成イメージを目で確認してから、その画像に近づけるようサイトを直していきます。
言葉だけで「もっとレトロに」と頼んでも、人によって思い浮かべるレトロは違います。けれど、基準になる画像が一枚あると話が早い。「この雰囲気に合わせて」と伝えられるので、修正の方向が一気にはっきりしました。
どこでも押せる四角から、A・Bボタンへ
最初の連打エリアは、画面下にある大きな四角形でした。どこを押しても反応するので、たしかに押しやすい。ところが、ここで気になることが出てきます。
これ、3本や4本の指を使って、ピアノを弾くように押せるのでは？
それでは、1本の指でボタンを連打する面白さから離れてしまいます。
そこで、実機のコントローラーを思わせる丸いAボタンとBボタンへ変更しました。外側を押しても反応しません。丸いボタンをきちんと押したときだけ、連打として数えます。
10秒測定ではAボタンだけ、バトルではA・Bの両方を使えるようにしました。
単に「A・Bボタンを置いて」と頼むだけでは足りません。どの範囲を押したら反応するのか、どちらのモードで何のボタンを使うのか。そこまで伝えて、ようやく思っていた操作感に近づきました。
10秒測定だけではなく、全10ステージのバトルも作る
10秒測定モードは、3秒のカウントダウン後にAボタンを連打し、合計回数、1秒あたりの速度、ランク、自己ベストを表示します。
これだけでも連打測定器としては遊べます。でも、何度か試していると、もう少しゲームらしさが欲しくなってきました。
「連打で、何かを倒せたら面白いのでは？」
そこで追加したのが「連打バトルモード」です。
バトルでは、スライムやコウモリ、ゴブリン、ドラゴンなど、レベルごとに異なる10体の敵が登場します。制限時間内にA・Bボタンを連打してHPを0にし、最終ステージのクリアを目指します。
バトルではA・Bボタンを連打し、制限時間内に敵のHPを減らします。
敵はレトロゲームに合うよう、太い輪郭と少ない色で描いたドット絵にしました。ところが、画像を作ればそのまま使える、というわけにはいきません。
白い背景が残る。背景を消そうとすると、今度はキャラクターまでスカスカになる。なかなか一筋縄ではいきませんでした。背景だけを取り除く処理を何度か調整し、ようやく10体の見た目がそろいます。
さらに、ボタンを押す音、攻撃音、アイテム獲得音、ステージクリア音、バトル中のBGMも追加しました。音声ファイルを再生するのではなく、ブラウザ上でレトロな電子音を作る仕組みです。音を消したいときのために、ミュートボタンも付けました。
AIが決めた難易度は、そのままでは難しすぎた
バトルの敵HPや制限時間は、最初にAIがまとめて設定してくれました。数字もきれいに並び、いかにもバランスが取れていそうです。
ところが、実際に遊んでみると、これがもう、かなり難しい。序盤は順調でも、後半の敵になると連打してもHPが残ります。
「いや、これ絶対に無理やろ」
AIが作った最初の難易度は、なかなか容赦がありませんでした。
数字として設定できていることと、人が遊んで面白いことは別です。自分で何度も連打しながら、敵のHP、制限時間、ダメージ量を少しずつ調整していきました。
クリアを助けるため、敵を倒すと一定確率で手に入るアイテムも追加しました。
- 1タップのダメージを2倍にする「エナジードリンク」
- 制限時間を3秒増やす「タイムプラス」
- 開始時に固定ダメージを与える「ボム」
- 全タップのダメージを増やす「名人の魂」
初期版では、手に入れたアイテムが次のステージで自動的に使われました。でも、それでは「今使うか、後まで残すか」を考える楽しみがありません。
そこで、アイテムをストックし、使うステージを自分で選べるように変更しました。後半ほどアイテムが落ちやすくなるよう、ステージごとの確率も変えています。
強くしすぎれば、敵を簡単に倒せてしまう。かといって弱すぎれば、「このアイテム、何のためにあるの？」となります。
このちょうどよいところは、AIに一度で決めてもらうのではなく、実際に遊びながら探していきました。
A・B交互連打で生まれた、もう一つの遊び方
ある程度完成したところで、AIに聞いてみました。
「ほかに、ゲームらしくなる仕組みはない？」
そこで出てきたのが、AボタンとBボタンを交互に押したときのコンボです。
A・Bを交互に連打するとコンボ数が増え、3コンボ以上でダメージが+1、10コンボ以上で+2になります。同じボタンを続けて押したり、1秒以上間が空いたりするとコンボはリセットされます。
この仕組みが、思った以上によかったんです。ただ速く押すだけではなく、左右のリズムを崩さず連打する遊びが生まれました。
ただし、ここでも最初からうまくはいきません。すぐに大きなダメージが出てしまい、今度は敵を簡単に倒せる状態になりました。強敵だったはずが、一気に無双状態です。
コンボが成立する回数と追加ダメージを少しずつ調整し、速さと正確さの両方を意識できるバランスへ近づけました。
スマホで実際に遊ぶと、設計図にはなかった問題が出る
ゲームが動いた。デザインも整った。これで完成かと思いますよね。
ところが、iPhoneで実際に遊ぶと、設計図にはなかった問題が次々に出てきました。
高速で連打すると、ブラウザがダブルタップによる画面拡大だと判断し、画面が突然大きくなる。タイムアップ直後には、連打の勢いが止まらず、結果画面の「画像保存」を押してしまう。
普通のWebサイトでは起きにくい、連打ゲームならではの問題です。
そこで、連打中の画面拡大やスクロールを抑え、終了直後には1.5秒間の入力を受け付けない画面を表示するようにしました。小さな画面でボタンが下にはみ出す問題には、画面の高さに合わせて全体を縮小し、必要な画面だけスクロールできるようにして対応しました。
結果画像についても、パソコンではそのままダウンロードし、iPhoneでは画像を長押しして写真へ保存できる画面を出すように分けています。
設計図を丁寧に作っても、実際の指の勢いや、スマートフォン固有の挙動までは分かりません。画面を見るだけでも足りない。自分で本気で連打したからこそ、見つかった問題でした。
自分の感覚を、AIに伝わる形へ変えていく
今回の制作で特に感じたのは、「もう少しかっこよく」「押しやすく」と伝えるだけでは、自分の思っている形にならないということです。
ボタンのどの部分を押せるようにするのか。測定ではAだけにするのか。敵を倒した後にすぐ次へ進むのか、一度休めるようにするのか。アイテムを自動で使うのか、自分で選ぶのか。
一つひとつの違和感を具体的な指示へ変えていく。少し地道ですが、この繰り返しで、サイトは自分の作りたいものへ近づいていきました。
AIに最初の形を作ってもらうことはできます。でも、遊んで気持ちよいか。難しすぎないか。もう一度挑戦したくなるか。そこを判断するのは人です。
今回のようなゲームでは、作ること以上に、この「遊んで、気づいて、直す」時間が大切なのだと感じました。
Webサイトでできることは、思っていたより多い
今回は、HTML、CSS、JavaScriptだけで、連打の測定、タイマー、敵とのバトル、アイテム、コンボ、効果音、BGM、結果画像の保存まで実装できました。
最初は「ブラウザで簡単な連打測定ができればよい」と考えていました。それが、敵が登場し、アイテムが加わり、A・Bのコンボが生まれ、音まで鳴るようになった。気づけば、想像していた以上にゲームらしいものになっています。
Webサイトは、情報を読むためだけのものではありません。診断も、便利なツールも、今回のようなゲームも作れます。
「HTML、CSS、JavaScriptだけでも、こんなところまでできるんやな」
今回、あらためてそう感じました。まだ試していないことは、たくさんあります。これからもAIと相談しながら、いろいろなものを形にしていきたいです。
ぜひAボタンを連打して10秒測定に挑戦し、A・B交互連打で全10ステージのクリアを目指してみてください。