JS实现大球吃小球

最新推荐文章于 2023-04-02 16:22:27 发布

Hysea.

最新推荐文章于 2023-04-02 16:22:27 发布

阅读量642

点赞数 2

文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_44589374/article/details/105063936

版权

在这里插入图片描述
预览：http://39.97.119.185/GameDemo/eat.html

鼠标控制球的运动

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>JS球吃球</title>

<style type="text/css">  
	* { margin: 0; padding: 0; cursor: none; }  

	a { text-decoration: none; }  

	ul, li { list-style: none; }  

	body { font-size: 14px; font-family: "微软雅黑"; background: url("images/bg.jpg") top/cover; width:1600px;height:900px;}  

	#ball { width: 30px; height: 30px; background:#ff00fc; border-radius: 50%; position: absolute; top: 0; left: 0;} 
	
	.other{ width :30px; height: 30px;  position: absolute;background:#00ffa8; border-radius: 50%;}
</style>

</head>
<body id="area">
 
<div id="ball"></div> 
<script src="jquery-3.4.1.js"></script>
<script type="text/javascript">  
    var oArea = document.querySelector("#area");
    var oBall = document.querySelector("#ball");
  
    function Breakout(ball, area) {   //打砖块小游戏对象 构造函数  
        this.ball = ball;     
        this.area = area;  
        this.x = 0;  
        this.y = 0;   
    }  
    Breakout.prototype = {    //原型方法  
        init: function () {  //初始化系统     
            this.creatother();  //创建其他小球  
            this.ballMove();    //球移动  
  
        },  
        eat:function(){
        	var d=document.getElementsByClassName("other");  //获取类名称为other的html元素们

			for(i=0;i<d.length;i++)
			{
            	var w=d[i].offsetLeft+d[i].offsetWidth*0.5-(this.ball.offsetLeft+this.ball.offsetWidth*0.5);
            	var h=d[i].offsetTop+d[i].offsetHeight*0.5-(this.ball.offsetTop+this.ball.offsetHeight*0.5);
		    	if(Math.pow(w,2)+Math.pow(h,2)<Math.pow((d[i].offsetWidth+this.ball.offsetWidth)*0.5,2))
		    	{
		    		this.ball.style.width=this.ball.offsetWidth+10+'px';
		    		this.ball.style.height=this.ball.offsetHeight+10+'px';
		    		d[i].style.display='none';
	                var balls = document.createElement("div");
	            	balls.classList.add("other")
	                balls.style.position='absolute';
	                balls.style.width='30px';
	                balls.style.height='30px';
	                balls.style.borderRadius='50%';
	                balls.style.top=Math.floor(Math.random()*document.documentElement.offsetHeight)+'px';  
	                balls.style.left=Math.floor(Math.random()*document.documentElement.offsetWidth)+'px';  
	                balls.style.background=this.ranColor();
	                this.area.appendChild(balls);  
		    	}
			}
        },
        creatother: function () {    //其他小球初始化 
        	for (var j=0; j < 10; j++) {   //其他小球初始化为10个
                var balls = document.createElement("div");
            	balls.classList.add("other")
                balls.style.position='absolute';
                balls.style.width='30px';
                balls.style.height='30px';
                balls.style.borderRadius='50%';
                balls.style.top=Math.floor(Math.random()*document.documentElement.offsetHeight)+'px';  
                balls.style.left=Math.floor(Math.random()*document.documentElement.offsetWidth)+'px';  
                balls.style.background=this.ranColor();
                this.area.appendChild(balls);  
            }  
        },  
        ballMove: function () {     //球初始化  
            this.ball.style.top = window.innerHeight - 180 + 'px';  //初始化球的top位置  
            this.ball.style.left = this.x - 60 + 'px';              //初始化球的left位置居中  
            this.addEvent(document, 'mousemove', this.mouseMove.bind(this)); //监听鼠标移动 
        },  
        //球移动  
        mouseMove: function (e) {                               //鼠标移动,球跟随鼠标运动  
            var _left = e.pageX - this.ball.offsetWidth / 2;    //保证鼠标移动,球中间位置同步鼠标位置  
            _left = Math.min(window.innerWidth - this.ball.offsetWidth, _left); //球向右移动不能超过屏幕右边界  
            _left = Math.max(0, _left);                                         //球向左移动不能超过屏幕左边界 
            var _top = e.pageY - this.ball.offsetHeight / 2;    //保证鼠标移动,球中间位置同步鼠标位置  
            _top = Math.min(window.innerHeight - this.ball.offsetHeight, _top); //球向右移动不能超过屏幕右边界  
            _top = Math.max(0, _top);                                         //球向左移动不能超过屏幕左边界  
            this.ball.style.left = _left + 'px';                                //通过设置球left值实现球移动  
            this.ball.style.top = _top + 'px';                                //通过设置球left值实现球移动
            this.eat();
        },  
        /*    getStyle: function (ele, curr) {  //获取属性值  
         return ele.currentStyle ? parseInt(ele.currentStyle[curr]) : parseInt(getComputedStyle(ele, null)[curr]);  
         },*/  
        addEvent: function (element, e, fn) {//事件监听  
            return element.attachEvent ? element.attachEvent('on' + e, fn) : element.addEventListener(e, fn, false);  
        },  
        ranColor: function () { //随机颜色  
            var color = '#';  
            for (var i = 0; i < 6; i++) {  
                color += '0123456789abcdef'[Math.floor(Math.random() * 16)]  
            }  
            return color;  
        },  
    }  
    var breakout = new Breakout(oBall,oArea);  
    breakout.init(); 
</script>  

<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>  
</html>

勾股定理计算两个圆的圆心距离
计算div相撞的关键代码原型：

for(i=0;i<d.length;i++)
{
   	var w=d[i].offsetLeft+d[i].offsetWidth*0.5-(this.ball.offsetLeft+this.ball.offsetWidth*0.5);
    var h=d[i].offsetTop+d[i].offsetHeight*0.5-(this.ball.offsetTop+this.ball.offsetHeight*0.5);
	if(Math.pow(w,2)+Math.pow(h,2)<Math.pow((d[i].offsetWidth+this.ball.offsetWidth)*0.5,2))//如果两个圆的圆心距离比两个圆的半径之和的小就发生相撞       
	{
   		this.ball.style.width=this.ball.offsetWidth+10+'px';
   		this.ball.style.height=this.ball.offsetHeight+10+'px';
   		d[i].style.display='none';
   		//再生成一个小球代码
   	}
}