React 簡単なゲーム作成

またまたゲームを作ってみました！！

当初、モグラたたきに続いてワニワニパニック的なアプリを作ろうと思っていたのですが、、、

アニメーションを付けたことがない！！

だから簡単には作れない。。。どうやってやればよいのだろう？？泣

ということで、まずはアニメーションを付けた簡単なアプリを作ってみて、
上手くできたら、ワニワニパニックに応用しよう！！と思い、さっそく作成開始！！

■画像にアニメーションを付けるには？

そもそもアニメーションをつける、ってどうやるんだろう？？
ということで、まずは調査開始！！

cssにて動きを付ける方法として、@keyframesを使用する手段を発見。
@keyframesの使用方法としては、こちらのようにanimationを定義して、
@keyframesにて動作する方向と大きさ(ベクトル)を指定すればよいです。

.box_easy{
    width:100px;
    height:100px;
    animation: anim 0.5s;
}

  @keyframes anim {
    0% {
    transform: translateX(0px);
    visibility: visible;
    z-index:2;
    }
  
    100% {
    transform: translateX(430px);
    }
  }
}

上記はX方向に０から430px分0.5秒の間に移動する処理を示しております。
要素をスライド（横移動）させるCSSアニメーションサンプル集 | ONE NOTES

■作成アプリの紹介

では、実際にアニメーションを使ってみたかっただけ！！で作ったアプリを紹介しますw。
普通の開発ではやってはいけない方法ですねw。技術を使って見たかっただけで作る、なんて。

アプリの内容としては、洞窟から出てきた動物がどれかを当てるゲームになっております！！

一応、こちらに公開しておりますのでよろしかったら使って見て下さい。
誰が出てきたか当ててみて

■アプリの出来映え

友人に先行して見せて、感想を聞いたのですが、
”どこがおもしろいのかわからない”、”よくわからないアプリだね”
ととても辛辣なことを言われてしまいました。。。泣

企画力が足りないので、そこも学んでいかないとな。。。

■最後に

まずは、当初作成予定だった"ワニワニパニック"の作成に邁進していきたいと思います！！
後、企画力足りないのをどうにかしないとな、、と思う今日この頃。

企画力ってどうやって高めていけばよいのだろう？？