Heim > Artikel > Web-Frontend > Detailliertes Beispiel für die Realisierung des elastischen Kollisionseffekts kleiner Kugeln durch JS

Detailliertes Beispiel für die Realisierung des elastischen Kollisionseffekts kleiner Kugeln durch JS

小云云Original: 2017-12-22 10:23:052252Durchsuche

JavaScript ist eine clientseitige Skriptsprache, die objekt- und ereignisgesteuert und relativ sicher ist. Sie wird auch häufig in der clientseitigen Webentwicklung verwendet. Sie wird häufig zum Hinzufügen dynamischer Funktionen zu HTML-Webseiten verwendet , wie z. B. das Reagieren auf verschiedene Vorgänge. In diesem Artikel wird hauptsächlich JS vorgestellt, um den elastischen Kollisionseffekt kleiner Kugeln zu erkennen. Der Code ist einfach und leicht zu verstehen und hat einen Referenzwert. Ich hoffe, er kann jedem helfen.

1. HTML-Code (Körperteil)

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

Der obige Körperteil ist vollständig, jetzt werden wir den p Im Körper gibt es ein kleines Styling.

2. Teil im CSS-Ballstil

<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>

Der Ball muss sich bewegen übergeordnetes Element, und verwenden Sie schließlich js, um seine oberen, unteren, linken und rechten Werte zu ändern, damit sich der Ball bewegt. Da der Stil unseres Balls nun fertig ist, hat der folgende js-Code oberste Priorität.

3.1 Grundkenntnisse über Android-Ereignisse

Tatsächlich können wir die Funktion der Kollisionserkennung eines kleinen Balls durch den obigen Code vollständig realisieren. Aber nur der obige Code weist immer noch bestimmte Fehler auf. Wenn sich auf der rechten Seite der gesamten Website eine Bildlaufleiste befindet und der Ball auf die rechte Seite des Bildschirms trifft, wird für einen Moment eine horizontale Bildlaufleiste angezeigt. Was beim Erstellen einer Website tabu ist. Ja, das Erscheinungsbild der horizontalen Bildlaufleiste ist zu hässlich. Wir können es also mit dem folgenden Code lösen.

//滚动条宽度计算函数
    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;
    }

Die obige Funktion berechnet die Breite der Bildlaufleiste. Diese Funktion kann nur die Breite der Bildlaufleiste berechnen Stellen Sie oben „Entsprechend der Größe des Browserfensters“ „Den Bewegungsraum des Balls automatisch anpassen“ ein, rufen Sie diese Funktion auf

var scrollbarWidth = getScrollbarWidth(); und ändern Sie dann die maximale Bewegungsbreite des Balls maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth ; Auf diese Weise wird der Fehler behoben.

Verwandte Empfehlungen:

Zwei JS-Methoden zur Implementierung der parabolischen Flugbahnbewegung einer kleinen Kugel

JS-Methode zum Erhalten verschiedener Pinyin-Typen

JS-Methode zur Ermittlung des Alters basierend auf dem Geburtsdatum

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Realisierung des elastischen Kollisionseffekts kleiner Kugeln durch JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery implementiert eine Vorschaufunktion von Bilddateien vor dem HochladenNächster Artikel：jQuery implementiert eine Vorschaufunktion von Bilddateien vor dem Hochladen

In Verbindung stehende Artikel

Mehr sehen