[PIECE BY PIECE] 記憶のカケラ：失われたピースを集める神経衰弱ゲーム

カードゲーム「記憶のカケラ」のご紹介

このページでは、私が開発した カードゲーム「記憶のカケラ」 について紹介します。

ゲームの特徴や遊び方、開発の裏話、さらには現在の進行状況など、開発者目線での情報を盛り込んでいます。

まだ開発途中で、今後少しずつ更新していく予定です。

プレイ方法

ゲームの操作はシンプルで、タップでカードをめくりカードを揃えるだけです。
１０面クリアでエンディング、３周までプレイできます。

初回起動時はハンドルネームの入力画面が出ますが、P2Pのチャットのみで使用します。
データはローカルストレージのみ記録しますので、ユーザー側で削除できます。

ゲーム専用ページ

★アセットデータ配布

ゲーム内で使える、カード画像・分割画像・動画（mp4）をまとめたアセットデータ（ZIPファイル）を置いておきます。

使い方は、アセット管理画面から、ZIPを読み込み、LOADする事で使用できます。

jsonファイルは、データ参照用に使いますので削除しないようにしてください。



メインアセット

デフォルトで設定されてるメインアセット。

著作権フリーのNovaAnimeXLで作成した、アセットデータになります。
カード画像、動画のセット。
動画は、ローカル生成ＡＩの FramePackを使用しています。

📦 ゲームアセットをダウンロード [9.81 MB]

ゲーム用デフォルトデータ。(Stable Diffusion checkpoint / Nova Anime XL)

■ manifest.json

{
  "title": "メインアセット",
  "author": "lain",
  "version": "1.0",
  "note": "ゲーム用デフォルトデータ (Stable Diffusion checkpoint / Nova Anime XL)",
  "tags": ["anime", "cute", "Nova Anime XL"],
  "imgExtension": "webp",
  "movieExtension": "mp4",
  "thumbnail": "thumbnail.webp",
  "created": "2025-07-11T10:30:00Z",
  "mapping": {
    "excellent": "",
    "good": "",
    "normal": "",
    "sorry": ""
  }
}

NovaAnimeXL

著作権フリーのNovaAnimeXLで作成した、アセットデータになります。
カード画像、動画のセット。

動画を追加しました [2025/11/10]
動画は、ローカル生成ＡＩの FramePackを使用しています。

📦 ゲームアセットをダウンロード [12.9 MB]

NovaAnimeXL作成データ。(Stable Diffusion checkpoint / Nova Anime XL)

■ manifest.json

{
  "title": "NovaAnimeXL",
  "author": "lain",
  "version": "1.0",
  "note": "NovaAnimeXL作成データ。(Stable Diffusion checkpoint / Nova Anime XL)",
  "tags": ["anime", "cute", "Nova Anime XL"],
  "thumbnail": "thumbnail.webp",
  "imgExtension": "webp",
  "movieExtension": "mp4",
  "created": "2025-07-11T10:30:00Z",
  "mapping": {
    "excellent": "",
    "good": "",
    "normal": "",
    "sorry": ""
  }
}

■ civitai


ChateauLapin

ChatGPTで作成した、ドール系アセットデータになります。
動画は、ローカル生成ＡＩの FramePackを使用しています。

📦 ゲームアセットをダウンロード [7.30 MB]

ドール系アセットデータ(ChatGPT / FramePack)

■ manifest.json

{
  "title": "ChateauLapin",
  "author": "lain",
  "version": "1.0",
  "note": "ドール系アセットデータ(ChatGPT / FramePack)",
  "tags": ["doll", "cute", "dollhouse"],
  "imgExtension": "webp",
  "movieExtension": "mp4",
  "thumbnail": "thumbnail.webp",
  "created": "2025-08-22T19:00:00Z",
  "mapping": {
    "excellent": "",
    "good": "",
    "normal": "",
    "sorry": ""
  }
}

MysticDollFantasy

ChatGPTで作成した、ドール系アセットデータになります。
動画は、ローカル生成ＡＩの FramePackを使用しています。

動画を追加しました [2025/11/07]

📦 ゲームアセットをダウンロード [6.63 MB]

ドール系アセットデータ(ChatGPT / FramePack)

■ manifest.json

{
  "title": "MysticDollFantasy",
  "author": "lain",
  "version": "1.0",
  "note": "ドール系アセットデータ(ChatGPT / FramePack)",
  "tags": ["doll", "fantasy", "gothic","dollhouse"],
  "imgExtension": "webp",
  "movieExtension": "mp4",
  "thumbnail": "thumbnail.webp",
  "created": "2025-08-24T19:00:00Z",
  "mapping": {
    "excellent": "",
    "good": "",
    "normal": "",
    "sorry": ""
  }
}

