[css + svg] パックマンをHTMLで作ってみるブログ#4 壁の作成

2023年4月26日

CSS ゲーム

eyecatch メインキャラクターが出来上がったので、ステージ作りに取り掛かります。 ゲーム要素に関わる壁を作ってみます。 単一の構造ではなく、複数の組み合わせができるように、パーツを作ってみたいと思います。

パーツ仕様

パックマンの壁パーツはよく見ると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.

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。