用原生js寫碰撞變色效果

時間 2019-11-17

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">    
 7         #wrap{
 8             width: 100px;
 9             height: 100px;
10             background-color: red;
11             position: absolute;
12             left: 0;
13             top: 0;
14             cursor: pointer;
15             z-index: 2;
16         }
17         #obstacle{
18             width: 200px;
19             height: 200px;
20             background-color: blue;
21             position: absolute;
22             left: 300px;
23             top: 200px;
24             z-index: 1;
25         }
26     </style>
27 </head>
28 <body>
29     <div id="wrap"></div>
30     <!-- 障礙物 -->
31     <div id="obstacle"></div>
32 </body>
33 <script type="text/javascript">
34     var wrap = document.querySelector("#wrap");
35     var obstacle = document.querySelector("#obstacle");
36     wrap.onmousedown = function(e){
37         var e = e || window.event;
38         //鼠標的座標
39         var oX = e.clientX;
40         var oY = e.clientY;
41         // 計算差值
42         var differL = oX - wrap.offsetLeft;
43         var differT = oY - wrap.offsetTop;
44         document.onmousemove = function(e){
45             var e = e || window.event;
46             // 改變wrap的位置
47             wrap.style.left = e.clientX - differL + "px";
48             wrap.style.top = e.clientY - differT + "px";
49 
50 
51             // 判斷
52             var wrapLeft = wrap.offsetLeft;
53             var wrapTop = wrap.offsetTop;
54             var wrapRight = wrapLeft + wrap.offsetWidth;
55             var wrapBottom = wrapTop + wrap.offsetHeight;
56 
57             var obstacleLeft = obstacle.offsetLeft;
58             var obstacleTop = obstacle.offsetTop;
59             var obstacleRight = obstacleLeft + obstacle.offsetWidth;
60             var obstacleBottom = obstacleTop + obstacle.offsetHeight;
61 
62             if(wrapLeft <= obstacleRight && wrapTop <= obstacleBottom && wrapRight >= obstacleLeft && wrapBottom >= obstacleTop){
63                 wrap.style.backgroundColor = "yellow";
64             }else{
65                 wrap.style.backgroundColor = "red";
66             }
67 
68         }
69     }
70 
71     wrap.onmouseup = function(){
72         document.onmousemove = null;
73     }
74 </script>
75 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。