css+js完成黑洞吞噬小球成长功能_黑洞吞噬源码-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_47587616/article/details/106557210

介绍

因为最近比较闲，就想着能不能自己做个h5游戏出来，所以先做个小东西试试手，既然要做游戏当然就要涉及到很多的运动轨迹以及碰撞后事件效果等问题，所以就做了这个小demo出来

原理

说起来原理其实也很简单的，想做一个黑洞吞噬效果的话首先我们至少需要两个物体

黑洞
这个的话比较简单，其实就是往中间放一个黑色的小球而已，可以根据我们需要稍微做一点样式上的优化

<style>
	#blackhole {
    
		width: 40px;
		height: 40px;
		background: radial-gradient(black, transparent, transparent);
		/* radial-gradient是渐变色方法的一种
		使用三个颜色作为渐变
		可以直接使用transparent设置透明色
		这样就可以得到一个带有散射效果的黑色小球 */
		position: absolute;
		left: calc(50% - 20px);
		top: calc(50% - 20px);
	}
</style>
<div id="blackhole"></div>

喏，大概就长这个样子
在这里插入图片描述

小球
小球的话可能稍微复杂一些，我这里是通过鼠标点击然后在鼠标点击位置生成一个红色小球，然后这个小球会在创建好之后向着黑洞的位置移动，代码如下

<style>
.block {
    
	width: 30px;
	height: 30px;
	position: absolute;
	background: radial-gradient(red, transparent, transparent);
	border-radius: 10px;
}
</style>
<body id="body">
</body>
<script>
/* 通过tagname直接获取body有点问题
所以选择添加id后通过byId方式获取dom元素 */
let body = document.getElementById('body')
body.addEventListener('click',e=>{
    
	let a = document.createElement('div')
	a.className = 'block'
	body.appendChild(a)
}
</scr