Exemple détaillé de JS réalisant l'effet de collision élastique de petites balles-js tutoriel-php.cn

Exemple détaillé de JS réalisant l'effet de collision élastique de petites balles

小云云

Libérer： 2017-12-22 10:23:05

original

2308 Les gens l'ont consulté

JavaScript est un langage de script côté client qui est axé sur les objets et les événements et relativement sécurisé. C'est également un langage de script largement utilisé dans le développement Web côté client. Il est souvent utilisé pour ajouter des fonctions dynamiques aux pages Web HTML. , comme répondre aux diverses opérations des utilisateurs. Cet article présente principalement JS pour réaliser l'effet de collision élastique des petites boules. Le code est simple et facile à comprendre, très bon et a une valeur de référence. J'espère qu'il pourra aider tout le monde.

1. Code HTML (partie du corps)

 <body>
   <!--只需要做一个大p包裹几个小p即可，你想要几个小球碰撞就在内部做几个p即可，这里我们做了6个小球-->
   <p id="main">
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
   </p> 
 </body>

Copier après la connexion

La partie du corps ci-dessus est terminée, nous allons maintenant Le p dans le corps fait un petit style.

2. Partie style balle CSS

<style type="text/css">
   /*将body默认的margin和padding部分去掉*/
   *{
     margin: 0px;
     padding: 0px;
    }
    /*采用定位的方式，让小球运动起来*/
    #main{
      margin: 0px auto;
     position: relative;
   }
   /*小球的样式*/
   #main p{
     overflow: hidden;
     position: absolute;
     width: 80px;
     height: 80px;
    opacity: 0.5;
     border-radius: 50%;
     background-color: red;
   }
 </style>

Copier après la connexion

Nous donnons à la balle un positionnement. élément parent, et enfin utilisez js pour modifier ses valeurs haut, bas, gauche et droite afin de faire bouger la balle. Maintenant que le style de notre balle est prêt, le code js suivant est la priorité absolue.

3.1 Connaissance de base des événements Android

En fait, nous pouvons pleinement réaliser la fonction de détection de collision d'une petite balle grâce au code ci-dessus. Mais seul le code ci-dessus aura encore certains bugs, c'est-à-dire que lorsqu'il y a une barre de défilement sur le côté droit de l'ensemble du site Web, lorsque la balle frappe le côté droit de l'écran, une barre de défilement horizontale apparaîtra pendant un moment, ce qui est tabou lors de la création d'un site Web. Oui, l'apparence de la barre de défilement horizontale est trop moche. Nous pouvons donc le résoudre avec le code suivant.

//滚动条宽度计算函数
    function getScrollbarWidth() {
      var oP = document.createElement("p"),
        styles = {
          width: "100px",
          height: "100px",
          overflowY: "scroll"
        }, i, scrollbarWidth;
      for (i in styles) oP.style[i] = styles[i];
      document.body.appendChild(oP);
      scrollbarWidth = oP.offsetWidth - oP.clientWidth;
      oP.remove();
      return scrollbarWidth;
    }

Copier après la connexion

Ce qui précède est une fonction qui calcule la largeur de la barre de défilement. Cette fonction peut calculer la largeur de la barre de défilement à droite. définissez "en fonction de la taille de la fenêtre du navigateur" "Ajuster automatiquement l'espace de mouvement de la balle" ci-dessus, appelez cette fonction

var scrollbarWidth = getScrollbarWidth(); puis modifiez la largeur de mouvement maximale de la balle maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth ; de cette façon, le bug sera corrigé.

Recommandations associées :

Deux méthodes JS pour réaliser le mouvement de trajectoire parabolique de la balle

Méthode JS pour obtenir différents types de pinyin

🎜>

Méthode JS pour obtenir l'âge en fonction de la date de naissance

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!