CS课程项目设计1：交互友好的井字棋游戏

最近突然想开设一个专栏了，专门为计算机专业的同行分享一些入门级的课程项目设计，旨在让同学更好地了解CS项目的设计流程，同时给出代码来介绍coding过程。

---

今天要分享的是第一个CS课程项目：交互友好的井字棋游戏。

1. 研究目的

井字棋（Tic-Tac-Toe）作为一款经典的双人策略游戏，具有规则简单、易于理解的特点，适合作为编程教育和人机交互研究的基础案例。目前各类知识分享平台上（如CSDN、知乎）的井字棋游戏虽然数量众多，但部分存在功能单一、界面简陋、交互体验不佳等问题。本项目旨在开发一款具有现代 UI 设计和丰富交互功能的井字棋游戏，满足用户对游戏趣味性和易用性的需求。

本项目设计的井字棋游戏包含以下功能：

1. 实现井字棋的基本游戏规则，包括轮流落子、胜负判定和平局检测。
2. 提供友好的用户界面，支持玩家自定义名称，增强游戏的个性化体验。
3. 开发附加功能，如悔棋、保存 / 加载游戏进度等，提升游戏的实用性。
4. 引入音效和动画效果，增强游戏的视觉和听觉反馈，提高用户体验。

2. 技术方案

本项目采用 Python 语言结合 tkinter 库实现，具体技术方案如下：

1. 开发语言：Python 3.8
2. GUI 库：tkinter（Python 内置库，无需额外安装）
3. 数据存储：JSON 格式文件用于保存和加载游戏进度
4. 多线程处理：使用 threading 模块处理音效播放，避免阻塞 UI 线程
5. 动画效果：通过 tkinter 的 update () 方法和延时函数实现简单动画

系统架构采用面向对象设计，将游戏逻辑和界面交互分离，提高代码的可维护性和可扩展性。主要类包括：

• TicTacToe：游戏主类，负责管理游戏状态、处理用户输入和更新界面
• 界面组件：包括棋盘按钮、状态标签、控制按钮等，通过 tkinter 实现

3. 实现流程

明确游戏的基本功能和交互逻辑，设计数据结构和类的关系。确定需要实现的核心功能包括：棋盘显示、玩家轮流落子、胜负判定、悔棋、保存 / 加载游戏等。

首先实现游戏的核心逻辑，包括：

• 初始化棋盘和游戏状态
• 处理玩家点击事件，更新棋盘状态
• 判断胜负和平局条件
• 实现玩家轮流机制

其中，处理玩家点击事件，更新棋盘状态的代码如下所示：

def make_move(self, row, col):"""处理玩家移动"""if self.board[row][col] == ' ' and self.game_active:# 记录当前移动到历史self.move_history.append((row, col, self.current_player))self.undo_button.config(state=tk.NORMAL)  # 启用悔棋按钮# 播放放置音效self.play_sound('place')# 添加放置动画self.animate_cell(row, col)# 更新棋盘数据self.board[row][col] = self.current_player# 更新按钮显示self.buttons[row][col].config(text=self.current_player)# 记录上一步self.last_move = (row, col)self.last_move_label.config(text=f"上一步: {self.player_names[self.current_player]} 在位置 {row + 1},{col + 1}")# 检查游戏状态if self.check_winner(self.current_player):self.status_label.config(text=f"{self.player_names[self.current_player]} 获胜！")self.game_active = Falseself.undo_button.config(state=tk.DISABLED)  # 禁用悔棋按钮# 播放胜利音效和动画self.play_sound('win')self.animate_winning_cells()messagebox.showinfo("游戏结束", f"{self.player_names[self.current_player]} 获胜！")elif self.is_board_full():self.status_label.config(text="游戏平局！")self.game_active = Falseself.undo_button.config(state=tk.DISABLED)  # 禁用悔棋按钮# 播放平局音效self.play_sound('draw')messagebox.showinfo("游戏结束", "游戏平局！")else:# 切换玩家self.current_player = 'O' if self.current_player == 'X' else 'X'self.status_label.config(text=f"当前玩家: {self.player_names[self.current_player]}")

