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

现场演示(使用鼠标点击发射子弹)

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.

查看完整代码并播放演示

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;