1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>在当前显示区范围内实现点不到的小方块</title>
6 <style>
7 div{position:fixed;width:500px;height:500px;
8 background-color:pink;
9 }
10 </style>
11
12 </head>
13 <body>
14 <div id="pop"></div>
15 <script>
16 var game={
17 PSIZE:0,//保存div的大小
18 MAXTOP:0,//保存最大可以top
19 MAXLEFT:0,//保存最大可用left
20 pop:null,//保存主角div
21 init:function(){
22 //查找id为pop的div保存在pop属性中
23 this.pop=document.getElementById("pop");
24 //获取pop计算后的样式中的width,转为浮点数保存在PSIZE属性中
25 this.PSIZE=parseFloat(getComputedStyle(this.pop).width);
26 //计算MAXTOP:文档显示区的高-PSIZE
27 this.MAXTOP=innerHeight-this.PSIZE;
28 //计算MAXLEFT:文档显示区的宽-PSIZE
29 this.MAXLEFT=innerWidth-this.PSIZE;
30 //debugger;
31 debugger;
32 //在0-MAXTOP之间生成随机数,保存在变量rTop中
33 var rTop=Math.floor(Math.random()*(this.MAXTOP+1));
34 //在0-MAXLEFT之间生成随机数,保存在变量rLeft中
35 var rLeft=Math.floor(Math.random()*(this.MAXLEFT+1));
36 //设置pop的top为rTop
37 this.pop.style.top=rTop+"px";
38 //设置pop的left为rLeft
39 this.pop.style.left=rLeft+"px";
40
41 //为pop绑定鼠标进入事件监听,函数为
42 this.pop.addEventListener("mouseover",
43 function(e){//获得时间对象e
44 //反复执行
45 while(true){
46 //在0-MAXTOP之间生成随机数,保存在变量rTop中
47 var rTop=Math.floor(Math.random()*(this.MAXTOP+1));
48 //在0-MAXLEFT之间生成随机数,保存在变量rLeft中
49 var rLeft=Math.floor(Math.random()*(this.MAXLEFT+1));
50 //获得鼠标相对于文档显示区的x坐标
51 var x= e.clientX;
52 //获得鼠标相对于文档显示区的y坐标
53 var y= e.clientY;
54 //如果!(x>=rLeft&&x<rLeft+PSIZE
55 // &&y>=rTop&&y<=rTop+PSIZE)
56 if(!(x>=rLeft&&x<rLeft+this.PSIZE&&y>=rTop&&y<=rTop+this.PSIZE)){
57 //如果新位置不包含鼠标位置
58 //设置pop的top为rTop
59 this.pop.style.top=rTop+"px";
60 //设置pop的left为rLeft
61 this.pop.style.left=rLeft+"px";
62 //退出循序
63 break;
64 }
65 }
66 }.bind(this)
67 );
68 }
69
70 }
71 game.init();
72 </script>
73
74 </body>
75 </html>
时间： 2024-10-10 18:35:12