8

HTML5 キャンバス/Javascript ベースのゲームに取り組んでいます。これは戦闘機ゲームで、特定のスコアを超えるとメインボスが出現します。すべてが思い通りに機能しますが、ボスシューティングの方法がわかりません。私のジェットは垂直方向に 1 発の弾丸を発射しますが、私のアイデアは、ボスがランダムな方向に発射するようにすることでした。異なる方向に、同時に少なくとも 3 発の弾丸。私は通常のJSだけでjQueryをまったく使用していません。ボスは国境から別の国境へ水平に移動しますが、撃っていないので、少し助けが必要かもしれません. 何か案は ？

ここに画像の説明を入力

赤い線は私の撮影アイデアです。弾丸/ジェットの衝突を確認できます。

ボス（垂直）射撃のいくつかのコード。

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

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。

完全なコードを見てデモをプレイ

于 2013-05-17T00:30:29.800 に答える