Question

我有一个滑动拼图，其中图像被分割成网格，你可以将方块移动到空白区域。我想为此制作动画，所以要实际滑入空白区域，不要只是出现在那里。这是我正在使用的codepen：http://codepen.io/akshivictor/pen/jPPypW和下面的javascript。

var context = document.getElementById('puzzle').getContext('2d');

var img = new Image();
img.src = 'http://i.imgur.com/H1la3ZG.png?1';
img.addEventListener('load', drawTiles, false);

var boardSize = document.getElementById('puzzle').width;
var tileCount =3;

var tileSize = boardSize / tileCount;

var clickLoc = new Object;
clickLoc.x = 0;
clickLoc.y = 0;

var emptyLoc = new Object;
emptyLoc.x = 0;
emptyLoc.y = 0;

var solved = false;

var boardParts;
setBoard();

document.getElementById('scale').onchange = function() {
  tileCount = this.value;
  tileSize = boardSize / tileCount;
  setBoard();
  drawTiles();
};

document.getElementById('puzzle').onclick = function(e) {
  clickLoc.x = Math.floor((e.pageX - this.offsetLeft) / tileSize);
  clickLoc.y = Math.floor((e.pageY - this.offsetTop) / tileSize);
  if (distance(clickLoc.x, clickLoc.y, emptyLoc.x, emptyLoc.y) == 1) {
    slideTile(emptyLoc, clickLoc);
    drawTiles();
  }
};

function setBoard() {
  boardParts = new Array(tileCount);
  for (var i = 0; i < tileCount; ++i) {
    boardParts[i] = new Array(tileCount);
    for (var j = 0; j < tileCount; ++j) {
      boardParts[i][j] = new Object;
      boardParts[i][j].x = (tileCount - 1) - i;
      boardParts[i][j].y = (tileCount - 1) - j;
    }
  }
  emptyLoc.x = boardParts[tileCount - 1][tileCount - 1].x;
  emptyLoc.y = boardParts[tileCount - 1][tileCount - 1].y;
  solved = false;
}

function drawTiles() {
  context.clearRect(0, 0, boardSize, boardSize);
  for (var i = 0; i < tileCount; ++i) {
    for (var j = 0; j < tileCount; ++j) {
      var x = boardParts[i][j].x;
      var y = boardParts[i][j].y;
      if (i != emptyLoc.x || j != emptyLoc.y || solved == true) {
        context.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize,
          i * tileSize, j * tileSize, tileSize, tileSize);
      }
    }
  }
}

function distance(x1, y1, x2, y2) {
  return Math.abs(x1 - x2) + Math.abs(y1 - y2);
}

function slideTile(toLoc, fromLoc) {
  if (!solved) {
    boardParts[toLoc.x][toLoc.y].x = boardParts[fromLoc.x][fromLoc.y].x;
    boardParts[toLoc.x][toLoc.y].y = boardParts[fromLoc.x][fromLoc.y].y;
    boardParts[fromLoc.x][fromLoc.y].x = tileCount - 1;
    boardParts[fromLoc.x][fromLoc.y].y = tileCount - 1;
    toLoc.x = fromLoc.x;
    toLoc.y = fromLoc.y;
    checkSolved();
  }
}

function checkSolved() {
  var flag = true;
  for (var i = 0; i < tileCount; ++i) {
    for (var j = 0; j < tileCount; ++j) {
      if (boardParts[i][j].x != i || boardParts[i][j].y != j) {
        flag = false;
      }
    }
  }
  solved = flag;
}

我在本文http://www.sitepoint.com/image-manipulation-with-html5-canvas-a-sliding-puzzle-2/

中对滑动拼图进行了改编

Answer 1

进行平移动画的一般方法是：

animate(object):
    while(object.not_in_place())
        object.move(small_amount)
        sleep(some_time)
        draw(object)
    repeat

因此，在正确的方向上移动您的图像少量（几个像素）并且足够快地重复该移动（尽管在两者之间休眠）以获得滑动动画。

如果您需要放入或放松动画，您的翻译金额将随着持续时间而变化。

对于固定间隔后重复调用，请在JavaScript中使用setTimeout。

更多详情

假设您正在从(a, b)移动到(c, b)（二维笛卡尔平面中的坐标），那么沿x方向移动的距离为(c - b)，y方向为0。因此，将距离(c - b)除以等量x。

让动画的总持续时间为T，然后将其除以相同的间隔数t。因此，您的算法变为：

while(object.x != c)
    object.x += x
    sleep(t)
    object.draw()
repeat

同样，你可以做y方向的情况。请注意，在游戏中，您不需要在任何方向上移动，只能横向或纵向移动，这简化了实现。

虽然JavaScript没有等效的sleep（）例程，但您可以像这样使用setTimeout：

function x() { 
    id = setTimeout(x, 1000); // x will be called every 1 seconds ( = 1000 ms)
}

clearTimeout(id); // this removes the timeout and stops the repeated function calls

滑动拼图（javascript＆amp; HTML5） - 需要动画移动元素

1 个答案: