HTMLの仕様だけでパックマンを作ってみようかと考えてみたので、まずはメインキャラクターをcssのみで構築してみようと思います。
ソースコード
packman.html
<link rel='stylesheet' href='pacman.css' />
<style>body{background-color:black;}</style>
<div class='pacman'></div>
packman.css
.pacman{
--size-chara : 80px;
position:absolute;
top:100px;
left:100px;
width:var(--size-chara);
height:var(--size-chara);
}
.pacman::before,
.pacman::after{
content:'';
display:block;
width:100%;
height:50%;
background-color:yellow;
animation-duration:0.4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.pacman::before{
transform-origin:center bottom;
border-radius:var(--size-chara) var(--size-chara) 0 0;
transform:rotate(45deg);
animation-name : pacman_before;
}
.pacman::after{
transform-origin:center top;
border-radius:0 0 var(--size-chara) var(--size-chara);
transform:rotate(-45deg);
animation-name : pacman_after;
}
@keyframes pacman_before{
0%{
transform:rotate(45deg);
}
50%{
transform:rotate(0deg);
}
100%{
transform:rotate(45deg);
}
}
@keyframes pacman_after{
0%{
transform:rotate(-45deg);
}
50%{
transform:rotate(0deg);
}
100%{
transform:rotate(-45deg);
}
}
デモ
解説
簡単な用に見えて、ちょっとだけテクニックが必要です。
基本的には、半円２つを上下のシンメトリ状態にかぶせて、中心を軸に回転アニメをしています。
cssだけで半円を描くには、border-radiusの上下どちらか半分の値を0にすることでできちゃうんですね。
そして、それぞれのパーツの中心点を、transform-originで整えて上げます。
それをkeyframeアニメーションを使って、rotateを適用しています。
この時に、上下で反対の動きをするので、どうしても同じアニメーションを適用できませんでした。
transformが後でセットする値が前述を上書きしてしまうので、filterのflip機能を独立化させてもらいたいですね。
あとがき
Doodleにブラウザで手軽に遊べる
パックマンがありますが、これはcanvasを使っている安定版です。
これを見ると、口の開きが少し奥まっているのが分かりますが、見た目悪くはないので、とりあえずこのまま行ってみたいと思います。
簡単そうに見えて意外と作ってみると奥が深そうだな〜〜。
知財
パックマンは、バンダイナムコ社の登録商標です。
PAC-MAN™ & ©1980 BANDAI NAMCO Entertainment Inc.
0 件のコメント:
コメントを投稿