« ^ »

3beakersというミニゲームを作成した

所要時間: 約 2分

React+Redux構成のフロントエンドの実装を思い出すために3beakersというミニゲームを作成した。

https://3beakers.symdon.info/

ルールはビーカーの中の数字を移動させつつ4を作成することを目指す。

https://res.cloudinary.com/symdon/image/upload/v1644397955/blog.symdon.info/1644328105/3beakers-demo_en6osk.gif

知人に遊んでもらったら、そこそこ楽しんでもらえてとても嬉しかった。 ソースコードは https://github.com/TakesxiSximada/3beakers にある。

システム構成としては次のようになっている。

https://res.cloudinary.com/symdon/image/upload/v1644447308/blog.symdon.info/1644328105/architecture.png

今回はVercelを利用することにした。

ビーカーの選択

ビーカーの選択状態と操作の仕様をまとめた。

source操作効果操作後のsourceの値
nullbeakerを選択する選択したbeakerがsource状態になるselected
selectedsourceを選択するbeakerのsource状態が解除されるnull
selectedsource以外のbeakerを選択する入力完了イベントを発火し、beakerのsource状態が解除されるnull

備考


                                +----------------------+
                                |                      |
                                v                      |
    +-------------+     +-------+-----+                |
    |{o}          |     |{o}          |                |
    | Player      |     | Developer   +-+              |
    |             |     |             | |              |
    +----+--------+     +-------------+ |              |
         | Access              Git Push |              |
 +-------+                              |              |
 |       |         +------------+       |              |
 |       |         | Cloudflare |       |              |
 |       |         | (DNS)      |       |              |
 |       |         +------------+       |              |
 |       v                              |              |
 |  +------------+          +---------+ |              |
 |  |            |          |         | |              | Feedback
 |  | Vercel     |<---------+ Github  | |      +-------+--------+
 |  |            | Push     |         | |      |{o}             |
 |  | - build    | Hook     |  Git <----+      | Site Analyist  |
 |  | - deploy   |          |         |        |                |
 |  | - hosting  |          +---------+        +-------+--------+
 |  |            |                                     ^
 |  +------------+                                     |
 |                                         Feedback    |
 +---------+       +----------------------+------------+
  Tracking |       |                      |
           v       |                      |
    +------+-------+------+   +-----------+-----------+
    |                     |   |                       |
    | Google Tag Manager  |   | Google Search Console |
    | - GA                |   |                       |
    | - GA4               |   |                       |
    |                     |   |                       |
    +---------------------+   +-----------------------+
シムテム構成