image-slot

概要

スーパーマ○オ3にあったような絵合わせパネルのようなミニゲームができるwebアプリです。

アクセスすると上、中、下の３つのスロットが動き出し、クリックすることで止まります。

タイミングよくクリックして同じ色の画像が並べられたら成功です。

使用技術

• React
  • Next.jsを使うには大げさかなと思い、Reactだけで組んでみました
• typesctipt
  • javascriptではなくtypescriptに挑戦してみたかったのでこちらを使ってみました
• swiper
  • カルーセルのように画像を動かしているのは、このライブラリのおかげです
  • このライブラリを知って、今回のwebアプリケーションを思いつきました

画像の変更

src/pages/home.tsx にある定数配列の画像パスを変更すれば好きな画像で遊ぶことが出来ます。

その場合、画像は public 配下に入れてください。

デモ