feat: 粒子特效

joywins-y · Nov 24, 2023 · 30036a1 · 30036a1
1 parent 19f6ace
commit 30036a1
Show file tree

Hide file tree

Showing 6 changed files with 579 additions and 0 deletions.
diff --git a/docs/algorithm/1.html b/docs/algorithm/1.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="result"></div>
+    <script>
+        /**
+         * @param {number[]} nums
+         */
+        var NumArray = function (nums) {
+            for (let array of nums) {
+
+            }
+        };
+
+        /** 
+         * @param {number} index 
+         * @param {number} val
+         * @return {void}
+         */
+        NumArray.prototype.update = function (index, val) {
+
+        };
+
+        /** 
+         * @param {number} left 
+         * @param {number} right
+         * @return {number}
+         */
+        NumArray.prototype.sumRange = function (left, right) {
+            let sum = 0;
+            for (let i = left; i < right; i++) {
+                sum += NumArray[i]
+            }
+            return sum;
+        };
+
+        /**
+         * Your NumArray object will be instantiated and called as such:
+         * var obj = new NumArray(nums)
+         * obj.update(index,val)
+         * var param_2 = obj.sumRange(left,right)
+         */
+        const nums = ["NumArray", "sumRange", "update", "sumRange"]
+        [[[1, 3, 5]], [0, 2], [1, 2], [0, 2]]
+        const result = vowelStrings(["are", "amy", "u"], 0, 2);
+        console.log(result);
+    </script>
+</body>
+
+</html>
diff --git a/docs/algorithm/3.html b/docs/algorithm/3.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .container {
+            width: 400px;
+            height: 300px;
+            background: #CBE8DD;
+            margin-top: 350px;
+            margin-left: 400px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+
+        /* .container {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #CBE8DD;
+        } */
+
+        .triangle1,
+        .triangle2,
+        .triangle3 {
+            position: absolute;
+            width: 0px;
+            height: 0px;
+            top: 0;
+            margin: 120px 70px;
+            border-left: 70px solid transparent;
+            border-right: 70px solid transparent;
+            border-bottom: 100px solid #007192;
+        }
+
+        .triangle1 {
+            margin: 80px auto;
+            border-bottom-color: #007192;
+            border-left-width: 105px;
+            border-right-width: 105px;
+            border-bottom-width: 130px;
+        }
+
+        .triangle2 {
+            left: 0;
+        }
+
+        .triangle3 {
+            right: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="triangle1"></div>
+        <div class="triangle2"></div>
+        <div class="triangle3"></div>
+    </div>
+</body>
+
+</html>
diff --git a/docs/algorithm/good.html b/docs/algorithm/good.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="alert1" style="white-space: pre-wrap;"></div>
+    <br>
+    <div id="alert2" style="white-space: pre-wrap;"></div>
+    <canvas id="canvas1" style="position: absolute;left: 0;top: 0;"></canvas>
+
+    <script>
+        const alert1 = document.getElementById('alert1');
+        const alert2 = document.getElementById('alert2');
+        const canvas1 = document.getElementById('canvas1');
+        const ctx = canvas1.getContext('2d');
+        // const color = 'red';
+
+        const keys = getStorageKeys(); // 火球其他窗口的 storage keys
+        // at() 方法接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。
+        const key = keys.length === 0 ? 1 : keys.at(-1) + 1; // 自增最大的 key 序号，定义自己窗口的 storage key
+        const color = ['red', 'blue', 'green'][key % 3]; // 获取圆颜色
+
+        // 窗口关闭时删除自己窗口 storage
+        window.onunload = function () {
+            localStorage.removeItem(key);
+        }
+
+        function getStorageKeys() {
+            const keys = [];
+            for (let i = 0; i < localStorage.length; i++) {
+                const k = Number(localStorage.key(i));
+                !isNaN(k) && keys.push(k);
+            }
+            return keys.sort((a, b) => a - b);
+        }
+
+        function draw() {
+            const { clientWidth, clientHeight } = document.body; // 获取 body 的宽高
+            const { screenX, screenY } = window; // 获取浏览器相对屏幕坐标
+            const barHeight = window.outerHeight - window.innerHeight; // 获取浏览器 body 顶部地址栏高度
+            // const key = 0; // storage key
+
+            // 记录 log
+            alert1.textContent = JSON.stringify({ key, clientWidth, clientHeight, screenX, screenY, barHeight }, '', 2);
+
+            // 设置 canvas 为整个 body 宽高，铺满 body
+            canvas1.width = clientWidth;
+            canvas1.height = clientHeight;
+
+            // 获取自己的圆心坐标，为 body 中心
+            const x = clientWidth / 2;
+            const y = clientHeight / 2;
+
+            // 画自己的圆
+            ctx.fillStyle = color;
+            ctx.beginPath();
+            ctx.arc(x, y, 15, 0, Math.PI * 2);
+            ctx.fill();
+
+            // 记录自己的 position
+            const position = {
+                top: y + barHeight + screenY, // 相对屏幕坐标
+                left: x + screenX,
+                color: color, // 自己的颜色
+            }
+
+            // 获取其他窗口 position，并遍历
+            getStorageKeys().forEach(k => {
+                const position2 = JSON.parse(localStorage.getItem(k)); // 获取其中一个窗口的圆心 position
+                const w = position2.left - position.left; // 获取相对自己圆心的横向间距
+                const h = position2.top - position.top; // 获取相对自己圆心的纵向间距
+
+                // 在自己的 canvas 上画出该圆
+                ctx.fillStyle = position2.color;
+                ctx.beginPath();
+                ctx.arc(x + w, y + h, 15, 0, Math.PI * 2);
+                ctx.fill();
+
+                // 画连接线
+                ctx.strokeStyle = 'black';
+                ctx.beginPath();
+                ctx.moveTo(x, y);
+                ctx.lineTo(x + w, y + h);
+                ctx.stroke();
+            })
+
+            // 更新自己窗口的 position
+            localStorage.setItem(key, JSON.stringify(position));
+
+            // 记录 log
+            alert2.textContent = JSON.stringify(localStorage, '', 2);
+
+            window.requestAnimationFrame(draw);
+        }
+
+        window.requestAnimationFrame(draw);
+    </script>
+</body>
+
+</html>