拾金者

本想自主研发的一款在线网页游戏。
游戏地址：https://12345.sale/gold/
「缩放画面」：滚动鼠标中键（同CAD）
「拖动画面」：点住鼠标中键，然后移动鼠标（同CAD）
「拖动对象（如：人物、动物、植物）」：把鼠标移动到目标对象，点住鼠标左键，然后移动鼠标
「跟踪对象」：把鼠标移动到目标对象，单击鼠标右键（注意：1、程序默认跟踪女孩，可手动取消跟踪。2、对于移动速度较快的对象，需要足够快的手速才能成功点击。）
「取消跟踪对象」：点击状态栏的「取消跟踪」按钮
「播放/暂停背景音乐」：点击状态栏的「BGM」按钮

淘金者：一个锲而不舍的淘金女孩，她会前往每个金矿的位置收集这些金矿；
小蓝鸟：作为淘金者的好朋友，它如影随形地陪伴在「淘金者」的身侧；
蝴蝶：在各「花」对象之间停留和往返；
燕子：在各「树」对象之间停留和往返；
狗：作为人类的忠实朋友，狗将会往返于「人」对象和「房屋」对象之间以帮助人类传递讯息；

你，作为这个世界的幕后操控者，可用鼠标拖动任何对象穿梭于虚拟空间的每一个角落，在它们毫无防备与察觉之下，悄无声息地操控这个世界的流转。

纯html+css+javascript实现，挂载于第三方pages，无服务器。
本人独立实现。
技术实现：
一、基础前端技术：页面构建与样式支撑
网页的基础骨架和视觉呈现依赖前端三大核心技术，是所有交互功能的载体：

HTML（超文本标记语言）
作用：构建页面结构化元素，例如状态栏中的「取消跟踪」按钮、「BGM」按钮，以及游戏中的核心对象（淘金者、小蓝鸟、蝴蝶、树、房屋等）的 DOM 容器（或图形渲染的父容器）。
关键场景：为交互元素（如按钮、可拖动对象）绑定 ID / 类名，作为 JavaScript 操作的入口；定义游戏主容器，承载缩放、拖动的整体画面。
CSS（层叠样式表）
基础样式：设置状态栏布局（如固定在页面底部 / 顶部）、按钮样式（颜色、尺寸、 hover 效果）、游戏容器的初始定位（如 position: relative/absolute，为后续拖动、缩放提供基础）。
动态样式辅助：可能通过 CSS Transform 实现画面缩放（scale()）、对象位置偏移（translate()）—— 相比直接修改 top/left，Transform 不会频繁触发页面重排重绘，更适合流畅的交互场景（如文档中的 “缩放画面”“拖动对象”）。
JavaScript（核心交互逻辑语言）
是网页所有动态功能的 “大脑”，负责监听事件、控制动画、管理状态，例如：
鼠标事件监听：捕获「滚动中键（缩放）」「点中键拖动（画面移动）」「左键拖动物体」「右键跟踪」等操作；
自动动画控制：驱动淘金者向金矿移动、蝴蝶在花之间往返、狗在人与房屋间穿梭；
状态切换：控制 BGM 播放 / 暂停、跟踪状态的开启 / 取消。
二、核心交互技术：鼠标操作与画面控制
文档中 “缩放、拖动、跟踪” 等高频交互，依赖 JavaScript 的事件处理机制和坐标计算逻辑，具体实现如下：

鼠标事件体系
缩放画面：监听 mousewheel 事件（需兼容 Firefox 的 DOMMouseScroll），通过事件对象的 deltaY 计算缩放比例，再通过 CSS Transform: scale() 调整游戏容器大小，同时需保证缩放中心与鼠标位置对齐（需计算鼠标相对于容器的偏移量，调整 transform-origin 或容器偏移）。
拖动画面：监听「鼠标中键按下（mousedown）→ 鼠标移动（mousemove）→ 鼠标松开（mouseup）」事件链：
mousedown 时记录初始鼠标坐标（clientX/clientY）和容器初始偏移（left/top）；
mousemove 时计算鼠标位移，同步更新容器的 left/top（需基于容器的 absolute 定位）；
mouseup 时移除 mousemove 监听，避免鼠标离开页面后仍触发拖动。
拖动物体 / 跟踪对象：
左