Javascript JS游戏-任意方向射击

我正在开发一款基于HTML5画布/Javascript的游戏。这是一个战斗机游戏，当我通过特定的分数后，我的主教练将产生。一切都像我想的那样工作，但我不知道如何做老板射击。我的喷气式飞机垂直发射一颗子弹，但我的想法是让老板向任意方向发射。在不同方向上，同时至少有3颗子弹。我根本没有使用jQuery，只是使用普通的JS。Boss从一个边界水平移动到另一个边界，但这不是射击，所以我可能需要一点帮助。有什么想法吗

红线是我的拍摄理念。我有能力检查子弹/飞机碰撞

一些boss（垂直）射击的代码

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你知道如何更改项目符号的目录吗
 您需要表示项目符号。对于每个子弹，您需要存储其位置（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;

（使用鼠标单击发射子弹）

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

三角是您制作有趣游戏的盟友

记住为您的上司创建fire功能：

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

Boss.prototype.fire=函数（）{
var nBullets=3；//要发射的子弹数
对于（var x=0；x

上面的代码假设你的老板有一系列的
项目符号

您需要随机角度吗？你是如何定义游戏中的“方向”的？你能展示一些代码来展示你的尝试吗？视图是从顶部看的，所以我希望这能有所帮助。我将上传一个游戏的打印屏幕，这样就更容易理解了。问题是什么？请显示垂直发射的代码，以及您尝试如何使其成为随机角度。一旦你有了它，如果你还没有它，你应该在多个项目上工作。。。角度参考一次只做一件事不
Math.random
不接受任何参数；也许你不想在整个2π范围内射击，但是说5/4π到7/4π@Bergi，愚蠢的firefox没有警告我：P fixedI试图更改X值，但没有帮助。@Toesmash你可能会发现使用canvas的代码有问题，因为canvas坐标系。您需要定义系统坐标以匹配画布坐标系并进行相应更改。这更像是一个三角问题。（我将尽快发布如何做到这一点的方法。）先生，你应该得到一枚奖牌！！！非常感谢你