如何让一个窗口,在桌面上自己移动,并且遇到边框时随机反弹?

//2019.3.3   没有最好的程序,只有更好的程序

如何让一个窗口,在桌面上自己移动,并且遇到边缘时随机反弹?

我认为这终究还是一个物理问题,下面是我第一次涉及这个问题时使用的方式。

我相信一定会有更好的方式,欢迎讨论。

我的思路:

①首先应该创建一个小窗口,设置好宽高以及最初的位置。比如说窗口大小resizeTo(300,300),位置moveTo(0,0)。

②先只看水平方向的移动,窗口从左向右移动,可以定义一个参数 x,让这个参数每一毫秒(时间可以任意)增加1,用JavaScript窗口对象中的方法moveTo(x,y)来执行窗口的移动。

③再看垂直方向上的移动,窗口从上往下移动,可以定义一个参数y,让这个参数每一毫秒(事件任意)增加1,同样用JavaScript窗口对象中的方法moveTo(x,y)来执行窗口的移动。

④我们发现,上述移动的结果只会把窗口移动到右下角,如何反弹呢?往下看…

⑤反弹也就是说窗口碰到边缘了,会往反向移动。在JavaScript的window对象中有个表达式为screen.availWidth,screen.availHeight分别代表窗口内容区域的水平尺寸,窗口内容区域的垂直尺寸,你可以认为是窗口所在区域的宽高。

⑥注意一点,窗口位置的坐标是指窗口左上角的坐标。到此,我们知道了窗口大小,窗口位置参数,以及窗口所在区域的宽高。

那么,容易知道,当窗口到达能见极限时的横纵坐标应该为x=screen.availWidth-300, y=screen.availHeight-300(300请看①中设置),下面就剩一个判断问题了。

⑦水平方向窗口一直移动,如果达到极限横坐标,那么让x自减,即向左移动,如果x减到0,则让x自增,依次循环。垂直方向与此相同。

⑧如何让它们自动移动呢,我们可把以上所有的内容写到一个方法里,用setInterval()来以一毫秒执行一次的频率执行该方法。

为什么会随机移动呢?因为窗口移动的所在区域宽高是不同的,可能水平方向先到达极限,也可能垂直方向,二者互不影响,所以我觉得这个是一个物理问题,就像中学时期学的飞机空中掉物一样。

实现这样效果得方法应该有很多,欢迎讨论啊。没有最好的程序,只有更好的程序。

下面给出代码:

<script type="text/javascript">
		window.moveTo(0,0);
		window.resizeTo(300,300);
		var x=0;
		var i=0;   
         //这个i是作为x向哪方移动的参数,每次到边缘都会改变一次,否则一直保持当前的移动
		var y=0;
		var j=0;
        //这个j是作为y向哪方移动的参数,每次到边缘都会改变一次,否则一直保持当前的移动
		function abs(){
			if(i==0){
				x=x+1;
			}
			if(x>=screen.availWidth-300){ 
				i=1;
			}
			if(i==1){
			    x=x-1;
			}
			if(x==0){
			    i=0;
			}
			
			if(j==0){
				y=y+1;
			}
			if(y>=screen.availHeight-200){ 
				j=1;
			}
			if(j==1){
			    y=y-1;
			}
			if(y==0){
			    j=0;
			}
			window.moveTo(x,y);
		}
		setInterval(abs,1);
	</script>

 

    原文作者:HelloCode97
    原文地址: https://blog.csdn.net/weixin_44013609/article/details/88089874
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