[Résolu] Image rebondissante en Javascript par AudreyRocher - page 1

Bonjour tout le monde,

Je suis en train de réaliser un mini jeu en Javascript pur mais je bloque sur un problème.

J'ai créé une fonction usine qui me permet de créer des éléments, ici les virus, les ennemis dans le jeu. Je voudrais que ceux si se déplacent et changent de direction quand ils font face à une collision. Quand je prend mes fonction séparément tout fonctionne. Mais mises ensemble j'ai le message "too much recursion". Quelqu'un peut il m'aider ?

Merci :)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Usine virus</title>
<script>
var abcisse = 0;//abcisse du coin supérieur gauche de l'image
var nx = 1;//changement de l'abcisse
vitesse = 10;
function bang() {
document.getElementById("bing").style.left = abcisse;//positionnement horizontal de l'image
//début du code essentiel
if ((abcisse + 30) >= 700){
  nx = -1;
}  // 1114 largeur de la div du jeu 
if (abcisse <= 0){
  nx = 1;
}
abcisse += nx;
//fin
setTimeout('bang()',vitesse);//la fonction se rappelle d'elle-même par un temps en millisecondes défini par la variable vitesse
}

window.addEventListener('DOMContentLoaded', function(){
    //////////<<< FONCTION USINE POUR LA CREATION DES ITEMS >>>///////////
          var virusFactory = function(){
            var VirusBuilder = function(w, h) {
              this.width = w;
              this.height = h;
              this.x = Math.floor((1110 - 170)*Math.random()) + 170;
              this.y= Math.floor((238 - 110)*Math.random()) + 110;
            };

            VirusBuilder.prototype.initialisation = function(){
              var divVirus = document.createElement('div');
              document.body.children[4].appendChild(divVirus);
              divVirus.width = this.width;
              divVirus.height = this.height;
              divVirus.style.left = this.x + 'px';
              divVirus.style.top = this.y + 'px';
              divVirus.setAttribute("class", "virus");


            };

            return function(w, h){
              return new VirusBuilder(w, h);
            };
          }();

    ///////////<<< FABRICATION D'UN VIRUS' >>>//////////
          var evilVirus = virusFactory(60, 70);

          var virusDisplay = function(){
              evilVirus.initialisation();

          };
          virusDisplay();





  });


  </script>
  <style>

  .virus{
    position: absolute;
    -webkit-animation : sick 0.3s steps(3) infinite;
    background: url('evil-virus-01.png') no-repeat;
    height: 70px;
    width: 60px;
  }



  @-webkit-keyframes sick{
    0% { background-position: 0 0;}
    100% {background-position: 0 -210px; }
  }





  </style>
  </head>
  <body onLoad="bounceVirus()">
    <!--ARRIERE PLAN-->

      <div id="containerDecor">
        <!--SCORE-->
        <div id="score">
          <p id="writeScore"> </p>
        </div>
        <!--DECOR-->
        <img id="decor" src ="background-02.jpg">
      </div>
    <!--PERSONNAGE-->
      <div id="centrage" class="contenant">
        <div id="container" class="masque" >
          <img id="contenu" class="sprite" src="doctor-01-01.png"/>
        </div>
      </div>
    <!--OBJETS A COLLECTER-->
        <div id="itemContainer">
        </div>
    <!--NAV POUR AFFICHER LES ITEMS COLLECTES-->
      <aside>
        <ul>
        </ul>
      </aside>
    <!--VIRUS-->
      <div id="virusContainer">
      </div>

  </body>
</html>

AudreyRocher

14 janvier 2018 à 19:10:12

LCaba

14 janvier 2018 à 20:13:20

salut

too much recursion est une erreur survient quand une fonction s'appelle elle-même (recursion) de trop nombreuse fois (too much). C'est un peu comme si tu avais une boucle qui tourne à l'infini. Sauf que dans le cas d'une récursion, le script bloque l'exécution à partir d'une certaine limite pour éviter les fuites de mémoire.

dans tous les cas, javascript gère pas bien la récursion, c'est une structure à éviter.

-
Edité par LCaba 14 janvier 2018 à 20:13:48

Cabinet vétérinaire à Angers

Image rebondissante en Javascript

Image rebondissante en Javascript

Supprimer

Modérer

Signaler le message aux modérateurs