Flask猜字游戏字母显示异常求助：刷新丢失更新内容

问题描述 #

• 屏幕中央无法正确显示已猜出/未猜出的字母
• 刷新/gameboard路由后，已更新的显示字母丢失
• 最初用Jinja渲染时，session['correct_letters']总是滞后一个猜测步骤，改用JavaScript更新后问题仍存在

相关代码 #

Python后端代码 #

@app.route('/button', methods=["POST"])
def buttonpress():
    data = request.json
    value = data['value']
    hangman(value, session)
    
    session.modified = True
    
    return jsonify({
        'status': 'success',
        'correct_letters': session['correct_letters'],
        'guessed_letters': session['guessed_letters'],
        'guesses_left': session['guesses_left'],
        'game_over': session['game_over']
    })

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

def hangman(guess, session):
    guesses_left = session['guesses_left']
    guessed_letters = session['guessed_letters']
    correct_letters = session['correct_letters']
    game_over = session['game_over']
    database_word = session['database_word']

    guessed_letters = guessed_letters + guess
    correct_letters = ""
    if guess not in database_word:
        guesses_left -= 1
        session['guesses_left'] = guesses_left
        if guesses_left == 0:
            session['game_over'] = 1
            return game_over

    for letter in database_word:
        if letter in guessed_letters:
            correct_letters += f"{letter} "
        else:
            correct_letters += "_ "

    session['correct_letters'] = correct_letters
    session['guessed_letters'] = guessed_letters
    print("cookie", session['correct_letters'])
    if all(letter in guessed_letters for letter in database_word):
        session['game_over'] = 2

JavaScript前端代码 #

function sendValue(buttonValue) {
    fetch('/button', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ value: buttonValue }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            document.querySelector('#displayedLetters').textContent = data.correct_letters;
        }else {
            console.error('Error processing guess:', data);
        }
    })
}

HTML代码片段 #

<div id="word-guess"><p id="displayedLetters"></p></div>
<div id="letter-guesses">
    <form>
    <button onclick="sendValue(this.value)" class="guess-button" id="a" value ="a">A</button>

问题分析与修复方案 #

1. 刷新后字母丢失问题
   当前/gameboard路由渲染页面时，未从session读取游戏状态初始化显示。修改视图函数传递session数据给模板：

   @app.route('/gameboard')
   def gameboard():
       return render_template('gameboard.html', 
                           correct_letters=session.get('correct_letters', ''),
                           guessed_letters=session.get('guessed_letters', ''),
                           guesses_left=session.get('guesses_left', 6),
                           game_over=session.get('game_over', 0))
   

   同时在HTML中初始化显示内容：

   <div id="word-guess"><p id="displayedLetters">{{ correct_letters }}</p></div>
   

2. session更新滞后问题
   hangman函数中，猜错字母且剩余次数为0时直接return，会跳过后续的状态更新逻辑。调整代码确保所有分支都完成session更新：

   def hangman(guess, session):
       guesses_left = session['guesses_left']
       guessed_letters = session['guessed_letters']
       correct_letters = ""
       game_over = session['game_over']
       database_word = session['database_word']
   
       guessed_letters = guessed_letters + guess
       if guess not in database_word:
           guesses_left -= 1
           session['guesses_left'] = guesses_left
           if guesses_left == 0:
               session['game_over'] = 1
   
       # 无论是否猜错，都更新显示字符串
       for letter in database_word:
           if letter in guessed_letters:
               correct_letters += f"{letter} "
           else:
               correct_letters += "_ "
   
       session['correct_letters'] = correct_letters
       session['guessed_letters'] = guessed_letters
       print("cookie", session['correct_letters'])
       if all(letter in guessed_letters for letter in database_word):
           session['game_over'] = 2
   

3. 按钮默认行为导致页面刷新
   表单内的按钮点击会触发默认提交行为，导致页面刷新丢失状态。修改JS阻止默认行为：

   function sendValue(buttonValue, event) {
       event.preventDefault();
       fetch('/button', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
           },
           body: JSON.stringify({ value: buttonValue }),
       })
       .then(response => response.json())
       .then(data => {
           if (data.status === 'success') {
               document.querySelector('#displayedLetters').textContent = data.correct_letters;
           }else {
               console.error('Error processing guess:', data);
           }
       })
   }
   

   同步修改HTML的点击事件：

   <button onclick="sendValue(this.value, event)" class="guess-button" id="a" value ="a">A</button>
   

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