🕹 はじめに：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界のレジェンドが審査！
うーん奥深い
⏳ 16時間しかねぇ！！マジでまにあわねぇ！！
締切：
- 提出締切：あと16時間
- 残り時間：実質徹夜
- 素材？企画？なにもない！！
🤖 GPT「諦めないでーーーーー！！？」
「GPTちゃん、今からでも間に合うゲームってある？」
→ 「できます。対話ログ × 選択 × 余韻で勝負です。」
了解ッ！！！
よっしゃ、**このコンセプトを最短で形にするための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
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
- You enter a chatroom.
- You talk with cloudchan, a game character friend.
- Their messages slowly shift from playful to unsettling.
- You’re offered 3 choices:
- A rational response
- A gentle, passive one
- A cold rejection
- Then, you write your own final message — freely.
- cloudchan logs off.
- 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:
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:
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
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.
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.mdat root - Open Command Palette → “Sonnet: Generate Project Based on README”
- Monitor for file/folder compliance
- Delete any
/srcfolders 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コピペして何もしてないのにここまでできたのはヤバイ！！)
✍ 最後に
やはり仕様書！指示書！README!土台こそ全て！
Chat GPTちゃん……なんていい子なの？
オチ：だがGrokテメーはダメだ💩
