Tat_zoNe

VSCodeを使ったことないガチのプログラミング初心者が作る推理ゲーム

デバッグ地獄

「プログラミング初心者がゲームを作る」

それだけでも難しそうなのに、今回は推理ゲーム。

しかも、VSCodeすら使ったことがない状態からスタートして、

HTML・CSS・JavaScriptを駆使し、推理小説をゲーム化するという無謀な挑戦をしました。

結果として、試行錯誤を繰り返しながらも完成。

その過程で、デバッグ・環境構築・設計ミス・プログラミングの壁と、さまざまな困難にぶつかりました。

今回は、その「ガチ初心者が推理ゲームを作るまでの苦労とデバッグの記録」を残しておきます。

1. そもそもなぜ推理ゲームを作ることになったのか？

元々は「推理小説を書いていた」のがスタート。

ただ文章で表現するより、プレイヤーが実際に推理できる形にしたい と思い、ゲーム化を決意。

しかし、当時のスキルは…

• VSCodeを使ったことがない

• HTMLとCSSを少し触った程度

• JavaScriptはほぼ未経験

…完全に初心者だった。

2. 最初の壁：「環境構築って何？」

まず最初にぶつかったのが、開発環境の準備。

VSCodeって何？どうやってコード書くの？どこで実行するの？

解決策：GPTをフル活用し、以下を一つずつ学習。

✅ VSCodeのインストールと基本操作

✅ HTML・CSS・JavaScriptを分けたファイル構成

✅ Live Serverを使ってブラウザで動作確認する方法

これで「とりあえず開発を始められる環境」が整った。

3. 設計ミスの連発：「何をどう作ればいいの？」

次に「ゲームの設計」で詰まる。

頭の中には**「こんな感じの推理ゲームにしたい！」**というイメージはあったけど、

実際にどうコードを書くべきかが分からない。

最初に作った設計案（雑すぎた）：

1. 事件が発生する画面

2. 証拠を集める画面

3. 証言を集める画面

4. 推理して犯人を指名する画面

5. エンディング

…でも、ここから具体的なコードに落とし込めない。

解決策：GPTにプロンプトを調整しながら相談。

• 「推理ゲームの流れを整理して、HTML構造を考えて」

• 「シーンごとに <div> を使って切り替える方法を教えて」

• 「ボタンを押したら次の画面に進むようにするには？」

これで、HTML・CSS・JavaScriptを組み合わせた「シーン切り替え」の仕組み を理解できた。

4. JavaScriptの壁：「動かない」「エラーだらけ」

初心者にとって、JavaScriptは鬼門。

特に以下の部分で苦戦した。

① シーン切り替えがうまくいかない

間違い：

function showScene(sceneId) { let scenes = document.getElementsByClassName("scene"); for (let scene of scenes) { scene.style.display = "none"; // すべて非表示 } document.getElementById(sceneId).style.display = "block"; // 画面切り替え }

原因：

•document.getElementById(sceneId) の sceneId が間違っていた

• scene4〜scene7 の要素がHTMLに存在していなかった（作り直しの過程で消えていた）

解決策：HTMLとJSのIDを一致させる＆console.log(sceneId)でデバッグ。

② 証拠を集めても推理画面に反映されない

間違い：

function collectEvidence(evidence) { let evidenceList = document.getElementById("evidenceList"); evidenceList.innerHTML += `<li>${evidence}</li>`; // 証拠を追加 }

原因：

• 証拠を選んでも、推理フェーズで選択できない

• evidenceSelect に証拠データを追加していなかった

修正後：

function collectEvidence(evidence) { if (!collectedEvidences.includes(evidence)) { collectedEvidences.push(evidence); // 証拠リストに追加 let evidenceList = document.getElementById("evidenceList"); let li = document.createElement("li"); li.textContent = evidence; evidenceList.appendChild(li); // 推理フェーズの選択肢に追加 let evidenceSelect = document.getElementById("evidenceSelect"); let option = document.createElement("option"); option.value = evidence; option.textContent = evidence; evidenceSelect.appendChild(option); } }

解決策：

• 証拠を表示するだけでなく、推理画面の <select> にも反映 させる

• デベロッパーツール（F12）で evidenceList の内容を確認 する

5. 何度も心が折れかける

最初は「ゲームを作るの楽しそう！」と思ってたけど、

バグ・エラー・設計ミスが連続して、途中で何度も「無理かも…」と思った。

特に辛かったポイント

• 何回もコードを作り直していたら、HTMLの一部を消してしまう

• 動いていたはずのものが、別の修正で動かなくなる

• デバッグしても原因が分からない時がある

でも、「もう少し試してみよう…」を繰り返して、

なんとか完成までたどり着いた。

6. まとめ：初心者が推理ゲームを作るのは難しい、でも…

最終的に、初心者が**いきなり推理ゲームを作るのは「かなり無謀な挑戦」**だった。

それでも、以下のことを意識すれば乗り越えられた。

✅ 設計を先にしっかり決める（途中でコードを壊さないため）

✅ エラーが出たら、まずはデベロッパーツール（F12）で確認する

✅ GPTをフル活用する（ただし、指示は具体的に）

✅ 一度に全部作ろうとせず、まずは小さく作る

7. 次にやること

今回の経験を活かして、次は「もっとスムーズに作る」ことを目標にする。

• • •

• • •