どうも!LSSです!!
以前、即興で「もぐらたたき」をJavaScriptで作ってみました。
「もぐら」という文字をクリックする、という素気ないものでしたが、画像・ゲーム性ともに充実させたものを作りたい、とは思っていて、
やけに可愛くできあがってしまった「もぐら」の絵も描いたりしていました^^
あと、叩かれた「もぐら」の絵なども用意しなきゃですが、先に「ゲーム画面」をどうするかを考えていたので、今回ちょっとそれを形にしてみます。
まず穴を5つ配置します
こんな感じ。
配置は結構自由が利くので、3×2に並べたりせず、5つの穴にしました。
コード
<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 500 500" style="border: 1px solid black;">
<!--穴上段-->
<ellipse cx="175" cy="300" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="325" cy="300" rx="50" ry="20" fill="black"></ellipse>
<!--穴下段-->
<ellipse cx="100" cy="400" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="250" cy="400" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="400" cy="400" rx="50" ry="20" fill="black"></ellipse>
</svg>
<!--穴上段-->のように書いているのは「コメント」です。
コードには影響しませんが、自分で分かりやすいようにしました^^
500×500の画面に、ellipseで「横半径 50 縦半径 20」の楕円を5つ置きました。
もぐらが隠れるためのカバーを用意します
もぐらが穴に引っ込んだ時に隠れるように、カバーを もぐらの穴の数だけ用意しました。
土管じゃないよ、マリオじゃないよw
コード
<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 500 500" style="border: 1px solid black;">
<defs>
<path id="cvr" d="M 0,0 a 50,20 0 0,0 100,0 l 0,100 -100,0 0,-100" fill="green"></path>
</defs>
<!--穴上段-->
<ellipse cx="175" cy="300" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="325" cy="300" rx="50" ry="20" fill="black"></ellipse>
<!--カバー上段-->
<use xlink:href="#cvr" x="125" y="300"></use>
<use xlink:href="#cvr" x="275" y="300"></use>
<!--穴下段-->
<ellipse cx="100" cy="400" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="250" cy="400" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="400" cy="400" rx="50" ry="20" fill="black"></ellipse>
<!--カバー下段-->
<use xlink:href="#cvr" x="50" y="400"></use>
<use xlink:href="#cvr" x="200" y="400"></use>
<use xlink:href="#cvr" x="350" y="400"></use>
</svg>
<defs>でカバーの形状を<path>で定義しておきます。
上部がくびれた四角ですね。
そしてその形状を<use>タグでコピーするように5か所に配置しました。
ほら、こうすれば土管じゃなくなりますw
バック(背面)を緑ベタの四角にしました。
これで土管じゃなくなりましたねw
コード
<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 500 500" style="border: 1px solid black;">
<defs>
<path id="cvr" d="M 0,0 a 50,20 0 0,0 100,0 l 0,100 -100,0 0,-100" fill="green"></path>
</defs>
<!--草むら-->
<rect x="0" y="250" width="500" height="250" fill="green"></rect>
<!--穴上段-->
<ellipse cx="175" cy="300" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="325" cy="300" rx="50" ry="20" fill="black"></ellipse>
<!--カバー上段-->
<use xlink:href="#cvr" x="125" y="300"></use>
<use xlink:href="#cvr" x="275" y="300"></use>
<!--穴下段-->
<ellipse cx="100" cy="400" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="250" cy="400" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="400" cy="400" rx="50" ry="20" fill="black"></ellipse>
<!--カバー下段-->
<use xlink:href="#cvr" x="50" y="400"></use>
<use xlink:href="#cvr" x="200" y="400"></use>
<use xlink:href="#cvr" x="350" y="400"></use>
</svg>
SVGはコード上 先に描いたものほど背面になり、コード上 後に書いたものほど前面に描画されます。
カバーよりも背面の穴、よりもさらに背面に、緑ベタの四角を配置した事で、こういう画面になります。
いよいよ、もぐら召喚!
【SVG】SVGの練習?がてら、「もぐら」の絵を描いてみた!
で既に作っていた「もぐら」を配置してみました。
…あ、まだ叩いても何も起こりませんよw
上段右と、下段中央の「もぐら」が、最大まで顔を出した状態です。
下段右は、「もぐら」が完全に隠れた状態、見事に完全に隠れていますね^^
コード
<svg xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 500 500" style="border: 1px solid black;">
<defs>
<path id="cvr" d="M 0,0 a 50,20 0 0,0 100,0 l 0,100 -100,0 0,-100" fill="green"></path>
<g id="mgr">
<path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path>
<path d="M 20,55 Q 30,40 45,50" stroke="black" stroke-width="4" fill="none"></path>
<path d="M 55,50 Q 70,40 80,55" stroke="black" stroke-width="4" fill="none"></path>
<circle cx="35" cy="60" r="7" fill="black"></circle>
<circle cx="65" cy="60" r="7" fill="black"></circle>
<circle cx="50" cy="80" r="13" fill="white"></circle>
<circle cx="50" cy="75" r="5" fill="black"></circle>
<ellipse cx="25" cy="80" rx="10" ry="5" fill="pink"></ellipse>
<ellipse cx="75" cy="80" rx="10" ry="5" fill="pink"></ellipse>
<path d="M 20,70 40,75 20,80" fill="none" stroke="black" stroke-width="2"></path>
<path d="M 80,70 60,75 80,80" fill="none" stroke="black" stroke-width="2"></path>
</g>
</defs>
<!--草むら-->
<rect x="0" y="250" width="500" height="250" fill="green"></rect>
<!--穴上段-->
<ellipse cx="175" cy="300" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="325" cy="300" rx="50" ry="20" fill="black"></ellipse>
<!--もぐら上段-->
<use id="mg0" xlink:href="#mgr" x="125" y="250"></use>
<use id="mg1" xlink:href="#mgr" x="275" y="220"></use>
<!--カバー上段-->
<use xlink:href="#cvr" x="125" y="300"></use>
<use xlink:href="#cvr" x="275" y="300"></use>
<!--穴下段-->
<ellipse cx="100" cy="400" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="250" cy="400" rx="50" ry="20" fill="black"></ellipse>
<ellipse cx="400" cy="400" rx="50" ry="20" fill="black"></ellipse>
<!--もぐら下段-->
<use id="mg2" xlink:href="#mgr" x="50" y="370"></use>
<use id="mg3" xlink:href="#mgr" x="200" y="320"></use>
<use id="mg4" xlink:href="#mgr" x="350" y="400"></use>
<!--カバー下段-->
<use xlink:href="#cvr" x="50" y="400"></use>
<use xlink:href="#cvr" x="200" y="400"></use>
<use xlink:href="#cvr" x="350" y="400"></use>
</svg>
コードもだいぶ長くなってきました^^;
「もぐら」は複数の線や円で構成されているので、<g>タグで「グループ化」しています。
そしてそれを、また5回、呼び出して表示しているんですね。
穴より前面、カバーより背面に置く事で、「穴から出てきている」ような表現ができました^^
今のところはここまで
ゲームとしての仕様も色々変えていきたいと考え中です。
もぐらが複数同時に出てきたり、ゲームオーバーのないゲームになったり…みたいな。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^