js中利用面向过程和面向对象实现圆点碰壁反弹
2017-08-23 本文已影响0人
清心挽风
使用面向过程实现碰壁反弹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#wrap {
background: gray;
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
#wrap>div {
border-radius: 50%;
transition: all 0.15s;
position: absolute;
}
</style>
</head>
<div id="wrap">
</div>
<body>
</body>
<script type="text/javascript">
var wrap = document.querySelector('#wrap');
console.log(wrap.offsetHeight);
console.log(wrap.offsetWidth);
//定义随机颜色
var color = '0123456789abcdef';
function createCircle() {
//随机生成圆点宽高
cirWidth = parseInt(Math.random() * 40 + 10);//产生10到50的数
//随机生成颜色
var co = '';
for(var i = 0; i < 6; i++) {
co = co + color[parseInt(Math.random() * color.length)];
}
var colors = '#' + co;
var boll = document.createElement('div');
boll.style.width = cirWidth + 'px';
boll.style.height = cirWidth + 'px';
//定义生成的坐标
cirX = parseInt(Math.random() * (wrap.offsetWidth - cirWidth));
cirY = parseInt(Math.random() * (wrap.offsetHeight - cirWidth));
//生成div标签
boll.style.left = cirX + 'px';
boll.style.top = cirY + 'px';
boll.style.background = colors;
wrap.appendChild(boll);
//随机生成x和y轴移动速度
var speedX = parseInt(Math.random() * 10+5);//5-15
var speedY = parseInt(Math.random() * 10+10);//10-20
console.log(speedX);
console.log(speedY);
//定义圆点移动函数
setInterval(function() {
// 判断当前小球所在的位置是否达到围栏限制的位置
// 水平状态
var left = boll.offsetLeft;
var top = boll.offsetTop;
if(left + boll.offsetWidth >= wrap.offsetWidth || left <= 0) {
speedX *= -1;
}
// 垂直状态
if(top + boll.offsetHeight >= wrap.offsetHeight || top <= 0) {
speedY *= -1;
}
// 修改小球水平运动速度方向
left = left + speedX;
top = top + speedY;
//防止小球超出边界
if (left < 0) {
left = 0;
} else if(left>wrap.offsetWidth-boll.offsetWidth){
left = wrap.offsetWidth-boll.offsetWidth;
}
if (top < 0) {
top = 0;
} else if(top>wrap.offsetHeight-boll.offsetHeight){
top = wrap.offsetHeight-boll.offsetHeight;
}
boll.style.left = left +'px';
boll.style.top = top +'px';
}, 15);
}
for(var i = 0; i < 100; i++) {
createCircle();
}
</script>
</html>
使用面向对象实现碰壁反弹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*设置html和body标签的宽高和浏览器可视区域一样*/
html,
body {
width: 100%;
height: 100%;
}
/*设置小球移动范围的相关样式*/
#wrap {
width: 100%;
height: 100%;
background: black;
position: relative;
overflow: hidden;
}
.boll {
position: absolute;
border-radius: 50%;
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取容器结点
var wrap = document.querySelector('#wrap');
//工具函数：产生指定范围内的随机数
function ranFn(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
//创建小球对象的构造函数
function Ball() {
//随机产生小球的宽高
var wh = ranFn(20, 50);
//设置宽、高属性和属性值
this.width = wh;
this.height = wh;
//设置小球诞生点的坐标属性
this.top = ranFn(0, document.body.offsetHeight - wh) + 'px';
this.left = ranFn(0, document.body.offsetWidth - wh) + 'px';
//设置小球随机背景颜色rgba(255,255,255,0.5)
this.color = 'rgba(' + ranFn(0, 256) + ',' + ranFn(0, 256) + ',' + ranFn(0, 256) + ',' + Math.random() + ')';
//设置小球随机移动速度
this.speedX = ranFn(-10, 10);
this.speedY = ranFn(-10, 10);
//设置保存小球标签的属性
this.div = document.createElement('div');
}
//原型方法：绘制小球（配置div标签的相关css样式，然后把标签拼接进文档流）
Ball.prototype.draw = function() {
this.div.className = 'boll';
this.div.style.width = this.width + 'px';
this.div.style.height = this.height + 'px';
this.div.style.top = this.top;
this.div.style.left = this.left;
this.div.style.backgroundColor = this.color;
//把配置好的节点拼接进文档流
wrap.appendChild(this.div);
}
//原型方法：小球移动
Ball.prototype.move = function() {
//因为在定时器中使用的this指针是指向window对象的，要在定时器中获取当前
//操作的小球对象，就必须在定时器外部用变量把当前操作小球对象保存下来，在定时器
//内部通过该变量获取小球对象
var b=this;
setInterval(function() {
var lefts = b.div.offsetLeft;
var tops = b.div.offsetTop;
if(lefts + b.div.offsetWidth >= wrap.offsetWidth || lefts <= 0) {
b.speedX *= -1;
}
// 垂直状态
if(tops + b.div.offsetHeight >= wrap.offsetHeight || tops <= 0) {
b.speedY *= -1;
}
// 修改小球水平运动速度方向
lefts = lefts + b.speedX;
tops = tops + b.speedY;
//防止小球超出边界，造成小球出bug，但这样
if(lefts < 0) {
lefts = 0;
} else if(lefts > wrap.offsetWidth - b.div.offsetWidth) {
lefts = wrap.offsetWidth - b.div.offsetWidth;
}
if(tops < 0) {
tops = 0;
} else if(tops > wrap.offsetHeight - b.div.offsetHeight) {
tops = wrap.offsetHeight - b.div.offsetHeight;
}
b.div.style.left = lefts + 'px';
b.div.style.top = tops + 'px';
}, 30);
}
//创建小球对象
for(var i = 0; i < 150; i++) {
var ball = new Ball();
ball.draw();
ball.move();
}
}
</script>
</head>
<body>
<!--小球移动的范围-->
<div id="wrap">
</div>
</body>
</html>
