自機の移動とビームの発射処理
次に自機を動かします。自機はキーボードのAとZキーで上下に移動させ、ショットはマウスがクリックされたら発射します。敵のときと同様に、自機に関する座標値なども以下のようにオブジェクトを作成して各プロパティとして設定します。
var fighter = new Object(); fighter.ele = document.getElementById("fighter"); // 自機 fighter.x = 0; fighter.y = 2;
自機はA, Zキーの操作で移動するので、以下のようにしてキーイベントを捕捉します。キーコードは自機を動かすための関数move_fighter()に引数として渡します。
window.addEventListener("keydown", function(evt){ move_fighter(evt.keyCode); }, true);
呼び出されたmove_fighter()関数では入力されたキーコードを調べて、自機のY座標を変えます。ここでは2ピクセルずつ自機を移動させています。なお、IE9とGoogle Chrome 7ではキーリピートが効きますが、Firefox 4では効かないので、移動のたびにキーを押す必要があります。
function move_fighter(kc){ if ((fighter.y > 2) && (kc == 65)){ // A。つまり上に移動 fighter.y = fighter.y - 2; } if ((fighter.y < 280) && (kc == 90)){ // Z。つまり下に移動 fighter.y = fighter.y + 2; } fighter.ele.setAttribute("transform", "translate("+fighter.x+","+fighter.y+")"); }
次に、自機のビームの発射処理です。ビームも自機や敵と同様にオブジェクトを作成しX,Y座標などを設定します。
ビームはマウスクリックで発射するので、以下のようにクリックイベントを検知します。この時点ではビームの座標値を設定し、ビームの存在を示すbeam.flagをtrueに設定します。
window.addEventListener("click", function(evt){ if (beam.flag) { return; } // すでに発射済みなら処理しない beam.flag = true; beam.x = fighter.x + 20; beam.y = fighter.y + 10; }, true);
ビームは右方向に移動させるので、X座標に値を加算していきます。X座標が画面右端を越えたらbeam.flagにfalseを設定し、ビームを消します。
beam.x = beam.x + 10; if (beam.x > beam.limitX) { beam.flag = false; } beam.ele.setAttribute("transform", "translate("+beam.x+","+beam.y+")");
ここまでをまとめたのがサンプル6です。
A,Zキーで自機が上下に、クリックでビームが発射される
■サンプル6[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; // 自機のデータ設定 var fighter = new Object(); fighter.ele = document.getElementById("fighter"); // 自機 fighter.x = 0; fighter.y = 2; // ビームのデータ設定 var beam = new Object(); beam.ele = document.getElementById("beam"); // 自機が発射するビーム beam.x = 0; beam.y = 2; beam.flag = false; beam.limitX = 400; // ゲーム画面右端の座標 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+")"); // ビームの移動処理 beam.x = beam.x + 10; if (beam.x > beam.limitX) { beam.flag = false; } beam.ele.setAttribute("transform", "translate("+beam.x+","+beam.y+")"); }, 50); }, true); // 自機の移動 function move_fighter(kc){ if ((fighter.y > 2) && (kc == 65)){ // A。つまり上に移動 fighter.y = fighter.y - 2; } if ((fighter.y < 280) && (kc == 90)){ // Z。つまり下に移動 fighter.y = fighter.y + 2; } fighter.ele.setAttribute("transform", "translate("+fighter.x+","+fighter.y+")"); } // キー入力イベントの初期化 window.addEventListener("keydown", function(evt){ move_fighter(evt.keyCode); }, true); // マウスイベントの初期化 window.addEventListener("click", function(evt){ if (beam.flag) { return; } // すでに発射済みなら処理しない beam.flag = true; beam.x = fighter.x + 20; beam.y = fighter.y + 10; }, true); </script> </body> </html>
