Tkinter实现10*10井字棋时X/O无法在棋盘格子内居中的问题

问题原因 #

现有代码直接取鼠标点击坐标作为X、O的绘制中心，棋子位置随点击位置变动，无法自动对齐到格子中心。

修复逻辑 #

棋盘单格尺寸为50*50像素，网格起始坐标为(0,50)，将点击坐标换算为对应格子的中心坐标后再绘制棋子，即可实现居中效果，换算步骤如下：

• 计算点击位置所属列索引：col = sur.x // 50
• 计算点击位置所属行索引：row = (sur.y - 50) // 50（减去顶部预留的50像素状态栏高度）
• 换算格子中心坐标：中心x值为col * 50 + 25，中心y值为50 + row * 50 + 25（25为单格边长的一半，即中心偏移量）
• 同步修复原代码根窗口创建顺序错误导致多弹空白窗、网格线缺失、重置不还原回合状态的小问题

修正后完整代码 #

import tkinter

# 优先创建根窗口，避免生成多余空白窗口
root = tkinter.Tk()
p = tkinter.Canvas(width=500, height=550)
p.pack()
a = 0
b = 50
c = 1
p.create_text(100, 10, text='Na rade je kruh', tags="kriz")

# 绘制竖网格线（10*10格子需要11条分隔线）
for i in range(11):
    p.create_line(a, 50, a, 550)
    a += 50
# 绘制横网格线
for i in range(11):
    p.create_line(0, b, 500, b)
    b += 50

def kriz(center_x, center_y):
    # 基于格子中心绘制X，调整偏移量适配格子尺寸
    p.create_line(center_x-15, center_y+15, center_x+15, center_y-15, width=5, tags="m")
    p.create_line(center_x-15, center_y-15, center_x+15, center_y+15, width=5, tags="m")

def kruh(center_x, center_y):
    # 基于格子中心绘制O
    p.create_oval(center_x-15, center_y-15, center_x+15, center_y+15, width=5, tags="l")

def tictactoe(sur):
    global c
    # 过滤棋盘区域外的无效点击
    if sur.x < 0 or sur.x >= 500 or sur.y < 50 or sur.y >= 550:
        return
    # 计算点击位置对应格子的中心坐标
    col = sur.x // 50
    row = (sur.y - 50) // 50
    cx = col * 50 + 25
    cy = 50 + row * 50 + 25

    if c % 2 == 0:
       kriz(cx, cy)
       p.create_text(100, 10, text='Na rade je kruh', tags="kriz")
       p.delete("kruh")
    else:
       kruh(cx, cy)
       p.create_text(100, 10, text='Na rade je krížik', tags="kruh")
       p.delete("kriz")
    c += 1

def zmaz():
    global c
    p.delete("m")
    p.delete("l")
    c = 1 # 重置时同步还原回合计数
    p.create_text(100, 10, text='Na rade je kruh', tags="kriz")
    p.delete("kruh")

p.bind("<Button-1>", tictactoe)
button1 = tkinter.Button(text="reset", command=zmaz)
button1.pack()
tkinter.mainloop()

说明：代码将X/O的绘制偏移量从10调整为15，棋子在50像素边长的格子中显示比例更协调，不会出现贴边的情况。

内容的提问来源于stack exchange，提问作者Adam Slimák