javascript - 无法让 Sprite 在圆形路径中移动

Question

我有一个名为 snitch 的 Sprite ，我试图让它以 Canvas /2 为中心( Canvas 名为空间)和半径为 30 的圆圈移动。我正在使用以下代码，但它没有似乎什么都不做，“告密者”只是站在那儿，在坐标 (0,0) 上什么也不做。我已经尝试从 MySprite2 函数中删除这些 (0,0) 坐标，但是当我这样做时，告密者甚至都没有出现。

var ctx = space.getContext("2d"); 
var FPS = 40;
var snitch= new MySprite2("http://i.imgur.com/IgNKTbW.png");

function MySprite2 (img_url) {
  var x = this.x = 0;
  var y = this.y = 0; 
  this.visible= true;
  var img = this.MyImg2 = new Image();
  this.MyImg2.src = img_url;
}

MySprite2.prototype.Do_Frame_Things = function() {
  if (this.visible) ctx.drawImage(this.MyImg2, this.x, this.y);
}; 

function Do_a_Frame () {
  ctx.clearRect(0, 0, space.width, space.height);
  snitch.Do_Frame_Things();
}

function theMoves(snitch){
  var theta = 0;
  for (theta = 0; theta < 2 * Math.PI; theta+=0.1) { 
     snitch.x = (space.width/2) + Math.sin(theta)*30;
     snitch.y = (space.height/2) + Math.cos(theta)*30;
  }
}
setInterval(theMoves, 1000/FPS);
setInterval(Do_a_Frame, 1000/FPS);

知道哪里出了问题吗？OK GOT IT MOVING 但现在它只是在一条直线上运行，而不是一个圆圈。下面是新代码。

function MySprite (img_url) {
  var x = this.x = (space_x/2);
  var y = this.y = (space_y/2);
  var angle = this.angle = 0;
  this.visible= true;
  var img = this.MyImg = new Image();
  this.MyImg.src = img_url;
}

MySprite.prototype.Do_Frame_Things = function() {
  if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y);
};  

function theMoves(){
  snitch.x += Math.cos(snitch.angle)*2;
  snitch.y += Math.sin(snitch.angle)*2;
}
setInterval(theMoves, 40);

Answer 1

很多问题所以我做了重写。已经完成并解释了我所做的事情以及我为什么这样做。

第一行一切都很好，但不需要 FPS，因为这将由浏览器决定。对于游戏，您永远无法保证任何帧速率，除非您拥有专用硬件和确定性操作系统。只有专用游戏机提供此功能。

var ctx = space.getContext("2d"); 

使用 new 和 prototypes 不利于游戏设计，因为它们会产生大量不必要的额外开销。事实上，完全避免使用这种类型的构造函数通常是个好主意。

使用生成器函数，不要直接接触原型(prototype)

在变量开头的 Javascript 大写生成器之前先声明你的方法 BTW 是为类类型对象保留的，但这只是个人风格选择而已

// draw the sprite is visible
var doFrameThings = function() {
    if (this.visible) { // though you don't have to put the curly braces here
                        // you should make it a habit  to always use them
        ctx.drawImage(this.myImg , this.x, this.y);
    }
}; 

创建一个函数来更新 Sprite ，如果帧速率下降，使用最后一帧时间来确保一致的速度

var updateSprite = function(frameTime){
    this.theta += this.deltaTheta * frameTime;
    this.x = (space.width/2) + Math.sin(this.theta)*30;
    this.y = (space.height/2) + Math.cos(this.theta)*30;
}

创建一个 Sprite 。这种方法与原型(prototype)方法几乎没有区别，但它提供了更好的性能

function createSprite(imgURL){
    var sprite = {  // create the sprite
        x:0,
        y:0,
        theta: 0,
        deltaTheta: Math.PI/40,
        visible:false,           // not visible until it has loaded.
        draw : doFrameThings,    // add the draw function
        update : updateSprite,   // add the update function
        myImg : (function(){     // call a annon function that creates the 
                                 // image returning it to myImg
            var image = new Image();
            image.src = imgUrl;
            image.onload = function(){  // flag it as visible only when it has loaded.
                sprite.visible = true;
            };
            return image;
        })()
    };
    return sprite; // return the created sprite
                   // this is exactly the same as new does except new returns
                   // this instead of the named object.
}        

创建一个 Sprite 。现在，您不必调用使用 New 和参与原型(prototype)系统的所有开销。

var snitch = createSprite("http://i.imgur.com/IgNKTbW.png");

使用setInterval 是制作动画的一种非常糟糕的方法。首先，您有两个 setInterval，它们会不同步，并且无法保证它们会在请求的时间间隔发生。它们也不与显示硬件同步，所以你会被剪掉。此外，由于它们未同步到浏览器的渲染系统，您可能会出现闪烁或更糟的情况。

如果您的渲染时间大于间隔，它最终会导致您的应用程序崩溃，并且没有简单的方法可以知道是否发生这种情况

所以永远不要使用setInterval。个人永远不要将 setInterval 用于任何危险的方法，应该从 Javascript 中删除。

使用 requestAnimationFrame 获得稳定的 60 fps 并同步到显示硬件和浏览器的渲染系统。因为它与显示器同步，帧之间的时间将以大约 1/60 秒为单位。如果您错过了第一帧，您将不得不等待 1/60 秒后的下一次刷新。

创建一个主循环/更新函数并从同一个函数调用所有动画。

var lastTime = new Date().valueOf();  // for tracking the frame time
function update(time){  // requestAnimationFrame provides the current time
    var frameTime = time-lastTime;
    // clear the canvas
    ctx.clearRect(0, 0, space.width, space.height);

    snitch.update(frameTime); // update sprite
    snitch.draw(); // draw the sprite


    requestAnimationFrame(update); // request the next animation frame
    lastTime = time;  // save the time this frame was called 
}

requestAnimationFrame(update); // start the animation

这应该能让告密者顺利移动。