JSゲーム - ランダムな方向の撮影

Question

私はHTML5のキャンバス/ Javascriptベースのゲームに取り組んでいます。それは戦闘機ジェットゲームです、私は特定のスコアを渡した後私の主なボスが誕生する。私はしたいようにすべてが動作しますが、私はボスの撮影を行う方法がありません。私のジェット機は単一の弾丸を垂直に発射するが、私の考えはボスをランダムな方向に発射することだった。同じ方向に少なくとも3つの弾丸を、異なる方向に向ける。私はjQueryを通常のJSだけで使用していません。ボスは国境から別の国境に水平移動しますが、撮影ではないので少し助けが必要な場合があります。何か案は ？

レッドラインは、撮影の私の考えです。私は弾丸/ジェットの衝突をチェックすることができます。

ボス（垂直）撮影のコードです。

function BossBullet() { 
    this.srcX = 1304; 
    this.srcY = 0; 
    this.drawX = 500; 
    this.drawY = 0; 
    this.width = 4; 
    this.height = 16; 
} 

BossBullet.prototype.akt = function(X,Y) { 

    this.noseX=X; 
    this.noseY=Y; 
}; 

BossBullet.prototype.draw = function() { 
    ctxBullet.clearRect(0, 0, gameWidth, gameHeight); 
    this.drawY += 10; 

    ctxBullet.drawImage(imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height); 
    //strela[hudba].play(); 
    if (this.drawY > 700) { 
     this.drawY= this.noseY; 
     this.drawX= this.noseX; 

    } 
}; 

これはどのように見えますか？ボスの鼻から1発の弾丸を発射し、Y値0に達するまで蘇生します。

私もthis.drawY += 10;にthis.drawX += 1;を追加しようとしましたが、この方法は、それがすべてで移動しdoesntの。 任意のアイデアの箇条書きのディレクトリを変更する方法??

Answer 1

LIVE DEMO（マウスを使用弾丸を発射するためにクリック）三角法のサイクルは通常と異なり、弾丸の速度の更新と描画に一致する角度を計算するためにいくつかの数学的トリックを行う必要があります。

は、ここで私は弾丸のために使用されるコードは、次のとおり

// Bullet class 
function Bullet(x, y, speed, angle, width, height, colors){ 
    this.x = x; 
    this.y = y; 
    this.speed = speed; 
    this.angle = angle; 
    this.width = width; 
    this.height = height; 
    this.colors = colors;  
    this.frameCounter = 0; 
} 

Bullet.prototype.update = function(){   
    // (!) here we calculate the vector (vx, vy) that represents the velocity 
    var vx = this.speed * Math.cos(this.angle-(Math.PI/2)); 
    var vy = this.speed * Math.sin(this.angle-(Math.PI/2)); 

    // move the bullet 
    this.x += vx; 
    this.y += vy;  
} 

Bullet.prototype.draw = function(context, xScroll, yScroll){  
    context.save(); 

    if(this.angle != 0) { 
     // translate to the orign of system 
     context.translate(this.x-xScroll, this.y-yScroll); 
     // rotate 
     context.rotate(this.angle); 
     // translate back to actual position 
     context.translate(xScroll-this.x, yScroll-this.y); 
    } 
    // animate the bullets (changing colors) 
    context.fillStyle = this.colors[this.frameCounter % this.colors.length];  
    this.frameCounter++; 

    // draw the bullet 
    context.fillRect((this.x-this.width/2) - xScroll, (this.y-this.height/2) - yScroll, this.width, this.height); 

    context.restore();   
} 

updateとdraw方法は各弾丸のためのすべてのフレームと呼ばれるべきです。

は今、このコードを比較することにより、ZCH答えとして、更新関数の内部で以下のコードで

var vx = this.speed * Math.cos(this.angle-(Math.PI/2)); 
var vy = this.speed * Math.sin(this.angle-(Math.PI/2)); 

を提示します。

var vx = speed * Math.cos(angle); 
var vy = speed * Math.sin(angle); 

私たちのアングルシステムをキャンバスの回転方法と一致させるだけの数学的変換です。これは、第1のシステムを90度回転させることによって達成される。あなたもこの方法を行うことができます

お知らせ：

var vx = this.speed * Math.sin(this.angle); 
var vy = this.speed * -Math.cos(this.angle); 

三角法は楽しいゲームを作るためにあなたの味方です！

は、あなたの上司のために火の関数を作成することを忘れないでください：

Boss.prototype.fire = function(){ 

    var nBullets = 3; // number of bullets to fire 
    for(var x = 0; x < nBullets; ++x){ 

     // angle between PI/2 and 3PI/2 (in radians) 
     var angle = (1 + 2 * Math.random()) * Math.PI/2; 

     // create a new bullet 
     this.bullets.push(new Bullet(this.x, this.y, 10, angle, 2, 15, this.bulletsColors)); 
    }   
} 

上記のコードは、あなたの上司がbulletsの配列を持っていることを前提としています。

See the full code and play demo

Answer 2

弾丸の弾丸を表す必要があります。弾丸ごとに、各軸（vx、vy）に沿った位置（x、y）と速度を格納する必要があります。速度による時間の増加位置の各ユニットの間に：

x += vx; 
y += vy; 

あなたはおそらくランダムな角度で撮影した弾丸が、一定の速度をしたいです。

var angle = 2 * Math.PI * Math.random(); 
var vx = speed * Math.cos(angle); 
var vy = speed * Math.sin(angle); 

すべての方向で撮影したくない場合は、角度を小さくすることができます。例えば範囲5 /4πのために7 /4πに：

ZCHの答えは結構ですが、問題はそれをHTML5 キャンバス座標系であると

var angle = (5 + 2 * Math.random())/4 * Math.PI;