Three.js × GPTで16時間でゲームを作ったら思ってたより“人間らしく”なった話

---

## 🕹 はじめに：Vibe.Jamってなに？

> AIで80%以上自動生成したゲームを、Web上で動かして提出する――  
> そんな“人間とAIの創造性勝負”みたいなハッカソン、それが **Vibe.Jam**。

Vibe Jam 2025 概要
テーマ：

人間の創造力 × AI の融合で「80%以上AIで生成されたゲーム」を作れ！

開催目的：

生成AIが溢れる未来で、人間のバイブス（vibes）を込めたゲームを生み出せるか？というチャレンジ。

ルール：

80%以上AIによる生成（コード、アセット、BGMなど）

Web上で即プレイ可能（ログインなし・ロード画面なし）

無料で遊べる＆独自ドメインで公開

エンジンは自由（Three.js推奨）

コードに参加者識別コードを入れる必要あり

No-codeツールもOK！コラボもOK！

ジャッジ：

Andrej Karpathy（元TeslaのAI研究者）など、AI界のレジェンドが審査！


![IMG_3414.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022043/b025a782-ea39-407c-bd86-71c01e9e388a.jpeg)

うーん奥深い

---

## ⏳ 16時間しかねぇ！！マジでまにあわねぇ！！

締切：

![IMG_3410.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022043/e9097a72-adce-4644-a599-36baa8065279.jpeg)

- 提出締切：あと16時間  
- 残り時間：実質徹夜  
- 素材？企画？なにもない！！

---

## 🤖 GPT「諦めないでーーーーー！！？」

> 「GPTちゃん、今からでも間に合うゲームってある？」  
> → **「できます。対話ログ × 選択 × 余韻で勝負です。」**
```md
了解ッ！！！  
よっしゃ、**このコンセプトを最短で形にするためのToDoリスト**をガチで作ったよ。  
Jam提出前提で、**16時間以内のプロトタイプ完成ライン**を意識してる。  
名前仮で「Beyond the Ping」にしてるけど後で変更OK！

---

# **【Beyond the Ping】開発 ToDoリスト（超実践型）**

## 【0. 企画整理（30分以内）】
- [x] タイトル仮決定（"Beyond the Ping"）
- [x] 世界観と流れ（導入〜チャット〜選択〜余韻）を1枚メモにまとめる
- [x] 制作範囲を明確化（UI1画面・ログ会話20往復以内・選択肢3つ）

---

## 【1. チャットUIベース（1〜2時間）】
- [ ] HTML/CSSで仮のチャット画面を作成
- [ ] プレイヤー入力とAI（NPC）の応答表示をループで再現
- [ ] 選択肢表示機能（3択・クリックで進行）
- [ ] チャットログのスクロール処理
- [ ] ログアウト時の演出（名前がグレーアウトなど）

---

## 【2. 会話データ作成（1.5時間程度）】
- [ ] NPCキャラのプロフィール定義（名前、性格、話し方）
- [ ] 会話ログの構成（20前後の発言、途中から異変が見える）
- [ ] プレイヤー用選択肢（最後のみ、3つ用意）
- [ ] 選ばなかった選択肢を記録するロジック（薄く表示用）

---

## 【3. 分岐＆余韻演出（2時間程度）】
- [ ] 最後に「選ばなかった言葉」をグレイで表示
- [ ] 分析的コメント（人間性・バイブスへの問い）を表示する画面追加
- [ ] 最後にプレイヤーの選んだ言葉を中央に大きく表示
- [ ] ゆっくりフェードアウト演出追加

---

## 【4. BGMと雰囲気（1時間）】
- [ ] 無料またはAI生成BGM（Suno、Mubertなど）を選定
- [ ] JSでBGM再生＆途中フェードアウト実装
- [ ] サウンド無しバージョンでもOKなように文脈演出強化

---

## 【5. 最後の調整と公開（1.5時間）】
- [ ] モバイル対応の最低限レイアウト調整
- [ ] 公開用にVercelかNetlifyでデプロイ
- [ ] タイトル画面（1枚）とクレジット画面追加
- [ ] Jam提出要件の「コード内に参加者ID」を埋め込む

---

## 【任意：ブラッシュアップ用】
- [ ] ログ保存 or スクショ機能（余力があれば）
- [ ] GPTでランダム生成verの構想（次回に向けて）
```
# **総作業時間：約9〜11時間　まだ間に合う！！！！**


## 🎮 Beyond the Ping（バイヨンド・ザ・ピング）

