이 기사에서는 주로 여러 개의 작은 공의 충돌 및 반동 효과를 구현하기 위한 기본 JS를 소개합니다. 이는 완전한 예제 형식을 결합하여 관련 수치 계산, 난수 생성, 이벤트 응답 및 작은 공을 구현하는 JavaScript의 기타 작업 기술을 분석합니다. 충돌이 필요한 친구들은 다음을 참고하세요
이 글의 예시는 네이티브 JS를 사용하여 여러 개의 작은 공의 충돌 및 리바운드 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
구현 아이디어: 공의 왼쪽 및 위쪽 값을 변경하여 공의 움직임을 변경합니다. 좌표는 (x, y입니다. ) x/y 값을 최대값에 추가하면, 즉 상위 항목의 너비 또는 높이에 추가하면 x 값 또는 y 값이 감소합니다. 최소, x 값 또는 y 값도 증가합니다. 위의 아이디어는 작은 공이 벽에서 튕겨 나가는 것을 달성할 수 있습니다.
작은 공과 작은 공의 충돌은 작은 공이 공을 치는 방향을 결정해야 하므로 마찬가지로 작은 공의 좌표 값을 변경하여 공의 리바운드
구현 코드:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>小球碰撞</title> <style type="text/css"> * { margin: 0; padding: 0; } #wrap { height: 800px; width: 1300px; border: 1px solid red; /*小球设置相对定位*/ position: relative; margin: 0 auto; overflow: hidden; } p { width: 40px; height: 40px; border-radius: 50%; background-color: red; position: absolute; top: 0; left: 0; color: white; font-size: 25px; text-align: center; line-height: 40px; } </style> </head> <body> <p id="wrap"> </p> </body> <!--<script src="js/common.js" type="text/javascript" charset="utf-8"></script>--> <script type="text/javascript"> /** * 生成并返回一个从m到n全区间的随机数 * @param {Object} m * @param {Object} n */ function randomNum(m, n) { return Math.floor(Math.random() * (n - m + 1) + m); } /** * 生成一个随机颜色,并返回rgb字符串值 */ function randomColor() { var r = randomNum(0, 255); var g = randomNum(0, 255); var b = randomNum(0, 255); return "rgb(" + r + "," + g + "," + b + ")"; } //获得wrapp var wrapp = document.getElementById("wrap"); //定义数组存储所有的小球 var balls = []; //生成小球函数 function createBalls() { for (var i = 0; i < 20; i++) { var ball = document.createElement("p"); //随机小球起始的X坐标和小球的Y坐标 ball.x = randomNum(0, 1200); ball.y = randomNum(0, 700); //随机小球的移动速度 ball.speed = randomNum(2, 5); //随机小球移动的方向 if (Math.random() - 0.5 > 0) { ball.xflag = true; } else { ball.xflag = false; } if (Math.random() - 0.5 > 0) { ball.yflag = true; } else { ball.yflag = false; } //随机小球的背景颜色 ball.style.backgroundColor = randomColor(); ball.innerHTML = i + 1; //将小球插入当wrapp中 wrapp.appendChild(ball); //将所有的小球存储到数组中 balls.push(ball); } } createBalls(); //小球移动函数,判断小球的位置 function moveBalls(ballObj) { setInterval(function() { ballObj.style.top = ballObj.y + "px"; ballObj.style.left = ballObj.x + "px"; //判断小球的标志量,对小球作出相应操作 if (ballObj.yflag) { //小球向下移动 ballObj.y += ballObj.speed; if (ballObj.y >= 800 - ballObj.offsetWidth) { ballObj.y = 800 - ballObj.offsetWidth; ballObj.yflag = false; } } else { //小球向上移动 ballObj.y -= ballObj.speed; if (ballObj.y <= 0) { ballObj.y = 0; ballObj.yflag = true; } } if (ballObj.xflag) { //小球向右移动 ballObj.x += ballObj.speed; if (ballObj.x >= 1300 - ballObj.offsetHeight) { ballObj.x = 1300 - ballObj.offsetHeight; ballObj.xflag = false; } } else { //小球向左移动 ballObj.x -= ballObj.speed; if (ballObj.x <= 0) { ballObj.x = 0; ballObj.xflag = true; } } crash(ballObj); }, 10); } var x1, y1, x2, y2; //碰撞函数 function crash(ballObj) { //通过传过来的小球对象来获取小球的X坐标和Y坐标 x1 = ballObj.x; y1 = ballObj.y; for (var i = 0; i < balls.length; i++) { //确保不和自己对比 if (ballObj != balls[i]) { x2 = balls[i].x; y2 = balls[i].y; //判断位置的平方和小球的圆心坐标的关系 if (Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) + 800 <= Math.pow(ballObj.offsetWidth + balls[i].offsetWidth, 2)) { //判断传过来的小球对象,相对于碰撞小球的哪个方位 if (ballObj.x < balls[i].x) { if (ballObj.y < balls[i].y) { //小球对象在被碰小球的左上角 ballObj.yflag = false; ballObj.xflag = false; } else if (ballObj.y > balls[i].y) { //小球对象在被碰小球的左下角 ballObj.xflag = false; ballObj.yflag = true; } else { //小球对象在被撞小球的正左方 ballObj.xflag = false; } } else if (ballObj.x > balls[i].x) { if (ballObj.y < balls[i].y) { //小球对象在被碰撞小球的右上方 ballObj.yflag = false; ballObj.xflag = true; } else if (ballObj.y > balls[i].y) { //小球对象在被碰撞小球的右下方 ballObj.xflag = true; ballObj.yflag = true; } else { //小球对象在被撞小球的正右方 ballObj.xflag = true; } } else if (ballObj.y > balls[i].y) { //小球对象在被撞小球的正下方 ballObj.yflag = true; } else if (ballObj.y < balls[i].y) { //小球对象在被撞小球的正上方 ballObj.yflag = false; } } } } } for (var i = 0; i < balls.length; i++) { //将所有的小球传到函数中,来实现对小球的移动 moveBalls(balls[i]); } </script> </html>
작동 효과:
위는 다음과 같습니다. 모든 사람을 위해 정리했습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련글:
zTree 트리 플러그인에서 전국 5단계 지역의 클릭로딩을 구현하는 방법
vue를 사용하여 자동 웹사이트 구축 프로젝트를 만드는 방법(자세한 튜토리얼)
위 내용은 JS를 통해 여러 공의 충돌 및 리바운드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!