Javascript et les maths

[Sephi-Chan]

Salut à tous

Je suis toujours à bosser sur mon système de cartes, et je me heurte à un problème assez mathématique, or ma passion pour les maths est... modérée.

Voici donc mon problème :


Chaque case est un TD dont l'id est égal au nombre indiqué sur la case.
Lorsqu'un joueur click sur une unité (ici symbolisée par un X), une fonction Javascript est exécutée. En voici les paramètres :
selectArea(idUnit, mUnit, mapLength){}

• idUnit n'à ici aucune importance, on dira que c'est 1.
  
• On dira que l'unité X a 2 en mouvement Munit, c'est à dire qu'elle peut bouger de 2 cases (elle peut donc couvrir toute la zone que je montre).
  
• MapLenght vaut ici 5.
  

Je n'arrive pas à trouver comment faire ma fonction, c'est pourquoi j'en appelle à vous.
Elle doit modifier l'image de fond (en Javascript, grâce à style.backgroundColor = 'red'; ) de chaque case à portée.

Mais voila, je n'arrive pas à créer cette boucle.

J'espère que vous pourrez m'aider et vous en remercie d'avance.


Sephi-Chan

[NicoMSEvent]

donc, si X = 12 et mapLength=5 et mUnit=2

la zone couverte devrait etre entre X-mUnit et X+mUnit
et entre X-(mapLength*mUnit) et X-(mapLength*mUnit)

Pour éviter que quand tu es en bord de carte, ta zone ne s'étende de l'autre coté de la carte (comme si par exemple tu fesais le tour de la terre), tu dois rajouter la condition

pour les cotés :
si modulo(X,mapLength)-mUnit >=0 et modulo(X,mapLength)+mUnit<mapLength

pour la hauteur :
si X-(mapLength*mUnit) >=0 et X+(mapLength*mUnit)<mapLength*mapLength

voilà pour la logique... comme je ne suis pas trop fort en javascript, je vais te laisser traduire ça

en espérant que ça te donne un coup de pousse

[Sephi-Chan]

Merci bien NicoMSEvent.

J'essaie de cerner un peu (en faisant abstraction des 2 dernières formules) mais je me rend compte de deux choses :

• La seule formule X-(mapLength*mUnit) et X-(mapLength*mUnit) suffit, puisqu'elle englobe également les cases données par la première.
  
• Il manque des cases, celles d'id 0, 1, 23 et 24.
  

En tout cas, merci pour ton aide, tu me sauves. ^^

Et, rassure-toi, tu n'es pas le seul à être moyen en Javascript non plus. J'ai appris à m'en servir en créant mon éditeur de cartes il y à quelques jours, donc sur le tas. :p


Sephi-Chan, qui, à 11h30, part pour 1 heure de maths et 4 heures de méca :'(

[Sephi-Chan]

Merci beaucoup Roworll, je vais lire ça tranquillement pour bien comprendre, puis je ferais des essais.

Merci vraiment à vous deux !


Sephi-Chan, enjoy

[Roworll]

Je remets mon code, j'avais oublié les débordements droite gauche.

J'ai ajouré la variable pUnit qui est l'id de la case ou se trouve l'unité

Code PHP :

<?php 

<script language="javascript">

selectArea(idUnit, mUnit, pUnit, mapLength){}

    // On repère ligne la plus haute correspondant à la case traitée

    var cRow = pUnit - ((mapLength)*mUnit);

    // Boucle sur les ligne

    for(var x=-mUnit;x<=mUnit;x++){

        //Boucle sur les colonnes

        for(var y=-mUnit;y<=mUnit;y++){

            //Recup de l'Id à traiter

            var cId = cRow+y;

            //on vérifie les débordements droite/gauche

            if(parseInt(cId/mapLength)==parseInt(cRow/mapLength)){

                //Coloriage de la case incluant le test d'existence pour le débordement haut bas

                if(loc=document.getElementById(cId)) loc.style.backgroundColor='red';

            }

        }

        // Ligne suivante

        cRow+=mapLength;

    }

}

</script> 

[Roworll]

Petite variante pour afficher une matrice de déplacement qui n'autorise pas les diagonales :

Code PHP :

<?php 

<script language="javascript">

selectArea(idUnit, mUnit, pUnit, mapLength){}

    // On repère ligne la plus haute correspondant à la case traitée

    var cRow = pUnit - ((mapLength)*mUnit);

    // Boucle sur les ligne

    for(var x=-mUnit;x<=mUnit;x++){

        //Boucle sur les colonnes

        for(var y=-mUnit;y<=mUnit;y++){

            //La case est elle à portée ?

            if(Math.abs(x)+Math.abs(y)<=mUnit){

                //Recup de l'Id à traiter

                var cId = cRow+y;

                //on vérifie les débordements droite/gauche

                if(parseInt(cId/mapLength)==parseInt(cRow/mapLength)){

                    //Coloriage de la case incluant le test d'existence pour le débordement haut bas

                    if(loc=document.getElementById(cId)) loc.style.backgroundColor='red';

                }

            }

        }

        // Ligne suivante

        cRow+=mapLength;

    }

}

</script> 

[Sephi-Chan]

Merci beaucoup Roworll ! Je vais tester tout ça et l'adapter encore un peu à mes besoins .


Sephi-Chan, je te dois une fière bretelle !