パックマン作るシリーズ2回目は、敵キャラのゴーストを作ります。
ソースコード
ghost.html
<link rel='stylesheet' href='ghost.css' />
<script src='ghost.js'></script>
<style>body{background-color:black}</style>
<div class='ghost'>
<div class='head'></div>
<div class='eye'>
<div class='eye-left'></div>
<div class='eye-right'></div>
</div>
<div class='under'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30">
<path fill='red' d="M 0,0 Q 0,15 5,20 T 20,15 40,15 60,15 80,15 100,15 L 100,0" fill='red'>
<animate
attributeName='d'
dur='500ms'
repeatCount='indefinite'
calcMode="linear"
values='M 0,0 Q 0,15 5,20 T 15,15 35,15 55,15 75,15 100,15 L 100,0;
M 0,0 Q 0,15 5,20 T 25,15 45,15 65,15 85,15 100,15 L 100,0;
M 0,0 Q 0,15 5,20 T 15,15 35,15 55,15 75,15 100,15 L 100,0;' />
</path>
</svg>
</div>
</div>
ghost.css
.ghost{
--size-chara : 80px;
--size-width : calc(var(--size-chara) * 1.0);
--size-eye : calc(var(--size-width) * 0.3);
--size-under : calc(var(--size-width) * 0.2);
--color-body : red;
position:absolute;
top:100px;
left:100px;
width:var(--size-chara);
height:var(--size-chara);
}
.ghost > *{
margin : 0 auto;
width : var(--size-width);
}
.ghost > .head{
height : calc(var(--size-width) / 2);
background-color : var(--color-body);
border-radius : var(--size-chara) var(--size-chara) 0 0;
}
.ghost > .eye{
height : 30%;
background-color : var(--color-body);
position:relative;
}
.ghost > .eye > *{
position:absolute;
top:-15px;
background-color:white;
width : var(--size-eye);
height : var(--size-eye);
background-color:white;
border-radius:50%;
}
.ghost > .eye .eye-left{
left:13%;
}
.ghost > .eye .eye-right{
right:13%;
}
.ghost > .eye > *::before{
content:'';
display:block;
background-color:black;
width : 50%;
height : 50%;
margin : 25%;
border-radius:50%;
transition-property : margin;
transition-duration : 0.3s;
}
.ghost > .eye[data-direction='right'] > *::before{
margin-left : 50%;
margin-right : 0;
}
.ghost > .eye[data-direction='left'] > *::before{
margin-left : 0;
margin-right : 50%;
}
.ghost > .eye[data-direction='top'] > *::before{
margin-top : 0;
margin-bottom : 50%;
}
.ghost > .eye[data-direction='bottom'] > *::before{
margin-top : 50%;
margin-bottom : 0;
}
.ghost > .under{
height : var(--size-under);
}
ghost.js
function change_eye(){
this.directions = ['right','left','top','bottom']
this.direction = this.directions[0]
this.change()
}
change_eye.prototype.change = function(){
const num = Math.floor(Math.random() * this.directions.length)
document.querySelector('.ghost .eye').setAttribute('data-direction' , this.directions[num])
setTimeout(this.change.bind(this) , 3000)
}
switch(document.readyState){
case 'complete':
case 'interactice':
new change_eye()
break
default:
window.addEventListener('load' , (()=>{
new change_eye()
}))
}
デモ
解説
cssだけで作ろうと思ったんですが、足部分の波がどうもスッキリした記述にならなそうだったので、svgでアニメーションまで対応させました。
svgのanimateタグは、使い慣れると本当に便利に使えます。
あと、パックマンの敵キャラは、目線で進行方向を示しているという特徴があるので、attributeに方向を入れると、目がキョロキョロと動くようにして、javascriptで一定時間ランダムで変更させてみました。
なかなか雰囲気が出て良い感じでしょ？
敵キャラの色変更する場合もあるので、個々の対応と、パックマンがパワーボールを取った時の、青色になるキャラの仕様は、また次回以降にセットしてみることにする。
知財
パックマンは、バンダイナムコ社の登録商標です。
PAC-MAN™ & ©1980 BANDAI NAMCO Entertainment Inc.
