javascript - JS游戏-随机射击

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center。




已关闭8年。




我正在研究基于HTML5 Canvas /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;

    }
};

这就是它的样子。它从boss Nose 发射单发子弹，然后下降直到达到其Y值0并重生。

我尝试将this.drawY += 10;也添加到this.drawX += 1;中，但是这种方式根本不会移动。
任何想法如何更改项目符号的目录？

最佳答案

LIVE DEMO(使用鼠标单击来发射子弹)

zch的答案很好，但问题是HTML5 Canvas 坐标系和三 Angular 循环与平时不同，我们需要做一些数学技巧来计算与速度更新和子弹图匹配的 Angular 。

这里遵循我用于项目符号的代码:

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

这只是一个数学转换，可以使我们的 Angular 系统与 Canvas 旋转方法匹配。这是通过将第一个系统旋转90度来完成的。

请注意，您也可以这样做:

var vx = this.speed * Math.sin(this.angle);
var vy = this.speed * -Math.cos(this.angle);

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

记住要为老板创建射击功能:

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

关于javascript - JS游戏-随机射击，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16591144/