WORKS
GAME

GAME APP ゲームアプリ|ワードウルフ

  • HTML
  • CSS
  • JavaScript
  • SPA (画面遷移)
  • Single File
  • レスポンシブ

制作時間:約3日

これなーんだ? ワードウルフのタイトル画面

OVERVIEW

プロジェクト概要

課題

スマホ1台あれば、その場の人数ですぐに遊べるパーティゲームが欲しかった。 アプリのインストールや会員登録なしで、ブラウザを開いた瞬間に始められる 「ワードウルフ(少数派当て)」を自分の手で形にすることを目指した。

目的

お題の配布・コメント周回・投票・ウルフの最終推理・勝敗判定までの ゲーム進行を1ファイルで完結させる。 3〜10人、コメント1〜3周、画像モード/上級モードなど、 遊ぶ人数や好みに合わせて調整できる設計にした。

PROCESS

制作プロセス

  1. PLAN

    ワードウルフのルールを分解し、必要な画面(設定→お題確認→コメント→投票→結果)を設計。

  2. FLOW

    1台のスマホを回しながら遊ぶ前提で、画面を順番に切り替えるSPA構成を実装。

  3. SECRET

    お題は「長押しで確認」方式にし、隣の人に見られない受け渡しUIを用意。

  4. JUDGE

    投票集計・ウルフの推理・市民/ウルフの勝敗判定までをロジックで自動化。

  5. POLISH

    星空グラデの世界観、アニメーション、画像モードなどで遊び心と没入感を追加。

GALLERY

ゲーム画面

RETROSPECTIVE

振り返り・工夫した点

ONE PHONE, PASS & PLAY

専用機器もサーバーも使わず、スマホ1台を回すだけで成立する設計に。 お題は「長押しで確認」にして、受け渡しの瞬間に他人へ見えないようにした。 インストール不要で、URLを開けばすぐ遊べる手軽さを最優先した。

SINGLE FILE APP

HTML・CSS・JavaScript を1つのファイルに完結させ、外部依存ゼロ。 そのままどこに置いても動くので、配布も差し替えも一瞬で済む。

TUNABLE RULES

プレイ人数 3〜10人、コメント周回 1〜3周、 画像モード/上級(言葉)モードを切り替え可能に。 集まったメンバーや盛り上がりに合わせて難易度を調整できる。

WORLD & MOTION

星空のグラデーションとラベンダー基調のトーンで、夜に集まって遊ぶ パーティの空気感を演出。画面遷移にもアニメーションを添えた。

STATE MACHINE

設定→お題→コメント→投票→推理→結果という状態遷移を JavaScript で管理。プレイヤーごとの順番・周回・集計を破綻なく回す土台を作った。

LIVE

今すぐ遊ぶ

ブラウザだけで動く単一ファイルのWebアプリです。 下記から実際にプレイできます(スマホを回して複数人で遊ぶゲームです)。

コピーしました