五子棋网页开发

后端

分为python和c++部分

python后端

调用c++并与网页交互

1. 网页交互： flask框架¹；

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)
@app.route('/')
def index():
    return render_template("/web/chess.js")


@app.route('/start_game')

def start_game():
    global board
    global turn
    global ai0, ai1

    turn = 0
    board = Board()
    a1 = ('human')
    b1 = ["./baseline"]
    ai0, ai1 = AI(a1, 0), AI(b1, 1)
    try_init(ai0, ai1)
    return "游戏开始！"
@app.route('/send_message', methods=['GET'])
def send_message():
    message_get = ""
    message_get = request.args['message']

    global a, b
    global ai0
    global board
    global turn
    ++turn
    tmp = message_get.split()
    a = int(tmp[0])
    b = int(tmp[1])
    print(a)
    print(b)
    a, b = ai0.action(a, b)
    board.action(0, turn, a, b)

    return "收到消息"

@app.route('/ai0_change_to_json', methods=['GET'])
def ai0_change_to_json():
    global a, b
    global board
    global turn
    global ai1
    global ai0

    
    if turn == 1:
        a, b = ai0.action(-1, -1)
    else:
         a, b = ai0.action(a, b)
    ++turn
    board.action(0, turn, a, b)
    print(a)
    print(b)
    print("hh");
    message_back = "".join(str(a) + " " + str(b))
    message_json = {"message": message_back}

    return jsonify(message_json)

2. 调用c++

class AI:
    def __init__(self, path, id):
        self.path = path
        if path == 'human':
            self.human = 1
        else:
            self.human = 0
        self.id = id

    def send(self, message):
        value = str(message) + '\n'
        value = bytes(value, 'UTF-8')
        self.proc.stdin.write(value)
        self.proc.stdin.flush()

    def receive(self):
        return self.proc.stdout.readline().strip().decode()

    def init(self):
        if self.human == 0:
            self.proc = subprocess.Popen(self.path,
                                         stdin=subprocess.PIPE,
                                         stdout=subprocess.PIPE)
            self.send(self.id)
            self.name = self.receive()

    def action(self, a, b):
        if self.human == 1:
            value = str(a) + str(b)
        else:
            self.send(str(a) + ' ' + str(b))
            value = self.receive().split(' ')
        return int(value[0]), int(value[1])

c++部分

主要算法评估函数，α-β剪枝，置换表（似乎没有优化）
伪代码：

int AlphaBeta(int depth, int alpha, int beta) {
　if (depth == 0) {
　　return Evaluate();
　}
　GenerateLegalMoves();
　while (MovesLeft()) {
　　MakeNextMove();
　　val = -AlphaBeta(depth - 1, -beta, -alpha);
　　UnmakeMove();
　　if (val >= beta) {
　　　return beta;
　　}
　　if (val > alpha) {
　　　alpha = val;
　　}
　}
　return alpha;
}

评估函数多种多样：如字符串匹配，空连子数

vector<std::pair<string, int>> patterns = {
    {"11111", 50000},
    {"011110", 4320},
    {"011100", 720},
    {"001110", 720},
    {"011010", 720},
    {"010110", 720},
    {"11110", 720},
    {"01111", 720},
    {"11011", 720},
    {"10111", 720},
    {"11101", 720},
    {"001100", 120},
    {"001010", 120},
    {"010100", 120},
    {"000100", 20},
    {"001000", 20},
};

enum ChessType
{
    live_Five = 100000,
    live_Four = 10000,
    sleep_Four = 1000,
    live_Three = 1000,
    live_Two = 100,
    sleep_Three = 100,
    live_One = 10,
    sleep_Two = 10,
    sleep_One = 1,
    unknown = 0,
};

前端

主要为网页部分

html

 $.ajax({
        url: "http://127.0.0.1:5000/start_game"
    })
 $.getJSON("http://127.0.0.1:5000/ai1_change_to_json", async = false, function (data) {
            var tmp = data.message.split(" ");
            var i = Number(tmp[0]);
            var j = Number(tmp[1]);
            ctx.beginPath();
            if (!flag) {
                array[i][j] = 0;
                ctx.fillStyle = "white";
            }
            else {
                array[i][j] = 1;
                ctx.fillStyle = "black";
            }
            ctx.arc(dx + j * 40, dy + i * 40, 16, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.fill();
            ctx.closePath();

            analyse(j, i, flag);
            flag = !flag;
        });

交互注意事项

1. 跨域请求解决：使用插件
   
   2.flask环境配置
   虚拟环境和选项配置
   创建文件.flaskenv并写入

FLASK_APP=app.py 
FLASK_ENV=development

---

1. https://dormousehole.readthedocs.io/en/latest/?tdsourcetag=s_pctim_aiomsg ↩︎