JavaScriptゲームの作り方 初心者向け｜AIのコードの読み方

JavaScriptでゲームを作るなら、最初に覚えるのは書き方ではなく「コードのどこを見て、どこなら触ってよいか」です。

AIに頼めば数十行のゲームはすぐ出てきます。ただ、出てきたコードは読めないと直せません。

59行の数当てゲームを全文載せ、行の塊ごとの読み方表と、実際に数を変えて動かした結果を並べます。

数当てゲームの全文（HTML1ファイル）

題材は、1から100までの数を7回以内に当てる数当てゲームです。HTMLとJavaScriptが1つのファイルに入っています。次のコードをそのまま使えます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>数当てゲーム</title>
<style>
  body { font-family: sans-serif; text-align: center; margin-top: 40px; }
  #msg { font-size: 24px; min-height: 36px; }
  input { font-size: 20px; width: 80px; }
  button { font-size: 20px; }
</style>
</head>
<body>
<h1>数当てゲーム</h1>
<p id="rule"></p>
<input id="guess" type="number">
<button id="btn">予想する</button>
<p id="msg"></p>
<p id="left"></p>
<script>
const MAX_NUMBER = 100;
const MAX_TRIES = 7;
let answer = Math.floor(Math.random() * MAX_NUMBER) + 1;
let tries = 0;
let finished = false;

document.getElementById("rule").textContent =
  "1から" + MAX_NUMBER + "までの数を" + MAX_TRIES + "回以内に当ててください";

function show(text) {
  document.getElementById("msg").textContent = text;
}

function check() {
  if (finished) return;
  const value = parseInt(document.getElementById("guess").value);
  if (isNaN(value)) {
    show("数を入れてください");
    return;
  }
  tries = tries + 1;
  if (value === answer) {
    show("正解です！" + tries + "回で当たりました");
    finished = true;
  } else if (tries >= MAX_TRIES) {
    show("残念。答えは" + answer + "でした");
    finished = true;
  } else if (value < answer) {
    show("もっと大きい数です");
  } else {
    show("もっと小さい数です");
  }
  document.getElementById("left").textContent = "残り" + (MAX_TRIES - tries) + "回";
}

document.getElementById("btn").addEventListener("click", check);
</script>
</body>
</html>

ファイルとして保存してブラウザで開く手順は、HTML1ファイルで動くゲームの作り方と保存のしかたにまとめてあります。ここは開けた前提で話を進めます。

コードの読み方表を見る

コードは上から順に全部読む必要がありません。役割ごとに7つの塊に分けると、見る場所が決まります。次の図が、塊ごとの役割と、触ってよいかの目安です。行番号は、上のコードの1行目から数えたものです。

押さえる点は2つあります。

1つ目は、21〜22行の2つの数字だけが「遊びの設定」だということです。ゲームの難しさを変えたいときは、ここだけを見ます。

2つ目は、同じ名前が2か所以上に出てくる場所が「対になっている」ことです。たとえば id="guess" は16行目と36行目に出ます。片方だけ変えると、もう片方が相手を見失います。

触ってよい場所の見分け方3つ

行の意味が分からない場合も、見た目で触ってよいかの見当はつきます。次の3つです。

1. 全部大文字の名前（MAX_NUMBER、MAX_TRIES）は、数だけ書き換えてよい設定です。実測したのは3と10の2通りで、0や負の数は試していません。1以上の整数にしておくのが無難です

2. 引用符（"）で囲まれた日本語は、画面に出る文言です。引用符の外側を変えなければ安全です

3. ===、<、>=、parseInt、id の名前、関数の名前は、他の行と対になっているので触りません。変えたいときは、自分で書き換えずにAIに頼みます

この3つの見方は、この数当てゲームでは通用しました。AIが書くコードは名前の付け方が違うことがあり、その場合は当てはまらないこともあります。ほかのコードでは確かめていません。

数を変えて動かす（触ってよい場所の実測）

読み方表のとおりに変えて、Node.jsの仮部品をつけて動かしました。条件は次のとおりです。

• 日付と環境は、2026年10月19日、Windows 11、Node.js v24.14.0

• ブラウザの代わりに、getElementByIdとtextContentとaddEventListenerだけを持つ仮部品をつけて、上のJavaScriptを動かした

• 乱数は固定値に差し替えた。0.4のときは答えが41になる

