원생 JS 여러 개의 작은 공 충돌 반등 효과 예시
실현 사고:작은 공의 이동 은 작은 공의 left 와 top 수 치 를 바 꾸 어 바 꾸 는 것 이다.좌 표 는 각각(x,y)이 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>
<div id="wrap">
</div>
</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 + ")";
}
// wrapDiv
var wrapDiv = 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;
// wrapDiv
wrapDiv.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>
더 많은 자 바스 크 립 트 관련 내용 에 관심 이 있 는 독 자 는 본 사이트 의 주 제 를 볼 수 있다.,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
