黄金点游戏程序开发（四）扩展功能开发，在网站上给实现交互式黄金点小游戏

本文链接：https://blog.csdn.net/m0_44987668/article/details/110393566

黄金点游戏程序开发（四）扩展功能开发，在网站上给实现交互式黄金点小游戏

1.实现方法：

拓展功能采取python flask 后端开发与html前端开发，实现用户从页面输入用户名数据，后端处理后返回游戏结果，从而实现多机交互式游戏。

2.接口设计：

2.1 登录接口：

访问登陆界面，用户可输入用户名和数字

@app.route('/login')
def login():
    return render_template('input.html')

2.2 中间接口：

接收数据，并且等待所有用户都输入数据

@app.route('/input')
def input():
    global cou
    name[cou] = request.args.get('username')
    num[cou] = request.args.get('num')
    cou += 1
    return render_template('link.html')

2.3处理接口：

对接收到所有用户的数据进行逻辑处理，得到黄金点游戏结果，并将数据返回到前端显示

@app.route('/link')
def link():
    global cou
    if cou<3:
        return render_template('link.html')
    elif cou == 3:
        Gnum = 0
        distance = []
        a = 3
        cou += 1
        for i in range(a):
            Gnum += float(num[i])
        Gnum = (Gnum * 0.618) / a
        print(Gnum)
        for i in range(a):
            dis = abs(float(num[i]) - Gnum)
            distance.append(dis)
        close = distance.index(min(distance))
        far = distance.index(max(distance))
        posc = close + 1
        posf = far + 1
        score[posc - 1] += int(a)
        score[posf - 1] -= 2
        for i in range(a):
            print("玩家" + str(i) + "得分为:" + str(score[i]))
    dict1={}
    dict2={}
    for i in range(a):
        dict1[i] = num[i]
        dict2[i] = name[i]
    return render_template('result.html',name_dict=dict2,num_dict=dict1)

html前端简易设计（稍后还会进行改进，此处只是简单的测试设计）：

3.1登陆界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>黄金点游戏</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
<form method="get" action='/input'>
    <label>输入玩家名称<input type="text" name="username" value=""></label>
    <label>输入数字<input type="number" name="num" value=""></label>
    <input type="submit" value="完成">
</form>
</body>
</html>

3.2 等待界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>黄金点游戏</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
<form method="get" action='/link'>
    <label>已完成输入，等待其他玩家输入</label>
    <input type="submit" value="查看结果">
</form>
</body>
</html>

3.3返回结果界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>黄金点游戏</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
<table>
    {% for v in name_dict.items() %}
        <tr>
            <td>玩家一：{{ v[0][0] }}</td>
            <td>{{ v[1] }}</td>
            <td>{{ v[2] }}</td>
        </tr>
    {% endfor %}
    {% for k in num_dict.items() %}
        <tr>
            <td>{{ k[0][0] }}</td>
            <td>{{ k[1] }}</td>
            <td>{{ k[2] }}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>