Question

我有一张图片，我试图通过setInterval()设置动画。我的目的是仅在用户点击Canvas时将图像向上移动一个像素，否则图像应该向下移动。一切顺利但计时器会增加每onclick()的速度

我的画布标签

 <canvas id="myCanvas" width="400" height="600" onclick=init()></canvas>

java脚本：

function init()
{

    function draw1()
    {
        context.clearRect(0,0,400,600);
        img_y = img_y - 40;
        context.drawImage(image1,img_x,img_y);

    }
    function move()
    {

        context.clearRect(0,0,400,600);
        img_y = img_y + 7;
        context.drawImage(image1,img_x,img_y);

    }
    draw1();
    setInterval(move,70);


}

当用户点击我游戏的Canvas时，我的动画就开始了。当我第二次单击Canvas左右时，动画速度会增加。我的逻辑出了什么问题？

Answer 1

您的问题是每次点击ADDS一个间隔。因此，您的代码基本上运行的次数比您想要的多（使动画更快）。确保在开始新间隔之前清除间隔。请尝试以下操作（docs）：

window.myTimer = '';

function init()
{

    function draw1()
    {
        context.clearRect(0,0,400,600);
        img_y = img_y - 40;
        context.drawImage(image1,img_x,img_y);

    }
    function move()
    {

        context.clearRect(0,0,400,600);
        img_y = img_y + 7;
        context.drawImage(image1,img_x,img_y);

    }
    draw1();
    window.clearInterval(window.myTimer); // clear previous interval
    window.myTimer = setInterval(move,70); // set it again


}

Answer 2

@Pointy指出，你正在提高速度。每次点击，因为您正在创建一个调用相同功能的新间隔。

考虑清除间隔并每次制作一个新的间隔：window.clearInterval(intervalId);
OR
在你的函数中实现一个bool，它会阻止它移动直到点击。

Answer 3

您正在将启动移动的代码与移动对象的代码混合在一起。它们需要是独立的功能。

<canvas id="myCanvas" width="400" height="600" onclick="moveUp"></canvas>

JS：

var movement = 7, timer;
function animate() {
    context.clearRect(0, 0, 400, 600);
    img_y += 7;
    context.drawImage(image1, img_x, img_y);
}
function moveUp() { 
// no need to redraw the image here as it will be drawn at the next frame anyway
    img_y -= 40;
}
function init() {             // call this when you want the main animation to start
    if (timer) {              // if timer variable already exists
        clearInterval(timer); // clear the corresponding interval
        timer = null;         // and also clear the variable itself
    }
    timer = setInterval(animate, 70);
}

（此代码在设置之前清除计时器，如果出于某种原因，init被多次调用。）

Answer 4

你也可以使用onmouseup，onmousedown事件，让它在按下鼠标时移动，并在不再按下鼠标时停止移动。这样您就可以在两个事件上创建和删除间隔

var interval;

function startInterval() {
  interval = setInterval(animation.move.bind(animation), 70);
}

function stopInterval() {
  clearInterval(interval);
}


var animation = {
  old: undefined,
  x: 0,
  y: 0,
  context: undefined,
  move: function() {
    this.y += 10;
    animation.draw();
  },
  draw: function() {
    if (typeof animation.context === 'undefined') {
      var el = document.getElementById('ctx');
      animation.context = el.getContext('2d');
    }
    var context = animation.context;
    if (typeof animation.old !== 'undefined') {
      context.clearRect(animation.old.x, animation.old.y, 10, 10);
    }
    animation.old = {
      x: animation.x,
      y: animation.y
    };
    context.fillStyle = "#FF0000";
    context.fillRect(animation.old.x, animation.old.y, 10, 10);
  }
};

<canvas id="ctx" width="300" height="300" onmousedown="startInterval()" onmouseup="stopInterval()"></canvas>

setInterval无法正常工作

4 个答案: