0

これが一般的なコードの問題に関する質問ではないことは理解していますが、コードを修正するために本当に助けが必要です. 今、私は自分自身で最初の HTML5 プログラムに取り組んでいます。これは非常にシンプルなトップダウン シューティング ゲームです。今、横に移動できる船が画面に表示されるようにコードを書いています。しかし、今、弾丸と呼ばれる描画する新しいオブジェクトを作成しようとしています。船からコードをコピーしたのですが、うまくいきません。これまでのところ、ここにコードがあります。かなり小さいので、船体がわかります。船のオブジェクトは次のとおりです。

function ship() {
    this.width = 100;
    this.height = 75;
    this.drawX = gameWidth/2 - this.width/2;
    this.drawY = gameHeight - this.height - 5;
}

それを描いてください、私はこの関数を使用します:

ship.prototype.draw = function() {
    clearCtx(ctxPlayer);
    var srcX;
    var srcY;
    if(isRightKey) {
        srcX = 0;
        srcY = 75;
    } else if (isLeftKey) {
        srcX = 0;
        srcY = 153;
    } else {
        srcX= 0;
        srcY = 0;
    }

    ctxPlayer.drawImage(sprites,srcX,srcY,this.width,this.height,this.drawX,this.drawY, this.width, this.height);
}

上の方にあるものは、画像が一方向または別の方向に動いている場合に画像が異なるため、画像のソースを変更するだけです。とにかく、弾丸オブジェクトは次のとおりです。

function BulletGreen() {
    var drawX = 0;
    var drawY = 0;
    var height = 33;
    var width = 9;
}

ご覧のとおり、かなり似ています。さて、これを描画するために使用するコードは次のとおりです。

BulletGreen.prototype.draw = function drawBulletsGreen() {
    ctxPlayer.drawImage(sprites,350,0,this.width,this.height,this.drawX,this.drawY, this.width, this.height);
}

ただし、コンソールでコマンドを使用すると、これが機能しないようです。エラーは返されませんが、キャンバスはまったく変更されていないようです。ただし、次のようなことを行う

ctxBullet.drawImage(sprites,0,0)

スプライトシートをキャンバスに描画します。この種の質問が歓迎されない場合は申し訳ありませんが、アイデアがありません! それは本当に私を混乱させます。

編集：ここにすべてをアップロードしました。

4

1 に答える 1

0

私はあなたが正しいと思います: ctxPlayer はキャンバス オブジェクトで、スプライトは新しいイメージ src (たとえば abc.png ) です。次に、drawimage に 8 つのパラメーターを使用する代わりに、5 つだけを使用できますか? あなたの場合、それらは 、

ctxPlayer.drawImage(sprites,this.drawX,this.drawY, this.width, this.height);

どこ、

this.drawX is the x coordinate where to place the image on the canvas
this.drawY is the x coordinate where to place the image on the canvas
this.width is width of the image
this.height is height of the image

同様のパラメーターが私にとってはうまくいきました..あなたにもうまくいくと思います:)

これは私が見つけた参照 URL です: http://www.w3schools.com/tags/canvas_drawimage.asp

また、clearCtx(ctxPlayer); キャンバス全体または前の画像が描かれた場所をクリアしていますか? キャンバス全体をクリアしようとしている場合は、完全に再描画する必要があります

于 2012-10-26T11:24:04.397 に答える