画布幻灯片动画答案

【问题标题】：canvas slide animation画布幻灯片动画
【发布时间】：2012-05-12 03:22:09
【问题描述】：

下面是我在网上找到的一个益智游戏的代码Puzzle game。我稍微修改了代码以使其与 jQuery 一起工作，一切正常。

我希望能够为单击的图块设置动画，使其滑动到空图块而不是立即被绘制在那里。

我很确定我需要更改它的绘图功能，但我不确定如何更改。我希望你们能引导我走向正确的方向或给我一些提示。

提前感谢您抽出宝贵时间阅读我的问题。

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

var img = new Image();
img.src = 'images/images.jpg';
img.addEventListener('load', drawTiles, false);

var puzzle = $('#puzzle')[0];

var scale = $('#scale')[0];
var boardSize = puzzle.width;
var tileCount = scale.value;

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 = new Object;
setBoard();

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

puzzle.onmousemove = function(e) {
  clickLoc.x = Math.floor((e.pageX - this.offsetLeft) / tileSize);
  clickLoc.y = Math.floor((e.pageY - this.offsetTop) / tileSize);
};

puzzle.onclick = function() {
  if (distance(clickLoc.x, clickLoc.y, emptyLoc.x, emptyLoc.y) == 1) {
    slideTile(emptyLoc, clickLoc);
    drawTiles();
  }
  if (solved) {
    setTimeout(function() {alert("You solved it!");}, 500);
  }
};

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

【问题讨论】：

标签： javascript animation html5-canvas

【解决方案1】：

首先，您需要创建一个update 函数，该函数由setTimeout 或setInterval 调用并且可以访问您的puzzle 对象。这将允许您控制每秒绘制的帧数，这将决定您的动画看起来有多快。这个update 方法将要调用drawTiles 并且可能是修改后的slideTile。

接下来，您需要修改slideTile 以缓慢移动磁贴，而不是快速移动它。您可能还希望有一个标志，以防止用户在一个磁贴滑动时点击另一个磁贴。

Here 是基本画布动画的一个很好的起点。

【讨论】：