滑动拼图(javascript &HTML5) -需要动画移动元素

Sliding puzzle (javascript & HTML5) - need to animate moving elements

本文关键字：动画 元素 移动 HTML5 拼图 javascript      更新时间：2023-09-26

我有一个滑动拼图，其中图像被分割成一个网格，你可以移动正方形到一个空白的空间。我想让它有动画效果，让它滑入空白的空间，而不仅仅是出现在那里。以下是我正在使用的代码: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/

制作平移动画的一般方法是:

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
相关文章：