当前玩家可以看到上一位玩家的下子坐标位置，可视化界面如下所示：

判断胜负和平局条件的代码如下所示：

def check_winner(self, player):"""检查玩家是否获胜，并记录获胜的格子"""# 检查行for row in range(3):if all([self.board[row][col] == player for col in range(3)]):self.winning_cells = [(row, col) for col in range(3)]return True# 检查列for col in range(3):if all([self.board[row][col] == player for row in range(3)]):self.winning_cells = [(row, col) for row in range(3)]return True# 检查对角线if all([self.board[i][i] == player for i in range(3)]):self.winning_cells = [(i, i) for i in range(3)]return Trueif all([self.board[i][2 - i] == player for i in range(3)]):self.winning_cells = [(i, 2 - i) for i in range(3)]return Truereturn False

此外，该项目使用 tkinter 创建用户界面，包括：

• 设计棋盘布局和样式
• 添加状态显示区域，显示当前玩家和游戏状态
• 实现控制按钮（悔棋、重新开始等）
• 支持玩家自定义名称

其中，支持玩家自定义名称的代码如下所示：

def set_player_names(self):"""设置玩家名称"""# 询问玩家X的名称name = simpledialog.askstring("玩家名称", "请输入玩家X的名称:", parent=self.root)if name:self.player_names['X'] = name# 询问玩家O的名称name = simpledialog.askstring("玩家名称", "请输入玩家O的名称:", parent=self.root)if name:self.player_names['O'] = name# 更新玩家标签self.player_x_label.config(text=f"{self.player_names['X']} (X)")self.player_o_label.config(text=f"{self.player_names['O']} (O)")self.status_label.config(text=f"当前玩家: {self.player_names[self.current_player]}")# 启用保存按钮self.save_button.config(state=tk.NORMAL)

支持玩家自定义名称的可视化界面如下所示：

 我们逐步添加附加功能：

• 悔棋功能：记录历史操作，支持撤销上一步
• 保存 / 加载功能：使用 JSON 格式保存游戏状态到文件
• 音效系统：使用 playsound 库播放操作音效
• 动画效果：为棋子放置和获胜状态添加视觉动画

其中，悔棋功能的代码如下所示：

def undo_move(self):"""悔棋功能"""if not self.move_history:return  # 没有历史记录# 播放悔棋音效self.play_sound('undo')# 恢复上一步row, col, player = self.move_history.pop()self.board[row][col] = ' 'self.buttons[row][col].config(text='', bg='SystemButtonFace')  # 恢复默认背景# 清除获胜高亮if self.winning_cells:for r, c in self.winning_cells:self.buttons[r][c].config(bg='SystemButtonFace')self.winning_cells = []# 更新上一步信息if self.move_history:last_row, last_col, last_player = self.move_history[-1]self.last_move = (last_row, last_col)self.last_move_label.config(text=f"上一步: {self.player_names[last_player]} 在位置 {last_row + 1},{last_col + 1}")else:self.last_move = Noneself.last_move_label.config(text="上一步: 无")# 切换回上一个玩家self.current_player = playerself.status_label.config(text=f"当前玩家: {self.player_names[self.current_player]}")# 重新激活游戏（如果之前结束了）self.game_active = True# 如果没有历史记录了，禁用悔棋按钮if not self.move_history:self.undo_button.config(state=tk.DISABLED)

悔棋功能的可视化界面如下所示：

因此，该游戏的主要流程如下所示：

1. 初始化 3x3 空棋盘
2. 玩家 X 先开始游戏
3. 轮流输入位置（行和列，范围 1-3）
4. 程序会验证输入有效性并更新棋盘
5. 每次移动后检查是否有玩家获胜或平局
6. 游戏结束时显示结果

4. 项目展示

前面说太多了，最后还是上传个该项目的简要演示视频，供大家了解。