ए * एचटीएमएल 5 कैनवास

Question

में पथ खोजना शुरू करना मैं अपने गेम में ए * स्टार्ट पथ ढूंढने की कोशिश कर रहा हूं (जो जावास्क्रिप्ट, एचटीएमएल 5 कैनवास के साथ लिखे गए हैं)। ए * स्टार्ट के लिए लाइब्रेरी यह पाया - http://46dogs.blogspot.com/2009/10/star-pathroute-finding-javascript-code.html और अब मैं पथ खोज के लिए इस लाइब्रेरी का उपयोग कर रहा हूं। और इस पुस्तकालय के साथ, मैं एक साधारण परीक्षण लिखने की कोशिश कर रहा हूं, लेकिन एक समस्या से फंस गया। अब मैं किया गया है जब एचटीएमएल 5 कैनवास स्क्रीन में माउस शो पथ के साथ मेरे mouse.x और mouse.y तक क्लिक करें।

: यहाँ एक स्क्रीनशॉट है (पिंक वर्ग: खिलाड़ी, ऑरेंज वर्गों: पथ जब तक मेरी mouse.x/mouse.y) कोड कैसे मैं अपने mouse.x तक नारंगी वर्गों ड्राइंग कर रहा हूँ/mouse.y है:

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

मेरी समस्या यह नहीं है कि मुझे समझ में नहीं आता कि मेरे खिलाड़ी को पथ लक्ष्य तक कैसे स्थानांतरित किया जाए। मैं कोशिश की है:।

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

लेकिन इस कोड के साथ अपने खिलाड़ी तैयार Beung नहीं है (जब मैं कोड, player.x चलाने के लिए और player.y हैं 0 के बराबर है और जब मैं माउस के साथ मैं क्लिक करें पाथ प्लेयर ब्लिंक प्राप्त करें और गायब हो जाएं)

शायद किसी को भी इस समस्या को हल करने का तरीका पता है?

और मेरी बुरी अंग्रेजी भाषा के लिए मुझे बहुत खेद है। :)

Answer 1

My Working Fiddle

यह मैं वर्तमान में जो मेरे एक के * पर आधारित है क्या उपयोग है। हालांकि अवधारणा एक जैसी होनी चाहिए। ए * फ़ंक्शन को पथ को सरणी के रूप में वापस करना चाहिए, फिर आपको प्रत्येक प्लेयर अपडेट पर पथ के माध्यम से फिर से प्रयास करने और उन्हें स्थानांतरित करने की आवश्यकता है।

// 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); 
}​