Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【制作中】もぐらたたきをSVGで作ろうとしています

 どうも!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回、呼び出して表示しているんですね。

 

穴より前面、カバーより背面に置く事で、「穴から出てきている」ような表現ができました^^

 

 

今のところはここまで

ゲームとしての仕様も色々変えていきたいと考え中です。

もぐらが複数同時に出てきたり、ゲームオーバーのないゲームになったり…みたいな。 

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^