ElementalSpirits

このタロットカードは、自然界の力と精霊たちの存在をテーマにしたアート作品です。
各カードは、水、風、土、火といったエレメンタルなエネルギーを表現し、精霊たちがあなたの心にささやき、導いてくれます。
ChatGPTによって創造されたこのデッキは、幻想的で神秘的な世界を感じさせ、タロットカードの占いだけでなく、アートとしても楽しめます。

※動画は未完成

📦 ゲームアセットをダウンロード [7.01 MB]

自然界の力と精霊たちをテーマにしたタロットカード。水、風、土、火のエレメンタルエネルギーが精霊たちを通じて導きます。(ChatGPT5)

■ manifest.json

{
  "title": "ElementalSpirits",
  "author": "lain",
  "version": "1.0",
  "note": "自然界の力と精霊たちをテーマにしたタロットカード。水、風、土、火のエレメンタルエネルギーが精霊たちを通じて導きます。(ChatGPT5)",
  "tags": ["spirit","tarot ", "ChatGPT"],
  "imgExtension": "webp",
  "movieExtension": "mp4",
  "thumbnail": "thumbnail.webp",
  "created": "2025-07-11T10:30:00Z",
  "mapping": {
    "excellent": "",
    "good": "",
    "normal": "",
    "sorry": ""
  }
}

★アバターデータ配布

ゲーム内で使える、アバターアデータ（ZIP）を置いておきます。
使い方は、アセット管理画面から、ZIPを読み込み、LOADする事で使用できます。

jsonファイルは、データ参照用に使いますので削除しないようにしてください。

記憶のカケラ：アバターアセット使用方法 記憶のカケラ：アバターアセット使用方法 - ZIP読み込み

■ 動作デモ

Load:
　アバターデータをロード
Del:
　アバターデータを削除
info:
　アバター情報を表示

記憶のカケラ：アバターアセット使用方法 - 動画

四国めたん

音声で使用しているvoicevoxのキャラクター「四国めたん」。
初期バージョンではセリフは１つだけでしたが、複数追加しました。

📦 ゲームアセットをダウンロード [45.7 KB]



■ manifest.json

{
  "title": "四国めたん",
  "author": "lain",
  "version": "1.0",
  "asset_type": "Avatars",
  "created": "2025-11-01T00:00:00Z",
  "note": "四国めたんのアバターデータ",
  "tags": ["VOICEVOX", "四国めたん", "漆黒のめたん"],
  "imgExtension": "webp",
  "movieExtension": "mp4",
  "imgAvatar": "avatar.webp",
  "missCount": 3,
  "speech_bubble": [
    "落ち着いて、次はうまくいくはずよ",
    "...",
  ],
  "position": {
    "height": "70%",
    "bubble-top": "5%",
    "bubble-left": "85%"
  }
}


ずんだもん

voicevoxのキャラクター「ずんだもん」。
複数のセリフを用意しています。

📦 ゲームアセットをダウンロード [61.8 KB]



■ manifest.json

{
  "title": "ずんだもん",
  "author": "lain",
  "version": "1.0",
  "asset_type": "Avatars",
  "created": "2025-11-02T00:00:00Z",
  "note": "ずんだもんのアバターデータ",
  "tags": ["VOICEVOX", "ずんだもん", "東北ずん子", "伊藤ゆいな"],
  "imgExtension": "webp",
  "movieExtension": "mp4",
  "imgAvatar": "avatar.webp",
  "missCount": 3,
  "speech_bubble": [
    "ずんだもんなのだ！",
    "..."
  ],
  "position": {
    "height": "70%",
    "bubble-top": "5%",
    "bubble-left": "85%"
  }
}


ゲームの特徴

シンプルで直感的な神経衰弱

シンプルな神経衰弱ゲームです。

わかりやすいルールで、どなたでもすぐに楽しめます。
カードを揃えるとクリアで10面クリアでエンディング。
３周クリアでGAME END、エンディングは３つ用意しています。

画像・動画を差替（アセット管理）

ゲームに必要なアセット（画像、動画）は手動で管理できます。
[オプション] -> [アセット]
ゲーム起動時に必要なアセットをすぐに読み込みます。

アセットデータはローカル内のZIPファイルからも読みこみ可能なほか、P2P接続でユーザー間でオンライン共有も出来ます。

[PIECE BY PIECE] 記憶のカケラ：アセット管理画面(メイン)

