KOJIKA17

CSS3で、ボールが反射するゲームを作ったよ。
CSS Programming Advent Calendar 2012

JavaScriptを使用せずに、HTMLとCSSを駆使して、ゲームやスライドショーなどを作る、CSS Programming Advent Calendar 2012に参加してみることにしました。

私が題材にしたのは、昔よくFlashのゲームであった、バーを動かしてボールが反射するゲームです。

作ったもの

ゲームは、突然始まります。
一定以上ゲームが進むと、クリアです。

推奨ブラウザは、Opera12.10以上
他にも、IE10や最新のFirefoxやChromeなどであれば、きっと動くと信じてます。

後ろでCSSをぐるんぐるん動かしているので、ゲームの判定がスルーしたり、ゲーム自体が途中で止まる可能性もあります。
その場合はブラウザをリロードして、最初からお楽しみ下さい。

実際に作ったもの

解説

やっていることは、単なるスライドアニメーションです。
ある一定時間内にマウスを特定に場所に移動させれば、次のアニメーションが再生されるようになっています。
もし特定時間内にマウスを置くことができなければ、次のアニメーションが再生されずに、ゲームオーバーの画面が表示されます。

hoverを、スイッチにする仕組み

CSSプログラミングではよく見かける、inputをクリックし、スイッチとして作動させる仕組みがあります。

input:check ~ div.action {
	// check後の動き
}

しかしこのゲームは、マウスの動きでゲームを進行させます。
クリックはさせないので、先ほどのソースを:hoverを使用して、以下のように変更しています。

div.button:hover ~ div.action {
	// hoverした動き
}

この中にアニメーションを書きます。

div.action {
	animation: ball;
	animation-play-state: paused;
}
div.button:hover ~ div.action {
	animation-play-state: running;
}

.actionにアニメーションを指定しておき、.buttonをhoverした時に、次のボールのアニメーションが再生されるようにしています。

しかしボールがバーの付近に来るまでは、次のアニメーションが作動しては困ります。
ボールだけでなく、.buttonにもアニメーションを使用し、一定期間しか.buttonを押せない状況を作ります。

@keyframe button {
	to {
		// ボタンを表示
	}
	from {
		// ボタン非表示
	}
}

div.action {
	animation: ball;
	animation-play-state: paused;
}
div.button {
	height: 0;
	animation-name: button;
	animation-duration : 1s; // ボタンの表示時間
	animation-delay: 5s; // ボタンの表示待ち時間
}

div.button:hover ~ div.action {
	animation-play-state: running;
}

この動きを繰り返せば、マウスオーバーによるスライドアニメーションが実現できます。

開発用で作ったデモ

ボールは左手でそえるだけ

ボールはCSS Animationを使って動きを指定します。

あらかじめ、スイッチの位置とステージの切り替わりの仕組みを作っておき、後からボールのアニメーションを追加しています。
このボールの役割は、スイッチが表示するタイミングに、ユーザーのマウスを誘導することが目的です。

ボールの開始位置と着地点、スイッチの表示するタイミングさえ気を付ければ、あとは適当にボールをアニメーションをつけていきます。

その他

バー

hoverに合せて付いてくるバーは、100個のdivを並べて、positionで配置しています。
またスイッチも同様に、divを十数個のdivを並べて、positionで配置。

ソース

今回のソースと仕組みを考える時に使ったデモ(dev)のソースを、Githubにのせています
興味のある方は、ご確認下さい。

最後に

初めてCSS Programmingをやってみました。
何度JavaScriptを使いたくなる衝動を抑えたか分からないですが、楽しかったです。
そしてSassやStylusなどのCSS Preprocessor、大事。

12日目は、1026さんです。
よろしくお願いします!