• ブラウザの画面表示とクリック操作は、この実測では見ていない。headless Chromeでは、ファイルを開いたあとにルール文が「1から100までの数を7回以内に当ててください」と出ることだけ確かめた

MAX_TRIESを3にすると、3回目で終わりました。MAX_NUMBERを10にすると、ルール文の数字も自動で変わりました。変えたのはMAX_TRIESの3とMAX_NUMBERの10だけです。ルール文はMAX_NUMBERをつないで書いてあるので、数字を1か所変えれば足りました。AIが出したコードに同じ数が何か所も直接書いてあれば、その分の書き換えが要ります。

49行目の「もっと大きい数です」を「上です」に変えた例では、表示だけが変わり、判定には影響しませんでした。画面に出す文字を変えたいだけなら、引用符の中だけを触ります。

触ってはいけない場所を変えると何が起きるか

次に、読み方表で「×」や「△」にした場所を、わざと変えました。同じ条件で動かした結果です。

8つの変更の結果は3通りに分かれました。

• エラーが出る変更が3つ（=== を = に、JavaScript側だけidを変える、変数名の打ち間違い）

• エラーが出ないのに、動きが狂う変更が4つ。ヒントが逆になる、答えが0〜99になる（乱数0のとき0）、回数が1回増える、parseIntを消すと正解にならない、というものです

• エラーも出ず、何も起きない変更が1つ（addEventListenerの行を消す）

今回の実測は仮部品でエラーを直接見ています。ブラウザの画面ではエラー文が出ず、何も起きないように見える場合があります（未確認）。画面だけでは見分けにくいので、ルール文では「1から」と言っているのに答えが0になる、といった食い違いは、遊んで初めて分かります。触ってよい場所を決めておくと、こうした食い違いを自分で作らずに済みます。

=== を = にした変更でTypeErrorが出たのは、valueがconstだからです。letで書かれたコードなら、エラーなしで常に正解になる可能性があります（未実測）。

parseIntを消すと正解にならないのは、入力欄の値が文字列のままで、数の41と文字の41が === で一致しないためです。

addEventListener の行を消した場合は、ボタンを押しても何も起きませんでした。画面に変化がないときの原因は、この行の抜け以外にもあります。

このコードで使っている部品の意味

読み方表に出てきた部品のうち、仕様が決まっているものは、公式のMDN Web Docsで確認しました。

• Math.random()：MDNによると、0以上1未満の範囲で浮動小数点の擬似乱数を返します。1は含まれません。23行目でMAX_NUMBERを掛けてMath.floorで切り捨て、1を足しているのは、結果を1からMAX_NUMBERの範囲の整数にするためです

• Math.floor()：与えられた数値以下の最大の整数を返します

• parseInt()：MDNによると、第1引数を文字列に変換して解釈し、整数またはNaNを返します。入力欄の値を数にして比べるために36行目で使っています

• getElementById()：idが一致する要素を返します。一致する要素がなければnullを返します。実測でJavaScript側だけidを変えたときに「Cannot read properties of null」と出たのは、このnullを読もうとしたためです

• textContent：ノードとその子孫のテキストの内容を表します。設定すると、中の子がすべて取り除かれ、指定した文字に置き換わります

• addEventListener()：対象に特定のイベントが届くたびに呼ばれる関数を設定します。56行目では、ボタンのクリックでcheckを呼ぶ約束になっています

AIに変更を頼むときの一言

自分で触る場所を決めたら、頼み方も具体的にします。次の依頼文を、そのまま貼って使えます。

添付のHTMLの MAX_TRIES を5に変えてください。それ以外の行は変えないでください。変えた行だけを教えてください。

「それ以外は変えない」「変えた行だけを教える」の2つを入れておけば、返ってきたコードで確認する場所は1か所になります。変える前に、元のファイルを別名でコピーして残しておくと、うまくいかなかったときに戻せます。

AIの使い方そのものは、Claude Codeの使い方を初心者向けにまとめた記事にまとめています。どんなジャンルから作るか迷う場合は、ゲーム作り 初心者のジャンルの選び方も合わせて読んでください。

次にやること

数当てゲームの22行目のMAX_TRIESを5に変えて保存し、ブラウザを再読み込みして、ルール文が「5回以内」に変わるかを確かめます。