■ アセット管理（ボタン）

  • Load:
    　アセットデータをロード
  • Del:
    　アセットデータを削除
  • info:
    　アセット情報を表示
  • View:
    　アセット内の画像を表示（タップ操作でカードの移動可能）
[PIECE BY PIECE] 記憶のカケラ：アセット管理画面(メイン) アニメーション

■ アセットのエクスポート（📥）

登録されたアセットデータは、各アセットカードの右上に表示されているアイコンをクリックすることで、エクスポート（ダウンロード）できます。

[PIECE BY PIECE] 記憶のカケラ：アセット管理画面(メイン) アセットのエクスポート（📥）

[PIECE BY PIECE] 記憶のカケラ：アセット管理画面(メイン) アセットのエクスポート（📥）

左上のハンバーガーアイコンタップでナヴィゲーションメニューオープン

[PIECE BY PIECE] 記憶のカケラ：アセット管理画面(ナビゲーションメニュー)

アセット読み込みで、ローカル内のZIPファイルを読み込みます


[PIECE BY PIECE] 記憶のカケラ：アセット管理画面(ナビゲーションメニュー) アニメーション


■ ランダムアセット

ランダムアセットを有効にすると、ゲーム開始時に登録されたアセットリストからランダムにアセットが選ばれ、選択されたアセットでゲームがスタートします。
これにより、毎回異なるアセットを使用したプレイが可能になります。

  • ONの場合：
    ゲーム開始時にランダムでアセットが選ばれ、毎回異なるアセットでプレイできます。

  • OFFの場合：
    選択されたアセットは固定され、毎回同じアセットでゲームが開始されます。



■ ランダムアバター

ランダムアバターを有効にすると、ゲーム開始時に登録されたアバターリストからランダムに選択されたアバターでゲームがスタートします。

  • ONの場合：
    ゲーム開始時にランダムでアバターが選ばれ、毎回異なるアバターでプレイできます。

  • OFFの場合：
    選択されたアバターは固定され、毎回同じアバターでゲームが開始されます。



サウンドテスト

ゲーム内で使用している、BGM、SE、VOICEを再生する簡易音楽プレイヤー機能を実装

　[オプション] ➡ [サウンドテスト]

[PIECE BY PIECE] 記憶のカケラ：サウンドテスト


プレイ履歴

ブラウザのLocalStorageを使い、ゲームのプレイ履歴を保存する機能を実装

[オープニング画面] ➡ [履歴を見る]

[PIECE BY PIECE] 記憶のカケラ：履歴を見る

[PIECE BY PIECE] 記憶のカケラ：履歴を見る

■ 履歴削除

履歴削除ボタンを押すことで、全履歴の削除が可能

[PIECE BY PIECE] 記憶のカケラ： 履歴削除

チャット、データ通信（P2P）

リアルタイムでゲーム参加者とチャット、及び、アセットデータの交換をP2Pで実装
通信機能の実装に、simplepeer(GitHub)を使用しています

[PIECE BY PIECE] 記憶のカケラ：P2P画面

チャット送受信と、アセットデータをユーザから受信するデモ

[PIECE BY PIECE] 記憶のカケラ：P2P画面

■ ニックネーム変更

オプション画面の名前変更のボタンを押すとニックネームの変更が出来ます

[PIECE BY PIECE] 記憶のカケラ：P2P（ニックネーム変更）

[PIECE BY PIECE] 記憶のカケラ：P2P（ニックネーム変更 ダイアログ）

シグナリングサーバ（Node.js）

ゲームのP2P通信をサポートするために、シグナリングサーバを構築しています。
シグナリングサーバは、プレイヤー同士が直接通信するための接続情報をやり取りする役割を担います。これにより、リアルタイムでスムーズな対戦が可能になります。

使用している技術:

  • Node.js：
    サーバサイドのロジックを担当し、プレイヤー間のデータのやり取りを処理します。

  • koyeb：
    サーバのデプロイを行い、リモートでシームレスな運用を実現します。これにより、インフラ管理を簡素化し、安定したサービスを提供します。

シグナリングサーバは、ゲーム内でのリアルタイムチャットやデータ送信に重要な役割を果たしています。

アセット作成ガイド

オリジナルのアセットを作成することができます。
以下の必要なファイルを準備してください。

