JS 大圆吃小圆，实例

最新推荐文章于 2023-05-05 09:59:15 发布

ZPD_zpd

最新推荐文章于 2023-05-05 09:59:15 发布

阅读量394

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/ZPD_zpd/article/details/110621679

版权

实现功能：
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;
}

ZPD_zpd

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS 大圆吃小圆，实例

实现功能：1、拖动大圆。2、随机生成小圆。3、大圆碰到小圆时小圆消失。4、大圆每消除掉一个小圆，大圆宽高增加，大圆变大。代码实现：1、创建div大圆。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { width: 100px;
复制链接

扫一扫