原生js实现红球碰撞篮球效果

最新推荐文章于 2022-12-19 14:47:46 发布

CCkeepSober

最新推荐文章于 2022-12-19 14:47:46 发布

阅读量2.4k

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/CCkeepSober/article/details/76600116

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 屏幕中随机产生n个蓝色大小不一的气泡，坐标随机

2. 红色气泡跟随鼠标移动

3. 当红色气泡会与蓝色气泡发生碰撞效果(类似桌球)

4. 红色气泡会被屏幕边缘阻挡

5. 蓝色气泡左右屏上下屏互通

6. 蓝色气泡的运动及互动行为请自由发挥

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>上机</title>
	<link rel="stylesheet" href="./css/index.css">
</head>
<body>
	<div class="container">
		<img class = "redBall" src="./images/1.png" alt="红球" width="100px" height="100px">
		<img class = "blueBall" src="./images/2.png" alt="篮球">
	</div>
	<script src = "./js/index.js"></script>
</body>
</html>

CSS部分：

*{
	margin:0;
	padding: 0;
}
.container{
	width: 800px;
	height: 400px;
	position: relative;
	margin: 0 auto;
	border: 1px solid #ddd;
	overflow: hidden;
}
.blueBall{
	width: 80px;
	height: 80px;
	position: absolute;
	z-index: 1;
	transition: top 2s,left 2s;
}
.redBall{
	position: absolute;
	z-index: 2;
}

js部分：

var blueBall = document.getElementsByClassName("blueBall");
var container = document.getElementsByClassName("container");
var redBall = document.getElementsByClassName("redBall")[0];

//创建篮球DOM
var blueimg = document.createElement("img");
blueimg.setAttribute("src","./images/2.png");
blueimg.setAttribute("alt","篮球");
blueimg.setAttribute("class","blueBall");


//蓝色球数量最少8个最多16个；
var ballNum = Math.ceil(Math.random() * 8 + 8);

for (var i = ballNum - 1; i >= 0; i--) {
	let oi = blueimg.cloneNode(true);
	container[0].appendChild(oi);
}

/*
*设置球的大小
*/
for (var i = 0; i < blueBall.length; i++) {
	let ballSize = hwsize();
	blueBall[i].style.width = ballSize + "px";
	blueBall[i].style.height = ballSize + "px";
}

/*
*随机排序蓝球
*/
for (var i = 0; i < blueBall.length; i++) {
	blueBall[i].style.top = Math.ceil(Math.random() * 400) + "px";
	blueBall[i].style.left = Math.ceil(Math.random() * 800) + "px";
}



 //获取篮球大小范围为50-100
function hwsize() {                             
	return Math.ceil(Math.random() * 50) + 50;
}



/*
*红球随鼠标移动
*code start
*/
container[0].addEventListener("mousemove",function(e){
	var redYX = redPositionX(e);
	redBall.style.left =redYX.x  + "px";
	redBall.style.top = redYX.y + "px";
	for (let i = blueBall.length - 1; i >= 0; i--) {
		blueBoom(i);
    }
});

function redPositionX(e) {
	var redXY = {
	x: 0,
	y: 0	
	};
	var ok = e.clientX - container[0].offsetLeft - redBall.width/2;
	var yes = e.clientY - container[0].offsetTop - redBall.height/2;
	console.log(yes);
	if(ok < 0){
		redXY.x = 0;
	}else{
		if(ok > (800 - redBall.width)){
			redXY.x = 800 - redBall.width;
		}else{
			redXY.x = ok;
		}
	}
	if(yes < 0){
		redXY.y = 0;
	}else{
		if(yes > (400 - redBall.height)){
			redXY.y = 400 - redBall.height;
		}else{
			redXY.y = yes;
		}
	}
	return redXY;
}
/*
*code end
*/

/*
*实现蓝色小球的碰撞
*code start
*/
function blueBoom(i){


	//获取篮球相对浏览器的位置
	var blueX = blueBall[i].offsetLeft;
	var blueY = blueBall[i].offsetTop;

	//获取红球相对浏览器的位置
	var redX = redBall.offsetLeft;
	var redY = redBall.offsetTop;

	sizeX = redX - blueX;
	sizeY = redY - blueY;

	if(sizeX < 0){
		var absX = Math.abs(sizeX);
		if(absX < redBall.width){
			if(sizeY < 0 ){
				var absY = Math.abs(sizeY);
				if(absY < redBall.width){
					//code 小球移动
					blueBall[i].style.top = 50 + "px";
					blueBall[i].style.left = 50 + "px";
				}
				return;
			}else{
				if(absY < blueBall[i].width){
					//code 小球移动
				}
				return;
			}	
		}
		return;
	}else{
		if(absX < blueBall[i].width){
			if(sizeY < 0 ){
				var absY = Math.abs(sizeY);
				if(absY < redBall.width){
					//code 小球移动
				}
				return;
			}else{
				if(absY < blueBall[i].width){
					//code 小球移动
				}
				return;
			}
		}
		return;
	}

}

代码并为完成，但是大致思路就是这样，只需要在我写注释的地方规定篮球的移动轨迹即可。红篮球图片奉上

CCkeepSober

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现红球碰撞篮球效果

1. 屏幕中随机产生n个蓝色大小不一的气泡，坐标随机2. 红色气泡跟随鼠标移动3. 当红色气泡会与蓝色气泡发生碰撞效果(类似桌球) 4. 红色气泡会被屏幕边缘阻挡5. 蓝色气泡左右屏上下屏互通6. 蓝色气泡的运动及互动行为请自由发挥HTML部分：上机 CSS部分：*{ margin:0; padding:
复制链接

扫一扫