ゲーム作り 初心者 ジャンルの選び方｜5つを作って数えた比較表

最初に作るジャンルは、実装の違いを聞く3つの質問に答えると、この5つの中から1つに絞れます。

質問は「時間がたつと勝手に動く部分が要るか」「左右のキーで動かすか」など、作り方が変わる所だけです。

数当て・30秒クリック連打・〇×ゲーム・ブロック崩し・分岐ノベルの最小版を実際に書いて動かし、同じ基準で数えた表も載せました。

3つの質問で絞る分岐図

次の図は、はいといいえで答えて進むと、この5つのどれかに着く分岐図です。ジャンルの枠には、この記事で数えた値も入れてあります。

質問1は表の「画面の更新」、質問2の左右キーは「入力」の列に対応します。場面と盤面は表では数えていません。

5つのジャンルを同じ基準で数えた表

数字は、AIに作らせた1例です。書き方で数字は変わります。2026年10月19日に、手元のWindows 11で書いて動かしました。

5本とも、HTMLファイル1つで動き、外部のライブラリや画像は使っていません。1行に1つの文を書き、字下げの幅もそろえています。ジャンル名の並びは、数えた値を見比べるための順番で、順位ではありません。

数える基準は次の6つで、5本すべてに同じものを当てました。

• 行数：空行を除いた行数です。scriptの中と、それ以外（見出しやボタンなど）に分けました

• 関数：scriptの中の「function」の語と「=>」の数の合計です

• 状態：変数stateに入る文字列の種類です。待機中・プレイ中・終了のように、ゲームが今どの段階にあるかを表します

• 入力：addEventListener で待つイベントの種類です。数字を打ち込む欄があれば、キーに数えました

• 画面の更新：setIntervalかrequestAnimationFrameを使っていれば「一定時間ごと」、使っていなければ「操作のときだけ」です

• 動作確認：勝ち・負け・終了まで通せたかです。確かめ方は後の節に書きました

遊びの内容は、数当てが1から100を7回まで、連打が30秒で目標60回、〇×が2人の交代と勝ち判定、ブロック崩しがブロック18個、分岐ノベルが3場面で2択を2回です。

質問1：時間がたつと勝手に動く部分が要るか

表の「画面の更新」で一定時間ごとになったのは、30秒クリック連打とブロック崩しの2本です。連打はsetIntervalで1秒ごとに残り時間を減らし、ブロック崩しはrequestAnimationFrameで毎フレーム、ボールを動かしています。

requestAnimationFrameは、MDN Web Docsの説明では、次の再描画の前に指定した関数を呼ぶようブラウザーに頼むメソッドです。続けて動かすには、呼ばれた関数の中でもう一度呼ぶ必要があります。

残る数当て・〇×ゲーム・分岐ノベルは、ボタンを押したときにだけ画面が変わります。時間の流れを扱う部分がないので、動作確認も「押す、結果を見る」を繰り返すだけで済みました。

一定時間ごとに動くゲームには、もう1つ注意点があります。MDNには、1フレームで進む量を時刻から計算しないと、リフレッシュレートの高い画面では速く動く、と書かれています。今回のブロック崩しは1フレームごとに決まった量だけ動かす書き方なので、この注意の対象です。高いリフレッシュレートの画面での速さは確かめていません。

質問2：左右のキーで動かすか、文章の場面を選ばせるか

入力にキーが入ったのは、数当てとブロック崩しです。数当ては数字を打ち込む欄があるためで、待つイベントはクリックだけです。ブロック崩しは、クリックに加えて、キーを押した・離したの2種類を待っていて、イベントは合計3種類になりました。

状態が4つあるのは、ブロック崩しだけです。クリックで始めるまで止まっている待機があるため、待機・プレイ中・クリア・ゲームオーバーの4つになりました。ほかの4本は3つです。

分岐ノベルは、場面1・場面2・結末の3状態で、関数は3つ、scriptは46行でした。場面の文章と結末の文章は、scriptの上のほうにまとめて置いています。ジャンルごとの作り方には踏み込まず、5つのうちの1つとして同じ基準で数えるところまでにします。

質問3：マス目の盤面を2人で交代して打つか

〇×ゲームは、scriptが57行で関数が4つ、それ以外の行が27行でした。「それ以外の行」が5本の中でいちばん多いのは、9つのボタンをHTMLに並べたためです。

勝ち判定は、縦3本・横3本・斜め2本の合計8本の並びを配列に入れて調べる形にしました。動作確認では、8本のすべてでXの勝ちを判定できました。

数当ては、scriptが38行で関数が3つです。今回の5本では、行数がいちばん少なく、関数の数は分岐ノベルと並んで最少でした。

動作確認で通ったことと、確かめていないこと

動作確認は、headless Chrome（バージョン155）で行いました。ゲームのHTMLは書き換えず、複製に確認用の操作を足し、ページ内のスクリプトからクリックとキーのイベントを発生させています（OSの操作そのものではありません）。

5本の合計は45項目で、すべて通りました。ブロック崩しは、何も操作しないと124フレームで失敗になり、左右キーだけで操作すると6519フレームでブロックを全部消してクリアになりました。この6519という数は、確認用に書いたキー操作の1例での値です。

ブロック崩しだけは確認の方法を変えています。手元のheadless Chrome（仮想時間）では、requestAnimationFrameを呼び続けるだけのページでも、5秒ぶんの待ちで1回しか進みませんでした。そのため確認用の複製では、setTimeout（16ミリ秒）に置き換えて動かしました。本物のrequestAnimationFrameでの動きは確かめていません。

確かめていないことは、次の3つです。

• スマホなどタッチ操作での動き

• 人が実際に遊んだときの操作感や面白さ

• 別の書き方で作り直したときの数字の違い

迷ったときの決め方

質問に答えても2つで迷ったら、時間を進める操作が不要で確認の手間が少なかった3本（数当て・〇×ゲーム・分岐ノベル）から選ぶ、という決め方もあります。この3本は、勝ち・引き分け・結末など、終わりの状態まで、クリックまたは数字の入力だけで通せました。確認用の操作では、連打は仮想時間の30秒を2回、ブロック崩しはクリアまでに6519フレーム（失敗まで124フレーム）動かしました。単位が違い、操作のしかたで変わる値です。この比較は今回の1例での結果で、初心者に向くかどうかや面白さは測っていません。

ジャンルが決まったら、Claude Codeに最初の依頼を出します。起動から最初の依頼までは、Claude Codeの使い方。起動から最初の依頼までに手順があります。まだ入っていないときは、Claude Codeをインストールできない時の直し方を先に確かめてください。