メインキャラクターが出来上がったので、ステージ作りに取り掛かります。
ゲーム要素に関わる壁を作ってみます。
単一の構造ではなく、複数の組み合わせができるように、パーツを作ってみたいと思います。
パーツ仕様
パックマンの壁パーツはよく見ると2パターンあって、外枠の幅が2重線と、内枠の単一線です。
ソースコード
index.html
<link rel='stylesheet' href='frame.css' />
<style>body{background-color:black}</style>
<div>
<div class='frame-area' style='grid-template-columns: 1fr 1fr 1fr'>
<p class='S1'></p><p class='S2'></p><p class='S3'></p>
<p class='S4'></p><p class='S5'></p><p class='S6'></p>
<p class='S7'></p><p class='S8'></p><p class='S9'></p>
</div>
</div>
<div>
<div class='frame-area' style='grid-template-columns: 1fr 1fr 1fr'>
<p class='D1'></p><p class='D2'></p><p class='D3'></p>
<p class='D4'></p><p class='D5'></p><p class='D6'></p>
<p class='D7'></p><p class='D8'></p><p class='D9'></p>
</div>
</div>
<div>
<div class='frame-area' style='grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr'>
<p class='D1'></p><p class='D2'></p><p class='Da'></p><p class='Db'></p><p class='D2'></p><p class='D3'></p>
<p class='D4'></p><p class='D5'></p><p class='S7'></p><p class='S9'></p><p class='D5'></p><p class='D6'></p>
<p class='Dc'></p><p class='S3'></p><p class='D5'></p><p class='D5'></p><p class='S1'></p><p class='De'></p>
<p class='Dd'></p><p class='S9'></p><p class='D5'></p><p class='D5'></p><p class='S7'></p><p class='Df'></p>
<p class='D4'></p><p class='D5'></p><p class='S1'></p><p class='S3'></p><p class='D5'></p><p class='D6'></p>
<p class='D7'></p><p class='D8'></p><p class='Dg'></p><p class='Dh'></p><p class='D8'></p><p class='D9'></p>
</div>
</div>
frame.css
:root{
--color : blue;
--block : 32px;
--border : 2px;
}
.frame-area{
display:inline-grid;
}
.frame-area,
.frame-area *,
.frame-area *::before,
.frame-area *::after{
font-size:0;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
-ms-box-sizing : border-box;
box-sizing : border-box;
}
.frame-area > *{
width : var(--block);
height : var(--block);
font-size : 0;
display : block;
position : relative;
border : 1px solid rgba(255,0,0,0.5);
}
.frame-area .D1::after,
.frame-area .D2::after,
.frame-area .D3::after,
.frame-area .D4::after,
.frame-area .D6::after,
.frame-area .D7::after,
.frame-area .D8::after,
.frame-area .D9::after,
.frame-area .Da::after,
.frame-area .Db::after,
.frame-area .Dc::after,
.frame-area .Dd::after,
.frame-area .De::after,
.frame-area .Df::after,
.frame-area .Dg::after,
.frame-area .Dh::after{
width : 100%;
height: 100%;
top:0;
left:0;
border-style : solid;
border-color : var(--color);
}
.frame-area > *::before,
.frame-area > *::after{
content : '';
font-size : 0;
display : block;
border-style : solid;
border-color : var(--color);
border-width : 0;
position : absolute;
}
.frame-area .S1::before,
.frame-area .D1::before,
.frame-area .Db::before,
.frame-area .Dd::before{
width : calc(var(--block) / 2);
height : calc(var(--block) / 2);
bottom : 0;
right : 0;
border-top-width : var(--border);
border-left-width : var(--border);
border-top-left-radius : 100%;
}
.frame-area .S2::before,
.frame-area .D2::before{
width : 100%;
height : calc(var(--block) / 2);
bottom : 0;
left : 0;
border-top-width : var(--border);
}
.frame-area .S3::before,
.frame-area .D3::before,
.frame-area .Da::before,
.frame-area .Df::before{
width : calc(var(--block) / 2);
height : calc(var(--block) / 2);
bottom : 0;
left : 0;
border-top-width : var(--border);
border-right-width : var(--border);
border-top-right-radius : 100%;
}
.frame-area .S4::before,
.frame-area .D4::before{
width : calc(var(--block) / 2);
height : 100%;
top : 0;
right : 0;
border-left-width : var(--border);
}
.frame-area .S5::before,
.frame-area .D5::before,
.frame-area .D5::after{
border-width : 0;
}
.frame-area .S6::before,
.frame-area .D6::before{
width : calc(var(--block) / 2);
height : 100%;
top : 0;
left : 0;
border-right-width : var(--border);
}
.frame-area .S7::before,
.frame-area .D7::before,
.frame-area .Dc::before,
.frame-area .Dh::before{
width : calc(var(--block) / 2);
height : calc(var(--block) / 2);
top : 0;
right : 0;
border-bottom-width : var(--border);
border-left-width : var(--border);
border-bottom-left-radius : 100%;
}
.frame-area .S8::before,
.frame-area .D8::before{
width : 100%;
height : calc(var(--block) / 2);
top : 0;
left : 0;
border-bottom-width : var(--border);
}
.frame-area .S9::before,
.frame-area .D9::before,
.frame-area .De::before,
.frame-area .Dg::before{
width : calc(var(--block) / 2);
height : calc(var(--block) / 2);
top : 0;
left : 0;
border-bottom-width : var(--border);
border-right-width : var(--border);
border-bottom-right-radius : 100%;
}
.frame-area .D1::after{
border-width : var(--border) 0 0 var(--border);
border-radius : 100% 0 0 0;
}
.frame-area .D2::after,
.frame-area .Da::after,
.frame-area .Db::after{
border-top-width : var(--border);
}
.frame-area .D3::after{
border-width : var(--border) var(--border) 0 0;
border-radius : 0 100% 0 0;
}
.frame-area .D4::after,
.frame-area .Dc::after,
.frame-area .Dd::after{
border-left-width : var(--border);
}
.frame-area .D6::after,
.frame-area .De::after,
.frame-area .Df::after{
border-right-width : var(--border);
}
.frame-area .D7::after{
border-width : 0 0 var(--border) var(--border);
border-radius : 0 0 0 100%;
}
.frame-area .D8::after,
.frame-area .Dg::after,
.frame-area .Dh::after{
border-bottom-width : var(--border);
}
.frame-area .D9::after{
border-width : 0 var(--border) var(--border) 0;
border-radius : 0 0 100% 0;
}
壁パーツ
single-line
double-line-1
double-line-2
解説
※パックマン画面サンプル画像
パックマンの壁部分には2種類のパターンがあります。
1つ目は、画面の外側の枠の2本線ライン。
もうひとつは、画面の内側で使われている1本線ラインです。
これらをパズルとして組み合わせることで、ゲーム画面が組み立てられるようになるわけですが、その基本パーツを上記サンプルで作ってみました。
single-lineは、1本線パターン
double-lineは、2本線パターンで、中間に少し複雑な組み合わせがあるので、double-line-2として、存在する組み合わせパターンを構築しています。
cssは少し複雑になっていますが、基本パターンは、疑似要素をborder-radiusで、組み合わせているだけです。
壁の完成版デモ
上記パターンを組み合わせると、本番画面と同じパターンが出来上がります。
それぞれのブロックの組み合わせがわかりやすいように、境界線を表示してますが、本番ではこれは非表示にします。
知財
パックマンは、バンダイナムコ社の登録商標です。
PAC-MAN™ & ©1980 BANDAI NAMCO Entertainment Inc.
0 件のコメント:
コメントを投稿