黑白棋（Reversi）游戏

🎮 项目简介

这是一个基于Vue3 + Pinia + Django REST Framework实现的黑白棋游戏，采用前后端分离架构，包含完整的游戏逻辑、AI对战和动画效果。

✨ 主要功能

1. 双人对战模式：支持两位玩家轮流对战
2. AI对战模式：提供两种难度AI对手
   • 初级AI：随机选择合法落子点
   • 中级AI：采用"金角银边"策略，优先占据棋盘角落和边缘
3. 游戏设置：
   • 显示/隐藏提示落子点
   • 切换AI难度

🛠 技术栈

前端

• Vue 3 (Composition API)
• Pinia (状态管理)
• Axios (HTTP请求)
• CSS动画

后端

• Django
• Django REST Framework
• SimpleJWT (认证)

🚀 快速开始

后端运行

pip install -r requirements.txt
python manage.py migrate
python manage.py runserver

前端运行

cd template
npm install
npm run dev

📂 项目结构

后端

|-- chess
|   |-- __init__.py
|   |-- asgi.py
|   |-- settings.py
|   |-- urls.py
|   `-- wsgi.py
|-- db.sqlite3
|-- manage.py
|-- myapp
|   |-- __init__.py
|   |-- admin.py
|   |-- apps.py
|   |-- exceptions.py
|   |-- migrations
|   |   |-- 0001_initial.py
|   |-- models.py
|   |-- serializers.py
|   |-- tests.py
|   |-- urls.py
|   |-- utils
|   |   |-- ai.py
|   |   `-- game_logic.py
|   `-- views.py
`-- template					# 前端
    |-- README.md
    |-- dist

前端

|-- dist
|-- eslint.config.js
|-- index.html
|-- jsconfig.json
|-- package.json
|-- pnpm-lock.yaml
|-- public
|   `-- favicon.ico
|-- src
|   |-- App.vue
|   |-- assets
|   |   |-- base.css
|   |   |-- logo.svg
|   |   `-- main.css
|   |-- components
|   |   `-- icons
|   |       |-- IconCommunity.vue
|   |       |-- IconDocumentation.vue
|   |       |-- IconEcosystem.vue
|   |       |-- IconSupport.vue
|   |       `-- IconTooling.vue
|   |-- main.js
|   |-- router
|   |   `-- index.js
|   |-- stores
|   |   |-- counter.js
|   |   `-- useGame.js
|   `-- views
|       `-- GamePage.vue
`-- vite.config.js

🔧 实现细节

游戏逻辑

• 棋盘使用8x8二维数组表示
• 落子合法性检查：8个方向搜索可翻转棋子
• 胜负判定：游戏结束条件为双方均无合法落子点

AI实现

• 初级AI：从所有合法落子点中随机选择
• 中级AI：金角银边策略，评估函数优先考虑：
  1. 角落位置(最高优先级)
  2. 边缘位置
  3. 内部位置

动画效果

1. 落子动画：使用CSS transform实现缩放效果
2. 翻转动画：通过rotateY 180度实现3D翻转效果
3. 状态管理：使用Pinia跟踪正在动画中的棋子

📝 未来计划

• 增加高级AI（使用Minimax算法）
• 添加在线多人对战功能
• 实现游戏回放功能
• 增加排行榜系统