Tkinter游戏开发疑问：分数更新时数字重叠而非替换

问题背景 #

我正在高中计算机科学课上制作一款游戏，期望每次按下A键时分数增加。以下是我的Tkinter代码，但分数更新时，之前的分数数字仍残留在GUI界面上，新分数和旧分数重叠显示了：

from Tkinter import *
root = Tk()
score = 0
canvas = Canvas(root, height=600, width=600, relief=RAISED, bg='brown')
canvas.grid()
canvas.grid(row=0, column=1)
img = PhotoImage(file='C:\Users\s27538750\Desktop\Create_Task\Bench- Press.gif')
img2 = PhotoImage(file='C:\Users\s27538750\Desktop\Create_Task\Bench- Press-Up.gif')
canvas.create_image(300, 300, image=img)
canvas.create_text(300, 50, text= 'SWOLE PEEP SIMULATOR!', font=0)
from Tkinter import *  # 重复导入，无意义
def key(event):
    global score
    canvas.create_image(300, 300, image=img2)
    score += 1
    canvas.create_text(70, 50, text= score)  # 问题核心所在
def callback(event):
    canvas.focus_set()
canvas.bind("a", key)
canvas.bind("<Button-1>", callback)
canvas.pack()  # 和之前的grid布局冲突
def key(event):  # 重复定义函数，会覆盖上一个key函数
    canvas.create_image(300, 300, image=img)
canvas.bind("b", key)
canvas.create_text(50, 50, text= 'Score: ')
root.mainloop()

问题原因 #

你每次调用canvas.create_text(70, 50, text=score)时，都是在画布上新增一个全新的文本元素，而非修改已经存在的分数文本。旧的文本元素不会自动被删除，所以每按一次A键，就会多一个数字叠在原位置，最终呈现出重叠效果。

另外你的代码还有几个小bug：

• 重复导入了Tkinter，一次导入就足够
• 重复定义key函数，第二个key会完全覆盖第一个，导致按A键的功能直接失效
• 同时使用canvas.grid()和canvas.pack()，Tkinter中一个组件只能用一种布局管理器，这会导致布局异常

解决方案 #

正确的思路是：先创建一次分数文本并保存它的ID，之后每次更新分数时，直接修改这个已存在元素的文本内容。

具体修改步骤：

1. 初始化界面时创建分数文本，将返回的元素ID存入变量（比如score_text_id）
2. 在按键响应函数中，用canvas.itemconfig(score_text_id, text=score)更新文本，不再调用create_text
3. 修复代码中的重复定义、布局冲突等问题

修改后的完整代码：

from Tkinter import *

root = Tk()
score = 0

# 初始化画布，仅使用一种布局管理器
canvas = Canvas(root, height=600, width=600, relief=RAISED, bg='brown')
canvas.grid(row=0, column=1)

# 用原始字符串处理路径，避免转义字符报错
img = PhotoImage(file=r'C:\Users\s27538750\Desktop\Create_Task\Bench- Press.gif')
img2 = PhotoImage(file=r'C:\Users\s27538750\Desktop\Create_Task\Bench- Press-Up.gif')

# 创建界面元素
canvas.create_image(300, 300, image=img)
canvas.create_text(300, 50, text='SWOLE PEEP SIMULATOR!', font=("Arial", 16))
canvas.create_text(50, 50, text='Score: ')
# 初始化分数文本并保存ID
score_text_id = canvas.create_text(70, 50, text=score)

def handle_a_key(event):
    global score
    canvas.create_image(300, 300, image=img2)
    score += 1
    # 更新已存在的分数文本，而非新建
    canvas.itemconfig(score_text_id, text=score)

def handle_b_key(event):
    canvas.create_image(300, 300, image=img)

def callback(event):
    canvas.focus_set()

# 分开绑定A、B键的处理函数，避免覆盖
canvas.bind("a", handle_a_key)
canvas.bind("b", handle_b_key)
canvas.bind("<Button-1>", callback)

root.mainloop()

额外提示 #

• 用r''原始字符串处理文件路径，能避免反斜杠被识别为转义字符导致的报错
• 给字体指定样式（比如("Arial", 16)），可以让界面更美观
• 分开定义不同按键的处理函数，能避免函数覆盖的问题

这样修改后，每次按A键只会更新原有分数文本的内容，旧数字就不会再残留重叠了！

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