概要
みなさんはポケポケをやっていますか？
今回はポケポケブームに乗っかり、TypeScriptやデータベースの勉強がてら「簡易版ポケポケ」を作ってみたいと思います。
カードゲームってよく考えられてるなあと実感できるプロジェクトでした。一体どんな人がどうやって考えているんでしょうね？
技術スタック
- Next.js - フロントエンドおよびバックエンド（APIの開発）。
- MySQL - データベースとしてポケモン情報を管理。
- PokeAPI - ポケモン画像およびデータの外部API。
- TypeScript - 型安全性を提供するためのプログラミング言語。
- React - フロントエンドUIコンポーネントを構築。
環境構築
Step1 : 準備
- Node.js（推奨バージョン：LTS）
- npmまたはyarn（Node.jsに同梱されています）
- 任意のコードエディタ（例：Visual Studio Code）
Step2 : プロジェクトのセットアップ
Next.js
1. 新しいプロジェクトの作成
yarn create next-app --example with-typescript poke-poke-mimic
cd poke-poke-mimic
2. 依存パッケージのインストール
yarn add promise-mysql
yarn add axios
- promise-mysql：Node.jsで非同期にMySQLを扱う
- axios：API通信を簡単に行う
3. 開発サーバーの起動
yarn dev
これでローカル開発サーバーが起動し、ブラウザで http://localhost:3000 にアクセスしてアプリを確認できます。
要件定義
ポケポケは超大規模なゲームなので、個人開発では到底太刀打ちできません(´;ω;｀)
ということで今回は、簡易版ポケポケを作りたいと思います。以下に簡易版ポケポケの要件定義を示します。
機能一覧
1. ユーザー管理
- ユーザーの新規登録 （重複の無い名前とパスワード） および ログイン
2. カード一覧表示
- ポケモンカードをリスト形式で表示
- 各カードの詳細情報を表示
3. パックを引く
- ランダムで5枚のカードを獲得できる
- レア度に応じて出現確率が変わる
4. デッキ作成
- 各カード1枚まで、6枚のカードを組み合わせてデッキを作成できる
5. (発展) 対戦
- AIとのバトル機能
- オンライン対戦
カード情報
簡易版ポケポケでは、進化 / にげる という概念が存在しません（笑）
1枚のカードが持つ情報として、
- カード名 (name)
- HP (hp)
- 属性 (type)
- 技名 (attack)
- 必要なエネルギー (attack_energy)
- 与えるダメージ (attack_damage)
- レア度 (reality)
また、属性については、
- 炎 (fire)
- 水 (water)
- 草 (grass)
の3種類とし、レア度については、
- 神 (god) : 0.1%
- 高 (high) : 9.9%
- 中 (medium) : 40%
- 低 (low) : 50%
の4種類とする。
バトル要件
3ポイント先に取った方の勝ち。
最初に3枚のカードが配られる。1ターンごとに1枚カードを山札から引き、ポケモンを出すことができる。バトルには1枚だけカードを出すことができる。（控えはない）
基本的には技のダメージ分を与え、HPが0になったら1ポイント取ることができる。
1ターンごとにエネルギーを付けることができ、技を出すにはエネルギーが必要である。
弱点の属性のポケモンからの技は +20 余計にダメージを受けてしまう。
カード一覧
全部で12匹のポケモンカードを用意します。
God レアリティ
| 名前 | 英語名 | HP | 属性 | 技名 | 必要エネルギー | ダメージ |
|---|---|---|---|---|---|---|
| ファイヤー | Moltres | 200 | fire | スカイアタック | 5 | 150 |
| サンダー | Zapdos | 200 | water | サンダーボルト | 5 | 150 |
| フリーザー | Articuno | 200 | grass | ふぶき | 5 | 150 |
High レアリティ
| 名前 | 英語名 | HP | 属性 | 技名 | 必要エネルギー | ダメージ |
|---|---|---|---|---|---|---|
| フシギバナ | Venusaur | 160 | grass | メガドレイン | 3 | 70 |
| リザードン | Charizard | 150 | fire | フレアドライブ | 4 | 100 |
| カメックス | Blastoise | 150 | water | ハイドロポンプ | 3 | 80 |
Medium レアリティ
| 名前 | 英語名 | HP | 属性 | 技名 | 必要エネルギー | ダメージ |
|---|---|---|---|---|---|---|
| フシギソウ | Ivysaur | 80 | grass | つるのムチ | 2 | 30 |
| リザード | Charmeleon | 80 | fire | かえんほうしゃ | 2 | 50 |
| カメール | Wartortle | 80 | water | みずでっぽう | 2 | 40 |
Low レアリティ
| 名前 | 英語名 | HP | 属性 | 技名 | 必要エネルギー | ダメージ |
|---|---|---|---|---|---|---|
| フシギダネ | Bulbasaur | 60 | grass | はっぱカッター | 1 | 20 |
| ヒトカゲ | Charmander | 50 | fire | ひのこ | 1 | 10 |
| ゼニガメ | Squirtle | 50 | water | あわ | 1 | 10 |
新しくポケモンを追加したい場合は、この表に新しくレコードを追加することになります。
まとめ
今回は簡易版ポケポケの要件定義を作成しました。次回は、この要件に基づきデータベースの設計と実装を進めます。
お楽しみに！