JS初练——弹弹球与墙壁碰撞处理实例
【摘要】
最近在js学习中，发现关于碰撞反弹的问题，笔者觉得非常有趣，就浅浅了解了一下相关原理，如有不足，可以在评论区批评指正，碰撞处理中对于小球与其他形状的处理，主要取决于小球与其他正形状的相切问题（复杂图形笔者能力有限），本次案例就以小球与边界问题来做案例。
代码：
<!DOCTYPE html><html...
最近在js学习中，发现关于碰撞反弹的问题，笔者觉得非常有趣，就浅浅了解了一下相关原理，如有不足，可以在评论区批评指正，碰撞处理中对于小球与其他形状的处理，主要取决于小球与其他正形状的相切问题（复杂图形笔者能力有限），本次案例就以小球与边界问题来做案例。
代码：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<style>
-
#body {
-
margin: 10px;
-
border: 20px solid rgb(80, 38, 78);
-
padding: 0px;
-
width: 700px;
-
height: 700px;
-
background-color: rgb(60, 247, 255);
-
}
-
#box {
-
margin: 0px;
-
padding: 0px;
-
width: 700px;
-
height: 700px;
-
overflow: hidden;
-
background-color: rgb(254, 255, 67);
-
float: left;
-
}
-
.ball {
-
position: absolute;
-
border: 1px solid black;
-
border-radius: 50%;
-
text-align: center;
-
line-height: 20px;
-
}
-
</style>
-
<title>弹弹球</title>
-
<meta http-equiv="content-type" content="text/html;charset=utf-8">
-
<meta name="keywords" content="Machi">
-
</head>
-
<script>
-
var timer;
-
var colorList = ["#FFFF99", "#B5FF91", "#94DBFF", "#FFBAFF", "#FFBD9D", "#C7A3ED", "#CC9898", "#8AC007", "#CCC007"];
-
var colorNum = colorList.length;
-
var ballList = new Array();
-
var timerList = new Array();
-
class ball {
-
constructor(_id, _r, _x, _y, _c, _vx, _vy) {
-
this.id = _id;
-
this.r = _r;
-
this.x = _x;
-
this.y = _y;
-
this.c = _c;
-
this.vx = _vx;
-
this.vy = _vy;
-
}
-
addBall(obj) {
-
var ball = document.createElement("div");
-
ball.className = "ball";
-
ball.id = this.id;
-
ball.style.height = this.r + "px";
-
ball.style.width = this.r + "px";
-
ball.style.left = this.x + "px";
-
ball.style.top = this.y + "px";
-
ball.style.backgroundColor = this.c;
-
//ball.textContent = ball.id;
-
obj.appendChild(ball);
-
}
-
move() {
-
var nextx = this.x + this.vx;
-
var nexty = this.y + this.vy;
-
if (nextx < 10 + 20 + 0 || nextx > 10 + 700 - this.r + 20)
-
this.vx = -this.vx;
-
if (nexty < 10 + 20 + 0 || nexty > 10 + 700 - this.r + 20)
-
this.vy = -this.vy;
-
this.x = this.x + this.vx;
-
this.y = this.y + this.vy;
-
this.vx = this.vx + iax + this.vx * ikx;
-
this.vy = this.vy + iay + this.vy * iky;
-
//console.log("new position "+this.x+"\t"+this.y+"\t\t"+"new velocity "+this.vx+"\t"+this.vy);
-
var thisBall = document.getElementById(this.id);
-
thisBall.style.left = this.x + "px";
-
thisBall.style.top = this.y + "px";
-
}
-
}
-
var ballCount = 0;
-
//时间间隔
-
var dt = 10;
-
//重力场
-
var iax = 0,
-
iay = 0.05;
-
//阻力系数
-
var ikx = 0,
-
iky = 0;
-
function createBall(obj) {
-
var e = event || window.event;
-
div_x = e.clientX;
-
div_y = e.clientY;
-
ballCount++;
-
_id = "ball" + ballCount;
-
_r = parseInt(Math.random() * 50 + 25);
-
_x = div_x - _r / 2;
-
_y = div_y - _r / 2;
-
_c = colorList[parseInt(Math.random() * colorNum)];
-
_theta = parseInt(Math.random() * 180);
-
_v = 5;
-
_vx = _v * Math.cos(_theta);
-
_vy = _v * Math.sin(_theta);
-
ballList[ballCount] = new ball(_id, _r, _x, _y, _c, _vx, _vy);
-
console.log("ball created " + ballList[ballCount]);
-
ballList[ballCount].addBall(obj);
-
console.log(ballList);
-
}
-
function moving() {
-
for(i=1;i<ballList.length;i++){
-
ballList[i].move();
-
}
-
}
-
function keepMoving() {
-
clearInterval(timer);
-
timer = setInterval("moving()", dt);
-
}
-
</script>
-
<body id="body" onclick="keepMoving()">
-
<div id="box" onclick="createBall(this)">
-
</div>
-
</body>
文章来源: blog.csdn.net，作者：渣渣ye，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/yyfloveqcw/article/details/123888911
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）