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; 

    } 
}; 

這就是它的樣子。它從老闆鼻子發射單發子彈並下降直到它達到其Y值0並重新生成。

我試圖添加到this.drawY += 10;也this.drawX += 1;但這樣一來它沒有在所有移動。 任何想法如何改變子彈的目錄？

Answer 1

LIVE DEMO（使用鼠標單擊射擊子彈）

ZCH的答案是好的，但問題是，HTML5 帆布座標系統和三角函數的週期與平時不同，我們需要做一些數學技巧來計算與速度更新和子彈的繪製相匹配的角度。

下面就跟隨我用子彈代碼：

// 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方法應該呼籲每發子彈每一幀。

現在比較這個代碼向更新功能

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

與下面的代碼中，通過ZCH作爲回答。

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

這只是一個數學轉換來匹配我們的角度系統和畫布旋轉方法。這是通過將第一個系統旋轉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

您需要表示子彈項目符號。對於每個子彈，你需要存儲它的位置（x，y）和速度沿每個軸（vx，vy）。在通過速度的時間的增加位置的每個單元：

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π：

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