Question

我是canvas标签的新手，正在玩一些动画。基本上，我正在尝试设置一个由多个图像组成的“地面”部分（类似于像Mario Brothers这样的8bit侧滚动游戏）。地面将由多个图像组成，我已经构建了一个构造函数来加载它们并将它们平铺在底部。

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;};

这似乎很好。然后我设置动画的其余部分，包括Key Left / Right事件的基本设置，如下所示：

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

首先，您正在递增地面图块的属性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"));

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

Answer 2

你能不能只添加一个draw方法？你通常是这样的： init - ＆gt;更新 - ＆gt;清除，重绘 - ＆gt;更新 - ＆gt;清除，重绘 - ＆gt; ...

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

}());

画布动画不渲染

2 个答案: