0

私はcanvasタグを初めて使用し、アニメーションで遊んでいます。基本的に、私は複数の画像で構成される「グラウンド」セクションを設定しようとしています（マリオブラザーズのような8ビットの横スクロールゲームに似ています）。地面は複数の画像で構成されます。これらの画像を読み込んで下部に並べて表示するコンストラクター関数を作成しました。

function Ground(context,ImageName,ImgX,ImgY,ImgW,ImgH){
    this.width=ImgW;
    this.height=ImgH;
    this.x=ImgX;
    this.y=ImgY;
    img=new Image();
        img.onload=function(){context.drawImage(img,ImgX,ImgY,ImgW,ImgH);};
    img.src='images/'+ImageName;};

これはうまくいくようです。次に、次のように、キーの左/右イベントの基本的な設定を含む、残りのアニメーションを設定しました。

window.onload=function(){
    var canvas=document.getElementById('canvas'),
    context=canvas.getContext('2d'),
        Grounds=[],
        ImgX=-150; // INITIAL STARTING X FOR FIRST GROUND TILE

    // INSERT GROUND ELEMENTS
    for(var i=0,l=8; i<l; i++){
             var ImgX+=150;
             Grounds[i]=new Ground(context,"ground.png",ImgX,650,150,150);
        };

    // ASSIGN LEFT/RIGHT KEYS
    window.addEventListener('keyup',function(event){
              switch(event.keyCode){
                case 37:
                for(var i=0,l=Grounds.length; i<l; i++){
                         Grounds[i].x+=10;
                    };  
                 break;
            case 39:break;
              };
         });

    // ANIMATION LOOP
    (function drawFrame(){
    window.mozRequestAnimationFrame(drawFrame,canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);

    }());
};

私は自分の問題が何であるかを正確に知っていますが、それを解決する方法がわかりません。アニメーションループはフレームごとにキャンバスをクリアしますが、ユーザーが左矢印キーを押したときに更新された位置（存在する場合）を再描画しません。

ここに再描画の部分がありません。これをどのように処理するか、またはこれに完全に間違ってアプローチしているかどうかは正確にはわかりません。どんな助けでも大歓迎です！ありがとう！

4

2 に答える 2

1

まずx、グラウンドタイルのプロパティをインクリメントしていますが、そのプロパティはコードのどこにも使用されていません。onloadこれらの画像オブジェクトのイベントが独自のプロパティに従って画像を描画するようにコードを変更して、画像xを変更すると実際に描画される内容に影響を与えるようにします。また、Groundオブジェクトのプロパティとして画像オブジェクトを追加して、後で外部からアクセスできるようにします。

あなたのアプローチは本当にあまり良くありませんが、0に戻らずにそれをやりたいのなら、次のようにしてください：

function Ground(context,ImageName,ImgX,ImgY,ImgW,ImgH){
    this.width=ImgW;
    this.height=ImgH;
    this.x=ImgX;
    this.y=ImgY;
    var self = this; // Add local reference to this Ground instance 
    this.img=new Image(); // img is now a property too
        this.img.onload=function(){context.drawImage(this, self.x, self.y,self.width,self.height);};
    this.img.src='images/'+ImageName;};

これで、グラウンドタイルのプロパティを変更して、xその描画関数を再度呼び出すことができます（これはonloadイベントです）。

Grounds[i].x+=10;
Grounds[i].img.dispatchEvent(new Event("load"));

最初にすべての値を更新してから、すべての描画呼び出しを個別に更新する必要があることに注意してください。

于 2012-08-20T06:07:30.227 に答える
0

描画メソッドを追加するだけではいけませんか？通常、次のようになります。初期化->更新->クリア、再描画->更新->クリア、再描画->..。

// ANIMATION LOOP
(function drawFrame(){
window.mozRequestAnimationFrame(drawFrame,canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);
    contect.drawImage(...);

}());
于 2012-08-19T21:03:03.493 に答える