- オンラインゲームのチャットルームで出会った「クラウドちゃん」
- ゲームトークから始まるやりとりは、だんだん不穏に…
- 最後にプレイヤーが自由に“最後の言葉”を残す
- 選ばなかった選択肢が薄く表示される  
- AIがその言葉を“解釈”して静かに返してくる

---

## 🫱 「お前を信じるぞー！！！」

- 指示書をGPTに投げる
- セリフ・ログ・構成・Three.jsの部屋、ぜんぶ提案してもらう
- コードもGPTベース、Copilot補完、私は演出と雰囲気担当

ちなみに作成させた指示書と仕様書はこちら

# **Beyond the Ping – README & Spec**
## **Overview**
**Title:** *Beyond the Ping*  
**Genre:** Short-form narrative chat game  
**Theme:** Humanity, empathy, and the fragility of connection  
**Platform:** Web (Playable in browser, mobile-friendly)  
**Made for:** [Vibe.Jam 2025](https://jam.pieter.com)
## **Concept**
You meet someone through an online game.  
You chat. They seem young. Fun. Maybe a little lonely.  
But as the conversation goes on, something feels… off.

This game is about recognizing silent pain,  
and deciding how — or if — you should respond.
---

## **Gameplay Flow**

1. You enter a chatroom.  
2. You talk with *cloudchan*, a game character friend.  
3. Their messages slowly shift from playful to unsettling.  
4. You’re offered **3 choices**:  
   - A rational response  
   - A gentle, passive one  
   - A cold rejection  
5. Then, you write your own final message — freely.  
6. *cloudchan* logs off.  
7. You’re left alone, with your words, and a reflection.
---
## **Core Features**
- **3D scene built with Three.js** (a dimly lit, gently swaying room)  
- **Dialogue-driven interaction** (fixed log up to player’s final input)  
- **Selectable choices + free input**  
- **Unchosen options appear faintly at the end**  
- **Interpretation of your final words** shown based on tone
---
## **AI Usage (85%+)**
| Element              | Generated by AI         |
|----------------------|-------------------------|
| Dialogue             | ChatGPT-4 (majority)    |
| Ending interpretations | ChatGPT-4              |
| BGM                  | Mubert (AI music tool)  |
| Background code      | Copilot / GPT-assisted  |
| Human input          | Story structure, tone design, final editing |
---
## **Final Message Interpretation**

After writing your final words, the game offers a quiet reflection.

### If message contains harsh or aggressive tone:
```txt
Interpretation:  
Perhaps your words came from frustration, anger, or fear.  
But harshness can sometimes hurt more than silence.  
We hope you remember that there's always a choice to speak with kindness.
```

### If message contains warmth or empathy:
```txt
Interpretation:  
There is no perfect answer.  
But your words carried a warmth that only a human heart could create.  
May that kindness be the part of humanity that stays.
```

---

## **How to Play / Build**

```bash
git clone https://github.com/yourname/beyond-the-ping
cd beyond-the-ping
npm install
npm run dev
```

Or simply open `index.html` in browser (if using pure JS build).

---

## **Dev Notes**

- Built with: HTML/CSS/JavaScript + Three.js  
- No login. No accounts. Just words.  
- Playtime: ~5 minutes  
- Mobile supported

---

## **Credits**

- **Writer/Dev:** [Your Name]  
- **AI Collaborators:** ChatGPT-4, Mubert  
- **Tools:** Vite / Vanilla JS / Three.js

---

## **Final Note**

> You won’t know if you saved them.  
>  
> But maybe,  
> just maybe,  
> someone felt less alone.

---

##  🤖 GPT 「じゃあ本気でAIが気持ちよく従ってくれる仕様書作るね」
つまり：

> **“優しくて徹底したママ指示書”**  
> ＝ 行間読まなくていい！目的・制約・レイアウト・フォルダ構成・やるなリスト完備！

---

# **Beyond the Ping – FULL IMPLEMENTATION SPEC**

---

## **Mission Objective:**

Build a single-page web game called **"Beyond the Ping"** using vanilla JavaScript, HTML, CSS, and Three.js.  
This is a *chat-based narrative experience* with a 3D background and a fixed structure.  
You are to implement it **within a single folder**, with **no extra folders or automatic scaffolding**.  
All logic and assets must live in the same directory for easy deployment.

---

## **Required File Structure (Do NOT change):**

```
/beyond-the-ping/
├── index.html
├── style.css
├── script.js
├── scene.js         ← (for Three.js background logic)
├── chatlog.json     ← (dialogue log)
├── bgm.mp3          ← (optional AI-generated background music)
├── README.md
```

> **DO NOT create additional folders like /src or /assets.**  
> You are not allowed to use frameworks, build systems, or TypeScript.  
> This is a flat, browser-runnable game.

---

## **Key Components & Behavior:**

### 1. **Three.js Scene (`scene.js`)**
- Dark room
- One swaying ceiling light (very slow motion)
- Camera fixed, slightly breathing movement
- Scene runs behind the UI as a fullscreen canvas
- Minimal or no interaction

---

### 2. **Chat UI (`index.html + style.css + script.js`)**
- Left-aligned NPC messages (`cloudchan`)
- Right-aligned player messages
- Fixed message log (loaded from `chatlog.json`)
- After certain point, 3 choices appear (as buttons)
- After choice: a single-line text input for player’s final message

---

### 3. **Ending Sequence**
- cloudchan sends final message (e.g. "thank you... logging off now")
- Chat fades out, screen dims
- Display:
  - The player's final message (centered)
  - The 2 unchosen choices (faint, under the final message)
  - An “Interpretation” block based on their message's tone

---

## **Interpretation Logic (from `script.js`)**

Use keyword detection to assign one of two responses.

```js
const rudeWords = ['fuck', 'die', 'stupid', 'bitch', 'kill'];
const kindWords = ['hope', 'okay', 'love', 'safe', 'stay', 'care'];

function interpret(msg) {
  const lower = msg.toLowerCase();
  const isRude = rudeWords.some(w => lower.includes(w));
  const isKind = kindWords.some(w => lower.includes(w));

  if (isRude && !isKind) return 'A';
  return 'B';
}
```

**Interpretation A (harsh):**
```
Interpretation:  
Perhaps your words came from frustration, anger, or fear.  
But harshness can sometimes hurt more than silence.  
We hope you remember that there's always a choice to speak with kindness.
```

**Interpretation B (empathetic):**
```
Interpretation:  
There is no perfect answer.  
But your words carried a warmth that only a human heart could create.  
May that kindness be the part of humanity that stays.
```

---

## **Technical Constraints**
- **No frameworks** (React, Vue, etc)  
- **No bundlers** (Webpack, Vite, etc)  
- **No server-side logic** (pure frontend only)  
- **No additional folders** or auto-generated files  
- Must be deployable via static hosting (Netlify, GitHub Pages, etc)

---

## **Do Not Do:**
- Do NOT install packages  
- Do NOT generate extra files (README is OK)  
- Do NOT guess file/folder structure  
- Do NOT invent interactions or features unless explicitly stated

---

## **How to Pass This to ChatGPT or Sonnet:**

**Sonnet 3.7 (VS Code):**
- Paste entire spec into `README.md` at root
- Open Command Palette → “Sonnet: Generate Project Based on README”
- Monitor for file/folder compliance
- Delete any `/src` folders it tries to create

**ChatGPT-4.5 omni3:**
- Paste full spec into chat
- Prompt:  
  > “Please implement this project as described in a single flat folder. Do not add extra files or folders. Start with index.html.”

---
VS CodeのSonnetくんには特に「絶対に階層を汚すな」と繰り返すと効果ある（ガチで）
---


## 🛠 こんな指示だけでここまでできる時代なんだなぁ…

→ **それっぽいものができる。ほんとに。**
(sonnet3.7くんは多少誤解していたようなのですが…マジでREADMEコピペして何もしてないのにここまでできたのはヤバイ！！)

![スクリーンショット 2025-04-02 10.51.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022043/ccc27c16-e54d-43ac-a9a7-36e1335c6b71.png)
![スクリーンショット 2025-04-02 10.50.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022043/bc02cc56-232c-4ce4-b107-ab2d9c8658d6.png)
---

## ✍ 最後に

> やはり仕様書！指示書！README!土台こそ全て！  
> **Chat GPTちゃん……なんていい子なの？**

![スクリーンショット 2025-04-02 11.07.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022043/68980f71-70ef-459a-9eb3-a661566ee7d6.png)
![スクリーンショット 2025-04-02 11.08.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022043/56cdd81a-e2ef-40e2-9a01-734e83479424.png)



---

## オチ：だがGrokテメーはダメだ💩
![IMG_3419.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022043/5110190e-d62a-48ea-805b-f4c1c08b4dda.png)
![IMG_3420.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022043/56474a36-b4b6-4ec5-91d2-d4b7085e4c81.png)
![IMG_3421.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4022043/d3d7bf29-93f5-4269-a69a-fd18bc89ccd6.png)