JS游戏 - 随机拍摄

Question

我正在开发基于HTML5 canvas / Javascript的游戏。这是一个战斗机游戏，在我通过特定分数后，我的主要老板会产生。一切都像我想的那样，但是，我不怎么做老板射击。我的喷气机发射一颗子弹，但我的想法是让老板随意射击。同时至少3发子弹，方向不同。我没有使用jQuery只是普通的JS。 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;，但这种情况根本不会移动。 任何想法如何改变子弹的目录？

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

您需要代表子弹项目符号。对于每个子弹，您需要沿每个轴（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π：

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