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

First, you will need to create an update function that is called by setTimeout or setInterval and has access to your puzzle object. This will allow you to control the number of frames drawn per second which will determine how fast your animation appears to be. This update method will want to call drawTiles and probably a modified slideTile.

Next, you will need to modify slideTile to slowly move the tile instead of quickly moving it. You will also probably want to have a flag to prevent users from clicking on another tile when one tile is sliding.

Here is a fairly good starting point for basic canvas animations.

于 2012-05-02T16:31:48.040 に答える