JavaScript實現(xiàn)一個電子小蜘蛛

更新時間：2024年10月03日 09:19:59 作者：秋刀魚不做夢

這篇文章主要介紹了JavaScript實現(xiàn)一個電子小蜘蛛,具體的樣子就是讓它會跟隨著我們的鼠標(biāo)進(jìn)行移動,那么我們?nèi)绾螌崿F(xiàn)這樣的效果呢,下面來詳細(xì)講解實現(xiàn)方法,需要的朋友可以參考下

前言

在學(xué)習(xí)完JavaScript之后，我們就可以使用JavaScript來實現(xiàn)一下好玩的效果了，本篇文章講解的是如何純使用JavaScript來實現(xiàn)一個網(wǎng)頁中的電子蜘蛛。

在開始學(xué)習(xí)如何編寫一個網(wǎng)頁蜘蛛之前，先讓我們看一下這個電子蜘蛛長什么樣：

——我們可以看到，其會跟隨著我們的鼠標(biāo)進(jìn)行移動，那么我們?nèi)绾螌崿F(xiàn)這樣的效果呢？接下來讓我們開始講解。

HTML代碼

我們的html代碼十分的簡單，就是創(chuàng)建一個畫布，而我們接下來的操作，都是在此上邊進(jìn)行操作的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秋刀魚不做夢</title>
    <!-- 引入外部的JavaScript文件 -->
    <script src="./test.js"></script>
    <style>
        /* 移除body的默認(rèn)外邊距和內(nèi)邊距 */
        body {
            margin: 0px;
            padding: 0px;
            position: fixed;
            /* 設(shè)置網(wǎng)頁背景顏色為黑色 */
            background: rgb(0, 0, 0);
        }
    </style>
</head>
<body>
    <!-- 創(chuàng)建一個畫布用于圖形繪制 -->
    <canvas id="canvas"></canvas>
</body>
</html>

可以看到我們的HTML代碼非常的簡單，接下來讓我們開始在其上邊進(jìn)行操作！

JavaScript代碼

在開始編寫JavaScript代碼之前，先讓我們理清一下思路：

總體流程

頁面加載時，canvas 元素和繪圖上下文初始化。
定義觸手對象，每條觸手由多個段組成。
監(jiān)聽鼠標(biāo)移動事件，實時更新鼠標(biāo)的位置。
通過動畫循環(huán)繪制觸手，觸手根據(jù)鼠標(biāo)的位置動態(tài)變化，形成流暢的動畫效果。

大致的流程就是上邊的步驟，但是我相信讀者在沒用自己完成此代碼的編寫之前，可能不能理解上邊的流程，不過沒關(guān)系，現(xiàn)在讓我們開始我們的網(wǎng)頁小蜘蛛的編寫：

寫在前面：為了讓讀者可以更好的理解代碼的邏輯，我們給沒一句代碼都加上了注釋，希望讀者可以根據(jù)注釋的幫助一點一點的理解代碼：

JavaScript代碼：

