未加星标

原生JS实现多个小球碰撞反弹效果示例

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文实例讲述了原生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>

运行效果:

原生JS实现多个小球碰撞反弹效果示例

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。


您可能感兴趣的文章:JS小球抛物线轨迹运动的两种实现方法详解JS实现小球的弹性碰撞效果Js实现简单的小球运动特效用js实现小球的自由移动代码javascript动画之圆形运动,环绕鼠标运动作小球js实现鼠标左右移动,图片也跟着移动效果javascript DIV跟随鼠标移动javascript实现图片跟随鼠标移动效果的方法js实现文字跟随鼠标移动而移动的方法原生JS实现的多个彩色小球跟随鼠标移动动画效果示例

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: ballObj,小球,lt,gt,balls,ball,else,xflag,yflag,true,var,false,JavaScript
分页:12
转载请注明
本文标题:原生JS实现多个小球碰撞反弹效果示例
本站链接:http://www.codesec.net/view/572239.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(45)