JS初练——弹弹球与墙壁碰撞处理实例
【摘要】 最近在js学习中，发现关于碰撞反弹的问题，笔者觉得非常有趣，就浅浅了解了一下相关原理，如有不足，可以在评论区批评指正，碰撞处理中对于小球与其他形状的处理，主要取决于小球与其他正形状的相切问题（复杂图形笔者能力有限），本次案例就以小球与边界问题来做案例。代码：<!DOCTYPE html><html><head><style>#body { margin: 10px; border...
最近在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>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）