【CSS】CSSだけでモグラたたき書いてみた【Animation】

こんばんは
マークアップえんじにあのです

CSSだけでモグラたたきゲームを書いてみました。

f:id:nanndemoiikara:20151111005440p:plain

CSSだけで書いた理由

・最近CSS書いてない。
・アニメーション回りの知識が若干不安
・むしゃくしゃしてやった。反省はしている。
・ここまでできる！HTML＋CSS - タイピングゲームを作る | CodeGrid
ここ見てなんかCSSだけでゲーム作り楽しそうと感じた

実際に動くやつ

モグラたたき

かいつまんで説明

Startの画面の実装

HTML

<input type="radio" id="start_btn">
<label class="start" for="start_btn">モグラ叩きStart</label>

CSS

#start_btn{
	position : absolute;
	clip : rect(0px, 0px, 0px, 0px);
}
#start_btn + label{
	animation-name            : title_view;
	animation-duration        : 0.5s;
	animation-timing-function : ease-in;
	animation-iteration-count : infinite;
	position                  : absolute;
	text-align                : center;
	line-height               : 300px;
	font-size                 : 40px;
	font-weight               : bold;
	background-color          : #000;
	z-index                   : 5;
}
#start_btn:checked + label{
	transition        : width 12s linear;
	overflow          : hidden;
	height            : 2px;
	width             : 0px;
	background-color  : #F00;
}
@keyframes title_view{
	0%{
		color : #000;
	}
	50%{
		color : #DDD;
	}
	100%{
		color : #000;
	}
}

idを使ってしまったのが悔やまれるけど
・ラジオボタンが選択されていない時はゲームウインドウ全体をlabelで囲ってしまってStartメッセージ表示
・チェックされたらcheckedと隣接セレクタで取得して、要素を消してしまうのももったいないのでアニメーションで縮めてプログレスバーとして再利用

もぐら部分

HTML

<label class="mogura">
    <input class="mogura_core" type="radio">
</label>

CSS

label.mogura{
	animation-name            : show;
	animation-duration        : 5.2s;
	animation-timing-function : linear;
	visibility                : hidden;
	position                  : absolute;
	overflow                  : hidden;
	width                     : 40px;
	height                    : 50px;
}
label.mogura:after,
label.mogura:before{
	animation-name            : updown;
	animation-duration        : 5s;
	transform                 : translateY(100px);
	animation-timing-function : linear;
	content                   : '';
	display                   : block;
	position                  : absolute;
	z-index                   : 2;
}
label.mogura:before{
	width             : 7px;
	height            : 7px;
	left              : 10px;
	border-radius     : 100%;
	background-color  : #000;
	top               : 10px;
	box-shadow        : #000 13px 0px, #c9171e 6px 10px;
}
label.mogura:after
{
	transition       : background-color 0.2s linear;
	content          : '';
	position         : absolute;
	z-index          : 1;
	background-color : #d87523;
	display          : block;
	width            : 40px;
	height           : 50px;
	border-radius    : 50% 50% 0 0;
	padding-left     : 40px;
	box-sizing       : border-box;
}
label.mogura > input[type="radio"].mogura_core{
	-moz-appearance    : none;
	-webkit-appearance : none;
	height             : 50px;
	width              : 40px;
	padding            : 0px;
	margin             : 0px;
	margin-left        : -45px;
	position           : absolute;
	z-index            : 2;
	border-radius      : 50% 50% 0px 0px;
}
label.mogura > input[type="radio"].mogura_core:checked{
	box-shadow : #DDD 45px 0px;
}
@keyframes updown{
	0%{
		transform : translateY(100px);
	}
	50%{
		transform : translateY(0%);
	}
	100%{
		transform : translateY(100px);
	}
}
@keyframes show{
	0%{
		visibility : hidden;
	}
	1%{
		visibility : visible;
	}
	100%{
		visibility : hidden;
	}
}

labelの疑似要素で「うにゅ」とモグラが出る部分と、モグラの顔の実装
もぐらを倒したときの部分をradioボタンのbox-shadowで実装

モグラ殺害数カウント

HTML

<div class="score"></div>

CSS

body{
	counter-reset : test;
	margin        : 0px;
	padding       : 0px;
}
label.mogura > input[type="radio"].mogura_core:checked{
	counter-increment:test;
}
div.score:before{
	content     : 'あなたのもぐら殺害数は' counter(test) '匹！！！';
	line-height : 300px;
	font-size   : 30px;
	font-weight : bold;
}