新增第164个小实例：鼠标控制飞机的飞行方向

2022-06-13 16:16:43 +08:00 · 2022-06-13 16:16:43 +08:00 · 2715f61b5f
parent 06d762c906
commit 2715f61b5f
4 changed files with 111 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -170,4 +170,5 @@
 160. HTML5+CSS3小实例：带标题的3D多米诺人物卡片
 161. HTML5+CSS3+JS小实例：环形文字动画特效
 162. HTML5+CSS3+JS小实例：科技感满满的鼠标移动推开粒子特效
-163. HTML5+CSS3小实例：纯CSS实现彩虹倒映水面的唯美背景
+163. HTML5+CSS3小实例：纯CSS实现彩虹倒映水面的唯美背景
+164. HTML5+CSS3+JS小实例：鼠标控制飞机的飞行方向
--- a/code/164/164.css
+++ b/code/164/164.css
@ -0,0 +1,17 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    height: 100vh;
+    background: url(/images/164/sky.jpg);
+}
+#fly{
+    width: 60px;
+    height: 60px;
+    background: url(/images/164/fly.png) no-repeat;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+}
--- a/code/164/164.html
+++ b/code/164/164.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>鼠标控制飞机的飞行方向</title>
+    <link rel="stylesheet" href="164.css">
+</head>
+
+<body>
+    <div id="fly"></div>
+</body>
+
+</html>
+
+<script src="164.js"></script>
--- a/code/164/164.js
+++ b/code/164/164.js
@ -0,0 +1,74 @@
+const fly=document.getElementById('fly'); //飞机
+let skyX=0,
+    skyY=0,
+    c,
+    timer;
+
+// 绑定鼠标移动事件
+document.addEventListener('mousemove',function(e){
+    let contentX=fly.offsetLeft+fly.offsetWidth/2,
+        contentY=fly.offsetTop+fly.offsetHeight/2,
+        dX=e.clientX-contentX,
+        dY=e.clientY-contentY;
+    c=Math.atan2(dX,dY); //取值
+    c=180*c/Math.PI; //转换角度
+    c=c*-1;
+
+    // 飞机运动
+    function to(){
+        clearTimeout(timer);
+        fly.style.transform='rotate('+c+'deg)';
+        // 判断飞行方向
+        if(c>-15 && c<15){
+            // 向下飞
+            skyY-=5;
+            document.body.style.backgroundPositionY=skyY+'px';
+        }
+        if(c>15 && c<75){
+            // 向左下角飞
+            skyX+=4;
+            skyY-=4;
+            document.body.style.backgroundPositionX=skyX+'px';
+            document.body.style.backgroundPositionY=skyY+'px';
+        }
+        if(c>75 && c<105){
+            // 向左飞
+            skyX+=5;
+            document.body.style.backgroundPositionX=skyX+'px';
+        }
+        if(c>105 && c<165){
+            // 向左上角飞
+            skyX+=4;
+            skyY+=4;
+            document.body.style.backgroundPositionX=skyX+'px';
+            document.body.style.backgroundPositionY=skyY+'px';
+        }
+        if(c>165 || c<-165){
+            // 向上飞
+            skyY+=5;
+            document.body.style.backgroundPositionY=skyY+'px';
+        }
+        if(c>-75 && c<-15){
+            // 向左下角飞
+            skyX-=4;
+            skyY-=4;
+            document.body.style.backgroundPositionX=skyX+'px';
+            document.body.style.backgroundPositionY=skyY+'px';
+        }
+        if(c>-105 && c<-75){
+            // 向右飞
+            skyX-=5;
+            document.body.style.backgroundPositionX=skyX+'px';
+        }
+        if(c>-165 && c<-105){
+            // 向右上角飞
+            skyX-=4;
+            skyY+=4;
+            document.body.style.backgroundPositionX=skyX+'px';
+            document.body.style.backgroundPositionY=skyY+'px';
+        }
+        timer=setTimeout(to,10);
+    }
+
+    to();
+})