小球碰撞（面向对象）

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>01小球碰撞(面向对象版)</title><style type="text/css">* {margin: 0;padding: 0;}#wrapper {width: 600px;height: 400px;margin: 0 auto;border: 4px solid gold;}</style>
</head><body><div id="wrapper"></div>
</body></html>
<script type="text/javascript">function Ball(parentObj) {if (!parentObj) {return;}//console.log(parentObj);console.log(this);//定位父级及样式设置parentObj.style.position = "relative";this.obj = document.createElement("div");parentObj.appendChild(this.obj);this.obj.style.position = "absolute";//随机半径(因为宽度高度都是需要使用this.r的,所以应该定义在宽度高度之前)this.r = ranNum(20, 50);this.obj.style.width = this.obj.style.height = this.r * 2 + "px";this.obj.style.borderRadius = "50%";//随机颜色this.obj.style.background = ranCol();//随机位置this.x = ranNum(0, parentObj.clientWidth - this.r * 2);this.y = ranNum(0, parentObj.clientHeight - this.r * 2);//位置this.obj.style.left = this.x + "px";this.obj.style.top = this.y + "px";//随机速率大小及方向//易错点:如果把代码错写成this.speedX = ranNum(5, 10) * ranNum(0, 1) ? -1 : 1; 那么系哦啊求的速度就只能为-1或者1.this.speedX = ranNum(2, 5) * (ranNum(0, 1) ? -1 : 1);this.speedY = ranNum(2, 5) * (ranNum(0, 1) ? -1 : 1);}//设置小球的方法//注意:当函数在等号的右侧时,必须使用分号结束.Ball.prototype.move = function () {//注意:下面代码可以省略windowwindow.setInterval(doMove, 10);//改变this的指向var _this = this;function doMove() {//思考:为什么这里的this指代window对象?答:setinterval是Window的一种方法.//console.log(this);_this.x += _this.speedX;_this.y += _this.speedY;//左边界控制if (_this.x <= 0) {_this.x = 0;//改变方向_this.speedX *= -1;}//右边界控制if (_this.x >= _this.obj.parentElement.clientWidth - _this.r * 2) {_this.x = _this.obj.parentElement.clientWidth - _this.r * 2;_this.speedX *= -1;}//上边界控制if (_this.y <= 0) {_this.y = 0;//改变方向_this.speedY *= -1;}//下边界控制if (_this.y >= _this.obj.parentElement.clientHeight - _this.r * 2) {_this.y = _this.obj.parentElement.clientHeight - _this.r * 2;_this.speedY *= -1;}_this.obj.style.left = _this.x + "px";_this.obj.style.top = _this.y + "px";}};function ranNum(x, y) {return Math.floor(Math.random() * (y - x + 1) + x);}function ranCol(x, y) {var red = ranNum(0, 255);var green = ranNum(0, 255);var blue = ranNum(0, 255);return "rgb(" + red + "," + green + "," + blue + ")";}var oWrap = document.getElementById("wrapper");for (var i = 0; i < 20; i++) {//把小球添加到wrapper中var ball = new Ball(oWrap);ball.move();}
</script>

小球碰撞（面向对象）相关推荐

pygame动画演示小球碰撞
使用pygame实现动量定理的小球碰撞演示动画动量定理我们在高中的时候就已经接触过了,是十分重要的物理定理.其中的完全弹性碰撞(机械能守恒)是十分典型的例子,机械能守恒和动量定理两个公式就可以推出小 ...
一个与小球碰撞有关的有趣问题
-一个与小球碰撞有关的问题 -本人学号:16340300 -本人学院:数据科学与计算机学院目录看看这个问题如何解决解法看看这个问题如图,在光滑水平面上,有一个球A向墙运动,速度垂直于墙面, ...
Canvas+Js制作动量守恒的小球碰撞
目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...
Java反弹球两球相撞_java实现小球碰撞反弹
java实现小球碰撞反弹 java实现小球碰撞反弹首先我们要在一个窗口里面显示这个功能,因此引入JFrame类然后创建一个窗口代码如下: JFrame win=new JFrame();//新建窗口 ...
JS实现小球碰撞边界反弹-点击消失（详细解析实现思路）
本篇文章给大家带来的是原生JS实现小球碰到边界就反弹,点击小球时小球被会销毁,并重新创建一个小球,让小球的数量一直保持在初始的数量,按照思路按步骤进行讲解,只需要源码的小伙伴可以定位到文本末尾直接复制 ...
js 小球碰壁反弹and小球碰撞
好像好几天没有更博了呢,最近有点变懒了,这样不好,不好~~我们要做热爱学习的好孩子,嘻嘻,今天下午补上... 我们在学习js的时候,一个很经典的案例就是小球的碰壁反弹效果啦~简单的小球碰壁效果可以慢慢 ...
js小球碰撞js特效
下载地址小球碰撞特效.引用test.js文件.我目前做的是10个小球同时出现,你也可以根据你的需要进行修改.如果你想要小球随机出现的话,你只需要把58行的代码解注,然后57行的注释就行了.这个写法还 ...
Simscape基础教程之实例（一）——使用Simscape三维物理仿真自由落体小球碰撞平面
一. 简介本实例使用MATLAB/Simulink里面的simscape,实现自由落体小球碰撞平面的三维物理仿真,可用于新手入门simscape的参考示例. 二. 准备工作需要安装的工具箱 (1) ...
绘制canvas彩色泡泡小球碰撞
globalCompositeOperation带来的不一样的烟花一.知识点 1.动画: setInterval( function(){ d ...
js实现多个小球碰撞
实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...

小球碰撞（面向对象）

小球碰撞（面向对象）相关推荐

最新文章

热门文章