用 Tkinter 实现简单的 15 puzzle 我在学习 Tkinter 时，想用它实现一些简单的图形化界面。我用

背景

TkDocs tutorial 里介绍了 $\text{Tkinter}$ ，其中有 A First (Real) Example 一文，这篇文章里有一个使用 $\text{Tkinter}$ 生成图形化界面的简单例子。我想在那篇文章的基础上实战一下，于是想到可以实现简单的 $\text{15 puzzle}$ 。15 puzzle 是 Wolfram 中关于该游戏的介绍。在这个链接里可以看到 $\text{15 puzzle}$ 的示例效果。

正文

需要解决哪些问题

整体布局

整体布局的草图如下 ⬇️ （有些细节并不准确，这里只是展示一下大意）

一共需要 $2$ 个 $\text{frame}$ ⬇️

靠上的 $\text{frame}$ 用于展示所有按钮，其中包括
- $15$ 个数字按钮
- $1$ 个表示空位置的按钮
靠下的 $\text{frame}$ 用于展示提示信息

如何生成最终局面？

在最终局面里，所有数字按钮都在正确的位置上 ⬇️

为了方便后续访问，我们可以把各个 $\text{button}$ 保存在 $\text{button\_dict}$ 变量里。相关的代码如下 ⬇️

n = 4
button_dict = {}
empty_button_position = (n - 1, n - 1)
click_cnt = 0

def to_original_text(row, col):
    if (row, col) == (n - 1, n - 1):
        return ''
    return str(row * n + col + 1)

def add_button(row, col):
    text = to_original_text(row, col)
    button = ttk.Button(mainframe, text=text, command=lambda: button_command((row, col)))
    button.grid(column=col, row=row, sticky='WE')
    button_dict[(row, col)] = button

def initialize_buttons():
    for r in range(n):
        for c in range(n):
            add_button(r, c)

$\text{initialize\_buttons}$ 方法负责将各个按钮放在正确的位置上
$\text{add\_button}$ 方法负责在指定的位置 $\text{(row, col)}$ 上放置一个对应的按钮
$\text{to\_original\_text}$ 方法负责生成指定位置的按钮对应的文本

如何生成随机开局？

我们可以对 $16$ 个按钮执行 $\text{shuffle}$ 操作，从而得到随机的开局。但是 15 puzzle 里提到，并非所有的开局都有解。于是我想到，可以从最终局面倒着来（这样可以保证用户看到的局面总是有解的）。具体操作是这样的：最终局面是这样的 ⬇️

我们可以随机点击与空位置相邻的某个按钮。例如，如果点击 $12$ 的话，得到的结果会是 ⬇️

这样操作多次之后，就可以得到一个看似“随机”的开局。一个可能的开局如下 ⬇️

如何交换两个相邻的 $\text{button}$ ?

我们并不需要真的交换两个 $\text{button}$ 的指针或者引用。只要交换两个 $\text{button}$ 的 $\text{text}$ ，就会造成 “这两个 $\text{button}$ 被交换了” 的错觉。相关的代码如下 ⬇️ 请注意，表示 “空位置” 的那个 $\text{button}$ 总是会参与 “交换” 操作。

click_cnt = 0
game_started = False
delta_position_candidates = [(-1, 0), (1, 0), (0, -1), (0, 1)]

def update_message(user_win):
    if user_win:
        message_label['text'] = 'You won after clicking %d times' % click_cnt
    else:
        message_label['text'] = 'You have clicked %d times' % click_cnt

def update_click_cnt():
    global click_cnt
    click_cnt += 1
    
def swap_empty_button(normal_button_position):
    normal_button_text = find_button_text(normal_button_position)
    update_button_text(empty_button_position, normal_button_text)
    update_button_text(normal_button_position, '')

    update_empty_button_position(normal_button_position)

    if not game_started:
        return
    update_click_cnt()
    user_win = all_buttons_at_original_position()
    if user_win:
        for button_position in button_dict:
            disable_button(button_position)
    update_message(user_win)

def button_command(normal_button_position):
    row, col = normal_button_position
    for candidate in delta_position_candidates:
        delta_row, delta_col = candidate
        target_button_position = (row + delta_row, col + delta_col)
        if target_button_position != empty_button_position:
            continue
        swap_empty_button(normal_button_position)

$\text{button\_command}$ 方法负责将一个按钮 $button_{normal}$ 和表示空位置的按钮 $button_{empty}$ 进行交换（如果这两个按钮相邻的话），这个方法是各个按钮的回调方法
$\text{swap\_empty\_button}$ 方法负责将以下两者进行“交换”（这两个按钮一定是相邻的）
- 指定位置的按钮
- 表示空位置的按钮
$\text{update\_click\_cnt}$ 方法用于更新 $\text{click\_cnt}$ 这个计数值（它是一个全局变量）
$\text{update\_message}$ 方法负责更新展示信息

基于以上分析，再结合 TkDocs tutorial 里介绍的 $\text{Tkinter}$ 的知识，可以写出完整的代码（trae 对我完成代码提供了不少帮助，但是重构和关键思路还是要靠自己）

完整的代码

from tkinter import *
from tkinter import ttk
import random

root = Tk()
root.title("15 Puzzle")

mainframe = ttk.Frame(root)
mainframe.grid(column=0, row=0, sticky=W)
mainframe['padding'] = 5

