Bonjour à tous !

Voilà mon soucis : imaginons qu'on a une grille de jeu, chaque case mesure 64px par 64px et est représenté par une div qui comporte une fonction, par exemple get_coin() pour prendre une pièce. Un personnage positionné en absolute est placé sur la carte avec des coordonnée x et Y (top / left) qu'on peu déplacer de 64px en 64px

Ma question : Comment faire en sorte de déclencher la fonction get_coin() quand le personnage passe sur la case, sans forcément utiliser les coordonnée (donc quand un élément passe par dessus un autre).

C'est un peu compliqué mais je voulais avoir l'avis de personne plus expérimenté que moi.

Merci pour vos retour !

Salut,

quand tu as une collision, tu compares forcément les coordonnées du joueur par rapport à la pièce. Pourquoi tu ne veux pas utiliser les coordonnées?

Salut,

La façon de procédé que tu décrit correspond à l'utilisation de l'IntersectionObserver. Mais procéder de la sorte (avec un IntersectionObserver), c'est un peu comme sortir l'artillerie lourde pour dézinguer un moustique.

Utiliser une méthode réfléchit autour des coordonnées et de tes actions de déplacement (du personnage) est beaucoup plus honnête en terme d'usage de ressource.

En général et de mon point de vu, on préférera éviter l'IntersectionObserver tant qu'une alternative pas trop compliquer à mettre en place est envisageable (pour cette histoire de consommation de ressource).

-
Edité par BrainError 15 juin 2022 à 9:44:39

Bonjour, merci pour vos reponse ! 

Arthur222: Dans un précédant test, j'utilise les coordonnée, en fait je met une class a ma div, par exemple .coin_gold

Ensuite je prend les coordonnée X et Y du perso, de même pour tout les objet coin_gold (queryselector dessus qui renvoi une nodelist tout sa tout sa) que je fou dans un tableau coin_gold_X et coin_gold_Y.

Et a la fin de chaque mouvement du personnage, qu'il soit sur une case avec une class coin_gold ou pas, je decleche la fonction get_coin(), la fonction va fouiller dans le tableau une correspondance avec les coordonnée de mon personnage avec un foreach, mais le soucis c'est que j'ai plein de fonction comme ça, et declencher 5 fonction comme ça a chaque fois c'est lourd .. 

Brain error: tu veux dire utiliser une condition comme un if ou un switch pour avoir dans quelle fonction entrée ? 

Tu accepterais de nous montrer ton code ? L'histoire de voir ce qu'il en est pour le moment et de t'offrir quelque suggestion.

Je pense perso que c'est pas lourd, normalement ce qui est affiché à l'écran c'est uniquement les éléments du viewport, c'est-à-dire que tous les autres éléments du jeu en dehors du viewport n'existent pas encore, donc ton tableau ne contient pas beaucoup d'éléments.

Par exemple tu affiches tes pièces à mesure que le perso va de gauche à droite, elles apparaissent peu à peu depuis la droite, et tu les effaces quand les pièces sont hors du cadre à gauche, quand le perso a déjà dépassé les pièces. A ce moment là, ton tableau de pièce contient disons 20 pièces, et faire une comparaison sur 20 éléments c'est pas grand chose, même si c'est un jeu de bourrin.

Sur Chrome, il me semble qu'il y a un onglet pour simuler ta connexion avec un connexion lente, tu peux tester et voir si ça rame ou pas.

Salut, 

Voilà où j'en suis dans le dev http://cyrillavoisier.fr/rpg/map_0/map_0.php

Vous pouvez fouillez dans les code cela ne me dérange pas, mais je pensais vraiment que mon système était lourd a mort, et, comme vous allez le voir, je ne bosse que sur une seule carte avec des dimension définis. 

« Sur Chrome, il me semble qu'il y a un onglet pour simuler ta connexion avec un connexion lente, tu peux tester et voir si ça rame ou pas. »

Le JS s'exécute sur le client.

Oui alors c'est plutôt l'onglet Performances.

--

Dans ton code, je pense que tu peux changer un truc, le setTimeOut pour animer les pièces, tu peux mettre tes images d'animation les unes à côté des autres sur une seule grande image, et tu l'insères dans un div plus petite avec les dimensions d'une seule pièce, puis tu déplaces la position du background. Voilà un tuto pour que tu voies mieux.

Tu pourrais aussi utiliser la fonction window.load qui attend que toutes tes images soient loadées.

Aussi tu pourrais mettre une variable qui retient le choix de mouvement qu'on a fait avec les flèches, et tant qu'on n'a pas mis cette variable à 0 par exemple, le perso continue d'avancer. Sinon il fait des accoups en avançant. 

--

Tu as une solution pour comparer sans parcourir tout le tableau, tu pourrais avoir un tableau de tableau qui représente les y et x, et dans chaque case tu rajoutes un numéro de case. Puis tu checkes uniquement la position du perso, et tu le divises pour avoir l'index de la position dans le tableau, pour savoir si dans cette case il y a un obstacle, par exemple :

tableau = [ [a,b,c,d], [e,f,g,h] ]

ça donne sur la map (chaque lettre correspond à une colonne, chaque groupe correspond à une ligne) :

a b c d

e f g h

Et au lieu d'avoir des lettres, tu peux avoir des chiffres, avec 0 pour un batiment et 1 pour l'herbe :

1 1 1 1

1 0 0 1

puis quand ton perso se déplace, tu divises sa position par rapport au nombre de cases, pour savoir sur quelle case il se trouve (tu arrondies le chiffre de la position, si tu as ton viewport divisé en 10 cases de largeur 50px , tu fais Math.floor ( position.x / 50px ) ça te donne l'index en x.

Dans ce cas, tu compares juste avant de rentrer dans la case, si la case suivante contient un chiffre sur lequel on peut marcher ou pas. (position.x + 5 / 50px pour l'index) on rajoute +5 pour tester la case d'après.

Faire ça te permet aussi de placer les pièces et les effacer à mesure que tu te déplaces dans la map, tu auras toujours la map de départ pour savoir ou replacer les pieces. (ca peut être un 2e tableau de tableau pour les objets par-dessus le décor comme les ennemis de départ, les pièces, les objets à ramasser)

-
Edité par Arthur222 18 juin 2022 à 2:25:16

Bonsoir !

Je vois bien comment tu veux qu'a j'affiche mes pieces

Pour le tableau de tableau je pense garder une parti de l'idée

En tout cas merci pour vos reponse !