Javascript, destruction de div

Javascript, destruction de div - HTML/CSS - Programmation

Marsh Posté le 14-04-2014 à 22:39:13    

Bonsoir, encore moi pour le projet de tower Defense, je touche bientôt à la fin, en fait, il reste que la partie projectile pour pouvoir passer ensuite à l'optimisation et à des améliorations comme par exemple le placement des tours lors du clique de souris enfin bref ce n'est pas le soucis.
 
Tout d'abord, avant de vous montrez le code (j'ai essayé de faire un jsfiddle, mais pas moyen de faire apparaitre le javascript je comprends pas pourquoi..), voila une brève explication: Les div mobs sont générés et stocker dans ensembleMob[], les div tours sont générés et stocker dans ensembleTour[], et les projectile dans ensembleProjectile[]. J'ai deux fonctions principales qui tournent en continuent qui sont l'animation des mobs, l'animation des projectiles qui fonctionnent, sauf pour la fin de l'animation projectile, qui est la cause de mon poste et la fonction testEnVie, et une fonction projectileCreation, qui est appelée chaque demi-seconde. Comme vous le verrez, mon code n'est absolument pas optimisé, mais pour l'instant je travaille comme ça, le projet de fin d'année s'appuie plus sur des éléments concrets que sur l'optimisation apparemment selon les profs, donc "si ça fonctionne c'est bon". C'est pour cela qu'il y a beaucoup de fonction de calculer d'index.
 
Maintenant pour le problème, il faut se concentrer sur la fonction animationProjectile() et sur testEnVie, l'animation du projectile se passe très bien, ainsi que la destruction du div projectile qd la distance entre le projectile et le mob est égale à 1. Le problème arrive pour la destruction du monstre quand celui ci est touché par 2 projectiles. En effet, tout d'abord, pour les 2/3 premiers mobs, le programme fonctionne parfaitement, et les mobs sont détruit, mais ensuite, bien que les projectiles soient en collision avec le monstre, et soient détruit, le monstre ne semble pas être affecté par la perte de point de vie et donc n'est pas détruit par la fonction testEnVie. Je pense avoir une piste sur le problème, mais je n'en suis pas certain. Prenons un exemple avec le premier mob ou la fonction fonctionne bien. Lorsqu'une tour détecte un mob a 200px, celle ci crée des projectiles qui se dirigent sur ce mob (le plus proche), le problème est que 4 projectiles ont le temps d’être appelé avant que les 2 premiers projectiles entre en collision avec le monstre et le détruisent, les deux derniers projectiles sont donc redirigés vers l'autre mob le plus proche sur la carte. Si le problème vient bien de cela, je ne comprend pas comment faire pour régler le problème..
 
