10 篇文章带有标签 “localstorage”

坦克大战（HTML5）开发教程

本教程基于本工作区已实现的「坦克大战」源码（HTML5 Canvas 复刻红白机 Battle City）逐模块讲解。 读完后你将能独立从零搭建一个 60fps、数据驱动、可扩展 的俯视角坦克射击游戏，并理解其中每个模块的设计取舍。

配套源码入口：index.html，核心逻辑在 js/ 下 6 个文件，单元测试在 tests/tank.test.js。

GitHub 源代码：https://github.com/wang-junjian/tank-battle

1. 项目简介与技术栈

「坦克大战」是一款经典俯视角坦克射击游戏：玩家操控己方坦克在 13×13 的迷宫战场中移动、射击，摧毁敌方坦克并保护己方基地（老鹰）。

技术栈（零依赖、零构建步骤）：

技术 用途
HTML5 Canvas 2D 全部战场渲染
原生 JavaScript（ES6 class） 游戏逻辑，不依赖任何框架
Web Audio API 实时合成音效与 BGM（无音频素材文件）
localStorage 最高分与配置持久化
node:test 引擎逻辑的单元测试（无需浏览器）

为什么选这套栈： 无打包、无依赖，双击即可运行；逻辑与渲染分离后，核心玩法甚至能在 Node 里跑测试。这对"快速做出可玩原型"极其友好。

2. 运行、调试与测试

2.1 本地运行

直接用浏览器打开 index.

tank-battletutorialhtml5-canvasgame-devweb-audio-apilocalstorage

发布

坦克大战：浏览器本地俯视角街机射击游戏

坦克大战是什么

坦克大战是一款在浏览器中直接运行的纯前端俯视角坦克射击游戏，复刻经典街机玩法，无需安装、无需后端，打开网页即可开战。玩家操控坦克在 13×13 的战场上移动射击，目标是消灭全部敌军并保护基地（老鹰），支持键盘与触屏两种操作方式。

核心功能

  • 经典俯视角射击：方向键控制坦克移动，朝向即开火方向，空格 / J 发射子弹。
  • 3 个关卡：每关地图、敌军总数、刷新频率与敌人类型权重各不相同，难度逐关提升。
  • 四种敌军类型：普通、快速、装甲、智能坦克，智能坦克会追踪玩家位置。
  • 六种战场道具：火力升级、无敌护盾、强化基地、冻结敌军、全屏清除、奖励生命。
  • 火力成长系统：拾取星形道具可提升火力等级，最高等级可破坏钢墙。
  • 触屏虚拟按键：移动设备自动显示方向键与圆形射击按钮，手机也能玩。
  • 本地音频合成：使用 Web Audio API 实时合成 BGM、射击、爆炸、道具等音效，无外部资源。
  • 可自定义按键：支持在设置中重映射移动、射击、暂停、确认、重开等按键。
  • 画质与音量调节：提供低 / 中 / 高三档画质，独立开关音乐与音效，音量 0% ~ 100% 可调。
  • 本地进度保存：使用 localStorage 记录最高分与已解锁关卡，下次打开继续挑战。
  • 响应式 HUD：桌面端右侧信息栏显示关卡、剩余敌军、生命、得分与增益状态；窄屏自动堆叠。

使用方式

  1. 打开 坦克大战。
  2. 在主菜单选择已解锁的关卡，点击「开始游戏」。
  3. 使用方向键移动坦克，空格 / J 射击；触屏设备使用屏幕上的虚拟按键。
  4. 消灭全部敌军即可过关；保护基地不被击毁，生命耗尽或基地失守则游戏结束。
arcade browser game html5-canvas localstorage tank-battle tool web-audio-api

发布

朗读者：浏览器本地中英文长文朗读器

朗读者是什么

朗读者（Long Reader）是一款基于 Web Speech API 的纯前端长文朗读工具。它采用左侧编辑设置、右侧沉浸阅读的布局，支持中英文长文本逐句朗读，无需上传、无需后端，所有文本处理与语音合成都在浏览器本地完成。

核心功能

  • 本地朗读：文本不离开浏览器，无上传、无服务端、保护隐私。
  • 自动分句：按中英文标点自动切分长文，避免单条语音过长被截断。
  • 逐句高亮：朗读时当前句高亮显示，已读句子自动淡化，并平滑滚动到视野中央。
  • 点击跳转朗读：在阅读区点击任意句子，即可从该句开始播放。
  • 多语音选择：自动加载系统语音列表，按语言分组；英文优先推荐 Safari 的 Samantha 与 Chrome 的 Ava。
  • 语速 / 音调 / 音量调节：语速 0.5× ~ 2.0×，音调 0 ~ 2.0，音量 0% ~ 100%。
  • 文本来源多样：支持直接粘贴、上传 .txt 文件，也内置中英文范文一键体验。
  • 阅读进度记忆：使用 localStorage 保存当前文本与朗读位置，刷新或下次打开可恢复继续朗读。
  • 进度显示：顶部工具栏实时显示当前句数与总句数。
  • 响应式布局：桌面端双栏设计，移动端侧边栏可折叠，适配不同屏幕。
  • 键盘快捷键：Space 播放 / 暂停，← / → 切换上下句，Esc 停止。
  • 后台自动暂停：页面切换到后台时自动暂停朗读，避免被系统中断。

