집 > 기사 > 웹 프론트엔드 > 작은 공의 탄성 충돌 효과를 구현하는 JS의 상세 예

작은 공의 탄성 충돌 효과를 구현하는 JS의 상세 예

小云云원래의: 2017-12-22 10:23:052270검색

JavaScript는 객체와 이벤트를 기반으로 하는 클라이언트측 스크립팅 언어로, 클라이언트측 웹 개발에 널리 사용되는 스크립팅 언어입니다. 사용자 요청에 응답하는 것과 같습니다. 이 기사에서는 작은 공의 탄성 충돌 효과를 구현하기 위해 JS를 주로 소개합니다. 코드는 간단하고 이해하기 쉽고 참조 가치가 있으며 필요한 친구가 모두 참고할 수 있기를 바랍니다.

1. HTML 코드(본문 부분)

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

　 위의 본문 부분이 완성되었습니다. 이제 본문의 p에 대한 작은 스타일을 만들어 보겠습니다.

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

공과 상위 요소에 위치를 추가하고 마지막으로 js를 사용하여 위쪽, 아래쪽, 왼쪽 및 오른쪽 값을 변경해야 합니다. 공을 움직이게 만드는 것. 이제 공의 스타일이 준비되었으므로 다음 js 코드가 최우선입니다.

3.1 Android 이벤트 기본 지식

실제로 위 코드를 통해 작은 공의 충돌 감지 기능을 완벽하게 구현할 수 있습니다. 하지만 위의 코드에는 여전히 특정 버그가 있습니다. 즉, 전체 웹 사이트의 오른쪽에 스크롤 막대가 있을 때 공이 화면 오른쪽에 닿으면 잠시 동안 가로 스크롤 막대가 나타납니다. 이는 웹 사이트를 구축할 때 금기시되는 사항입니다. 가로 스크롤 막대의 모양이 너무 보기 흉합니다. 그래서 우리는 다음 코드로 해결할 수 있습니다.

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

위는 스크롤바의 너비를 계산하는 함수입니다. 이 함수는 "에 따라 공의 이동 공간을 자동으로 조정"에서만 호출하면 됩니다. 브라우저 창 크기" 기능

var scrollbarWidth = getScrollbarWidth(); 再修改小球的最大运动宽度 maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth ; 이 버그가 수정됩니다.

작은 공의 탄성 충돌 효과를 구현하는 JS의 상세 예

관련 기사