Voici les différents code (pour que vous puissiez test en copiant collant si besoin): et les deux fonctions qui posent problème sont à la fin du post (du moins je suppose que le problème vient d'ici)
 
HTML:

Code :
  1. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.  <meta charset="utf-8" />
  6.         <link rel="stylesheet" href="towerDefense.css" />
  7.         <title>Tower Defense</title>
  8.     </head>
  10.     <body>
  11.  <div id ="blocCentrale">
  12.  </div>     
  13.  <input type="button" value="Start" id="start">
  14.  <input type="button" value="Pause" id="stop">
  15.  <input type="button" value="Tour" id="tour">
  16.  <script src="towerDefense.js"></script>
  17.     </body>
  18. </html>


 
Javascript:
 

Code :
  1. var vx = 1;
  2. var vy= 1; //vitesse mob
  4. var vpx = 1;
  5. var vpy = 1; //vitesse projectile
  7. var timer1;
  8. var timer2;
  10. var ensembleMob = document.getElementsByClassName("monstre" );
  11. var ensembleTour = document.getElementsByClassName("tour" );
  12. var ensembleProjectile = document.getElementsByClassName("projectile" );
  15. window.onload = function()
  16. {
  18. var debut = document.getElementById("start" );
  19. var arret = document.getElementById("stop" );
  20. var blocCentrale = document.getElementById("blocCentrale" );
  21. var tour = document.getElementById("tour" );
  24. debut.addEventListener("click",debutPartie);
  25. arret.addEventListener("click",pause);
  26. tour.addEventListener("click",generationTour);
  29. generationMob();
  31. /*document.addEventListener('mousemove', function(e) {
  32.         blocCentrale.innerHTML = 'Position X : ' + e.clientX + 'px<br />Position Y : ' + e.clientY + 'px';
  33.     }, false);
  34. */
  35. //ensembleMob[0].style.backgroundColor = "purple";
  36. //ensembleMob[1].style.backgroundColor = "blue";    
  37. }
  39. function generationMob(){
  40. for(i = 0; i < 10; i++){
  41. creationPositionnementMob();
  42. }
  43. }
  45. function generationTour(){
  47. creationPositionnementTour();
  48. }
  50. function generationProjectile(){
  52. var porteTour = 200;
  53. var lesMobPlusProche = rechercheMobPlusProcheGeneralisation();
  54. var ecartBis = [];
  56. for (var i =0; i < ensembleTour.length; i++){
  57.  ecartBis.push(Math.floor(Math.sqrt(((ensembleTour[i].offsetLeft - ensembleMob[lesMobPlusProche[i]].offsetLeft)*(ensembleTour[i].offsetLeft - ensembleMob[lesMobPlusProche[i]].offsetLeft)+(ensembleTour[i].offsetTop - ensembleMob[lesMobPlusProche[i]].offsetTop)*(ensembleTour[i].offsetTop - ensembleMob[lesMobPlusProche[i]].offsetTop)))));
  58. }
  60. for (var i = 0; i < ecartBis.length;i++){
  61.  if (ecartBis[i] < porteTour){
  62.  projectileCreation(ensembleTour[i/*i*/].offsetTop+10,ensembleTour[i/*i*/].offsetLeft+10);
  63.  }
  64. }
  65. }
  68. function mobPlusProcheProjectile(indexProjectile){
  70. var ecartMobProjectile = [];
  71. var indexMobPlusProcheProjectile;
  73. for(var i = 0; i < ensembleMob.length;i++){
  74.  ecartMobProjectile.push(Math.floor(Math.sqrt(((ensembleProjectile[indexProjectile].offsetLeft - ensembleMob[i].offsetLeft)*(ensembleProjectile[indexProjectile].offsetLeft - ensembleMob[i].offsetLeft)+(ensembleProjectile[indexProjectile].offsetTop - ensembleMob[i].offsetTop)*(ensembleProjectile[indexProjectile].offsetTop - ensembleMob[i].offsetTop)))));
  75. }
  77. var minimum = ecartMobProjectile[0];
  78. indexMobPlusProcheProjectile = 0
  80. for (var i = 1; i < ecartMobProjectile.length; i++){
  81.  if(ecartMobProjectile[i] < minimum){
  82.        minimum = ecartMobProjectile[i];
  83.      indexMobPlusProcheProjectile=i;
  84.  }
  85. }
  86. return indexMobPlusProcheProjectile;
  87. }
  89. function mobPlusProcheProjectileGeneralisation(){
  91. var indexMobPlusProcheChaqueProjectile = [];
  93. for (var i = 0; i < ensembleProjectile.length; i++){
  94.  indexMobPlusProcheChaqueProjectile.push(mobPlusProcheProjectile(i));
  95. }
  97. return indexMobPlusProcheChaqueProjectile;
  99. }
  101. function creationPositionnementTour(){
  103. var tourCree = document.createElement("div" );
  104. tourCree.className = "tour";
  105. tourCree.style.width = "10px";
  106. tourCree.style.height = "10px";
  107. tourCree.style.backgroundColor = "green";
  108. tourCree.style.position = "absolute";
  111. tourCree.style.top = Math.floor(Math.random()*580)+"px";
  112. tourCree.style.left = Math.floor(Math.random()*580)+"px";
  113. blocCentrale.appendChild(tourCree);
  116. }
  117. function creationPositionnementMob(){
  120. var mobCree = document.createElement("div" );
  122. mobCree.className = "monstre";
  123. mobCree.style.width = "5px";
  124. mobCree.style.height = "5px";
  125. mobCree.style.backgroundColor = "red";
  126. mobCree.style.position = "absolute";
  127. mobCree.vie = 2;
  129. var mobCreeHauteur = mobCree.style.top = Math.floor(Math.random()*595)+"px";
  130. var mobCreeLargeur = mobCree.style.left = Math.floor(Math.random()*595)+"px";
  131. var aleatoirePosition = Math.floor((Math.random()*4)+1);
  133. if (aleatoirePosition == 1){
  134.  if (mobCreeHauteur != 0){
  135.   mobCree.style.left = "0"+"px";}
  136. }if (aleatoirePosition == 2){
  137.  if (mobCreeLargeur != 0){
  138.   mobCree.style.top = "0"+"px";}
  139. }if (aleatoirePosition == 3){
  140.  if (mobCreeHauteur != 0){
  141.   mobCree.style.left = "595"+"px";}
  142. }if (aleatoirePosition == 4){
  143.  if (mobCreeLargeur != 0){
  144.   mobCree.style.top = "595"+"px";}
  145. }
  146. blocCentrale.appendChild(mobCree);
  149. }
  150. function projectileCreation(top, left){
  152. var projectile = document.createElement("div" );
  154. projectile.className = "projectile";
  155. projectile.style.width = "2px";
  156. projectile.style.height = "2px";
  157. projectile.style.backgroundColor = "orange";
  158. projectile.style.position = "absolute";
  159. projectile.style.top = top +"px";
  160. projectile.style.left = left + "px";
  162. blocCentrale.appendChild(projectile);
  163. }
  165. function rechercheMobPlusProche(indexTour){
  167. var ecart = [];
  168. var indexMobProche;
  170. for (var i =0; i < ensembleMob.length; i++){
  172.  ecart.push(Math.floor(Math.sqrt(((ensembleTour[indexTour].offsetLeft - ensembleMob[i].offsetLeft)*(ensembleTour[indexTour].offsetLeft - ensembleMob[i].offsetLeft)+(ensembleTour[indexTour].offsetTop - ensembleMob[i].offsetTop)*(ensembleTour[indexTour].offsetTop - ensembleMob[i].offsetTop)))));
  173. }
  175. var minimum = ecart[0];
  176. indexMobProche = 0
  178. for (var i = 1; i < ecart.length; i++){
  179.  if(ecart[i] < minimum){
  180.        minimum = ecart[i];
  181.      indexMobProche=i;
  182.  }
  183. }
  184. return indexMobProche;
  185. }
  187. function rechercheMobPlusProcheGeneralisation(){
  189. var indexMobProcheChaqueTour = [];
  191. for (var i = 0; i < ensembleTour.length; i++){
  192.  indexMobProcheChaqueTour.push(rechercheMobPlusProche(i));
  193. }
  195. return indexMobProcheChaqueTour; // ici on a le mob le plus proche, attaché à sa tour, dans l'ordre croissant
  197. }
  201. function animationProjectile(){
  203. var distanceMobProjectile = [];
  204. var lesMobProjectilePlusProche = mobPlusProcheProjectileGeneralisation(); // index des mobs les plus proches au projectiles
  209. for (var i = 0; i < lesMobProjectilePlusProche.length; i++){
  211.  if (ensembleProjectile[i].offsetTop < ensembleMob[lesMobProjectilePlusProche[i]].offsetTop){
  212.   ensembleProjectile[i].style.top = ensembleProjectile[i].offsetTop + vpy + "px";
  213.  }
  214.  if (ensembleProjectile[i].offsetTop > ensembleMob[lesMobProjectilePlusProche[i]].offsetTop){
  215.   ensembleProjectile[i].style.top = ensembleProjectile[i].offsetTop - vpy + "px";
  216.  }
  217.  if (ensembleProjectile[i].offsetLeft < ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft){
  218.   ensembleProjectile[i].style.left = ensembleProjectile[i].offsetLeft + vpx + "px";
  219.  }
  220.  if (ensembleProjectile[i].offsetLeft > ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft){
  221.   ensembleProjectile[i].style.left = ensembleProjectile[i].offsetLeft - vpx + "px";
  222.  }
  223. }
  225. for(var i =0; i < lesMobProjectilePlusProche.length;i++){
  227. distanceMobProjectile.push(Math.floor(Math.sqrt(((ensembleProjectile[i].offsetLeft - ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft)*(ensembleProjectile[i].offsetLeft - ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft)+(ensembleProjectile[i].offsetTop - ensembleMob[lesMobProjectilePlusProche[i]].offsetTop)*(ensembleProjectile[i].offsetTop - ensembleMob[lesMobProjectilePlusProche[i]].offsetTop)))));
  228. }
  231. for (var i =0; i < lesMobProjectilePlusProche.length;i++){
  232.  if(distanceMobProjectile[i] <= 2){
  233.   blocCentrale.removeChild(ensembleProjectile[i]);
  234.   ensembleMob[lesMobProjectilePlusProche[i]].vie -= 1;
  235.  }
  237. }
  239. /*
  240. for (var i = 0; i < ensembleProjectile.length ; i++){
  241.  
  242.  if(ensembleMob[lesMobProjectilePlusProche[i]] == undefined){
  243.  blocCentrale.removeChild(ensembleProjectile[i]);
  244.  }
  245.  
  246. }
  247. */
  248.  //if(ensembleProjectile[i].offsetTop == ensembleMob[lesMobProjectilePlusProche[i]].offsetTop && ensembleProjectile[i].offsetLeft ==ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft){
  249. }
  251. function testEnVieMob(){
  253. for(var i =0; i < ensembleMob.length;i++){
  255.  if(ensembleMob[i].vie == 0){
  256.   blocCentrale.removeChild(ensembleMob[i]);
  257.  }
  258. }
  259. }
  262. function debutPartie(){
  263.     clearInterval(timer1);
  264. clearInterval(timer2);
  265.     timer1 = setInterval(unPeuTout,30);
  266. timer2 = setInterval(generationProjectile,500);
  267. }
  269. function unPeuTout(){
  271. animation();
  272. animationProjectile();
  273. testEnVieMob();
  274. }
  276. function pause(){
  277. clearInterval(timer1);
  278. clearInterval(timer2);
  279. }
  281. function animation(){
  283. var cibleTour = rechercheTourProcheGeneralisation();
  284. for (var i = 0; i < ensembleMob.length; i++){
  285.  if (ensembleMob[i].offsetTop < ensembleTour[cibleTour[i]].offsetTop){
  286.    ensembleMob[i].style.top = ensembleMob[i].offsetTop + vy + "px";
  287.  }
  288.  if (ensembleMob[i].offsetTop > ensembleTour[cibleTour[i]].offsetTop){
  289.   ensembleMob[i].style.top = ensembleMob[i].offsetTop - vy + "px";
  290.  }
  292.  if (ensembleMob[i].offsetLeft < ensembleTour[cibleTour[i]].offsetLeft){
  293.   ensembleMob[i].style.left = ensembleMob[i].offsetLeft + vx + "px";
  294.  }
  295.  if (ensembleMob[i].offsetLeft > ensembleTour[cibleTour[i]].offsetLeft){
  296.   ensembleMob[i].style.left = ensembleMob[i].offsetLeft - vx + "px";
  297.  }
  299. }
  301. }
  303. function rechercheTourProcheGeneralisation(){
  305.  var tableauIndexMob = [];
  307.  for (var i = 0; i < ensembleMob.length; i++){
  308.  tableauIndexMob.push(rechercheTourProche(i));
  309.  }
  311.  return tableauIndexMob;
  312. }
  316. function rechercheTourProche(indexMob){
  318. var distances = [];
  319. var indexTourProche;
  322. var xT = [];
  323. var yT = [];
  324. for (var i = 0; i < ensembleTour.length; i++){
  325.  xT.push(ensembleTour[i].offsetLeft);
  326.  yT.push(ensembleTour[i].offsetTop);
  327. }
  328. var xM = [];
  329. var yM = [];
  330. for (var i = 0; i < ensembleMob.length; i++){
  331.  xM.push(ensembleMob[i].offsetLeft);
  332.  yM.push(ensembleMob[i].offsetTop);
  333. }
  335. for (var i = 0; i < ensembleTour.length;i++){
  336.  distances.push(Math.floor(Math.sqrt(((xM[indexMob]-xT[i])*(xM[indexMob]-xT[i]))+((yM[indexMob]-yT[i])*(yM[indexMob]-yT[i])))));
  337.  }
  339. var minimum = distances[0];
  340. indexTourProche = 0
  341. for (var i = 1; i < distances.length; i++){
  342.  if(distances[i] < minimum){
  343.        minimum = distances[i];
  344.      indexTourProche=i;
  345.  }
  346. }
  348. return indexTourProche;
  350. }


 
Css:

Code :
  1. #blocCentrale
  2. {
  3. border: 1px solid black;
  4. position:absolute;
  5. left:25%;
  6. top:25%;
  7. width: 600px;
  8. height:600px;
  9. }
  11. #fenetreJeu
  12. {
  13. position: absolute;
  14. border:1px solid black;
  15. width:100%;
  16. height:100%;
  17. }
  19. #monstre
  20. {
  21. z-index: 0;
  22. }
  24. #tour
  25. {
  26. z-index: 1;
  27. }


 
Et voila les deux fonctions concerné, le code complet est au dessus si besoin de + d'information.
 

Code :
  1. function animationProjectile(){
  3. var distanceMobProjectile = [];
  4. var lesMobProjectilePlusProche = mobPlusProcheProjectileGeneralisation(); // index des mobs les plus proches au projectiles
  9. for (var i = 0; i < lesMobProjectilePlusProche.length; i++){
  11.  if (ensembleProjectile[i].offsetTop < ensembleMob[lesMobProjectilePlusProche[i]].offsetTop){
  12.   ensembleProjectile[i].style.top = ensembleProjectile[i].offsetTop + vpy + "px";
  13.  }
  14.  if (ensembleProjectile[i].offsetTop > ensembleMob[lesMobProjectilePlusProche[i]].offsetTop){
  15.   ensembleProjectile[i].style.top = ensembleProjectile[i].offsetTop - vpy + "px";
  16.  }
  17.  if (ensembleProjectile[i].offsetLeft < ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft){
  18.   ensembleProjectile[i].style.left = ensembleProjectile[i].offsetLeft + vpx + "px";
  19.  }
  20.  if (ensembleProjectile[i].offsetLeft > ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft){
  21.   ensembleProjectile[i].style.left = ensembleProjectile[i].offsetLeft - vpx + "px";
  22.  }
  23. }
  25. for(var i =0; i < lesMobProjectilePlusProche.length;i++){
  27. distanceMobProjectile.push(Math.floor(Math.sqrt(((ensembleProjectile[i].offsetLeft - ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft)*(ensembleProjectile[i].offsetLeft - ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft)+(ensembleProjectile[i].offsetTop - ensembleMob[lesMobProjectilePlusProche[i]].offsetTop)*(ensembleProjectile[i].offsetTop - ensembleMob[lesMobProjectilePlusProche[i]].offsetTop))))); //calcule coordonnées sans la puissance pow (peur de faire une connerie)
  28. }
  31. for (var i =0; i < lesMobProjectilePlusProche.length;i++){
  32.  if(distanceMobProjectile[i] <= 2){
  33.   blocCentrale.removeChild(ensembleProjectile[i]);
  34.   ensembleMob[lesMobProjectilePlusProche[i]].vie -= 1;
  35.  }
  37. }
  39. /*
  40. for (var i = 0; i < ensembleProjectile.length ; i++){
  41.  
  42.  if(ensembleMob[lesMobProjectilePlusProche[i]] == undefined){
  43.  blocCentrale.removeChild(ensembleProjectile[i]);
  44.  }
  45.  
  46. }
  47. */
  48.  //if(ensembleProjectile[i].offsetTop == ensembleMob[lesMobProjectilePlusProche[i]].offsetTop && ensembleProjectile[i].offsetLeft ==ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft){
  49. }
  51. function testEnVieMob(){
  53. for(var i =0; i < ensembleMob.length;i++){
  55.  if(ensembleMob[i].vie == 0){
  56.   blocCentrale.removeChild(ensembleMob[i]);
  57.  }
  58. }
  59. }


 
Ps: Dans certains cas, le code fonctionne, c'est pourquoi je ne comprend vraiment pas le problème de cette fonction.. Et de plus, quelqu'un a une piste pour lorsqu'un ensembleMob[x] est détruit, tout les projectiles dirigés vers lui soit supprimés ?
 
Et si jamais vous avez des idées d'amélioration je suis preneur et désolé de la manière laborieuse dont le code est fait, mais le projet de fin d'année pour le bac touche à sa fin, et je n'ai pas eu le temps d'apprendre la programmation objet qui aurait été bien plus simple je pense.
 
Merci beaucoup et bonne soirée.


Message édité par Elradriel le 14-04-2014 à 22:45:28
Reply

Marsh Posté le 14-04-2014 à 22:39:13   

Reply

Marsh Posté le 14-04-2014 à 23:04:32    

Tiens un jsbin qui marche pas :o

 

http://jsbin.com/sadif/1/edit

 

Il manque des trucs dans le code que tu nous fournis, c'est pas une question de IE ou Chrome.

 

Tu cherches tes monstres, tours et projectiles avant d'en avoir créés.

 
Code :
  1. var ensembleMob = document.getElementsByClassName("monstre" );
  2. var ensembleTour = document.getElementsByClassName("tour" );
  3. var ensembleProjectile = document.getElementsByClassName("projectile" );
 

On ne va pas aller loin là :o


Message édité par youmoussa le 14-04-2014 à 23:05:39

---------------
L'humain est celui « qui agit puis qui pense : ce n’est pas parce qu’il soutient telle position qu’il agit de telle manière, mais parce qu’il a agi (comme il a été amené à le faire) qu’il va adopter telle position
Reply

Marsh Posté le 15-04-2014 à 23:08:46    

Bonsoir, déjà merci de ta réponse :), ensuite ces trois déclarations posent-ils vraiment un problème ? Car avant de mettre en place la destructions des "projectiles", il n'y avait aucun problème dans le code :x

 

