Copyright © 2014 magnetic.

Hexo Theme by Jonathan K.

about-goriaulle-room

06/27

モルモット

ゴリ男の部屋について

目次

ゲーム感覚でブログを読む

ゴリラが私に代わって一言をしゃべる。
というのを作ったって話。

ここでは少しずつ制作過程を更新していこうと思う。

構想

私が作りたいものは以下のもの。

  • ファミコンゲームのような見た目と音楽
  • ディスクシステムのアップルタウン物語1のような鑑賞型ゲーム
  • 主人公はゴリラのゴリ男
  • 彼女のゴリアンヌで、いつか結ばれたい（クリア条件）
  • 若干のインタラクティブな演出でプレーヤが物語に介入可能
  • VP制で3ポイントでゲームクリア
  • ゴリラの天敵を豹と蚊にして、VPに干渉する
  • VPを取得する方法は数種用意する

こんな感じかな。

設計書

ゴリ男の部屋 Goriaulle’s Room 設計書

1. 概要

項目 内容
プロジェクト名 ゴリ男の部屋 Goriaulle’s Room
種別 Webデスクトップおもちゃ / 放置ゲーム
使用技術 HTML5, CSS3, Vanilla JavaScript (ES2017+)
画面サイズ 600×600px（可変スケーリング対応）
フォント PixelMplus10 Regular（Webフォント）
対応言語 日本語 / 英語
生成元 Google Gemini
作者 friedbiscuit

2. アーキテクチャ

2.1 ファイル構成
gorilla-game-square/
├── index.html          # メインHTML（タイトル画面、ステージ、UI）
├── gorilla.css         # 全スタイル定義（CSS変数、アニメーション含む）
├── gorilla.js          # 全ゲームロジック（単一ファイル、2192行）
├── test.html           # デュエルカットイン演出のテスト
├── assets/             # 画像・音声リソース
├── xcf/                # GIMP ソースファイル
├── aup3/               # Audacity 音声ソースファイル
└── .gitignore
2.2 ランタイム構成
index.html (DOM)
    ↓
gorilla.css (スタイル・アニメーション)
    ↓
gorilla.js (全ロジック)
    ├── 定数・設定 (定数, スプライト定義, プレイリスト)
    ├── DOM参照 (要素キャッシュ)
    ├── 状態管理 (HP, BP, 天候, 時刻, 毒状態など)
    ├── Cookie永続化 (saveGame / loadGame)
    ├── HP管理 (updateHPUI / takeDamage / heal)
    ├── 時刻管理 (checkTime / applyTimeOfDay)
    ├── ゴリラAI (gorillaBrain / selectAction / 移動)
    ├── 侵入者システム (showIntruder / showInvader)
    ├── 天候システム (changeWeather)
    ├── 毒システム (poisonActivated)
    ├── デュエル演出 (duelCutIn)
    ├── フレーズ取得 (loadExternalPhrases / speakAndLog)
    ├── オーディオ (audioPlayer / プレイリスト切替)
    ├── エンドロール (startEndRoll)
    ├── 画面フィット (fitToScreen)
    └── イベントリスナー (クリック, 音量, 遷移, BGM)

3. ゲームシステム詳細

3.1 状態管理
変数 型 初期値 説明
currentHP number 100 体力 (0-100)
banana_pt number 3 バナナポイント (0-3)
isPoisoning boolean false 毒状態フラグ
poisonTerm number 5 毒持続ターン数
weatherState enum SUNNY 天候状態
isMidnight boolean false 深夜フラグ
isInHeaven boolean false ゲームオーバーフラグ
isGameEnded boolean false ゲームクリアフラグ
gorillaState enum IDLE ゴリラの行動状態
clearedTime number 0 クリア回数
3.2 ゴリラの行動AI

gorillaBrain() がメインループ。一定間隔で以下の処理を実行:

  1. おもちゃ表示 (playingToy) - 曜日・時刻に応じた装飾品切替
  2. 花の開花 (bloomFlower) - 毎月1日0時に植木変化
  3. 侵入者 (showInvader) - 確率で発生
  4. 毒処理 (poisonActivated) - 毒状態ならダメージ
  5. 行動選択 (selectAction) - 確率ロール + 優先度で決定
3.3 行動一覧
行動 確率 優先度 説明
GAMING 15% 5 机でゲーム（椅子に座る）
GARDENING 10% 4 ガーデニング
SWEEPING 12% 3 部屋の掃除
COUNTING 8% 3 小銭を数える
SNACKING 8% 2 バナナを食べる（HP回復）
WALKING 残り - 部屋内を歩く
3.4 侵入者システム
天敵 (HP減少系)
侵入者 発生確率 効果
LEOPARD (豹) 2% ダメージ 55-60、デュエルカットイン演出
MOSQUITO (蚊) 1% ダメージ 2-3 + 毒状態付与
イベント系
侵入者 発生確率 効果
CROW (カラス) 2.1% 机の上をCM表示に差し替え、広告表示
PANDA (パンダ) 10% 窓からパンダが覗く
UAP 5% メン・イン・ブラック出現
SPARROW (雀) 2.5% 雀が窓に
RAFFAELLO (TMNT) 3% 床タイルから出現
DRAGON (ドラゴン) 7% 白フード出現
回復系
侵入者 発生条件 効果
ZOOKEEPER (飼育員) HP < 20 かつ 60%の確率 HP全回復
GORIANNE (ゴリアンヌ) HP < 20 かつ 98%の確率 HP全回復
3.5 時刻システム
時間帯 時刻 背景 状態
朝 0:00-15:59 bg_room_clean / morning-landscape ゴリラ活動
夕方 16:00-18:59 noon-landscape 窓のみ変化
夜 19:00-23:59 night-landscape 窓のみ変化
深夜 0:00-4:59 bg_room_night ゴリラ就寝、エンドロール

