画布动画不渲染

Question

我是画布标签的新手，我正在玩一些动画。基本上，我正在尝试设置一个由多个图像组成的“地面”部分(类似于像马里奥兄弟这样的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);

    }());
};

我确切地知道我的问题是什么，但不知道如何解决它。动画循环将清除每一帧的画布，但不会在用户按下向左箭头键时重新绘制更新的位置(如果有)。

我在这里遗漏了重绘部分，我不太确定如何处理这个部分，或者我是否完全错误地处理了这个部分。任何帮助都是非常感谢的！谢谢!

Answer 1

首先，您递增了ground tiles的属性x，但该属性甚至没有在代码中的任何地方使用。修改您的代码，使这些图像对象的onload事件根据它们自己的x属性绘制图像，因此对它的更改将实际影响所绘制的内容。另外，将图像对象添加为地面对象的属性，以便以后可以从外部访问它。

你的方法真的不是很好，但如果你想在不回到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"));

请注意，您应该首先更新所有的值，然后再分别进行所有的绘制调用。

Answer 2

你能不能只添加一个draw方法？通常是这样的:初始化->更新-> clear，重绘->更新-> clear，重绘-> ...

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

}());