Ensuite que dois-je faire donc ? Déclarer des tableaux vides en globale, pour ensuite faire un push dans ce tableau dans la fonction de création ?

 

Ps: Désolé pour mon niveau très faible en prog, mais je n'ai pas eu de cours à proprement parler, je dois me débrouiller moi même avec ce que je sais

 

Ps2: J'ai essayer une autre solution qui est de faire l'animation de chaque projectile puis de tout diriger avec une fonction centrale http://jsbin.com/xesixane/1/edit ici le problème est différent, pas tout le temps, mais des fois, les projectiles arretent subitement de bouger, et me disent que ensembleMob[mobProche] est undefined, je ne comprend pas pourquoi..

 

Merci bonne soirée


Message édité par Elradriel le 15-04-2014 à 23:21:55
Reply

Marsh Posté le 15-04-2014 à 23:13:15    

ce n'est pas la ligne de code qui pose problème, mais là où tu l'insères.
 
Au chargement de ton fichier, tu cherches dans le DOM des éléments qui ne seront ajoutés que lors du click sur start.
 
Donc forcément, ces 3 variables ont pour valeur des tableaux vides, et ton code derrière ne fonctionne pas.


---------------
L'humain est celui « qui agit puis qui pense : ce n’est pas parce qu’il soutient telle position qu’il agit de telle manière, mais parce qu’il a agi (comme il a été amené à le faire) qu’il va adopter telle position
Reply

