5 篇文章带有标签 “web-audio-api”

发布

中国象棋：浏览器本地人机对弈游戏

中国象棋是什么

中国象棋是一款在浏览器中直接运行的纯前端人机对弈游戏，无需安装、无需后端，打开网页即可与电脑 AI 对弈。游戏完整实现象棋规则，棋盘采用 HTML5 Canvas 绘制木质风格界面，支持桌面与移动端触屏操作。

核心功能

  • 人机对弈：玩家可选择执红先行或执黑后手，AI 即时应招。
  • 三档 AI 难度：入门、业余、高手，对应搜索深度 2 / 3 / 4 层。
  • Minimax + Alpha-Beta 引擎：AI 基于 Minimax 搜索与 Alpha-Beta 剪枝，结合棋子价值与位置评估表决策。
  • 完整规则判定：马蹩腿、象塞眼、炮隔子吃、兵卒过河、九宫限制、将帅照面（飞将）等规则全部实现。
  • 终局判定：自动识别将军、将死与困毙（无棋可走），并弹出结算提示。
  • 走法提示：点选棋子后高亮显示所有合法落点，可吃子目标以红圈标出。
  • 中文棋谱：自动以「炮二平五」式中文记谱法记录双方着法，吃子附带标注。
  • 悔棋 / 认输 / 提示：支持悔棋（回退一回合两步）、一键认输，以及让 AI 推荐当前最佳走法。
  • 对局信息：实时显示当前回合、双方用时与总步数。
  • 本地音效合成：使用 Web Audio API 实时合成走子与吃子音效，可随时开关。
  • 响应式布局：桌面端棋盘居中、左右信息栏；窄屏自动堆叠，手机触屏也能流畅对弈。

使用方式

  1. 打开 中国象棋。
  2. 在「设置」中选择执子方（执红先行 / 执黑后手）与 AI 难度。
  3. 点击己方棋子查看合法走法，再点击目标位置落子。
  4. 需要时使用「悔棋」「提示」按钮，或对局结束后点击「再来一局」。
ai browser chess chinese-chess game html5-canvas minimax tool web-audio-api

用单文件 HTML 写一个能对弈的中国象棋 AI——从规则引擎到 Alpha-Beta 剪枝

一次「中国象棋 + 纯前端 + 自写搜索算法」的完整实践。零依赖、零构建，双击即玩。本文记录规则引擎、AI 搜索、Canvas 渲染的设计思路，以及布局调试中踩过的几个值得记住的坑。

WorkBuddy + GLM-5.2 开发的，花了 200 积分。开发出来第一个版本并没有花多少钱，问题是反复修改一些小问题，积分用量就上来了，感觉缓存并没有起作用。

一、需求与技术选型

需求很朴素：一款可以人机对弈的中国象棋 Web 应用。

权衡后定的方案：

维度 选择 理由
形态 单文件 index.html 双击即可运行，无需构建、无需服务器，便于分享
技术栈 原生 HTML5 + CSS3 + ES6 零依赖，引擎/AI/UI 全在一个文件里也能保持清晰
棋盘渲染 Canvas 棋盘线条、楚河汉界、九宫斜线用 Canvas 绘制最直接
AI 算法 Minimax + Alpha-Beta 剪枝 经典、可控、纯前端可跑，难度由搜索深度决定

架构上坚持一点：引擎层（棋盘状态 + 走子规则 + AI）与 UI 层（渲染 + 交互）彻底解耦。引擎函数只操作棋盘数组，不碰 DOM，方便单独测试和替换。

二、棋盘数据结构

中国象棋是 10 行 9 列的交叉点棋盘。用一个二维数组表示：

aibrowserchesschinese-chessgamehtml5-canvasminimaxtoolweb-audio-api

坦克大战（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

发布

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

坦克大战是什么

坦克大战是一款纯前端运行的经典坦克射击游戏，基于 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