使用方式

tool browser localstorage reader speech-synthesis text-to-speech tts web-speech-api

发布

免费在线翻译工具：无需注册的多源翻译与朗读

免费在线翻译工具是什么

免费在线翻译工具是一款纯前端的浏览器翻译工具，支持 MyMemory、Lingva、LibreTranslate 三种翻译源，无需注册、无需 API Key 即可使用。它采用左右分屏设计，输入内容后会实时翻译，并支持基于 Web Speech API 的本地语音朗读。所有设置与偏好都保存在浏览器本地，文本不会上传至任何服务端。

核心功能

  • 多翻译源可选：支持 MyMemory（免费在线）、Lingva（免费代理）、LibreTranslate（自托管）三种后端，可在设置中一键切换。
  • 实时翻译：输入内容 600ms 防抖后自动发起翻译，切换语言或翻译源时也会即时更新译文。
  • 语言标签页：源语言支持「检测语言」，目标语言覆盖中文、英语、日语、德语、法语、西班牙语等常用语言。
  • 一键互换语言：点击中间互换按钮即可交换源语言与目标语言，并自动重新翻译。
  • 语音朗读：基于 Web Speech API，支持朗读原文与译文；中英文自动检测，英文优先使用 Ava / Samantha 等高质量语音。
  • 朗读播放/停止切换：朗读按钮可一键停止当前播放，再次点击则重新朗读。
  • 长文本分句：朗读时按句末标点自动切分，避免单条语音过长被浏览器截断。
  • 复制译文：点击复制按钮即可将翻译结果复制到剪贴板。
  • 本地记忆偏好：使用 localStorage 自动保存源语言、目标语言、翻译源及服务地址，下次打开无需重新设置。
  • 响应式布局：桌面端左右分屏，窗口自适应高度；移动端自动上下堆叠，小屏也能流畅使用。
tool browser localstorage machine-translation online-translator speech-synthesis translation web-speech-api

发布

智能朗读阅读器：浏览器本地中英文长文朗读工具

智能朗读阅读器是什么

智能朗读阅读器是一款基于 Web Speech API 的纯前端朗读工具。它采用左右分屏设计：左侧为阅读区，右侧为可折叠编辑区，适合朗读中文小说、英文范文、演讲稿等长文本。所有文本处理与语音合成都在浏览器本地完成，无需上传、无需后端。

核心功能

  • 左右分屏阅读：左侧阅读区、右侧可折叠编辑区，加载大文本后阅读区独立滚动，页面不再被撑高。
  • 自动分句与高亮：按中英文标点自动切分长文，朗读时当前句高亮显示，已读句子自动淡化。
  • 点击跳转朗读：在阅读区点击任意句子，即可从该句开始播放。
  • 语速 / 音调调节：语速支持 0.4x ~ 2.5x，音调支持 0.5 ~ 2.0。
  • 字号 / 行高调节：阅读区字号与行高可调，偏好自动保存到本地。
  • 语音选择：自动加载系统语音，英文文本默认优先使用 Ava 语音。
  • 上下句跳转：支持按钮或键盘 ← / → 快速切换到上一句 / 下一句。
  • 循环播放：支持单句循环与全文循环，适合重点句子跟读或反复听诵。
  • 朗读进度条：底部实时显示整体朗读进度。
  • 预设经典文本：内置《背影》、I Have a Dream、Gettysburg Address 等范文，一键体验。
  • 主题切换：支持浅色 / 深色模式，长时间阅读更护眼。
  • 文件导入：支持 .txt / .md 等文本导入，也支持拖拽文件到阅读区。
  • 快捷键：空格播放 / 暂停，Ctrl + Enter 加载文本，Esc 停止，← / → 切换句子。
  • 纯本地运行：无后端、无上传、无依赖，纯静态 HTML 页面。
tool tts text-to-speech reading-companion reader web-speech-api speech-synthesis browser localstorage

发布

高中英语3500词：浏览器本地背单词工具

高中英语3500词是什么

高中英语3500词是一款纯前端、无需安装的浏览器背单词工具。它内置高考核心词汇，采用卡片式记忆设计，支持释义隐藏、朗读、收藏标记和进度统计，所有学习状态都保存在浏览器本地。

