CSSのアニメーションを用いてゲームを作った話

16209 ワード
初心者 animation CSS CSS テキストリンク

はじめに

昨年の社会人１年目の時、漠然とゲームを自分で作ってみたいという思いがありました。（目標は大きくいつかはスマブラを作りたいという思いを抱いていました）
そんな時にCSSアニメーションに出会い、これを生かしてゲームを作ってみようと思いゲームを作成して見ることにしました。

CSSのアニメーションについて

  • 要素をアニメーションさせるCSSの機能。
  • ＠keyframes規則とanimationプロパティとを用いてアニメーションを表現する。
    • ＠keyframes規則・・アニメーションのキーフレーム(通過点)を定義するための規則。
    • animationプロパティ・・＠keyframes規則で定義したアニメーションを要素に適用するためのプロパティ。

記述例

HTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <img src="star.png" class="sample">
  </body>
</html>

CSSファイル(ファイル名：sample.css)

.sample {
  animation-name: fadeout;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes fadeout {
     from {
        margin-left: 0%;
        opacity: 1;
     }
     to {
       margin-left: 100%;
       opacity: 0;
     }
}

要素が左から右へ移動し、要素が透過していくアニメーションの例です。

解説

  • animationプロパティの「animation-name」で「fadeout」を呼び出す。
  • animationプロパティの「animation-duration」で何秒かけてアニメーションを行うか指定する。
  • animationプロパティの「animation-iteration-count」で何回繰り返すか指定する。「infinite」を使用すると永遠に繰り返しを行える。
  • from、toは％に変更可能。%を使用するとより細かく動きを指定することができる。
  • animationプロパティは色々あるので調べるとたくさん出てきます！
  • はてなブログでanimationプロパティについてまとめています。参考までに。 https://nacho0707.hatenablog.com/entry/2019/10/29/215835

ゲームの紹介

概要
動物たちをクリックしてクリックした分得点となるというゲームです

TOP画面

ゲームの画面


動物とリンゴの動きにアニメーションを用いました。
ゲームっぽさを出すためにくまとブタと鳥の速度は若干変えています。
自分でSTARTボタンを押さないと時間を計測してくれないので、ルールは私の方で説明しなければいけません

スコア画面

使用したCSS

/* ぶたに適用するアニメーション */
#buta{
    animation-name: buta_motion;
    animation-delay: 2s;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    animation-timing-function: ease-in;
    position:absolute;
    top: 300px;
    z-index:20;   
}
/* くまに適用するアニメーション */
#kuma{
    animation-name: kuma_motion;
    animation-delay: 3s;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    animation-timing-function: ease-in;
    position:absolute;
    top: 300px;
    z-index:10;
}
/* 鳥に適用するアニメーション */
#bird{
    animation-name: bird_motion;
    animation-delay: 5s;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    animation-timing-function: ease-in;
    position:absolute;
    top: 50px;
    right: 400px;
    z-index:0;   
}
/* リンゴに適用するアニメーション */
#apple{
    animation-name: apple_motion;
    animation-delay: 5s;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    animation-timing-function: ease-in;
    position:absolute;
    top: 50px;
    z-index:0;   
}
/* リンゴに適用するアニメーション */
#apple2{
    animation-name: apple_motion;
    animation-delay: 10s;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    animation-timing-function: ease-in;
    position:absolute;
    top: 50px;
    right: 400px;
    z-index:0;   
}

@keyframes buta_motion{
    0%{   
        margin-left: 0%;
    }
    2%{
        opacity: 1;
    }
    100%{
        margin-left : 50%;
    }
}

@keyframes kuma_motion{
    0%{
        opacity: 0;
        margin-left: 0%;
    }
    2%{
        opacity: 1;
    }
    100%{
        margin-left : 50%;

    }
}

@keyframes bird_motion{
    0%{
        opacity: 0;
        margin-right: 0%;
    }
    2%{
        opacity: 1;
    }
    100%{
        margin-right: 50%;

    }
}

@keyframes apple_motion{
    0%{
        opacity: 0;
        margin-top: 0%;
    }
    2%{
        opacity: 1;
    }
    100%{
        margin-top: 330px;
    }
}

解説

  • animationプロパティ部分
    • 「animation-delay」で開始時間を指定。
    • 「animation-duration」で実行時間を設定。
    • 「animation-fill-mode」でアニメーション実行前後に適用するスタイルを指定。「backwards」を指定することでアニメーション開始時のスタイルがアニメーション開始前にも適用される。
    • 「animation-timing-function」アニメーションがそれぞれの周期の中でどのように進行するかを指定。「ease-in」を指定することで開始はゆっくり始まり、終わりに近づくと早くなる。
  • @keyframes部分
    • 0%で「opacity: 0」とし、2%で「opacity: 1」と指定している理由としては最初は画像を表示させたくなく、少し時間が経ってから表示させたかったからです。
  • アニメーション以外の部分の解説は割愛。

さいごに

去年作成したということもあり、少しコードが汚いと感じましたがCSSのアニメーションの参考になれば良いかと思います。動物やリンゴの位置の指定やどれを１番前に表示するかなどが苦労しましたcssアニメーションは使い方次第でもっといろんなことができるので、今後も引き続き勉強していき面白い物を作っていきたいと思います。