必要なファイル

  1. カード画像 (16枚)
    　サイズ: 800 x 1200 px

  2. 分割ピース画像 (10枚)
    　サイズ: 1800 x 1200 px

  3. カード裏面画像 (card-back.webp)
    　サイズ: 800 x 1200 px

  4. サムネイル画像 (thumbnail.webp)
    　サイズ: 1800 x 1200 px 　※アスペクト比指定なし

  5. manifest.json
    　アセット名、説明文、ファイル形式、タグなどを設定

  6. 動画データ (10個)
    　クリア時に再生されます。 　※なくても動作します。

デフォルトの設定変更方法

  1. デフォルトの main.zip 内のデータをダウンロード。
  2. 自分の画像に差し替えて、保存します。

注意点

  • manifest.json 内の "title" が重複するとエラーになります。

    オリジナルのアセット名を付けてください。

manifest.json の記述解説

{
  "title": "アセット名",
  "author": "制作者名",
  "version": "バージョン (例: 1.0)",
  "note": "アセットの説明文",
  "tags": ["タグ1", "タグ2", "タグ3"],
  "imgExtension": "画像の拡張子 (webp, jpg, png)",
  "movieExtension": "動画の拡張子 (mp4)",
  "thumbnail": "サムネイル画像のファイル名 (例: thumbnail.webp)",
  "created": "作成日時 (例: 2025-10-28T00:00:00Z)",
  "mapping": {
    "excellent": "",
    "good": "",
    "normal": "",
    "sorry": ""
  }
}

画像データは、圧縮率の高い webp がお勧め。
動画は、mp4で作成してください。

もし利用ユーザー側で作成したアセットの公開要望がある場合は、専用のアップローダーを設置するかもしれません。

アセットデータは、ゲーム内のP2P機能を使えば、ユーザIDをタップする事で、所有しているアセット一覧を表示でき、 クリックでアセットのダウンロード+追加が出来ます。

現在の進行状況と未実装機能

「記憶のカケラ」は現在開発途中の段階で、
まだ実装が完了していない機能や追加予定の内容があります。

これからのアップデートで新しい要素が追加される予定です。

🛠️ 未実装機能:

  • アバターアセット：
    　ゲーム中に登場するアバター。

  • アセット管理メニュー：
    　アセット管理メニューの一部機能。

📊 現在の主な進行状況:

  • 基本的なプレイ機能の実装は完了しています。
  • P2P通信によるリアルタイム対戦機能が一部実装済みですが、安定性向上が必要です。
  • ゲーム内のアセット管理やデータ保存機能は正常に動作しています。

開発の裏話

技術的な挑戦

ZIP圧縮・解凍、ゲームデータ管理にIndexedDBの使用、ユーザー同士でチャットやデータ交換する為のP2P通信の実装など、技術面で新しい事に挑戦しています。

AI技術の活用

ブログ記事で、生成AIのローカル環境作成方法を多数紹介していますが、それを活用してゲームデータを作成しています。

公開の決意

途中、体調を崩し開発が止まりそうになったので、未完成ですが公開する事にしました。
メインのゲーム処理は完成してますが、アセット管理やオプション機能に未実装部分があります。

プログラミングの再学習の為のプロジェクトでしたが、公開することで他の人にも楽しんでもらいたいと思いました。

言語・ライブラリ・ツール

HTML / CSS

ゲームのレイアウトやデザイン

開発中に作成した学習記事


JavaScript

ゲーム内のロジックやインタラクションの実装

開発中に作成した学習記事


ライブラリ・フレームワーク

■ indexedDB

カード画像や動画ファイルを保存・管理


■ P2P(WebRTC,simple-peer)

P2P通信を実現するために使用


■ chart.js

グラフモジュール
ゲーム履歴のスコア表示用


■ JSZip

ZIPファイルの圧縮・解凍 モジュール
アセットデータの解凍・圧縮


■ confetti.browser.min.js

花束演出モジュール


■ bubbleCanvas.js (自作・ChatGPT)

Canvasを使った背景バブルモジュール
ChatGPTとlainで共同開発
アニメ・図形パターンをカスタム可



■ FramePack-eichi ( ローカル動画生成AI )

アニメーション動画の生成に使用


■ Stable Diffusion ( ローカル画像生成AI )

カード、ピーズ画像の生成に使用

ツール

■ Node.js

シグナリングサーバ
サーバサイドのロジックを実装


■ koyeb

P2P用のシグナリングサーバとして活用
サーバのデプロイとリモート運用を支援

今後の予定

  • 新しいアセット作成
  • ランダムアセット選択時、ED後にアセットを変更
  • アセット管理メニュー（スタンプ）
  • アバター(アニメーション)
  • アバター設定変更・書き換え
  • レイアウト・バグ修正
  • その他

更新履歴

▼ 過去の更新履歴 ▼