JS Spiel - Schießen in zufällige Richtungen

Question

Ich arbeite an einem HTML5-Leinwand/Javascript-basierten Spiel. Es ist ein Kampfjet-Spiel, nachdem ich eine bestimmte Punktzahl übergeben habe, wird mein Hauptboss spawnen. Alles funktioniert so, wie ich es wollte, aber ich weiß nicht, wie man boss shooting macht. Mein Jet feuert eine einzelne Kugel senkrecht ab, aber meine Idee war, den Boss in zufällige Richtungen schießen zu lassen. Mindestens 3 Kugeln gleichzeitig in verschiedenen Richtungen. Ich benutze jQuery überhaupt nicht nur normales JS. Boss bewegt sich horizontal von der Grenze zu einer anderen Grenze, aber er schießt nicht, also brauche ich vielleicht ein bisschen Hilfe. Irgendwelche Ideen ?

Rote Linien sind meine Idee des Schießens. Ich bin in der Lage, Kugel/Jet-Kollision zu überprüfen.

Einige Code von Chef (vertikal) Schießen.

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; 

    } 
}; 

und so sieht es aus. Es feuert eine einzelne Kugel von der Nase der Bosse ab und geht runter, bis es seinen Y-Wert 0 erreicht und wieder auftaucht.

Ich versuchte this.drawY += 10; auch this.drawX += 1; aber auf diese Weise es tut überhaupt nicht bewegen hinzuzufügen. Irgendwelche Ideen, wie man das Verzeichnis der Kugel ändert?

Answer 1

LIVE DEMO (Mit der Maus klickt Kugeln abzufeuern)

ZCH Antwort ist in Ordnung, aber das Problem ist, dass die HTML5 Leinwand Koordinatensystem und der Der trigonometrische Zyklus ist anders als gewöhnlich und wir müssen einige mathematische Tricks machen, um den Winkel zu berechnen, der mit der Geschwindigkeitsaktualisierung und dem Zeichnen der Kugeln übereinstimmt.

Hier folgen Sie den Code, den ich für die Kugeln verwendet:

// 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();   
} 

Die update und die draw Methoden sollten in jedem Rahmen für jede Kugel genannt werden.

Vergleichen Sie nun diesen Code präsentiert in der Update-Funktion

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

mit dem Code unten, wie von ZCH beantwortet.

Es ist nur eine mathematische Transformation, um unser Winkelsystem mit der Canvas-Rotate-Methode abzustimmen. Dies wird erreicht, indem das erste System um 90 Grad gedreht wird.

Beachten Sie, dass auch auf diese Weise tun können:

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

Trigonometrie

ist Ihr Verbündeter Spaß Spiele zu machen!

Denken Sie daran, die Feuer-Funktion für Ihren Chef zu erstellen:

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)); 
    }   
} 

Der obige Code wird davon ausgegangen, dass Ihr Chef eine Reihe von bullets hat.

See the full code and play demo

Answer 2

Sie müssten Kugeln Kugeln darstellen. Für jedes Geschoss müssen Sie seine Position (x, y) und Geschwindigkeit entlang jeder Achse (vx, vy) speichern. Während jeder Zeiteinheit Position durch Geschwindigkeit erhöhen:

Sie wollen wahrscheinlich Kugeln in zufälligen Winkel, aber konstanter Geschwindigkeit erschossen. Sie können Geschwindigkeiten mit Trigonometrie erzeugen:

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

Sie Winkel zu kleineren Bereich begrenzen können, wenn Sie nicht in alle Richtungen geschossen werden soll. Zum Beispiel für Bereich 5/4π bis 7/4π:

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