JS game - стрельба в случайных направлениях

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 (использование щелчков мыши стрелять пулями) ответ

ПНУ является штраф, но проблема в том, что 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)); 

с ниже кода, как ответил ПНУ.

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;