8

我正在开发基于 HTML5 画布/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;但这样它根本不动。任何想法如何更改项目符号的目录？

4

2 回答 2

9

现场演示（使用鼠标点击发射子弹）

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.

查看完整代码并播放演示

于 2013-05-17T00:30:29.800 回答
5

您需要表示子弹子弹。对于每个子弹，您需要存储它的位置 (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;
于 2013-05-16T15:26:41.483 回答