A * Tìm kiếm đường dẫn bắt đầu trong Canvas HTML5

Question

Tôi đang thử triển khai A * Tìm đường dẫn bắt đầu trong trò chơi của tôi (được viết bằng JavaScript, HTML5 Canvas). Thư viện cho A * Bắt đầu tìm thấy điều này - http://46dogs.blogspot.com/2009/10/star-pathroute-finding-javascript-code.html và bây giờ tôi đang sử dụng thư viện này để tìm đường. Và với thư viện này, tôi đang cố gắng viết một bài kiểm tra đơn giản, nhưng bị mắc kẹt với một vấn đề. Tôi hiện đã hoàn tất khi nhấp vào màn hình canvas HTML5 với đường dẫn hiển thị chuột cho đến khi mouse.x và mouse.y của tôi. Đây là một ảnh chụp màn hình:

(hồng vuông: Một Người Chơi, Orange vuông: đường dẫn đến mouse.x tôi/mouse.y) Mã làm thế nào tôi đang vẽ các ô vuông màu cam cho đến khi mouse.x tôi/mouse.y là:

for(var i = 0; i < path.length; i++) { 
    context.fillStyle = 'orange'; 
    context.fillRect(path[i].x * 16, path[i].y * 16, 16, 16); 
} 

Vấn đề của tôi là tôi không hiểu cách di chuyển cầu thủ cho đến khi mục tiêu đường đi. Tôi đã thử:.

for(var i = 0; i < path.length; i++) { 
    player.x += path[i].x; 
    player.y += path[i].y; 
} 

Nhưng với mã này nghe nhạc của tôi không Beung rút ra (Khi tôi chạy mã, player.x và player.y là bằng 0 và khi tôi nhấp chuột tôi làm cho trình phát đường dẫn nhấp nháy và biến mất)

Có thể ai đó biết cách giải quyết vấn đề này?

Và tôi rất rất xin lỗi vì ngôn ngữ tiếng Anh không tốt của tôi. :)

Answer 1

My Working Fiddle

Đây là những gì tôi hiện đang sử dụng mà là dựa tắt của một của tôi *. Các khái niệm nên được như nhau mặc dù. Hàm a * sẽ trả về đường dẫn dưới dạng mảng, sau đó bạn chỉ cần lặp qua đường dẫn trên mỗi lần cập nhật trình phát và di chuyển chúng.

// data holds the array of points returned by the a* alg, step is the current point you're on. 
function movePlayer(data, step){ 
    step++; 
    if(step >= data.length){ 
     return false; 
    } 

    // set the player to the next point in the data array 
    playerObj.x = data[step].x; 
    playerObj.y = data[step].y; 

    // fill the rect that the player is on 
    ctx.fillStyle = "rgb(200,0,0)"; 
    ctx.fillRect(playerObj.x*tileSize, playerObj.y*tileSize, tileSize, tileSize); 

    // do it again 
    setTimeout(function(){movePlayer(data,step)},10); 
}​