canvas javascript, déplacer le personnage

Default
,

Bonjour,

Je suis bloqué sur une partie dans mon code je vous explique, je suis en train de faire un jeux en html avec la balise canvas , j'arrive à générer une map qui se place dans un canvas avec comme id canvasMap et mon joueur se trouve sur un autre canvas par dessus afin d'éviter de regénérer la map en permanance dans ma boucle de jeux étant donné qu'elle contient plus de 1800 cellules c'est gourmant à refaire jusque la tout va bien. La ou je suis bloqué c'est sur la partie joueur, j'ai initialisé la position de mon joueur au chargement et quand je clique ça donne la position final du joueur. Afin de le déplacer j'ai crée une fonction de pathfinding qui stock les coordonnées x et y du chemin que le joueur doit parcourir dans un tableau et j'aimerais déplacer le joueur sauf que ma boucle de jeux est basée sur un setInterval avec une attente de 1000/FPS

et je ne sais pas comment mouvoir le personnage , en espérant avoir été claire, je vous remercie d'avance.

63 Réponse

1 3
Default
, Il a répondu à ma question !

pour le moment un simple joueur qui navigue sur une map en effet

112438
, Il a répondu à ma question !

;) c à ce moment que tu dois bien définir ton contexte, tes obj joueur et obj map...

pour le rendu (normalement on commence pas par là, mais tu as déjà fait plein de trucs ; donc....) :
ta map peut être définit en 2d en 3d, en isomorphisme ( c ton cas ...) ou autre
je pense qu'il te faut une méthode pour convertir les x,y,z object en x,y,z visu...
dans ton cas c relativement simple....

en gros, on réfléchit en 2d (la composante z sous le coude) et le moteur de rendu dessine le tableau....

qu'en penses-tu ?

Default
, Il a répondu à ma question !

en faite mes tuiles de mon jeux sont déjà faite en vu isométrique je me contente de les placer les unes à coté des autres avec ma boucle dans Créer le terrain

112438
, Il a répondu à ma question !

oui, g vu...
c pq je t'ai dit que ct "relativement" simple....
la question que je te pose c :
est-ce que ton joueur peut se ballader sur cette map en coordonnées x,y ?

Default
, Il a répondu à ma question !

Oui il peut en gros dans ma boucle des que je dessine une tuile je la stock dans un objet case qui stock les coordonné dans le tableau genre (0,0) etc... et ca position en x et y dans le canvas

Default
, Il a répondu à ma question !

c'est pour ca que j'utilise case dans mon joueur pour detecter le clique car il existe pas d'evenement qui permette d'interagir avec le dessin du coup quand je clique je regarde dans les cases si c'est une cellule de la map et quand je deplace la map (du coup les coordonnes des tuiles change ) je vide le tableau et je le re rempli avec les nouvelles pos

112438
, Il a répondu à ma question !

autrement-dit :
en imaginant que le sprite du joueur soit un canvas qui n'englobe que lui...
si je dis à joueur : joueur.move(x,y,map) ira t-il au bon endroit sur map ?
ben non...
si je ne m'abuse ton map est en 2d (donc x,y), ton easystart te génère un path x,y :
ton joueur doit donc comprendre le x,y ; et c pas le cas....
je répète y'a po grand chose à faire....

112438
, Il a répondu à ma question !

j'ai donc une autre question, qu'on parte sur la même idée...
tu veux un seul canvas, ou plusieurs (map et joueur) ?
parce que tu raisonnes comme si tu n'en avais qu'un alors que t'en as définit 2.....

Default
, Il a répondu à ma question !

le joueur comprend le x,y grace au tableau de case quand je clique sur la map il compare la position de la souris dans le canvas avec le tableau de case si il y a correspondance il prend le x et le y tableau pour deplacer le joueur si c'est pas claire je vais esseyer de faire mieux pour te l'expliquer mais pas évident ^^

Default
, Il a répondu à ma question !

je pense que je vais partir sur un seul canvas se sera plus simple à traiter ...

112438
, Il a répondu à ma question !

aïe !! mauvaise idée....
tu vas avoir plein de soucis de rafrachissement...
2 canvas c mieux....
à mon avis

112438
, Il a répondu à ma question !

bon, c bientôt le week end....
je t'envoie une soluce de base si g le temps... et on en rediscute...

Default
, Il a répondu à ma question !

