このページの本文へ

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です。ゲームスタートボタンをクリックすると敵が上下に揺動します。

【図16】fig16.png

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

【図17】fig17.png

敵が上下に揺れ動く

サンプル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>

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く