messageframe = ttk.Frame(root)
messageframe.grid(column=0, row=1, sticky=W)
messageframe['padding'] = 5

n = 4
button_dict = {}
empty_button_position = (n - 1, n - 1)
click_cnt = 0
game_started = False

message_label = ttk.Label(messageframe, text='')
message_label.grid(column=0, row=0, sticky=W)

delta_position_candidates = [(-1, 0), (1, 0), (0, -1), (0, 1)]

def is_inside_board(row, col):
    return row >= 0 and row < n and col >= 0 and col < n

def update_button_text(button_position, text):
    button_dict[button_position]['text'] = text

def disable_button(button_position):
    state = ['disabled']
    button_dict[button_position].state(state)

def update_empty_button_position(new_position):
    global empty_button_position
    empty_button_position = new_position

def all_buttons_at_original_position():
    for row in range(n):
        for col in range(n):
            if find_button_text((row, col)) != to_original_text(row, col):
                return False
    return True

def find_button_text(button_position):
    return button_dict[button_position]['text']

def update_click_cnt():
    global click_cnt
    click_cnt += 1

def swap_empty_button(normal_button_position):
    normal_button_text = find_button_text(normal_button_position)
    update_button_text(empty_button_position, normal_button_text)
    update_button_text(normal_button_position, '')

    update_empty_button_position(normal_button_position)

    if not game_started:
        return
    update_click_cnt()
    user_win = all_buttons_at_original_position()
    if user_win:
        for button_position in button_dict:
            disable_button(button_position)
    update_message(user_win)
    
def update_message(user_win):
    if user_win:
        message_label['text'] = 'You won after clicking %d times' % click_cnt
    else:
        message_label['text'] = 'You have clicked %d times' % click_cnt

def button_command(normal_button_position):
    row, col = normal_button_position
    for candidate in delta_position_candidates:
        delta_row, delta_col = candidate
        target_button_position = (row + delta_row, col + delta_col)
        if target_button_position != empty_button_position:
            continue
        swap_empty_button(normal_button_position)

def to_original_text(row, col):
    if (row, col) == (n - 1, n - 1):
        return ''
    return str(row * n + col + 1)

def add_button(row, col):
    text = to_original_text(row, col)
    button = ttk.Button(mainframe, text=text, command=lambda: button_command((row, col)))
    button.grid(column=col, row=row, sticky='WE')
    button_dict[(row, col)] = button

def swap_empty_with_random_neighbor():
    row, col = empty_button_position
    while True:
        delta_row, delta_col = random.choice(delta_position_candidates)
        if not is_inside_board(row + delta_row, col + delta_col):
            continue
        normal_button_position = (row + delta_row, col + delta_col)
        swap_empty_button(normal_button_position)
        break

def shuffle_buttons():
    while True:
        for _ in range(100):
            swap_empty_with_random_neighbor()
        if not all_buttons_at_original_position():
            break
    update_message(False)

def initialize_buttons():
    for r in range(n):
        for c in range(n):
            add_button(r, c)

def initialize_board():
    global game_started
    initialize_buttons()
    shuffle_buttons()
    game_started = True

initialize_board()

root.columnconfigure(0, weight=1)
root.rowconfigure(0, weight=1)
for child in mainframe.winfo_children(): 
    child.grid_configure(padx='1', pady='1')

root.mainloop()

运行效果

请将完整的代码（上文已提供）保存为 fifteen.py。使用下方的命令可以运行 fifteen.py

python3 fifteen.py

运行效果如下图所示 ⬇️ (您在自己电脑上运行该程序得到的开局很可能和下图展示的局面不同)

对这个局面而言，可以点击的位置是 $6,7,10$ 这 $3$ 个按钮

如果点击 $6$ ，局面变为 ⬇️ （请注意，“空位置” 和 $6$ 发生了交换）

我玩了一会儿，终于得到了预期的局面 ⬇️ （一共有 $54$ 次有效的点击）

将 $n$ 改成 $2$ 或 $3$

如果觉得 $\text{15 puzzle}$ 玩起来太难了，可以减小代码中 $\text{n}$ 的值， $\text{n}$ 的位置如下图所示

将 $n$ 改成 $2$

把 $\text{n}$ 改成 $2$ 之后，示例效果是这样的 ⬇️

这样就变得简单很多。我点击了 $6$ 次之后，游戏结束 ⬇️

将 $n$ 改成 $3$

把 $\text{n}$ 改成 $3$ 之后，示例效果是这样的 ⬇️

我点击了 $50$ 次之后，游戏结束 ⬇️

其他

整体布局的草图是如何画出来的？

我用了 IntelliJ IDEA (Community Edition) 中 PlantUML 的插件来画那张图。完整的代码如下 ⬇️

@startsalt
{
    {+
        [ 1]|[ 2]|[ 3]|[ 4]
        [ 5]|[ 6]|[ 7]|[ 8]
        [ 9]|[10]|[11]|[12]
        [13]|[14]|[15]|[  ]
    }
    {+
        展示已操作次数
    }
}
@endsalt

参考资料

TkDocs tutorial 中的
15 puzzle （Wolfram 中关于 $\text{15 puzzle}$ 的介绍）

用 Tkinter 实现简单的 15 puzzle

背景

正文