帆布幻灯片动画

下面是我在线找到的益智游戏代码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; 
}

来源

2012-05-02 user927917

首先，你需要创建一个update功能由setTimeout或setInterval打来电话，访问您puzzle对象。这将允许您控制每秒绘制的帧数，这将决定您的动画看起来有多快。这种方法update将要拨打drawTiles，并可能修改slideTile。

接下来，您将需要修改slideTile以缓慢移动瓷砖，而不是快速移动它。您也可能希望有一个标记，以防止用户在滑动某个图块时单击其他图块。

Here是基本画布动画的一个相当不错的出发点。

来源

2012-05-02 16:31:48

帆布幻灯片动画

回答

相关问题