Marsh Posté le 15-04-2014 à 23:21:38    

Je comprends ce que tu veux dire, mais je comprend pas ou est ce que je peux donc les insérer :x Dans les fonctions elles même de créations ?

Reply

Marsh Posté le 15-04-2014 à 23:36:57    

laisse la déclaration où elle est et oui, après la création.


---------------
L'humain est celui « qui agit puis qui pense : ce n’est pas parce qu’il soutient telle position qu’il agit de telle manière, mais parce qu’il a agi (comme il a été amené à le faire) qu’il va adopter telle position
Reply

Marsh Posté le 15-04-2014 à 23:56:21    

http://jsbin.com/xesixane/1/edit  
 
Voila je pense que la déclaration est bonne maintenant, mais le problème persiste :/

Reply

Marsh Posté le 16-04-2014 à 10:26:29    

:hello: !
 
À mon humble avis, le problème se situe à ce niveau :
 

Code :
  1. function testEnVieMob(){
  2.     for(var i =0; i < ensembleMob.length;i++){
  3.      if(ensembleMob[i].vie == 0){
  4.       blocCentrale.removeChild(ensembleMob[i]);
  5.      }
  6.     }
  7.     }


Que se passe-t-il si la vie de ton mob descend en dessous de 0 ? :??: Cela peut se produire s'il est touché par plusieurs projectiles entre 2 périodes de timer.
Pour moi, il faudrait effectuer le test suivant :

Code :
  1. function testEnVieMob(){
  2.     for(var i =0; i < ensembleMob.length;i++){
  3.      if(ensembleMob[i].vie <= 0){
  4.       blocCentrale.removeChild(ensembleMob[i]);
  5.      }
  6.     }
  7.     }


 
:jap:


---------------
And in the end, the love you take is equal to the love you make
Reply

Marsh Posté le 16-04-2014 à 12:41:04    

Bonjour ! Merci beaucoup pour ta réponse, effectivement je me sens tellement bête mais je n'y aurais pas pensé ! Mais le problème persiste toujours.. Le message d'erreur est : "TypeError: ensembleMob[mobProche] is undefined". Je suppose donc que le mob le plus proche du projectile n'arrive pas à être trouver, mais je ne comprend pas pourquoi.. Je vais peut être ressayer avec la fonction que j'avais donné en premier avec l'animation de tout les projectiles en meme temps et pas avec l'animationGeneralisé et je vous dis quoi.

 

merci :)

 

Ps:  Bon ça marche avec le javascript du premier post modifié :) Merci beaucoup ! Quelqu'un a une idée pour supprimer tout les projectiles allant vers un mob[x] quand celui ci est détruit ? J'avais pensé à repéter avec un undefined

Message cité 1 fois
Message édité par Elradriel le 16-04-2014 à 12:46:00
Reply

Marsh Posté le 16-04-2014 à 18:23:00    

Il faut que tu apprennes à débugger. Utilise Chrome et ouvre la dev console et que tu actives les points d'arrêt sur exception.
 
https://developers.google.com/chrom [...] exceptions


---------------
L'humain est celui « qui agit puis qui pense : ce n’est pas parce qu’il soutient telle position qu’il agit de telle manière, mais parce qu’il a agi (comme il a été amené à le faire) qu’il va adopter telle position
Reply

Marsh Posté le 16-04-2014 à 18:23:00   

Reply

Marsh Posté le 16-04-2014 à 20:49:32    

Ah merci, je connaissais pas cette méthode de debuggage ! Existe t-elle aussi sur firefox ? Le code de base étant maintenant "fini" je procède au améliorations et ajout essentiel. La première chose que je voudrais faire, c'est le positionnement des tours non pas aléatoirement, mais par repérage des coordonnées d'un clic.  
 
Html:

Code :
  1. <div id ="blocCentrale" onclick="coordonneesSouris(event);"></div>


 
Javascript:
 

Code :
  1. function coordonneesSouris(event){
  3. var tableauCoordonnes;
  4. var x = event.clientX - blocCentrale.offsetLeft ;
  5. var y = event.clientY - blocCentrale.offsetTop;
  7. tableauCoordonnes.push(x);
  8. tableauCoordonnes.push(y);
  10. return tableauCoordonnes;
  11. }
  13. function generationTour(){
  15. var coordonnes = coordonneesSouris()
  17.     creationPositionnementTour(coordonnes[0]/*left*/, coordonnes[1]/*top*/);
  18. }


 
J'ai commencé par ça, mais en fait je suis un peu perdu pour cette partie du code, je n'ai jamais utiliser cette méthode avant, et je ne comprend pas ce que l'argument "event" vient faire ici ? Si quelqu'un pouvait m'éclairer sur ceci ! Merci :)

Message cité 2 fois
Reply

Marsh Posté le 16-04-2014 à 22:56:37    

Elradriel a écrit :

Quelqu'un a une idée pour supprimer tout les projectiles allant vers un mob[x] quand celui ci est détruit ? J'avais pensé à repéter avec un undefined


 
Pour cette question, je pense que ça se passe dans la fonction testEnVieMob( ) : quand le mob est détruit, tu dois pouvoir retrouver quel projectile allait vers ce mob et le détruire. Si j'ai bien suivi, tu peux le faire à partir de l'index du mob et du tableau lesMobProjectilePlusProche (je dois me plonger dans le code pour confirmer cela :??:).
 

Elradriel a écrit :

Ah merci, je connaissais pas cette méthode de debuggage ! Existe t-elle aussi sur firefox ? Le code de base étant maintenant "fini" je procède au améliorations et ajout essentiel. La première chose que je voudrais faire, c'est le positionnement des tours non pas aléatoirement, mais par repérage des coordonnées d'un clic.  
 
Html:

Code :
  1. <div id ="blocCentrale" onclick="coordonneesSouris(event);"></div>


 
Javascript:
 

Code :
  1. function coordonneesSouris(event){
  3. var tableauCoordonnes;
  4. var x = event.clientX - blocCentrale.offsetLeft ;
  5. var y = event.clientY - blocCentrale.offsetTop;
  7. tableauCoordonnes.push(x);
  8. tableauCoordonnes.push(y);
  10. return tableauCoordonnes;
  11. }
  13. function generationTour(){
  15. var coordonnes = coordonneesSouris()
  17.     creationPositionnementTour(coordonnes[0]/*left*/, coordonnes[1]/*top*/);
  18. }


 
J'ai commencé par ça, mais en fait je suis un peu perdu pour cette partie du code, je n'ai jamais utiliser cette méthode avant, et je ne comprend pas ce que l'argument "event" vient faire ici ? Si quelqu'un pouvait m'éclairer sur ceci ! Merci :)


 
Pour Firefox, tu as aussi des outils intégrés dans les versions récentes du navigateur ;) (Menu Développement Web->Débogueur) .
 
