Javascript Girl
  1. Javascript Girl
  3. A * Démarrer la recherche de chemin dans le canevas HTML5
Intereting Posts
$ Rappel de ressources (erreur et succès) Comment une fonction en boucle (qui renvoie une autre fonction) fonctionne-t-elle? Comment référencer les informations de version dans une extension Google Chrome? Switch-Case pour les chaînes en Javascript ne fonctionne pas comme prévu Enregistrer le fichier à partir de données locales en Javascript Comment puis-je compter les fichiers dans un répertoire en utilisant jQuery? Différence entre catch et onErrorResumeNext Initialiser les références Firebase dans deux fichiers distincts dans la nouvelle API Comment puis-je configurer les divs à "visibilité: caché" si elles sont en dehors de la fenêtre Infinite Scroll jQuery & Laravel 5 Paginate Tampon de longueur autour de la polyligne Comment puis-je dupliquer une forme dans le canevas de HTML5? Appelez la fonction parent qui est annulée par un enfant pendant la chaîne du constructeur dans JavaScript (ES6) Stockage de tableaux JS et d'objets dans une base de données Rails 4 – JS conditionné avec des champs dépendants

A * Démarrer la recherche de chemin dans le canevas HTML5

J'essaie d'implémenter A * Démarrer la recherche de chemin dans mes jeux (qui sont écrits avec JavaScript, HTML5 Canvas). Library for A * Start a trouvé ceci – http://46dogs.blogspot.com/2009/10/star-pathroute-finding-javascript-code.html et maintenant j'utilise cette bibliothèque pour la recherche de chemin. Et avec cette bibliothèque, j'essaie d'écrire un test simple, mais coincé avec un problème. Je suis maintenant terminé lorsque dans l'écran de toile HTML5, cliquez avec le chemin d'affichage de la souris jusqu'à mon mouse.x et mouse.y. Voici une capture d'écran:

Capture d'écran.

(Carré rose: joueur, carrés d'orange: chemin jusqu'à ma mouse.x / mouse.y) Codez comment je dessine les carrés d'orange jusqu'à ce que mon mouse.x / mouse.y soit: 

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

Mon problème est que je ne comprends pas comment déplacer mon joueur jusqu'à l'objectif du chemin. J'ai essayé: 

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

Mais avec ce code, mon lecteur n'est pas sélectionné. (Lorsque je lance le code, player.x et player.y sont égaux à 0 et lorsque je clique avec la souris, je sais que le lecteur du chemin clignote et disparaît)

Peut-être que quelqu'un sait comment résoudre ce problème?

Et je suis très désolé pour ma mauvaise langue anglaise. 🙂

Mon violon de travail

C'est ce que j'utilise actuellement qui est basé sur mon *. Le concept devrait cependant être le même. La fonction a * doit renvoyer le chemin en tant que matrice, il vous suffit d'itérer dans le chemin de chaque mise à jour du joueur et de les déplacer. 

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