展示类微信小程序_原生JS完成多个小球碰撞反弹

原生JS实现多个小球碰撞反弹效果示例       这篇文章主要介绍了原生JS实现多个小球碰撞反弹效果,结合完整实例形式分析了javascript实现小球碰撞的相关数值计算、随机数生成、事件响应等操作技巧,需要的朋友可以参考下

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

运行效果:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》

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