Pour l'argument event, c'est un objet qui est passé à la fonction appelée lors du clic.


---------------
And in the end, the love you take is equal to the love you make
Reply

Marsh Posté le 16-04-2014 à 23:00:56    

Elradriel a écrit :

Ah merci, je connaissais pas cette méthode de debuggage ! Existe t-elle aussi sur firefox ? Le code de base étant maintenant "fini" je procède au améliorations et ajout essentiel. La première chose que je voudrais faire, c'est le positionnement des tours non pas aléatoirement, mais par repérage des coordonnées d'un clic.

 

Html:

Code :
  1. <div id ="blocCentrale" onclick="coordonneesSouris(event);"></div>
 

Javascript:

 
Code :
  1. function coordonneesSouris(event){
  3. var tableauCoordonnes;
  4. var x = event.clientX - blocCentrale.offsetLeft ;
  5. var y = event.clientY - blocCentrale.offsetTop;
  7. tableauCoordonnes.push(x);
  8. tableauCoordonnes.push(y);
  10. return tableauCoordonnes;
  11. }
  13. function generationTour(){
  15. var coordonnes = coordonneesSouris()
  17.     creationPositionnementTour(coordonnes[0]/*left*/, coordonnes[1]/*top*/);
  18. }
 

J'ai commencé par ça, mais en fait je suis un peu perdu pour cette partie du code, je n'ai jamais utiliser cette méthode avant, et je ne comprend pas ce que l'argument "event" vient faire ici ? Si quelqu'un pouvait m'éclairer sur ceci ! Merci :)

 

J'en profite aussi pour donner mon avis sur cette partie de code  [:cupra] :

  • La fonction coordonneesSouris( ) est appelée à chaque fois que tu vas cliquer dans le bloc du jeu. En un sens, c'est elle qui doit déclencher la création d'une tour par l'appel de la fonction generationTour( ), et non l'inverse.
  • La fonction generationTour( ) doit alors prendre en paramètre soit 2 valeurs (x et y), soit un tableau de coordonnées (à toi de voir  [:cupra] ).


Edit : Bien sûr, il y a d'autres modifications à apporter pour que cela fonctionne bien [:cupra]


Message édité par Soileh le 16-04-2014 à 23:04:56

---------------
And in the end, the love you take is equal to the love you make
Reply

Marsh Posté le 17-04-2014 à 07:27:32    

Bonjour, merci beaucoup pour vos réponses rapides, ce forum est très agréable ainsi que sa communauté :) Je vais essayer d'appliquer ce que tu m'as dit et je donnerai des nouvelles du projet :) Bonne journée à vous :)

Reply

Marsh Posté le 17-04-2014 à 21:25:31    

Bonsoir ! bon la fonction marche parfaitement maintenant :)
 

Code :
  1. function coordonneesSouris(event){
  3. if(tourAutorise <= 0){
  5. alert("Pas de tour disponible" );
  6. }
  8. else{
  10. var x = event.clientX - blocCentrale.offsetLeft ;
  11. var y = event.clientY - blocCentrale.offsetTop;
  13. generationTour(x,y);
  15. tourAutorise -= 1;
  16. }
  17. }
  19. function generationTour(x,y){
  21. //var coordonnes = coordonneesSouris()
  22.     //creationPositionnementTour(coordonnes[0]/*left*/, coordonnes[1]/*top*/);
  23. creationPositionnementTour(x,y);
  24. }
  26. function creationPositionnementTour(x/*top*/,y/*left*/){
  28.     var tourCree = document.createElement("div" );
  29.     tourCree.className = "tour";
  30.     tourCree.style.width = "10px";
  31.     tourCree.style.height = "10px";
  32.     tourCree.style.backgroundColor = "green";
  33.     tourCree.style.position = "absolute";
  34.     tourCree.style.top = /*top*/y+"px";
  35.     tourCree.style.left = /*left*/ x+"px";
  36. tourCree.vie = 2;
  37.     blocCentrale.appendChild(tourCree);
  38. }


 
Bon maintenant, je voudrais faire en sorte de vérifier que le bouton "tour" a été enfoncé, et en fonction de la réponse, créer la tour à l'endroit cliqué ensuite. Y a t-il une fonction déjà faite en javascript pour ceci ?

Reply

Marsh Posté le 21-04-2014 à 10:41:26    

Il faut que tu ajoutes un booléen, "tourEnAttente" par exemple, qui est à false. Au click du bouton tour, tu le passe à true.
Tu ajoutes ensuite un eventListener au click sur le document. Au moment du click tu vérifies l'état "tourEnAttente". Si il est true, tu crées ta tour et tu le repasses à false, si il est false, tu ne fais rien.

Reply

Marsh Posté le 25-04-2014 à 18:26:56    

Bonsoir, merci tout d'abord le projet avance très bien et touche à sa fin :) J'ai ajouté pleins de choses comme le fait d'améliorer les tours, de choisir un niveau de difficulté en début de partie, l'évolution du jeu au fil des niveaux, bref pleins de petites choses essentielles, mais je bloque toujours pour la suppression des projectiles quand ceux-ci étaient vers la direction de mob détruit :x j'ai essayé en passant par les index comme mentionné au dessus mais je ne comprends pas, j'aimerai donc si possible une petite aide pour démarrer
 
Je remets le code javascript si besoin:  
 

