前言

  五子棋是一种古老而受欢迎的棋类游戏，本博客将介绍如何使用前端和算法接口来制作一个五子棋游戏。

  此次实战项目包含项目的所有代码、教学的系列博客，分别放在公众号、CSDN，以便广大读者能够更好地学习、实践与二开。

## 项目技术栈

  前端：Web基础知识、JQuery、AJAX、响应式设计；
  后端算法接口：Python、Flask库、Numpy库、博弈树极大极小值alpha-beta剪枝算法、Python项目部署（Windows平台打包exe、Linux平台部署服务）

## 项目可配置性

  · 支持只使用后端接口服务，界面自定义
  · 接口支持win、linux平台
  · 接口提供电脑攻击权重设置、棋盘大小、电脑递归深度设置
  · 前端页面支持响应式设计
  · 前端页面支持棋盘大小、背景、线宽、行距自适应配置
  · 提供五子棋“悔棋”功能，提供难度选择功能（只需要修改递归深度）

---

博客目录

  【五子棋实战】第1章 项目架构与开发思路
  【五子棋实战】第2章 博弈树负值极大alpha-beta剪枝算法
  【五子棋实战】第3章 算法包装成第三方接口

---

项目预览

  本项目自适应各种设备屏幕大小，电脑端与手机端效果如下，支持更多自定义操作：

---

项目代码获取

  回复

  本项目的文件结构如下：

  Gobang-api存放接口代码；Gobang-ui存放前端界面代码。

---

项目架构

## 架构：前端页面 + 算法接口

  为了实现一个完整的五子棋游戏，选择采用前端页面和算法接口相结合的架构。前端负责展示游戏画面和用户交互，而算法接口则负责实现五子棋的核心算法。

  目的是开发出一个前端页面和算法接口弱耦合性的项目，只要开发出一个后端接口，每次输入棋盘的值，接口就可以返回下一步要下棋的位置。这样大家可以自定义自己的前端页面，不必局限于语言，界面用QT、Web、Python做都可以。

## 前端页面

  技术选型：主要用Web基础写页面，五子棋绘图用的是canvas画布。额外注意一下响应式设计。

## 算法接口

  预期目标：以接口访问的形式去获取下一步应该落子的坐标。要无状态，就是说算法里面的一些变量不依赖棋局的进行一次次保存，而是每次输入一个棋局，它去计算当前最优点返回。

  输入输出：输入就是棋盘值，一个二维数组，每个位置存的值表示三种状态：黑、白、空。输出可能会多一些，但是最主要的就是下一步落子的x、y坐标，可能还会有当前的玩家是谁、棋局step等等，这个我们会在后续接口设计的章节里面详细介绍。

  封装接口：当算法设计好之后，我们期望能把它部署到服务器，作为一个第三方去调用，甚至你可以去提供按次收费的五子棋第三方服务。

  接口部署：接口开发好了之后，需要使用，可以在本地使用，也可以部署到服务器。所以还会讲解如何在Windows、Linux平台部署接口。

  技术选型：这种轻量级的算法，首先排除Java；C++应该是首选但是我不会；JS是次首选但是开放成接口不方便，而且我们的算法是很吃CPU的，JS性能也不好；最后考虑使用Python，写法简单，开放接口简单，部署简单。

---

开发思路

  在确定好项目的架构和技术选型之后，我们需要拆分任务，明确开发思路，给自己排期：

  1、了解博弈树极大极小值alpha-beta剪枝算法，代码实现；

  2、将算法包装成第三方接口的形式；

  3、实现接口在Win、Linux的部署；

  4、开发前端页面，注意响应式、面向对象设计、可配置性；

  5、实现游戏的业务逻辑并进行联调，完成五子棋游戏制作；