HTML5 SVGで作るシューティングゲーム (4/6)

2011年02月21日　13時00分更新

文●古籏一浩

ツイートする

敵（親玉）を動かす

　最初に敵（親玉）から動かしてみましょう。敵は右側に位置し、上下に揺れる動きにします。上下に動かすには、Math.sin()を使います。

　敵のデータは「boss」というオブジェクトを作成し、座標値などのプロパティを設定します。boss.eleには高速化のためdocument.getElementById()を使ってエレメントへのポインターを入れておきます。boss.xはX座標、boss.yがY座標になります。boss.degreeはMath.sin()で使用するときの角度になります（ラジアンでも構わない）。

var boss = new Object();
boss.ele = document.getElementById("boss");
boss.x = 300;
boss.y = 100;
boss.degree = 0;

　敵のプロパティの設定が終わったら動きを付けます。一定間隔で動作させるのでsetInterval()を使い、スムーズに動かすためにタイマーの時間を短く設定します。なお、環境によってはタイマーの間隔を短くしても反映されにくいようです。

　boss.degreeの値を増やしてMath.sin()の値にします（ラジアンに変換）。boss.degreeに加算する値を小さくすると動きはゆっくりになり、値を大きくするとすばやく動くようになります。

　表示すべき座標値を計算したら、setAttribute()を使って表示位置を指定します。表示位置はtranslate()にX,Y座標を渡して指定します。

　実際のプログラムはサンプル5です。ゲームスタートボタンをクリックすると敵が上下に揺動します。

ゲームスタートボタンをクリックすると……

敵が上下に揺れ動く

■サンプル5[HTML]

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>JavaScriptでSVGゲーム</title> 
</head> 
<body>
<h1>JavaScriptでSVGゲーム</h1>
<form>
<input type="button" id="gameStart" value="ゲームスタート">
</form>
<svg width="400" height="300" style="border:1px solid black">
<g id="fighter">
<polygon display="inline" fill="#231815" points="39.473,14.667 37.806,12.667 29.034,12.228 25.473,8.667 13.227,8.667 
10.473,2.333 5.473,0 5.473,8.667 0,8.667 2.139,12.333 4.473,12.333 4.473,14.667     "/>
</g>
<g id="boss">
<path display="inline" fill="#AE6503" d="M0,0v53h11.333v18.333H0v13h60V0H0z M11.5,21.333c-1.563,0-2.833-2.239-2.833-5
s1.27-5,2.833-5c1.565,0,2.833,2.239,2.833,5S13.065,21.333,11.5,21.333z"/>
</g>
<g id="tama">
<path display="inline" fill="#00CD00" d="M20.307,3.778c0,2.209-2.807,4-7.5,4c-4.694,0-12.167-1.791-12.167-4s7.472-4,12.167-4
C17.502-0.222,20.307,1.569,20.307,3.778z"/>
</g>
<g id="beam">
<rect x="0" fill="#FF0000" width="20" height="3"/>
</g>
</svg>
<script type="text/javascript">
// 親玉のデータ設定
var boss = new Object();
boss.ele = document.getElementById("boss");   // 親玉
boss.x = 300;
boss.y = 100;
boss.degree = 0;
document.getElementById("gameStart").addEventListener("click", function(){
//  親玉の移動処理
setInterval(function(){
boss.degree = boss.degree + 5;
var tempY = boss.y + Math.sin(boss.degree* Math.PI /180) * 100;
boss.ele.setAttribute("transform", "translate("+boss.x+","+tempY+")");
}, 50);
}, true);
</script>
</body> 
</html>