時間チェックは setInterval(checkTime, 10000) で10秒ごとに実行。

3.6 天候システム
天候 発生確率 説明
SUNNY (晴れ) - デフォルト、時刻に応じた風景
CLOUDY (曇り) 3% 曇りの風景
STORMY (嵐) 1.9% 嵐の風景
SNOWY (雪) 0.9% 雪の風景
3.7 ポイントシステム
  • バナナポイント (BP): 最大3、侵入者イベントのクリック成功で-1
  • HP回復条件: BP消費でHP全回復（HP=MAX時はスキップ）
  • ゲームクリア条件: BP=0 になった時点でステージクリア
  • クリアカウント: clearedTime がインクリメント、画面下部にバナナアイコン表示（5の倍数は xN 表記）
3.8 毒システム
  • 蚊に刺されると毒状態 (isPoisoning = true)
  • 5ターン継続、毎ターン 0-1 のランダムダメージ
  • 紫色のオーバーレイ + キャラクターが震える
3.9 デュエル演出
  • 豹 (LEOPARD) 発生時にカットイン演出
  • ゴリ男と豹がスライドイン、衝突後に震動
  • キャラクタークリックでパリィ可能 (parried = true)
  • パリィ成功時はダメージ無効

4. オーディオシステム

4.1 BGMプレイリスト
条件 プレイリスト
平日 (月-木) 各曜日専用リスト
金曜日 8bit + 金曜リスト
週末 (金夜-日) フィールドリスト
深夜・天国・クリア 夜リスト
日曜日 日曜リスト
4.2 効果音

14種類のSEファイル（assets/gorilla-*.mp3）、再生中のみ鳴動。

4.3 音量

スライダー 0-100%、再生速度はHPに応じて 1.0-1.8 倍に変化。

5. 永続化

  • 方式: Cookie (goriaulle_state)
  • 有効期限: 7日間
  • 保存項目: bananaPoints, life, isPoisoned, poisonTerm, lastUpdate, inventory, cleared, isSnacked
  • SameSite: Lax

6. セキュリティ

  • 開発者ツール対策: setInterval で performance.now() の差分を監視、100ms 以上かかったら画面をホワイトアウト

7. レスポンシブ対応

  • fitToScreen() で画面比率に応じて 0.95 倍率でスケーリング
  • ゲームステージとメッセージログが連動して拡縮

8. 外部連携

  • フレーズ取得: WordPressブログの /1990/09/07/one-liner/ から h2+p+p セレクタでテキスト抽出
  • 広告: Amazonアソシエイト（レコーディング機材・書籍）
  • ナビゲーションボタン: ブログの各セクションへリンク

9. 画面構成

┌─ Title Screen (オーバーレイ) ─────────────┐
│  ゴリ男の部屋 Goriaulle's Room             │
│  [PRESS START] [PRESS START WITH BGM]       │
└────────────────────────────────────────────┘

┌─ Header ───────────────────────────────────┐
│  Goriaulle's Room / ゴリ男の部屋            │
├────────────────────────────────────────────┤
│  Game Stage (600x600)                      │
│  ┌─ Room Items ──────────────────────┐    │
│  │ 椅子, 机, 窓, 植木, ゲーム        │    │
│  │ カセット, 時計, 棚, etc.          │    │
│  │ ゴリラキャラクター                │    │
│  │ 吹き出し                         │    │
│  │ 侵入者スプライト                  │    │
│  └──────────────────────────────────┘    │
│  [HPバー] LIFE: ████████ 100/100          │
│  ナビボタン [post][tweet][paint][scripts]  │
│  BGM [♫] 音量 [=====o=====] 30%         │
├─ Message Log ─────────────────────────────┤
│  > ウホッ！                               │
│  > 今日もいい天気だな                      │
├─ Gorilla Promotion (広告) ────────────────┤
└────────────────────────────────────────────┘

10. CSSアニメーション一覧

アニメーション 対象 説明
blink タイトルボタン 点滅
fadeout/fadein 各種アイテム フェード
scroll-up エンドロール 上方向スクロール (1900s)
walk-anim ゴリラ 歩行スプライト (4コマ)
sweep-anim ゴリラ 掃除スプライト (3コマ)
snack-anim ゴリラ 食事スプライト (4コマ)
poison-pulse 毒オーバーレイ 紫パルス
shudder ゴリラ 毒時の震え
slide-in-left/right デュエル キャラ登場
scene-vibrate デュエル 衝突時の震動
char-vibrate デュエルキャラ 個別震動

11. 今後の拡張可能性

  • Service Worker によるオフライン対応
  • 複数ステージ・マップ
  • アイテム収集要素の追加
  • ゴリラの掛け合いイベント
  • WebSocket による他ユーザー訪問
  1. 1.1985年発売のPCゲームの国内移植作。オリジナルは主人公がおじさんだが、ファミコン版は女の子に修正。制作ACTIVISION。 ↩
diary tech game

コメント: