ゲームプログラミング入門~その2~【シューティングゲーム】ミサイル発射機能作成
ゲームプログラミング入門~その2~【シューティングゲーム】ミサイル発射機能作成:
「シューティングゲーム」に欠かせない「ミサイル発射機能」を作ってみたのですが、
プログラミング初心者なので、作り方にかなり悩みました。
「ロケットもどき」が「ミサイル」を撃てるようにしてみた。【ゲームプログラミング~その2~】
前回の機能の延長と考えていたのですが、思いのほか自分には難しかったです。
ミサイル発射機能を作ってみました
「シューティングゲーム」に欠かせない「ミサイル発射機能」を作ってみたのですが、プログラミング初心者なので、作り方にかなり悩みました。
「ロケットもどき」が「ミサイル」を撃てるようにしてみた。【ゲームプログラミング~その2~】
前回の機能の延長と考えていたのですが、思いのほか自分には難しかったです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="noindex,nofollow"> <title>WEB SCREEN GAME</title> <style> #screen { border: solid 1px #000000; background-color: #000000; } </style> </head> <body> <canvas id="screen" width="860" height="485"></canvas> <script> //canvas要素のDOM(Document Object Model)を取得 var canvas = document.getElementById('screen'); var context; var selfBody; var selfPosX = 20; // ロケットの画面横方向の位置 var selfPosY = 190; // ロケットの画面縦方向の位置 var selfSpeed = 10; // ロケットのスピード var frameWidth = 860; // CANVAS横サイズ var frameHeight = 485; // CANVAS縦サイズ // キーボードの状態 // [ 上 , 下 , 右 , 左 ] var keyStatus = [false, false, false, false] var missiles = []; var missileSpeed = 30; var maxMissileCount = 5; // ミサイルデータの初期化 for ( var i = 0; i < maxMissileCount; i++ ){ // 状態 , x, y missiles[i] = [false, 0, 0]; } document.onkeydown = keyDown; //キーダウンの検知設定 document.onkeyup = keyUp; //キーアップの検知設定 //コンテキストの取得可否チェック if(canvas.getContext){ context = canvas.getContext('2d'); window.onload = function() { selfBody = new Image(); selfBody.src = "rocket.png"; selfBody.onload = function(){ draw(context); startAnimation(); } } } function startAnimation(){ setInterval(draw, 33); } function draw(){ // CANVASをクリア context.fillStyle = "rgb(255, 255, 255)"; context.fillRect(0, 0, frameWidth, frameHeight); context.clearRect(0, 0, frameWidth, frameHeight); // ミサイルを描画 drawMissile(); // ロケットの移動と描画 move(); context.drawImage(selfBody, selfPosX, selfPosY); } // ロケットの移動 function move(){ if ( keyStatus[0] ){ // UP if ( selfPosY > 0 ){ selfPosY -= selfSpeed; } } if ( keyStatus[1] ){ // DOWN if ( selfPosY < 400 ){ selfPosY += selfSpeed; } } if ( keyStatus[2] ){ // RIGHT if ( selfPosX < 775 ){ selfPosX += selfSpeed; } } if ( keyStatus[3] ){ // LEFT if ( selfPosX > 0 ){ selfPosX -= selfSpeed; } } } // キーダウン function keyDown(e){ if(e.keyCode === 38 ){ keyStatus[0] = true; }//UP KEY else if(e.keyCode === 40 ){ keyStatus[1] = true;}//DOWN KEY else if(e.keyCode === 39 ){ keyStatus[2] = true;} //RIGHT KEY else if(e.keyCode === 37 ){ keyStatus[3] = true;}//LEFT KEY else if(e.keyCode === 83 ){ missileLaunch(); // ミサイルを発射 } } // キーアップ function keyUp(e){ if(e.keyCode === 38 ){ keyStatus[0] = false;}//UP KEY else if(e.keyCode === 40 ){ keyStatus[1] = false;}//DOWN KEY else if(e.keyCode === 39 ){ keyStatus[2] = false;} //RIGHT KEY else if(e.keyCode === 37 ){ keyStatus[3] = false;}//LEFT KEY } // ミサイルを描画 function drawMissile(){ for ( var i = 0; i < missiles.length; i++ ){ if ( missiles[i][0] ){ // ミサイルが有効かどうか? if( missiles[i][1] < 830 ){ missiles[i][1] += missileSpeed; context.beginPath(); var missile = new Path2D(); missile.rect( missiles[i][1], missiles[i][2], 20, 2 ); context.fillStyle = "rgb(255, 255, 255)"; context.stroke(missile); context.fill(missile); } else { missiles[i][0] = false; // ミサイルを無効化 } } } } // ミサイルを発射 function missileLaunch(){ for ( var i = 0; i < missiles.length; i++ ){ if( missiles[i][0] === false ){ // ミサイルが有効かどうか? missiles[i][0] = true; // ミサイルを有効化 missiles[i][1] = selfPosX + 60; missiles[i][2] = selfPosY + 40; return; } } } </script> <div id="link"></div> </body> </html>
コメント
コメントを投稿