React ワニワニたたき作成 ～part1～

昨日Reactで画像を動かす方法を学び、簡単なゲームを作成しました。
elsammit-beginnerblg.hatenablog.com

そして、学んだ方法をもとに、作成を進めていき、、、
ワニワニたたきの原型が作成できました！！
※ワニワニパニックって商標登録しているかと思うので、表現は避けておきます。

こんな感じになりました！！

ワニの絵ですが、いつもアプリ作成に協力頂いている友人と力を合わせて作成した力作ですw。

まだ、ゲーム終了後の処理とか点数の表示とか細かいとこ出来ていないため、
公開するまでにはまだまだやらなきゃなことたくさんあるけど、、、
ベースが出来て動いているのを見るとちょっとテンションが上がります！！

残りの部分も実装していきたいと思います！！

現状のソースコードはこちらに格納しております。
github.com

今回はまった点を一応備忘録しておくと、
アニメーションを用意する際、繰り返し行う場合には、cssのプロパティで、

animation-iteration-count: infinite;

を定義しなければなりませんでした。

要するに、

.WaniWani{
    animation: anim 1s;
    animation-iteration-count: infinite;
}

@keyframes anim {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(200px);
    }
}

といった感じでcssを定義する必要がありました。
"animation-iteration-count"を知らず、1回しかアニメーションが動かなかったので結構詰まってました。。。

最後に、、、
Webアプリ作成時には、cssとかjavascriptとか本当に初心者で苦労しながら作ってましたが、
やっと、初心者レベルでは書けるようになってきました。
特にcssがわかるようになってきたのは大きな進歩。

これからも頑張って作成していきたいと思います！！