JavaScript

緊接上文：《同一個動畫，我用三種技術棧實現的區別?》 WebGL 二次元石頭剪刀布小遊戲。 規則很普通： 石頭 > 剪刀 剪刀 > 布 布 > 石頭 但有趣的是在於： 輸了會脫衣服。 對,就是這麼簡單粗暴。 起因其實是「我想研究精靈圖」 一開始我根本沒想做遊戲。 我只是想研究： atlas sprite 圖層疊加 動畫裁剪 這些東西。 然後想著：「總得有個實際應用場景吧？」 於是腦子一抽： 那乾脆做個二次元脫衣猜拳。 然後項目開始朝奇怪方向狂奔。 這個項目最麻煩的其實不是遊戲邏輯 石頭剪刀布規則簡單得離譜。 真正麻煩的是：衣服層級 因為角色不是：「一張完整圖片」 而是： 底圖 (防粿體被抓包,特意加密了) 衣服 A 衣服 B 衣服 C 配飾 遮擋層 不停疊。 「脫衣」其實是圖層管理 玩家贏了： 按設定好的順序移除一件衣服 電腦贏了： 再按逆序穿回來 聽起來簡單。 實際上會遇到一堆問題： 比如「不能瞬間露底圖」 這個特別關鍵。 如果你： 先刪舊衣服 再加新衣服 中間可能會閃出底圖。 於是視覺效果會特別怪。 所以我後來用了：reveal 覆蓋邏輯 新的層會立刻頂上。 盡量避免： 「裸體一幀閃現」。 雖然本身這項目看起來不正經 但至少技術上要優雅。 WebGL 在這裡真的很舒服 這個項目我最後選 WebGL 做。 原因很簡單：圖層太多。 ...

最近我做了個挺有意思的小實驗。 我把一個二次元角色的小動畫效果，分別用： WebGL Canvas 2D 純 DOM + CSS 實現了三遍。 效果本身不複雜： 眨眼 眉毛/下眼皮聯動 流汗輕微飄動 呆毛甩動 但真正有意思的，其實不是「做出來」。 而是： 同一個東西，用三種技術棧實現時，到底會差多少？ 本質上就是一次「前端圖形學味很濃」的復刻實驗。 一開始只是想復刻一個呆毛動畫 靈感來源：https://tamanidamani.itch.io/nijikas-ahoge 我當時想法特別簡單：「如果是我,要怎麼實現？」 然後越做越上頭。最後直接演變成： 那我乾脆把 WebGL、Canvas2D、DOM 三種方案都做一遍算了。 於是倉庫就變成了現在這樣： canvas/ canvas2D/ dom/ 三個版本同效果實現。 先說結論 如果只讓我說一句話： WebGL 最強，但 Canvas2D 最舒服，DOM 最適合業務 1. WebGL 版本：最像「真正遊戲開發」 這個版本是最折騰的。 因為它本質上已經不是「前端動畫」了, 而是：GPU 圖形編程 它到底怎麼實現的？ 核心思路其實就是： 底圖一層 精靈圖一層層貼 shader 控制繪製 JS 驅動動畫參數 比如： 呆毛旋轉 眨眼裁剪 alpha 混合 這些其實都在 GPU 那邊做。 你會開始接觸： uniform texture shader UV 頂點座標 紋理座標 然後人會逐漸失去笑容。 但 WebGL 真強 當元素一多的時候, WebGL 那種： 「完全不慌」 的感覺特別明顯。 尤其是： ...

