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

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

このページでは、私が開発した**カードゲーム「記憶のカケラ」**について紹介します。このゲームは、失われた記憶を取り戻すために、ピースを集める神経衰弱ゲームです。ゲームの特徴や遊び方、開発の裏話、さらには現在の進行状況など、開発者目線での情報を盛り込んでいますので、ぜひチェックしてみてください。

ゲームの特徴

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

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

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

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

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

P2P通信対応（チャット、データ交換）

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

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

P2P用 シグナリングサーバ（Node.js + koyeb）

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

使用している技術:

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

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

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

プレイ方法

ゲームの操作はシンプルで、カードを並べていくです。 詳細なルールについては、ゲーム内のヘルプをご覧ください。

ゲームをプレイする

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

説明なし

https://humanxai.info/game/card01/

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

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

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

未実装機能:

• アバターアセット：ゲーム中に登場するアバター。
• アセット管理メニュー：アセット管理メニューの一部機能。

現在の主な進行状況:

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

---

このセクションを追加することで、現在の状態をしっかりと伝えることができますし、プレイヤーからのフィードバックも期待しやすくなります。

開発の裏話

技術的な挑戦

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

AI技術の活用

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

公開の決意

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

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

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

HTML / CSS（style sheet）

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

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

[CSS実践講座 #02]基本レイアウトを学ぶ (ゲームのサウンドテストUIを作成)

本記事では、ゲームのサウンドテスト画面を題材に、CSSでの基本レイアウト設計を実践的に学びます。flexとgridの使い分け、スクロール領域の制御、カードUI配置、モーダル表示、レスポンシブ対応など、現代的なUIの基礎を網羅。

https://humanxai.info/posts/css-course-02/

CSS

Human × AI の対話を通じて、AI活用やブログ制作、技術実験の軌跡を記録しています。

https://humanxai.info/categories/css/

JavaScript

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

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

【JavaScript】アニメーション大全：手作りエフェクトで魅せるUI演出テクニック集（全14種

JavaScriptを活用したアニメーション大全：手作りエフェクトで魅せるUI演出テクニック集

https://humanxai.info/posts/javascript-anime-ui/

JavaScript

Human × AI の対話を通じて、AI活用やブログ制作、技術実験の軌跡を記録しています。

https://humanxai.info/categories/javascript/

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

■ indexedDB

【JavaScript応用講座】localStorage卒業、IndexedDBでゲームデータを保存する

Webゲーム開発で素材の保存に悩んだら？localStorageからの卒業、IndexedDBの導入でZIPデータやサムネイルを自在に管理する方法を実例で紹介。

https://humanxai.info/posts/javascript-indexed-db/

■ P2P(WebRTC,simple-peer)

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

【JavaScript 応用講座】：[WebRTC/P2P] チャット＆ファイル転送ができる双方向アプリを実装

WebRTCとsimple-peerを使ってP2P通信を実現！signal交換の自動化に成功し、チャットとZIPファイルの送受信も完全動作。Node.jsによる軽量なシグナリングサーバ構成と接続の流れを実例付きで解説。

https://humanxai.info/posts/javascript-p2p-05/

■ FramePack-eichi

ローカルAIアニメーションの生成に使用

FramePack-eichiによるAIアニメーション

FramePack-eichi を活用したAIアニメーションの制作事例と手順。

/featured/project1/

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

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

[画像生成AI] Stable Diffusion Checkpoint 導入ガイド

[画像生成AI] Stable Diffusion Checkpoint 導入ガイド

/posts/generative-ai_stable-diffusion-checkpoint-install/

使用ツール

■ Node.js

サーバサイドのロジックを実装。

■ koyeb

サーバのデプロイとリモート運用を支援。

今後の予定

• より多くのステージや新しいカードを追加予定。
• 他のゲームモードやオンラインランキング機能を実装予定。