// 定義requestAnimFrame函數(shù)
window.requestAnimFrame = function () {
    // 檢查瀏覽器是否支持requestAnimFrame函數(shù)
    return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        // 如果所有這些選項都不可用，使用設(shè)置超時來調(diào)用回調(diào)函數(shù)
        function (callback) {
            window.setTimeout(callback)
        }
    )
}
// 初始化函數(shù)，用于獲取canvas元素并返回相關(guān)信息
function init(elemid) {
    // 獲取canvas元素
    let canvas = document.getElementById(elemid)
    // 獲取2d繪圖上下文,這里d是小寫的
    c = canvas.getContext('2d')
    // 設(shè)置canvas的寬度為窗口內(nèi)寬度，高度為窗口內(nèi)高度
    w = (canvas.width = window.innerWidth)
    h = (canvas.height = window.innerHeight)
    // 設(shè)置填充樣式為半透明黑
    c.fillStyle = "rgba(30,30,30,1)"
    // 使用填充樣式填充整個canvas
    c.fillRect(0, 0, w, h)
    // 返回繪圖上下文和canvas元素
    return { c: c, canvas: canvas }
}
// 等待頁面加載完成后執(zhí)行函數(shù)
window.onload = function () {
    // 獲取繪圖上下文和canvas元素
    let c = init("canvas").c,
        canvas = init("canvas").canvas,
        // 設(shè)置canvas的寬度為窗口內(nèi)寬度，高度為窗口內(nèi)高度
        w = (canvas.width = window.innerWidth),
        h = (canvas.height = window.innerHeight),
        // 初始化鼠標(biāo)對象
        mouse = { x: false, y: false },
        last_mouse = {}
    // 定義計算兩點距離的函數(shù)
    function dist(p1x, p1y, p2x, p2y) {
        return Math.sqrt(Math.pow(p2x - p1x, 2) + Math.pow(p2y - p1y, 2))
    }
    // 定義 segment 類
    class segment {
        // 構(gòu)造函數(shù)，用于初始化 segment 對象
        constructor(parent, l, a, first) {
            // 如果是第一條觸手段，則位置坐標(biāo)為觸手頂部位置
            // 否則位置坐標(biāo)為上一個segment對象的nextPos坐標(biāo)
            this.first = first
            if (first) {
                this.pos = {
                    x: parent.x,
                    y: parent.y,
                }
            } else {
                this.pos = {
                    x: parent.nextPos.x,
                    y: parent.nextPos.y,
                }
            }
            // 設(shè)置segment的長度和角度
            this.l = l
            this.ang = a
            // 計算下一個segment的坐標(biāo)位置
            this.nextPos = {
                x: this.pos.x + this.l * Math.cos(this.ang),
                y: this.pos.y + this.l * Math.sin(this.ang),
            }
        }
        // 更新segment位置的方法
        update(t) {
            // 計算segment與目標(biāo)點的角度
            this.ang = Math.atan2(t.y - this.pos.y, t.x - this.pos.x)
            // 根據(jù)目標(biāo)點和角度更新位置坐標(biāo)
            this.pos.x = t.x + this.l * Math.cos(this.ang - Math.PI)
            this.pos.y = t.y + this.l * Math.sin(this.ang - Math.PI)
            // 根據(jù)新的位置坐標(biāo)更新nextPos坐標(biāo)
            this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang)
            this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang)
        }
        // 將 segment 回執(zhí)回初始位置的方法
        fallback(t) {
            // 將位置坐標(biāo)設(shè)置為目標(biāo)點坐標(biāo)
            this.pos.x = t.x
            this.pos.y = t.y
            this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang)
            this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang)
        }
        show() {
            c.lineTo(this.nextPos.x, this.nextPos.y)
        }
    }
    // 定義 tentacle 類
    class tentacle {
        // 構(gòu)造函數(shù)，用于初始化 tentacle 對象
        constructor(x, y, l, n, a) {
            // 設(shè)置觸手的頂部位置坐標(biāo)
            this.x = x
            this.y = y
            // 設(shè)置觸手的長度
            this.l = l
            // 設(shè)置觸手的段數(shù)
            this.n = n
            // 初始化觸手的目標(biāo)點對象
            this.t = {}
            // 設(shè)置觸手的隨機(jī)移動參數(shù)
            this.rand = Math.random()
            // 創(chuàng)建觸手的第一條段
            this.segments = [new segment(this, this.l / this.n, 0, true)]
            // 創(chuàng)建其他的段
            for (let i = 1; i < this.n; i++) {
                this.segments.push(
                    new segment(this.segments[i - 1], this.l / this.n, 0, false)
                )
            }
        }
        // 移動觸手到目標(biāo)點的方法
        move(last_target, target) {
            // 計算觸手頂部與目標(biāo)點的角度
            this.angle = Math.atan2(target.y - this.y, target.x - this.x)
            // 計算觸手的距離參數(shù)
            this.dt = dist(last_target.x, last_target.y, target.x, target.y)
            // 計算觸手的目標(biāo)點坐標(biāo)
            this.t = {
                x: target.x - 0.8 * this.dt * Math.cos(this.angle),
                y: target.y - 0.8 * this.dt * Math.sin(this.angle)
            }
            // 如果計算出了目標(biāo)點，則更新最后一個segment對象的位置坐標(biāo)
            // 否則，更新最后一個segment對象的位置坐標(biāo)為目標(biāo)點坐標(biāo)
            if (this.t.x) {
                this.segments[this.n - 1].update(this.t)
            } else {
                this.segments[this.n - 1].update(target)
            }
            // 遍歷所有segment對象，更新它們的位置坐標(biāo)
            for (let i = this.n - 2; i >= 0; i--) {
                this.segments[i].update(this.segments[i + 1].pos)
            }
            if (
                dist(this.x, this.y, target.x, target.y) <=
                this.l + dist(last_target.x, last_target.y, target.x, target.y)
            ) {
                this.segments[0].fallback({ x: this.x, y: this.y })
                for (let i = 1; i < this.n; i++) {
                    this.segments[i].fallback(this.segments[i - 1].nextPos)
                }
            }
        }
        show(target) {
            // 如果觸手與目標(biāo)點的距離小于觸手的長度，則回執(zhí)觸手
            if (dist(this.x, this.y, target.x, target.y) <= this.l) {
                // 設(shè)置全局合成操作為lighter
                c.globalCompositeOperation = "lighter"
                // 開始新路徑
                c.beginPath()
                // 從觸手起始位置開始繪制線條
                c.moveTo(this.x, this.y)
                // 遍歷所有的segment對象，并使用他們的show方法回執(zhí)線條
                for (let i = 0; i < this.n; i++) {
                    this.segments[i].show()
                }
                // 設(shè)置線條樣式
                c.strokeStyle = "hsl(" + (this.rand * 60 + 180) +
                    ",100%," + (this.rand * 60 + 25) + "%)"
                // 設(shè)置線條寬度
                c.lineWidth = this.rand * 2
                // 設(shè)置線條端點樣式
                c.lineCap = "round"
                // 設(shè)置線條連接處樣式
                c.lineJoin = "round"
                // 繪制線條
                c.stroke()
                // 設(shè)置全局合成操作為“source-over”
                c.globalCompositeOperation = "source-over"
            }
        }
        // 繪制觸手的圓形頭的方法
        show2(target) {
            // 開始新路徑
            c.beginPath()
            // 如果觸手與目標(biāo)點的距離小于觸手的長度，則回執(zhí)白色的圓形
            // 否則繪制青色的圓形
            if (dist(this.x, this.y, target.x, target.y) <= this.l) {
                c.arc(this.x, this.y, 2 * this.rand + 1, 0, 2 * Math.PI)
                c.fillStyle = "whith"
            } else {
                c.arc(this.x, this.y, this.rand * 2, 0, 2 * Math.PI)
                c.fillStyle = "darkcyan"
            }
            // 填充圓形
            c.fill()
        }
    }
    // 初始化變量
    let maxl = 400,//觸手的最大長度
        minl = 50,//觸手的最小長度
        n = 30,//觸手的段數(shù)
        numt = 600,//觸手的數(shù)量
        tent = [],//觸手的數(shù)組
        clicked = false,//鼠標(biāo)是否被按下
        target = { x: 0, y: 0 }, //觸手的目標(biāo)點
        last_target = {},//上一個觸手的目標(biāo)點
        t = 0,//當(dāng)前時間
        q = 10;//觸手每次移動的步長
    // 創(chuàng)建觸手對象
    for (let i = 0; i < numt; i++) {
        tent.push(
            new tentacle(
                Math.random() * w,//觸手的橫坐標(biāo)
                Math.random() * h,//觸手的縱坐標(biāo)
                Math.random() * (maxl - minl) + minl,//觸手的長度
                n,//觸手的段數(shù)
                Math.random() * 2 * Math.PI,//觸手的角度
            )
        )
    }
    // 繪制圖像的方法
    function draw() {
        // 如果鼠標(biāo)移動，則計算觸手的目標(biāo)點與當(dāng)前點的偏差
        if (mouse.x) {
            target.errx = mouse.x - target.x
            target.erry = mouse.y - target.y
        } else {
            // 否則，計算觸手的目標(biāo)點的橫坐標(biāo)
            target.errx =
                w / 2 +
                ((h / 2 - q) * Math.sqrt(2) * Math.cos(t)) /
                (Math.pow(Math.sin(t), 2) + 1) -
                target.x;
            target.erry =
                h / 2 +
                ((h / 2 - q) * Math.sqrt(2) * Math.cos(t) * Math.sin(t)) /
                (Math.pow(Math.sin(t), 2) + 1) -
                target.y;
        }
        // 更新觸手的目標(biāo)點坐標(biāo)
        target.x += target.errx / 10
        target.y += target.erry / 10
        // 更新時間
        t += 0.01;
        // 繪制觸手的目標(biāo)點
        c.beginPath();
        c.arc(
            target.x,
            target.y,
            dist(last_target.x, last_target.y, target.x, target.y) + 5,
            0,
            2 * Math.PI
        );
        c.fillStyle = "hsl(210,100%,80%)"
        c.fill();
        // 繪制所有觸手的中心點
        for (i = 0; i < numt; i++) {
            tent[i].move(last_target, target)
            tent[i].show2(target)
        }
        // 繪制所有觸手
        for (i = 0; i < numt; i++) {
            tent[i].show(target)
        }
        // 更新上一個觸手的目標(biāo)點坐標(biāo)
        last_target.x = target.x
        last_target.y = target.y
    }
    // 循環(huán)執(zhí)行繪制動畫的函數(shù)
    function loop() {
        // 使用requestAnimFrame函數(shù)循環(huán)執(zhí)行
        window.requestAnimFrame(loop)
        // 清空canvas
        c.clearRect(0, 0, w, h)
        // 繪制動畫
        draw()
    }
    // 監(jiān)聽窗口大小改變事件
    window.addEventListener("resize", function () {
        // 重置canvas的大小
        w = canvas.width = window.innerWidth
        w = canvas.height = window.innerHeight
        // 循環(huán)執(zhí)行回執(zhí)動畫的函數(shù)
        loop()
    })
    // 循環(huán)執(zhí)行回執(zhí)動畫的函數(shù)
    loop()
    // 使用setInterval函數(shù)循環(huán)
    setInterval(loop, 1000 / 60)
    // 監(jiān)聽鼠標(biāo)移動事件
    canvas.addEventListener("mousemove", function (e) {
        // 記錄上一次的鼠標(biāo)位置
        last_mouse.x = mouse.x
        last_mouse.y = mouse.y
        // 更新點前的鼠標(biāo)位置
        mouse.x = e.pageX - this.offsetLeft
        mouse.y = e.pageY - this.offsetTop
    }, false)
    // 監(jiān)聽鼠標(biāo)離開事件
    canvas.addEventListener("mouseleave", function (e) {
        // 將mouse設(shè)為false
        mouse.x = false
        mouse.y = false
    })
}

這里我們在大致的梳理一下上述代碼的流程：

初始化階段

init 函數(shù)：當(dāng)頁面加載時，init 函數(shù)被調(diào)用，獲取 canvas 元素并設(shè)置其寬高為窗口的大小。獲取到的 2D 繪圖上下文（context）用于后續(xù)繪制。
window.onload：頁面加載完成后，初始化 canvas 和 context，并設(shè)置鼠標(biāo)初始狀態(tài)。

觸手對象的定義

segment 類：這是觸手的一段，每個段有起始點（pos）、長度（l）、角度（ang），并通過角度計算出下一段的位置（nextPos）。
tentacle 類：代表完整的觸手，由若干個 segment 組成。觸手的起始點在屏幕中心，并且每個觸手包含多個段。tentacle 的主要方法有： move：根據(jù)鼠標(biāo)位置更新每一段的位置。show：繪制觸手的路徑。

事件監(jiān)聽

canvas.addEventListener("mousemove", ...)：當(dāng)鼠標(biāo)移動時，捕捉鼠標(biāo)的位置并存儲在 mouse 變量中。每次鼠標(biāo)移動會更新 mouse 和 last_mouse 的坐標(biāo)，用于后續(xù)的動畫。

動畫循環(huán)

draw 函數(shù)：這是一個遞歸的函數(shù)，用于創(chuàng)建動畫效果。首先，它會在每一幀中為畫布填充半透明背景，使得之前繪制的內(nèi)容逐漸消失，產(chǎn)生拖影效果。
然后，遍歷所有觸手（tentacles），調(diào)用它們的 move 和 show 方法，更新位置并繪制每一幀。
最后，使用 requestAnimFrame(draw) 不斷遞歸調(diào)用 draw，形成一個動畫循環(huán)。