✨ 緒山真尋的小窩 ✨ 🌸 歡迎來到緒山真尋的小窩 🌸 哇！你發現了我的秘密基地！(*≧ω≦) 這裡是緒山真尋的個人網站，充滿了可愛的動畫和有趣的內容！我會在這裡分享我喜歡的動畫、漫畫、遊戲和一些日常生活中的小確幸～ 💕 關於我 💕 我是緒山真尋，一個熱愛成人遊戲的家裡蹲廢柴尼特族。喜歡動畫、漫畫、輕小說和各種可愛的東西！最喜歡的顏色是粉色和淡藍色！ ∩∩ （･ω･） <- 這是我！ ＿|　⊃／(＿＿ ／ └-(＿＿＿／ 🎀 網站內容 🎀 🌟 精美動畫展示 📚 我的私房照 🎵 好聽的音樂 📷 日常生活的小片段 🌈 關於 🌈 🎭 演示: https://mahiro.moejue.cn/ 🏠 個人部落格: https://MoeJue.cn/ 🐱 GitHub: https://github.com/iAJue/Mahiro 📧 官方網站: https://onimai.jp/ 📝 版權聲明 📝 本網站由 @Moejue 設計和開發 網站中使用的所有動畫片段、漫畫圖片、角色形象及相關內容的版權均歸原作者(ねことうふ（Nekotofu）)及其發行公司(Studio Bind、Ichijinsha)所有 如有侵權，請透過以上聯絡方式告知，我會立即刪除相關內容 GNU GENERAL PUBLIC LICENSE Version 2 Copyright © 2025 MoeJue. All rights reserved. 💌 特別感謝 💌 感謝所有喜歡緒山真尋的朋友們！(●’◡’●) ...

多鏈錢包整合的實踐反思 總算是空閒下來可以整理一下程式碼了，Web3 專案接入多鏈錢包連接功能，主要涉及 Ethereum、Polygon、BSC 和 Solana。乍一聽好像只是「多做幾套相容邏輯」的事，但真正落地後才發現，很多東西其實沒想得那麼簡單。 this.networkConfigs = { ethereum: { chainId: '0x1', // 1 chainName: 'Ethereum Mainnet', nativeCurrency: { name: 'Ethereum', symbol: 'ETH', decimals: 18 }, rpcUrls: ['https://eth-mainnet.public.blastapi.io'], blockExplorerUrls: ['https://etherscan.io'] }, polygon: { chainId: '0x89', // 137 chainName: 'Polygon Mainnet', nativeCurrency: { name: 'MATIC', symbol: 'MATIC', decimals: 18 }, rpcUrls: ['https://polygon-rpc.com'], blockExplorerUrls: ['https://polygonscan.com'] }, bsc: { chainId: '0x38', // 56 chainName: 'BNB Smart Chain', nativeCurrency: { name: 'BNB', symbol: 'BNB', decimals: 18 }, rpcUrls: ['https://bsc-dataseed.binance.org'], blockExplorerUrls: ['https://bscscan.com'] } } 多鏈並非簡單的「支援多個錢包」 最大的感受是：鏈不一樣，錢包互動方式也不一樣，連 SDK 的思維方式都不一樣。以太坊生態可以用統一的 Web3.js 處理很多邏輯，而到了 Solana，你會發現它完全是另一套系統：Provider 接入、連接流程、PublicKey 建構方式都不太一樣，甚至連網路延遲和穩定性都影響體驗。 ...

ArticleSync - 多平台文章同步插件 ArticleSync 是一個瀏覽器擴充功能，幫助使用者輕鬆將文章同步發佈到多個社交平台。支援將文章從本地草稿發佈到各大平台，如知乎、Bilibili 等。它提供了一站式解決方案，讓你在不同的社交媒體平台上同步文章變得簡單高效。 基於瀏覽器外掛程式模式，自動偵測本地登入帳號，杜絕帳號洩露、環境異常等風險 基於 Chrome Manifest v3 瀏覽器擴充功能標準開發，請注意核心版本要求 背景 你也知道，我這又一下子多了好幾個部落格平台，和一大堆社交網站，如果我想讓它們之間都能保持活躍的更新怎麼辦。(證明我還活著) 還能一鍵盜文章 我最常更新的就是我自己的小破站了，但是其他平台，我可能就只是偶爾更新一下，但是又不想每次都去手動發佈，所以我就想，能不能寫一個外掛程式，自動偵測我本地登入的帳號，然後自動發佈呢。 正所謂，自己動手豐衣足食。鼓搗了好幾天，勉強算是能用的樣子，剩下的就有空再更新了。除非你給我錢 外掛程式還有很多不完善的地方，我也沒有多平台正式在生產環境中實測，如遇報錯，實屬正常，那就提交 issue 吧，或者自己改改，改好了再提交 PR 吧。嘻嘻~ 為了不影響我說話，截圖放最後了 還有，開源不易，來個 star 吧，嘿嘿嘿~ 本來想加一點私貨進去的，自動關注我的社群平台 功能特色 多平台支援：支援知乎、Bilibili 等各大主流平台，支援自建開源 CMS 系統。 狀態追蹤：在外掛程式介面中查看文章的同步狀態。 帳號管理：可查看與外掛程式綁定的各平台帳號資訊。 可擴展性強：支援開發者透過轉接器模式輕鬆擴展到更多平台。 安全可靠：外掛程式基於瀏覽器擴充功能模式，確保帳號安全，避免帳號洩露等風險。 待辦事項 [ ] 獨立文章編輯器 [ ] 圖片一鍵同步 [x] Markdown 與 HTML 互轉 [ ] 第三方圖床系統 [ ] 多帳號管理 [ ] 多系統客戶端版本 [ ] 一鍵 AI 總結 [ ] 影片同步 [ ] 標籤、分類的支援 [ ] 更友善的錯誤處理 [ ] 更多平台的接入 支援管道 媒體 ...