wolf-eat-sheep：基于 Angular + Canvas 的狼吃羊策略游戏

wolf-eat-sheep 是一个基于 Angular 和 HTML5 Canvas 开发的经典策略棋盘游戏。玩家控制狼和羊在棋盘上进行对抗，考验逻辑思维和策略规划能力。该项目采用 TypeScript 编写，使用 Angular 15 框架构建，并已部署到 GitHub Pages 供在线体验。

项目简介

wolf-eat-sheep（狼吃羊）是一款传统的策略棋盘游戏，由 ZTFtrue 开发并开源。游戏在 8x8 棋盘上进行，狼方和羊方轮流移动，通过策略性地移动棋子来达成各自的目标。该项目在 GitHub 上获得 10 个 stars，采用 MIT 许可证开源。

核心特性

• 经典棋盘玩法：基于传统狼吃羊游戏规则，简单易上手
• Canvas 渲染：使用 HTML5 Canvas 实现流畅的游戏画面
• Angular 框架：基于 Angular 15 构建，代码结构清晰
• 响应式设计：适配不同屏幕尺寸，支持移动端访问
• 在线体验：已部署到 GitHub Pages，无需安装即可游玩
• 开源免费：MIT 许可证，可自由修改和分发

技术栈

安装指南

前置要求

• Node.js >= 16
• npm 或 yarn 包管理器

本地运行

# 克隆仓库
git clone https://github.com/ZTFtrue/wolf-eat-sheep.git
cd wolf-eat-sheep

# 安装依赖
npm install

# 启动开发服务器
npm start
# 或
ng serve --host 0.0.0.0 --port 4200

开发服务器启动后，访问 http://localhost:4200 即可游玩。

构建生产版本

# 构建生产版本
npm run build
# 或
ng build --configuration production

构建输出位于 dist/ 目录。

部署到 GitHub Pages

项目已配置 angular-cli-ghpages，可一键部署：

ng deploy --base-href 'https://ztftrue.github.io/wolf-eat-sheep/'

游戏规则

基本规则

1. 棋盘：8x8 方格棋盘
2. 棋子：
   • 狼方：1 只狼（通常位于棋盘一角）
   • 羊方：多只羊（分布于棋盘其他位置）
3. 移动：棋子沿对角线方向移动一格
4. 胜利条件：
   • 狼方：吃掉所有羊或使其无法移动
   • 羊方：将狼围困使其无法移动

策略要点

• 狼方需要主动出击，利用速度优势逐个击破
• 羊方需要协同防守，通过数量优势围堵狼

项目结构

wolf-eat-sheep/
├── e2e/                    # 端到端测试
├── screen-shot/            # 项目截图
├── src/
│   ├── app/               # 应用主代码
│   ├── assets/            # 静态资源
│   ├── environments/      # 环境配置
│   └── ...
├── angular.json           # Angular 配置
├── package.json           # 依赖配置
└── README.md             # 项目说明

在线体验

无需安装，直接访问以下链接即可游玩：

点击在线游玩

项目链接

• GitHub 仓库：https://github.com/ZTFtrue/wolf-eat-sheep
• 在线演示：https://ztftrue.github.io/wolf-eat-sheep/
• 许可证：MIT License

贡献者

• ZTFtrue - 主要开发者
• hu-qi - 贡献者

注意事项

• 项目使用 Angular 15，建议使用 Node.js 16+ 环境
• 部分依赖包版本较旧，如需升级请注意兼容性测试
• 游戏逻辑基于 Canvas 绘制，请确保浏览器支持 HTML5 Canvas