Code :
  1. var vx = 1;
  2. var vy= 1; //vitesse mob
  4. var vpx = 1.2;
  5. var vpy = 1.2; //vitesse projectile
  7. var timer1;
  8. var timer2;
  9. var timer3;
  11. var porteTour = 150;
  12. var or = 0;
  13. var niveauActuelle = 0;
  14. var tourAutorise = 2;
  15. var tourAutoriseBis = tourAutorise;
  16. var tourEnAttente = false;
  17. var niveauTour = 0;
  19. var monstreTue = [];
  21. var ensembleMob = document.getElementsByClassName("monstre" );
  22. var ensembleTour = document.getElementsByClassName("tour" );
  23. var ensembleProjectile = document.getElementsByClassName("projectile" );
  25. window.onload = function(){
  26.  
  27.    var debut = document.getElementById("start" );
  28.    var arret = document.getElementById("stop" );
  29.    var blocCentrale = document.getElementById("blocCentrale" );
  30.    var tour = document.getElementById("tour" );
  31.    var niveauSuivant = document.getElementById("nextLevel" );
  32.    var recharger = document.getElementById("reloadPage" );
  33.    var ameliorationTours = document.getElementById("upTours" );
  34.    var ajouterTour = document.getElementById("addTour" );
  35.    var tourPossible = document.getElementById("tourPossible" );
  36.    var niveauActuel = document.getElementById("niveauActuel" );
  37.    var orDisponible = document.getElementById("orDisponible" );
  38.    var tourNiveau = document.getElementById("tourNiveau" );
  39.  
  40.    debut.addEventListener("click",debutPartie);
  41.    arret.addEventListener("click",pause);
  42.    tour.addEventListener("click",changementEtatTour);
  43.    blocCentrale.addEventListener("click", tourEnAttentePositionnement);
  44.    niveauSuivant.addEventListener("click", prochainNiveau);
  45.    recharger.addEventListener("click", rechargementPage);
  46.    ameliorationTours.addEventListener("click", ameliorationTower);
  47.    ajouterTour.addEventListener("click", ajouterUneTour);
  48.  
  49.    difficultePartie();
  50.  
  51.  
  52.    tourNiveau.innerHTML = "Vos tours sont niveau " + niveauTour + ".";
  53.    orDisponible.innerHTML = "Vous disposez de : " + or + " piéces d'or";
  54.    tourPossible.innerHTML = "Vous disposez de : " + tourAutorise + " tours";
  55.    niveauActuel.innerHTML = "Vous êtes niveau : " + niveauActuelle + ".";
  56.    timer3 = setInterval(afficheElementJeu, 30);
  57.    generationMob(10);
  58. }
  60. function niveauDeDifficulte(){
  62. do{
  63. var reponseUtilisateur;
  65. reponseUtilisateur = prompt("Quel niveau de difficulte souhaitez-vous ? (facile/moyen/difficile)" );
  67. if(reponseUtilisateur == "facile" ){
  68.  return reponseUtilisateur;
  69. }
  70. if(reponseUtilisateur == "moyen" ){
  71.  return reponseUtilisateur;
  72. }
  73. if(reponseUtilisateur == "difficile" ){
  74.  return reponseUtilisateur;
  75. }
  76. else{
  77. alert("Vous n'avez pas saisi de reponse valide" );
  78. }
  80. }while(reponseUtilisateur != "facile" || reponseUtilisateur != "moyen" || reponseUtilisateur != "difficile" );
  82. }
  84. function difficultePartie(){
  86. var difficulte = niveauDeDifficulte();
  89. if(difficulte == "facile" ){
  91. porteTour = 200;
  92. or = 300;
  93. tourAutorise = 4;
  95. vx = 0.7;
  96. vy= 0.7;
  97. vpx = 1.4;
  98. vpy = 1.4;
  100. }
  101. if(difficulte == "moyen" ){
  102. porteTour = 150;
  103. or = 150;
  104. tourAutorise = 3;
  106. vx = 1;
  107. vy= 1;
  108. vpx = 1.2;
  109. vpy = 1.2;
  110. }
  111. if(difficulte == "difficile" ){
  112. porteTour = 100;
  113. or = 0;
  114. tourAutorise = 2;
  117. vx = 1.2;
  118. vy= 1.2;
  119. vpx = 0.9;
  120. vpy = 0.9;
  121. }
  122. }
  124. function ajouterUneTour(){
  126. if(or >= 1200){
  127. or -= 1200;
  128. tourAutorise +=1;
  129. }
  130. }
  133. function ameliorationTower(){
  135. if(niveauTour == 0){
  136.  if( or >= 650){
  137.  or -= 650;
  138.  niveauTour += 1;
  139.  porteTour += 10;
  140.  vpx += 0.1;
  141.  vpy += 0.1;
  142.  }
  143. }
  145. if(niveauTour == 1){
  146.  if(or >= 1250){
  147.   niveauTour += 1;
  148.   porteTour += 20;
  149.   or -= 1250;
  150.   vpx += 0.2;
  151.   vpy += 0.2;
  152.   for(var i = 0; i < ensembleTour.length; i++){
  153.    ensembleTour[i].vie +=1;
  154.   }
  155.  }
  156. }
  158. if(niveauTour == 2){
  159.  if(or >= 2200){
  160.   niveauTour += 1;
  161.   porteTour += 40;
  162.   or -= 2200;
  163.   vpx += 0.3;
  164.   vpy += 0.3;
  165.  }
  166. }
  168. if(niveauTour == 3){
  169.  if(or >= 3200){
  170.   niveauTour += 1;
  171.   porteTour += 65;
  172.   or -= 3200;
  173.   vpx += 0.4;
  174.   vpy += 0.4;
  175.   for(var i = 0; i < ensembleTour.length; i++){
  176.    ensembleTour[i].vie +=1;
  177.   }
  178.  }
  179. }
  181. if(niveauTour > 3){
  182.  alert("Le niveau des tours est au maximum" );
  183. }
  185. }
  188. function afficheElementJeu(){
  189. affichageTourDisponible();
  190. affichageNiveau();
  191. affichageOr();
  192. affichageNiveauTour();
  193. }
  195. function affichageNiveauTour(){
  197. if(niveauTour != 0){
  198.  tourNiveau.innerHTML = "Vos tours sont niveau " + niveauTour + ".";
  199. }
  201. }
  203. function affichageTourDisponible(){
  205. if(tourAutorise != tourAutoriseBis){
  206.  tourPossible.innerHTML = "Vous disposez de : " + tourAutorise + " tours";
  207.  tourAutoriseBis = tourAutorise;
  208. }
  209. }
  211. function affichageNiveau(){
  213. if(niveauActuelle != 0){
  214.  niveauActuel.innerHTML = "Vous êtes niveau : " + niveauActuelle + ".";
  215. }
  217. }
  219. function affichageOr(){
  220. if(or != 0){
  221.  orDisponible.innerHTML = "Vous disposez de : " + or + " piéces d'or";
  222. }
  223. }
  225. function rechargementPage(){
  226. window.location.reload();
  227. }
  229. function prochainNiveau(){
  231. if(ensembleMob.length == 0){
  233.  tourAutorise += 1;
  234.  niveauActuelle += 1;
  235.  generationMob(10+niveauActuelle);
  237.   for(var i = 0 ; i < ensembleMob.length;i++){
  239.    if(niveauActuelle >= 5 && niveauActuelle < 10){
  240.     ensembleMob[i].vie = 3;
  241.    }
  242.    if(niveauActuelle >= 10 && niveauActuelle < 15){
  243.     ensembleMob[i].vie = 4;
  244.     vx = 2;
  245.     vy = 2;
  246.    }
  247.    if(niveauActuelle >= 15 && niveauActuelle < 20){
  248.     ensembleMob[i].vie = 5;
  249.     vx = 3;
  250.     vy = 3;
  251.    }
  252.    if(niveauActuelle == 20){
  253.     ensembleMob[i].vie = 6;
  254.     ensembleMob[0].vie = 10;
  255.     ensembleMob[0].style.width = "15px";
  256.     ensembleMob[0].style.height = "15px";
  257.    }
  258.   }
  259. }
  260. }
  262. function changementEtatTour(){
  264. if(tourAutorise > 0){
  265. tourEnAttente = true;
  266. }
  267. }
  269. function tourEnAttentePositionnement(){
  271. if(tourEnAttente == true){
  273. coordonneesSouris(event);
  274. }
  275. if(tourEnAttente == false){
  277. alert("Pas de tour Disponible ou pas de clique sur bouton Tour" );
  278. }
  280. tourEnAttente = false;
  282. }
  284. function coordonneesSouris(event){
  286. var x = event.clientX - blocCentrale.offsetLeft ;
  287. var y = event.clientY - blocCentrale.offsetTop;
  289. generationTour(x,y);
  291. tourAutorise -= 1;
  293. }
  297. function generationMob(nombreMob){
  299.     for(i = 0; i < nombreMob; i++){
  300.     creationPositionnementMob();
  301.     }
  302. }
  304. function generationTour(x,y){
  305. creationPositionnementTour(x,y);
  306. }
  307.    
  308. function generationProjectile(){
  309.  
  310.     var lesMobPlusProche = rechercheMobPlusProcheGeneralisation();
  311.     var ecartBis = [];
  313.     for (var i =0; i < ensembleTour.length; i++){
  314.      ecartBis.push(Math.floor(Math.sqrt(((ensembleTour[i].offsetLeft - ensembleMob[lesMobPlusProche[i]].offsetLeft)*(ensembleTour[i].offsetLeft - ensembleMob[lesMobPlusProche[i]].offsetLeft)+(ensembleTour[i].offsetTop - ensembleMob[lesMobPlusProche[i]].offsetTop)*(ensembleTour[i].offsetTop - ensembleMob[lesMobPlusProche[i]].offsetTop)))));
  315.     }
  317.     for (var i = 0; i < ecartBis.length;i++){
  318.  if (ecartBis[i] < porteTour){
  319.  projectileCreation(ensembleTour[i/*i*/].offsetTop+10,ensembleTour[i/*i*/].offsetLeft+10);
  320.         }
  321.     }
  322. }
  324. function creationPositionnementTour(x/*top*/,y/*left*/){
  326.     var tourCree = document.createElement("div" );
  327.     tourCree.className = "tour";
  328.     tourCree.style.width = "10px";
  329.     tourCree.style.height = "10px";
  330.     tourCree.style.backgroundColor = "green";
  331.     tourCree.style.position = "absolute";
  332.     tourCree.style.top = /*top*/y+"px";
  333.     tourCree.style.left = /*left*/ x+"px";
  334. tourCree.vie = 4;
  335.     blocCentrale.appendChild(tourCree);
  336. }
  338. function creationPositionnementMob(){
  340.     var mobCree = document.createElement("div" );
  341.     mobCree.className = "monstre";
  342.     mobCree.style.width = "5px";
  343.     mobCree.style.height = "5px";
  344.     mobCree.style.backgroundColor = "red";
  345.     mobCree.style.position = "absolute";
  346.     mobCree.vie = 2;
  348.     var mobCreeHauteur = mobCree.style.top = Math.floor(Math.random()*595)+"px";
  349.     var mobCreeLargeur = mobCree.style.left = Math.floor(Math.random()*595)+"px";
  350.     var aleatoirePosition = Math.floor((Math.random()*4)+1);
  352.     if (aleatoirePosition == 1){
  353.      if (mobCreeHauteur != 0){
  354.       mobCree.style.left = "0"+"px";}
  355.     }if (aleatoirePosition == 2){
  356.      if (mobCreeLargeur != 0){
  357.       mobCree.style.top = "0"+"px";}
  358.     }if (aleatoirePosition == 3){
  359.      if (mobCreeHauteur != 0){
  360.       mobCree.style.left = "595"+"px";}
  361.     }if (aleatoirePosition == 4){
  362.      if (mobCreeLargeur != 0){
  363.       mobCree.style.top = "595"+"px";}
  364.     }
  366.     blocCentrale.appendChild(mobCree);
  367. }
  369. function projectileCreation(top, left){
  371.     var projectile = document.createElement("div" );
  372.     projectile.className = "projectile";
  373.     projectile.style.width = "2px";
  374.     projectile.style.height = "2px";
  375.     projectile.style.backgroundColor = "orange";
  376.     projectile.style.position = "absolute";
  377.     projectile.style.top = top +"px";
  378.     projectile.style.left = left + "px";
  379.     blocCentrale.appendChild(projectile);
  380. }
  382. function mobPlusProcheProjectile(indexProjectile){
  384.     var ecartMobProjectile = [];
  385.     var indexMobPlusProcheProjectile;
  387.     for(var i = 0; i < ensembleMob.length;i++){
  388.      ecartMobProjectile.push(Math.floor(Math.sqrt(((ensembleProjectile[indexProjectile].offsetLeft - ensembleMob[i].offsetLeft)*(ensembleProjectile[indexProjectile].offsetLeft - ensembleMob[i].offsetLeft)+(ensembleProjectile[indexProjectile].offsetTop - ensembleMob[i].offsetTop)*(ensembleProjectile[indexProjectile].offsetTop - ensembleMob[i].offsetTop)))));
  389.     }
  391.     var minimum = ecartMobProjectile[0];
  392.     indexMobPlusProcheProjectile = 0
  394.     for (var i = 1; i < ecartMobProjectile.length; i++){
  395.  if(ecartMobProjectile[i] < minimum){
  396.            minimum = ecartMobProjectile[i];
  397.     indexMobPlusProcheProjectile=i;
  398.  }
  399.     }
  400.     return indexMobPlusProcheProjectile;
  401. }
  403. function mobPlusProcheProjectileGeneralisation(){
  404.     var indexMobPlusProcheChaqueProjectile = [];
  405.     for (var i = 0; i < ensembleProjectile.length; i++){
  406.      indexMobPlusProcheChaqueProjectile.push(mobPlusProcheProjectile(i));
  407.     }
  408.     return indexMobPlusProcheChaqueProjectile;
  409. }
  412. function rechercheMobPlusProche(indexTour){
  413.     var ecart = [];
  414.     var indexMobProche;
  416.     for (var i =0; i < ensembleMob.length; i++){
  417.      ecart.push(Math.floor(Math.sqrt(((ensembleTour[indexTour].offsetLeft - ensembleMob[i].offsetLeft)*(ensembleTour[indexTour].offsetLeft - ensembleMob[i].offsetLeft)+(ensembleTour[indexTour].offsetTop - ensembleMob[i].offsetTop)*(ensembleTour[indexTour].offsetTop - ensembleMob[i].offsetTop)))));
  418.     }
  420.     var minimum = ecart[0];
  421.     indexMobProche = 0
  423.     for (var i = 1; i < ecart.length; i++){
  424.  if(ecart[i] < minimum){
  425.            minimum = ecart[i];
  426.     indexMobProche=i;
  427.  }
  428.     }
  429.     return indexMobProche;
  430. }
  433. function rechercheMobPlusProcheGeneralisation(){
  435.     var indexMobProcheChaqueTour = [];
  437.     for (var i = 0; i < ensembleTour.length; i++){
  438.      indexMobProcheChaqueTour.push(rechercheMobPlusProche(i));
  439.     }
  442.     return indexMobProcheChaqueTour; // ici on a le mob le plus proche, attaché à sa tour, dans l'ordre croissant
  443. }
  444. /*
  445. function destructionTour(){
  447. var mobProche = indexMobProcheChaqueTour();
  448.  
  449. for(var i =0; i < ensembleTour.length; i++){
  450.  
  451.  if(ensembleMob[indexMobProcheChaqueTour[i]] =
  452.  
  453. }
  455. }*/
  457. function rechercheTourProche(indexMob){
  458.     var distances = [];
  459.     var indexTourProche;
  461.     var xT = [];
  462.     var yT = [];
  464.     for (var i = 0; i < ensembleTour.length; i++){
  465.  xT.push(ensembleTour[i].offsetLeft);
  466.  yT.push(ensembleTour[i].offsetTop);
  467.     }
  469.     var xM = [];
  470.     var yM = [];
  472.     for (var i = 0; i < ensembleMob.length; i++){
  473.  xM.push(ensembleMob[i].offsetLeft);
  474.  yM.push(ensembleMob[i].offsetTop);
  475.     }
  477.     for (var i = 0; i < ensembleTour.length;i++){
  478.      distances.push(Math.floor(Math.sqrt(((xM[indexMob]-xT[i])*(xM[indexMob]-xT[i]))+((yM[indexMob]-yT[i])*(yM[indexMob]-yT[i])))));
  479.     }
  481.     var minimum = distances[0];
  482.     indexTourProche = 0
  484.     for (var i = 1; i < distances.length; i++){
  485.  if(distances[i] < minimum){
  486.            minimum = distances[i];
  487.   indexTourProche=i;
  488.  }
  489.     }
  491.     return indexTourProche;
  492. }
  494. function rechercheTourProcheGeneralisation(){
  495.      var tableauIndexMob = [];
  497.      for (var i = 0; i < ensembleMob.length; i++){
  498.      tableauIndexMob.push(rechercheTourProche(i));
  499.      }
  501.      return tableauIndexMob;
  502. }
  504. function animation(){
  506. var distanceMobTour = [];
  507.     var cibleTour = rechercheTourProcheGeneralisation(); //cible(tour) de chaque mob avec index de la tour la plus proche
  509.     for (var i = 0; i < ensembleMob.length; i++){
  510.  if (ensembleMob[i].offsetTop < ensembleTour[cibleTour[i]].offsetTop){
  511.  ensembleMob[i].style.top = ensembleMob[i].offsetTop + vy + "px";
  512.  }
  513.  if (ensembleMob[i].offsetTop > ensembleTour[cibleTour[i]].offsetTop){
  514.  ensembleMob[i].style.top = ensembleMob[i].offsetTop - vy + "px";
  515.  }
  516.  if (ensembleMob[i].offsetLeft < ensembleTour[cibleTour[i]].offsetLeft){
  517.  ensembleMob[i].style.left = ensembleMob[i].offsetLeft + vx + "px";
  518.  }
  519.  if (ensembleMob[i].offsetLeft > ensembleTour[cibleTour[i]].offsetLeft){
  520.  ensembleMob[i].style.left = ensembleMob[i].offsetLeft - vx + "px";
  521.  }
  523.  //if(ensembleMob[i].offsetLeft  
  525.     }
  527. for(var i = 0; i < cibleTour.length;i++){
  528.  distanceMobTour.push(Math.floor(Math.sqrt(((ensembleTour[cibleTour[i]].offsetLeft - ensembleMob[i].offsetLeft)*(ensembleTour[cibleTour[i]].offsetLeft - ensembleMob[i].offsetLeft)+(ensembleTour[cibleTour[i]].offsetTop - ensembleMob[i].offsetTop)*(ensembleTour[cibleTour[i]].offsetTop - ensembleMob[i].offsetTop)))));
  529. }
  531. for (var i = 0; i < distanceMobTour.length;i++){
  533.  if(distanceMobTour[i] <= 2){
  535.   ensembleTour[cibleTour[i]].vie -= 1;
  536.  }
  537. }
  539. /*
  540. for(var i = 0; i < cibleTour.length;i++){
  541.  if(distanceMobTour[i] <= 2){
  542.  ensembleTour[i].vie -=1;
  543.  }
  544. }
  545. */
  546. }
  548. function animationProjectile(){
  550.     var distanceMobProjectile = [];
  551.     var lesMobProjectilePlusProche = mobPlusProcheProjectileGeneralisation();// index des mobs les plus proches au projectiles
  553.     for (var i = 0; i < lesMobProjectilePlusProche.length; i++){
  554.  if (ensembleProjectile[i].offsetTop < ensembleMob[lesMobProjectilePlusProche[i]].offsetTop){
  555.  ensembleProjectile[i].style.top = ensembleProjectile[i].offsetTop + vpy + "px";
  556.  }
  557.  if (ensembleProjectile[i].offsetTop > ensembleMob[lesMobProjectilePlusProche[i]].offsetTop){
  558.  ensembleProjectile[i].style.top = ensembleProjectile[i].offsetTop - vpy + "px";
  559.  }
  560.  if (ensembleProjectile[i].offsetLeft < ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft){
  561.  ensembleProjectile[i].style.left = ensembleProjectile[i].offsetLeft + vpx + "px";
  562.  }
  563.  if (ensembleProjectile[i].offsetLeft > ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft){
  564.  ensembleProjectile[i].style.left = ensembleProjectile[i].offsetLeft - vpx + "px";
  565.  }
  566.     }
  568.     for(var i =0; i < lesMobProjectilePlusProche.length;i++){
  569.     distanceMobProjectile.push(Math.floor(Math.sqrt(((ensembleProjectile[i].offsetLeft - ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft)*(ensembleProjectile[i].offsetLeft - ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft)+(ensembleProjectile[i].offsetTop - ensembleMob[lesMobProjectilePlusProche[i]].offsetTop)*(ensembleProjectile[i].offsetTop - ensembleMob[lesMobProjectilePlusProche[i]].offsetTop)))));
  570.     }
  572.     for (var i =0; i < lesMobProjectilePlusProche.length;i++){
  573.  if(distanceMobProjectile[i] <= 2){
  574.  blocCentrale.removeChild(ensembleProjectile[i]);
  575.  ensembleMob[lesMobProjectilePlusProche[i]].vie -= 1;
  576.  }
  577.     }
  578.     /*
  579.     for (var i = 0; i < ensembleProjectile.length ; i++){
  580.      
  581.      if(ensembleMob[lesMobProjectilePlusProche[i]] == undefined){
  582.      blocCentrale.removeChild(ensembleProjectile[i]);
  583.      }
  584.      
  585.     }
  586.     */
  587.      //if(ensembleProjectile[i].offsetTop == ensembleMob[lesMobProjectilePlusProche[i]].offsetTop && ensembleProjectile[i].offsetLeft ==ensembleMob[lesMobProjectilePlusProche[i]].offsetLeft){
  588. }
  590. /*
  591. function testDestructionProjectile(indexMob){
  592.  
  593. if(ensembleMob[indexMob] == 'undefined'){
  594.  blocCentrale.removeChild(ensembleProjectile[indexMob];
  596. }
  597. */
  598. function testEnVieMob(){
  599.    
  600. for(var i =0; i < ensembleMob.length;i++){
  601.  if(ensembleMob[i].vie <= 0){
  602.  monstreTue.push(blocCentrale.removeChild(ensembleMob[i]));
  603.  or += 30;
  604.  }
  605.     }
  606. }
  608. function testEnVieTour(){
  610. for(var i = 0; i < ensembleTour.length;i++){
  611.  if(ensembleTour[i].vie <= 0){
  612.  blocCentrale.removeChild(ensembleTour[i]);
  613.  }
  614. }
  615. }
  617. function testPartieEnCoursMob(){
  618. var enCours;
  620. if(ensembleMob.length != 0){
  621. enCours = true;
  622. }
  623. else{
  624. enCours = false;
  625. }
  627. return enCours;
  628. }
  631. function testPartieEnCoursTour(){
  633. var enCours;
  635. if(ensembleTour.length != 0){
  636. enCours = true;
  637. }
  638. else{
  639. enCours = false;
  640. }
  642. return enCours;
  643. }
  645. function partieEnCours(){
  647. //reponseMob = testPartieEnCoursMob();
  648. reponseTour = testPartieEnCoursTour();
  649. /*
  650. if(!reponseMob){
  651. alert("Vous avez gagné et tué " + monstreTue.length + " monstres" );
  652. }
  653. */
  655. if(niveauActuelle == 20 && ensembleMob.length == 0){
  656.  alert("Vous avez gagné et tué " + monstreTue.length + " monstres" );
  657. }
  659. if(!reponseTour && tourAutorise == 0){
  660. alert("Vous avez perdu et tué " + monstreTue.length + " monstres" );
  661. }
  663. }
  665. function debutPartie(){
  667.     clearInterval(timer1);
  668.     clearInterval(timer2);
  669.     timer1 = setInterval(unPeuTout,30);
  670.     timer2 = setInterval(generationProjectile,500);
  672. }
  674. function unPeuTout(){
  675.     animation();
  676.     animationProjectile();
  677.     testEnVieMob();
  678. testEnVieTour();
  679. partieEnCours();
  682. }
  684. function pause(){
  685.     clearInterval(timer1);
  686.     clearInterval(timer2);
  687. }
  690. function timerDuJeu(){
  691. //a faire !
  693. }
  695. function nombreEntier(valeur){
  696.   if((parseFloat(valeur) == parseInt(valeur)) && !isNaN(valeur)){
  697.       return true;
  698.   } else {
  699.       return false;
  700.   }
  701. }


 
Merci beaucoup et bonne soirée :) Désolé pour la réponse tardive mais je suis en vacance.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed