🌀

「くるくるフリック」というゲームを作った話

2023/07/02に公開

概要

「くるくるフリック」というブラウザゲームを制作しました🌀
https://kurufli.web.app/

この記事では、このゲームを作った経緯やどのように企画を進めていったかをまとめます。
ゲーム制作の参考にしたり、読み物として楽しんでいただければ嬉しいです。
また、システム面での内容は別途記事にまとめる予定です。

ゲームのデザインは、おしゃもこさん（@oshamoco）に担当していただきました！

タイトル画面
ロゴがくるくる回転します。可愛い。

ゲーム画面
3文字の単語を入力していきます。
このゲームの特徴として、キーボードの文字が回転したり配置が入れ替わったりします。

画像は「タイムタックモード」で、10問クリアまでのタイムを競います。
もう一つの「エンドレスモード」では、1問ごとに制限時間が設定されていて、何問クリアできるかを競います。
タイムアタック画面

リザルト画面
スコアが表示されます。

シェア画面
Twitterにシェアする文言を入力する画面です。
入力はくるくるキーボードで行えるようにしています。

ここからは、制作の流れをまとめていきます。
最初の経緯はいろいろあったのですが、ひとまず「シンプルなルールのゲームを作ろう！」というところからスタートしました。
そこからさらに、楽しんでもらえるゲームにするために以下の条件を設定しました。

いろいろ案を出すうちに、『キーを回転させたり位置を変えたりする』というアイディアを思い付きました。
試作して遊んでみたところ「これはいけそうだ！」と思ったので、本格的に制作を開始しました。

その後は、細かい仕様を決めていきました。
いくつかを理由付きで書き留めておきます。

入力する内容は3文字の単語にした。
- テンポを良くするため、問題クリア型にしたかった。
- 長い文章だと、文章とキーボードの視線移動が増えてしまい、タイピングに集中できない。
- 以前作ったゲーム（下ネタ注意です💩）でも3文字の単語を使っていて、完成イメージが湧きやすかった。
モードは2つ用意する。
- 最初はタイムアタックモードのみを想定していた。
- サクッと遊べるタイムアタックモードに対し、じっくり遊べるものも作ろうと思い、エンドレスモードも作成した。

ルール以外の部分で、大きく工夫したところです。

PWA化した（ホームに追加できるようにした）
- このゲームはPWAと相性がいいので、絶対にやりたいと思っていました。
  初めてのチャレンジでしたが、システム的にもとても勉強になりました。
丁寧な説明を心がける
- 遊び方、シェア方法、PWA化について、モーダルを設けて説明するようにしました。
シェア機能を付けた
- Twitterへシェアする文言を、くるくるキーボードを使って入力できるようにしました。
- プレイしてくれた人が、たどたどしい文章でツイートしてくれることを想定しています。
  シェアしたくなる仕組みと、見た人が興味を持つ仕組みを両立したかったためです。
タイトル画面でロゴにアニメーションを付けた
- 訪問してくれた人が興味を持ってくれるように、ロゴをCSSアニメーションで動かすようにしました。
- ロゴ文字の向きが自動で変わるのは、ゲームの内容とも相まってとても可愛いなと思っています。
- ちなみに、ロゴをタップすると文字の位置が入れ替わります。
  開発中はこれも自動で発生するようにしていましたが、過剰な演出に思えたので隠し機能にしました。

オリジナリティのある楽しいゲームができたなと思っています！
より良い作品にするためのアイディアをじっくり考え、すべて実装することができました。
ぜひ遊んでいただき、シェアしてもらえると嬉しいです。

今まで制作したものをポートフォリオにまとめています。
こちらもぜひご覧ください！
https://sanjimonica.bitbucket.io/