核心功能

  • 内置高考词汇库：覆盖高中英语 3500 核心词，打开即用，无需上传词表。
  • 卡片式记忆：大字显示单词，点击卡片或按空格即可显示/隐藏中文释义。
  • 顺序与随机模式：支持顺序背诵和随机抽词，一键切换复习方式。
  • 朗读发音：基于 Web Speech API，支持单词朗读、语速调节和语音选择。
  • 自动朗读设置：可开启切换单词时自动朗读、显示释义时自动朗读。
  • 收藏/标为不熟：遇到重点或不会的单词，按 S 或点击星标收藏，便于集中复习。
  • 仅看收藏过滤：开启过滤后只显示已收藏单词，针对性巩固薄弱词汇。
  • 显示释义后自动下一个：可设置延迟时间，自动推进到下一张卡片。
  • 单词列表与搜索：侧滑单词列表支持按英文或中文释义快速搜索跳转。
  • 进度统计：顶部显示当前进度条和第几个 / 总词数。
  • 学习状态本地保存：收藏、设置、释义显示状态均通过 localStorage 保存，刷新不丢失。
  • 快捷键支持：空格/点击显示释义、← → 翻页、R 随机、P 朗读、A 自动朗读、S 收藏、L 列表、G 设置。

使用方式

  1. 打开 高中英语3500词。
  2. 点击卡片或按空格查看释义。
  3. 熟悉的词按 → 或点击"下一个 →"继续；不熟悉的词按 S 收藏。
  4. 需要听发音时，按 P 或点击 "🔊 朗读"。
  5. 想针对性复习时，打开设置开启"仅显示收藏"。
tool english-words vocabulary flashcards 背单词 web-speech-api localstorage education browser

发布

剪贴板备份：浏览器本地剪贴板历史管理工具

剪贴板备份是什么

剪贴板备份是一款纯前端、无需后端的浏览器剪贴板历史管理工具。它支持保存文本、HTML、RTF、图片等多种剪贴板格式，利用浏览器 IndexedDB 本地持久化存储，随时恢复或下载历史内容。

核心功能

  • 多格式剪贴板捕获：支持保存文本、HTML、RTF、URL 列表、PNG / JPEG / GIF / WebP 图片等多种剪贴板格式。
  • 本地持久化存储：所有备份数据通过 IndexedDB 存储在浏览器本地，刷新页面或关闭浏览器后数据不丢失。
  • 多格式预览：支持按格式切换预览，文本、HTML、图片分别渲染，HTML 内容经 DOMPurify 安全过滤。
  • 一键恢复复制：点击复制按钮即可将备份内容还原到系统剪贴板，图片自动转换为 PNG 格式以兼容 Clipboard API。
  • 逐格式下载：每个备份的每种格式均可单独下载为对应文件（txt、html、rtf、png 等）。
  • 相对时间显示：备份时间以"刚刚""5 分钟前""2 小时前"等相对时间展示，直观易读。
  • 全页粘贴支持：不仅可以在粘贴区域粘贴，在页面任意位置按 Ctrl+V 均可触发备份。
  • 批量清空：支持一键删除所有备份，操作前需确认，防止误删。

使用方式

  1. 打开 剪贴板备份。
  2. 点击页面粘贴区域并按 Ctrl + V 粘贴内容，或在页面任意位置直接粘贴。
  3. 备份自动保存并显示在列表中，可预览、复制或下载。
  4. 点击 清空全部 可删除所有历史备份。
tool clipboard backup browser indexeddb localstorage clipboard-api dompurify javascript
发布

Markdown 渲染器：在线 Markdown 转 HTML 工具

Markdown 渲染器是什么

Markdown 渲染器是一款纯前端的在线 Markdown 转 HTML 工具。它调用 GitHub Markdown API 进行渲染，支持 GitHub Flavored Markdown (GFM) 标准，输出干净的 HTML 代码和实时预览，无需安装任何软件，打开浏览器即可使用。

核心功能

  • GitHub API 渲染：调用 GitHub 官方 Markdown API，渲染结果与 GitHub 页面保持一致。
  • GFM 模式切换：支持标准 Markdown 和 GitHub Flavored Markdown 两种模式，一键切换。
  • 实时预览：渲染后的结果即时显示在预览区，包括代码高亮、表格、引用块等样式。
  • 自动清理 HTML：可选清理隐藏元素（aria-hidden、nofollow 等），整理 heading 结构，输出更干净的 HTML。
  • 自动生成目录：根据文章中的 h2-h6 标题自动提取并生成可点击的目录导航。
  • 复制 HTML：一键复制清理后的 HTML 源码，方便粘贴到博客或编辑器中。
  • 复制富文本：一键复制带格式的富文本，可直接粘贴到 Word、Notion、邮件等支持富文本的地方。
  • 自动保存：输入内容自动保存到浏览器 localStorage，刷新页面不丢失。

