实现功能:
1、拖动大圆。
2、随机生成小圆。
3、大圆碰到小圆时小圆消失。
4、大圆每消除掉一个小圆,大圆宽高增加,大圆变大。
代码的使用底层JS实现
代码实现:
1、创建div大圆。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background-color: #0000FF;
border-radius: 50%;
position: absolute;
/* 大圆浮在小圆上方 */
z-index: 100;
}
</style>
</head>
<body id="body">
<div id="box"></div>
</body>
</html>
2、通过JS创建随机创建小圆
// 获取页面元素
var body = document.getElementById("body");
var box = document.getElementById("box");
var w = 100;
// 定义创建div函数
function creatediv() {
// 创建div
var div = document.createElement("div");
div.style.width = 50 + "px";
div.style.height = 50 + "px";
div.style.backgroundColor = "#000"
div.style.borderRadius = 50 + "%";
// 相对定位
div.style.position = "absolute"
// 页面位置随机———————— -100是为了使生成的小圆在页面内,不超出页面
div.style.top = Math.ceil(Math.random() * (window.innerHeight - 100)) + "px";
div.style.left = Math.ceil(Math.random() * (window.innerWidth - 100)) + "px";
//添加类名
div.className = "crdiv";
// 添加到body
body.appendChild(div);
}
// 每秒调用创建div函数
var timer = setInterval(creatediv, 100);
3、大圆拖拽效果,碰撞小球
// 鼠标按下box拖拽
box.onmousedown = function(event) {
//浏览器兼容问题
var event = event || window.evnet;
// 获取鼠标指针相对于box的偏移量
var offsetx = event.offsetX;
var offsety = event.offsetY;
document.onmousemove = function(event) {
//浏览器兼容问题
var event = event || window.evnet;
// 获取鼠标指针相对于窗口的偏移量
var clientx = event.clientX;
var clienty = event.clientY;
// box的相对于窗口的拖拽偏移量
var x = clientx - offsetx;
var y = clienty - offsety;
// box的位置
box.style.top = y + "px";
box.style.left = x + "px";
// 碰撞检测
// 获取小球
var crdiv = document.getElementsByClassName("crdiv");
for (var i = 0; i < crdiv.length; i++) {
// 获取每个小球相对于窗口的偏移量
var crdivleft = crdiv[i].offsetLeft;
var crdivtop = crdiv[i].offsetTop;
// 如果大圆碰撞到小球
if (x + box.offsetWidth > crdivleft && x < crdivleft + crdiv[i].offsetWidth && y + box.offsetHeight > crdivtop &&
y < crdivtop + crdiv[i].offsetHeight) {
//小球消失
crdiv[i].remove();
// 大圆大小+1
w = w + 1;
box.style.width = w + "px"
box.style.height = w + "px";
}
console.log(crdivleft);
}
console.log(crdivleft);
}
}
// 鼠标松开box停止拖拽
document.onmouseup = function(event) {
//浏览器兼容问题
var event = event || window.evnet;
document.onmousemove = null;
}