基于Flask整合独立Python游戏至网站的技术求助

代码审查问题 #

• 错误将游戏文件夹设为template_folder：Flask的template_folder仅用于存放HTML模板文件，无法加载游戏逻辑代码，这样的设置既会打乱模板路径，也无法调用游戏功能。
• 现有路由无游戏交互逻辑：当前代码仅做了简单的模板渲染，没有实现任何与游戏数据交互的接口，无法支撑游戏的交互性。

正确整合步骤 #

1. 调整文件夹结构 #

将游戏文件夹作为Flask项目的子目录，规范结构如下：

Flask项目文件夹/
├── app.py
├── templates/
│   └── index.html
├── static/  # 存放游戏静态资源：图片、音频等
│   └── [游戏资源文件]
└── game/  # 原游戏文件夹Folder X
    ├── game_core.py  # 游戏核心逻辑文件
    └── [其他游戏代码/资源]

2. 修改Flask后端代码 #

导入游戏模块，通过API接口实现游戏逻辑的调用：

from flask import Flask, render_template, jsonify, request
from game.game_core import init_game, process_player_action  # 导入游戏核心函数

app = Flask(__name__)

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

# 初始化游戏接口
@app.route('/game/init', methods=['GET'])
def start_game():
    initial_state = init_game()
    return jsonify(initial_state)

# 处理玩家操作接口
@app.route('/game/action', methods=['POST'])
def handle_action():
    action_data = request.json
    updated_state = process_player_action(action_data)
    return jsonify(updated_state)

if __name__ == '__main__':
    app.run(debug=True)

3. 前端页面实现交互 #

在index.html中通过JavaScript与后端API通信，渲染游戏状态并处理玩家操作：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Blockchain Breakdown Game</title>
</head>
<body>
    <h1>Blockchain Breakdown Game</h1>
    <div id="game-status"></div>
    <button id="start-btn">开始游戏</button>
    <input type="text" id="action-input" placeholder="输入操作指令">
    <button id="submit-btn">提交操作</button>

    <script>
        // 初始化游戏
        document.getElementById('start-btn').addEventListener('click', async () => {
            const res = await fetch('/game/init');
            const gameState = await res.json();
            document.getElementById('game-status').textContent = `游戏状态：${JSON.stringify(gameState)}`;
        });

        // 提交玩家操作
        document.getElementById('submit-btn').addEventListener('click', async () => {
            const action = document.getElementById('action-input').value;
            const res = await fetch('/game/action', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ action: action })
            });
            const newState = await res.json();
            document.getElementById('game-status').textContent = `更新后状态：${JSON.stringify(newState)}`;
        });
    </script>
</body>
</html>

4. 核心注意事项 #

• 封装游戏逻辑：将游戏的状态管理、操作处理等核心逻辑封装成独立函数/类，与Flask路由代码解耦，便于维护和扩展。
• 前后端数据格式：统一使用JSON格式传递游戏状态数据，确保前后端数据交互的一致性。
• 静态资源管理：游戏所需的图片、音频等静态资源必须放在Flask的static目录下，通过{{ url_for('static', filename='xxx.png') }}在模板中引用。

内容的提问来源于stack exchange，提问作者veakin