#ゲーム概要
ローグライクカードゲームを作った。

プレイヤーは5属性の計45枚のカードを使用して敵を倒していく。カードにはリキャストがあるので強いカードを連続で使用することはできない。敵は9体いて、6ラウンド目や9ラウンド目のボスは個性的な能力を使う。

#きっかけ
いつも僕が作るゲームは、一度プレイしたらもう二度とプレイされないようなものが多い。僕はいつも1か月半から2か月ほどかけてゲームを作っているので、一度きりしかプレイされないと少し悲しい。そこで、ローグライクなら何度もプレイしてもらえるだろうと思い、作ることにした。

#カード
カードの画像は半分ほどは僕がAnimagine XL v-4.0 Optで作成し、残りはフリーサイトから持ってきた。一部の画像のプロンプトはchichipuiやaipictorsで公開している¹。カード作成ツール ²を使ってこれらの画像をカードにした。そこそこそれっぽいものができたと満足している。

#ほかの工夫

• 音楽
  • いつもなしで作っているが、単調になってしまうかもと思ったのでつけることにした。
  • 「フリー」と書いてあっても自由な使用を認めていなかったりするため、探すのが少し面倒だった。
• デザイン
  • 硬派な雰囲気にした。
  • 背景を半透明な黒にして、背景画像の上に浮いている感じにした。
  • 背景画像も中心だけ明るくなるようにした。
  • スマホでもPCでも遊べるようにした。いつもこうしているが、今回は表示するものが多くて大変だった。
• 処理
  • module
    • 一部のファイルをtype = moduleで読み込み、importとexportを使ってほかのファイルで使いまわすようにした。
    • 便利だ。
  • class
    • JavaScriptのclassを使ってみた。
    • まだよくわかっていないけど、便利だ。
• バフアイコン
  • バフ・デバフのアイコンは、最初はclip-pathを使用して簡単な形のものを作成していたが、手作り感にあふれたカッコよくはないものになってしまったので、透過画像の対象の周囲からclip-pathを生成するツール³を使用して複雑な図形を組み合わせたアイコンにした。clip-pathとは図形の中にx座標とy座標を複数指定し、それをつなげた図形に切り取るというものであるが、例えば火傷アイコンの炎は200個の点を打っていて、普通の画像にするべきだったなと思った。
• Restart
  • いつもは面倒だから「Restart」ボタンを押すとページをリロードして変数などをすべてリセットするようにしていた。
  • 今回は読み込みなしにTop画面に移り、そのまま再度ゲームを始めることができるようにした。
    
    

Footnotes

1. すべて公開してもいいのだが、僕の投稿一覧に普段とは違う雰囲気のものを載せることがなんだか恥ずかしくなってしまい、そこそこ映えるものしか載せていない。 ↩

2. これはGeminiに作ってもらった。Canvas要素については僕は何もわからないので。 ↩

3. これもGeminiに作ってもらった。 ↩