使用方式

  1. 打开 Markdown 渲染器。
  2. 在编辑区粘贴需要渲染的 Markdown 文本。
  3. 根据需要勾选"使用 GitHub Flavored Markdown (GFM)"。
  4. 点击渲染按钮，预览区和 HTML 输出区会同步更新。
  5. 点击复制 HTML或复制富文本获取渲染结果。
tool markdown 在线工具 github-flavored-markdown github-api html converter localstorage
发布

高中英语词汇速记：卡片式背单词与复习工具

高中英语词汇速记是什么

高中英语词汇速记是一款纯前端浏览器背单词工具，专为高考英语词汇复习设计。它采用卡片式翻转记忆，支持单词搜索、朗读、已会/未会标记、随机顺序和进度统计，所有学习状态保存在浏览器本地，无需安装、无需上传。

核心功能

  • 内置高考词汇库：覆盖高中英语核心词汇，打开即用。
  • 卡片式记忆：大字显示单词，点击或按 H 键显示/隐藏中文释义。
  • 搜索跳转：顶部搜索框支持按英文单词或中文释义快速定位。
  • 朗读发音：基于 Web Speech API，点击单词或按空格即可朗读，支持语速调节和语音选择。
  • 已会/未会标记：按 K 标记已会、按 M 标记未会，分类管理学习进度。
  • 学习模式过滤：设置面板支持切换"全部""仅未会""仅已会"三种学习模式。
  • 随机顺序：按 S 或点击随机按钮打乱词汇顺序，强化记忆。
  • 自动朗读：开启自动模式后，切换单词自动朗读，解放双手。
  • 字母筛选：设置面板可按首字母筛选词汇，针对性复习某字母开头的单词。
  • 进度统计：顶部实时显示当前进度、已会数量和未会数量。
  • 学习状态本地保存：标记、设置、模式均通过 localStorage 保存，刷新不丢失。
  • 快捷键支持：空格朗读、← → 翻页、H 显隐释义、K 已会、M 未会、S 随机、A 自动、/ 搜索。

使用方式

  1. 打开 高中英语词汇速记。
  2. 查看单词，不确定释义时按 H 或点击卡片显示中文。
  3. 熟悉的词按 K 标记已会，不熟悉的词按 M 标记未会。
  4. 需要听发音时按空格或点击单词/播放按钮。
  5. 想针对性复习未会单词时，打开设置切换为"仅未会"模式。
tool english-words vocabulary flashcards 背单词 web-speech-api localstorage education browser

发布

坦克大战：纯前端经典坦克射击游戏

坦克大战是什么

坦克大战是一款纯前端运行的经典坦克射击游戏，基于 HTML5 Canvas 构建。玩家控制坦克消灭所有敌人、保护基地，采用关卡制推进，每关敌人数量和强度逐渐增加，支持道具收集和丰富的自定义配置。

核心功能

  • 经典关卡制玩法：消灭所有敌人即可进入下一关，每关难度递增。
  • 6 种道具系统：生命+1、火力提升（散射穿甲弹）、速度提升、护盾、炸弹（全屏清敌）、冻结敌人。
  • 完整音效系统：基于 Web Audio API 合成射击、爆炸、移动、通关、游戏结束等音效。
  • 自定义游戏配置：支持调整玩家速度、射击冷却、初始生命、敌人数量与速度、道具生成间隔、地图元素数量等参数。
  • 实时侧边栏状态：显示分数、关卡、生命值（心形）、敌人进度条、活跃道具计时、游戏时间、历史最高分。
  • 暂停与音效控制：游戏中可随时暂停/继续，一键开关音效。
  • 本地最高分记录：通过 localStorage 保存历史最高分，刷新不丢失。
  • 响应式布局：适配不同屏幕尺寸，三栏布局自动调整为纵向排列。

操作说明

  • WASD / 方向键：控制坦克移动
  • 空格键：发射子弹
  • 回车键：开始游戏 / 重新开始
  • P 键：暂停 / 继续游戏
  • M 键：开关音效

得分规则

  • 击毁敌人坦克：100 分
  • 通关奖励：500 分
  • 道具得分：20 分
  • 基地被摧毁：游戏结束

技术栈

  • HTML5 Canvas
  • JavaScript（原生，无框架依赖）
  • Web Audio API（音效合成）
  • localStorage（最高分持久化）
  • 无后端、无依赖、纯静态页面
tool game tank-battle browser canvas html5-canvas web-audio-api localstorage javascript