1

下面是我在网上找到的益智游戏代码。我稍微修改了代码以使其与 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;
}
4

1 回答 1

1

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

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

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

于 2012-05-02T16:31:48.040 回答