c'est ce que je me suis dit c'est pour ca qu'à la base j'ai fait sur plusieur canvas mais bon j'ai encore à réfléchir sur toute le logique/structure de tout ca je pense que le papier ne sera pas de refus

Default
, Il a répondu à ma question !

entendu merci beaucoup de mon coté je vais y réfléchir et revoir tout par rapport à ce que tu m'as dis ! :)

Default
, Il a répondu à ma question !

Coucou j'ai bien avancé j'ai refait toute la partie Terrain simplification de nom de méthod, virer variable superflu, commenter tout ca bref la total la ou je bloque maintenant c'est sur la class Joueur avant le clique était détecté dans le main et utilisait derrière la méthod pour déplacer le joueur mais j'aimerais intégrer l'évènement clique directement dans ma class de sorte que quand j'instancie mon objet les évènements clique et mousemoove soit prit en compte je sais pas si je suis claire ^^

112438
, Il a répondu à ma question !

hello, si tout à fait...
il suffit qu'une fois ton dom fait tu crées les listeners. et ça tu peux le faire où tu veux, comme dans tes class par exemple. la doc ici
sinon, moi g pas eu le temps ce week end... si tu as bien nettoyé ton code, as tu remarqué des redondances entre tes différentes class, si oui as tu pensé à l'héritage ?
par exemple, pour tes events : tu crées une class qui gère ça et tu en fais hériter tes class joueur et terrain, pareil pour le rendu.... enfin c une idée :) perso c comme ça que je procède...

Default
, Il a répondu à ma question !

Coucou, pas de souci tkt pas , je connais très bien l'héritage en java , c++ etc mais pas en js je vais me documenter sur ca voir si ca fonctionne parreil etc ..

112438
, Il a répondu à ma question !

tiens un ti exemple pour tes events :
tu te fais une class qui gère les view :

var CView = function(params){
    // ton constructor
};

// la fonction qui ajoutera les listeners
CView.prototype.addEvent = function(elt, event){
    if(typeof(event)==='undefined') return false;
    var self = this;
    els = [];
    els = el.querySelectorAll('[data-events]'); // je récupère tous les éléments qui ont un data-events

    for(var i = 0; i < els.length; i++){
        if(els[i].dataset.events[0]=='('){ // plusieurs events c po terrible, y'a bcp mieux à faire.... à bon entendeur
            events = els[i].dataset.events;
            events = events.substr(1, events.length-2);
            events = events.split(',');

            for(var j in events){
                els[i].addEventListener(events[j], self[event].bind(self), true); // je bind pour récupérer mon context
            }
        }
        else els[i].addEventListener(els[i].dataset.events, self[event].bind(self), true); // un seul event
    }
};

ensuite ton object qui hérite de CView

var myObj = new CView(); // avec params ou po

// ses méthodes propres
myObj.prototype.makeDom = function(params){
    var self = this;
    el = document.createElement('div');
      btn1 = document.createElement('a');
      btn1.className = 'btn bouton1';
      btn1.dataset.events = 'click'; // ici je lui dit qu'il doit réagir sur le click
        // btn1.dataset.events = '(click,mouseover)'; // si je veux qu'il réagisse sur plusieurs events
      btn2 = document.createElement('a');
      btn2.className = 'btn bouton2';
      btn2.dataset.events = 'click'; // ici je lui dit qu'il doit réagir sur le click

    el.appendChild(btn1);
    el.appendChild(btn2);

    document.body.appendChild(el);

    // ici j'appelle la méthode parent de CView
    self.addEvent(el, 'eventDom'); // eventDom sera la méthode qui va gérer les events

};

// donc la gestion des events
myObj.prototype.eventDom = function(e){
    if(!e.target) return;
    btn = e.target;

    // et c parti
   if(btn.classList.contains('bouton1')){
        console.log(e.type + 'sur bouton 1');
    }

    else if(btn.classList.contains('bouton2')){
        console.log(e.type + 'sur bouton 2');
    }

};

vala en gros... code à étudier
je te cache pas qu'un ti MCV serait pas mal du tout, avec un CController qui engloberait le CView et un CModel éventuellement...
ainsi tes objects hériteraient du CController et donc de toutes les routines de base qui vont bien :)

Default
, Il a répondu à ma question !

Coucou entendu, merci beaucoup !

112438
, Il a répondu à ma question !

hello, c week-end, je viens aux news...
++

1 3