第七单元 7.3 项目3 节日活动对对碰（课件）-《Python程序设计基础》（高等教育出版社）同步精品课堂

第七单元 7.3 项目3 节日活动对对碰 Python程序设计基础 同步精品课堂 高等教育出版社 任务一 Pygame基础和屏幕设置 任务二 图片资源加载与网格布局 任务三 交互与匹配逻辑 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 一 1、掌握Pygame库的窗口创建和时间处理等操作 2、理解和掌握Pygame模块的常用函数的使用 3、掌握图片资源的加载与网格布局操作 4、理解图片的管理和分配操作 教学重难点 二 教学重点： 1、Pygame模块的常用函数的使用 2、图片资源的加载与网格布局操作 教学难点： Pygame模块的常用函数的使用 导入新课 三 中国传统节日蕴含着悠久的历史和丰富的文化底蕴。春节贴春联、包饺子，端午节赛龙舟、包粽子，中秋节赏月、吃月饼……每个节日都有独特的习俗 今天，我们一起来开发一款“对对碰”游戏， 通过匹配节日图案与习俗图案，在娱乐中学习传统文化。 任务一 Pygame基础和屏幕设置 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 1、Pygame简介 Pygame 是基于 SDL 的开源 Python 2D 游戏库，免费、跨平台、易学，适合做小游戏与多媒体交互项目。通过“pip install pygame”安装。 图形渲染：窗口创建、2D 图像 / 精灵绘制、缩放 / 旋转 / 透明混合、字体渲染、基础图形（点 / 线 / 矩形 / 圆）。 音频播放：WAV/OGG/MP3 音效与背景音乐，支持混音与音量控制。 输入处理：键盘、鼠标、游戏手柄事件监听与状态读取。 游戏工具：精灵（Sprite）与精灵组、矩形碰撞检测、帧率控制、资源管理。 跨平台：Windows/macOS/Linux；可通过 Pygame for Android 打包安卓应用。 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 2、Pygame的核心函数 函数 功能 pygame.init() 初始化Pygame所有模块 pygame.display.set_mode((w,h)) 创建游戏窗口 pygame.display.set_caption(标题) 设置窗口标题 screen.fill(颜色) 填充背景色 pygame.display.flip() 更新屏幕显示 pygame.event.get() 获取所有事件 pygame.quit() 退出Pygame 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 3、Pygame程序的基本结构 步骤1：导入模块和初始化 import pygame; pygame.init() 步骤2：创建窗口 screen = pygame.display.set_mode() 步骤3：游戏主循环 while running: 处理事件 → 更新逻辑 → 绘制画面 → 刷新 步骤4：退出游戏 pygame.quit(); sys.exit() 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 4、常用RGB颜色模型 RGB颜色由(红, 绿, 蓝)三个值组成，范围0-255 白色 (255, 255, 255) 黑色 (0, 0, 0) 红色 (255, 0, 0) 绿色 (0, 255, 0) 蓝色 (0, 0, 255) 浅绿色 (199, 224, 203) 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 5、实操任务一 正确导入pygame和sys 初始化pygame 创建窗口并设置标题 实现游戏主循环和退出事件 运行后窗口能正常显示且能关闭 创建Pygame窗口，尺寸为600×600，标题为“对对碰游戏”，背景色为浅蓝色(173, 216, 230) 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 5、实操任务一 import pygame import sys pygame.init() screen_width, screen_height = 800, 800 screen = pygame.display.set_mode((screen_width, screen_height)) pygame.display.set_caption("节日活动对对碰") bg_color = (199, 224, 203) running = True while running: for event in pygame.event.get(): if event.type == pygame.QUIT: running = False screen.fill(bg_color) pygame.display.flip() pygame.quit() sys.exit() 初始化 创建窗口 定义背景色（浅绿色） 窗口关闭按钮事件类型，退出游戏 用指定颜色填充整个窗口 更新整个屏幕（双缓冲机制） 任务二 图片资源加载与网格布局 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 1、Pygame图片处理函数 pygame.image.load(路径)：加载图片，返回Surface对象。 如img = pygame.image.load('a.png') pygame.transform.scale(图片, (宽,高))：缩放图片。 如scaled = transform.scale(img, (100,100)) os.path.join(路径, 文件名)：跨平台路径拼接。 如os.path.join('images', 'a.png') 新知讲授 四 2、图片资源加载 import os image_folder = 'images' tile_size = 180 # 每个格子的大小 images_group1 = [] images_group2 = [] for i in range(9): path = os.path.join(image_folder, f'imageA{i+1}.png') img = pygame.image.load(path) scaled_img = pygame.transform.scale(img, (tile_size, tile_size)) images_group1.append(scaled_img) for i in range(9): path = os.path.join(image_folder, f'imageB{i+1}.png') img = pygame.image.load(path) scaled_img = pygame.transform.scale(img, (tile_size, tile_size)) images_group2.append(scaled_img) 使用os.path.join()可以写出跨平台兼容的代码。 Windows操作系统的路径分隔符为”\“ Linux/Mac操作系统的路径分隔符为”/“ 加载第一组图片 加载第二组图片 新知讲授 四 3、实操任务二 创建images文件夹，放入2张测试图片，编写代码加载并显示一张图片到窗口中央 使用os.path.join()拼接路径 加载图片并缩放到100×100像素 在主循环中使用screen.blit(img, (x, y))绘制图片 图片显示在窗口中央 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 4、网格布局——①4×4网格布局思路与网格坐标计算 公式：x = col × tile_size + margin y = row × tile_size + margin 窗口宽度 = 800，格子大小 = 180 边距 = (800 - 4×180) / 2 = 40 第0行第0列 坐标 (40, 40) 第0行第1列 坐标 (220, 40) 第0行第2列 坐标 (400, 40) 第0行第3列 坐标 (580, 40) 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 4、网格布局——①4×4网格布局思路与网格坐标计算 (0,0) (1,0) (2,0) (3,0) (0,1) (1,1) (2,1) (3,1) (0,2) (1,2) (2,2) (3,2) (0,3) (1,3) (2,3) (3,3) margin=40 row=0 row=1 row=2 row=3 每个格子：宽=180，高=180 坐标 = (col×180+40, row×180+40) 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 4、网格布局——②网格数据结构设计 # 网格列表，每个元素是一个元组：(图片, 图片ID, 位置) grid = [] for row in range(4): for col in range(4): x = col * tile_size + margin y = row * tile_size + margin # 暂用占位图片，后续替换为真实图片 grid.append((placeholder_img, -1, (x, y))) 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 4、网格布局——③图片配对与图片池构建 import random image_pairs = list(zip(images_group1, images_group2)) # image_pairs = [(imgA1, imgB1), (imgA2, imgB2), ...] image_pool = [] for id_num, (img1, img2) in enumerate(image_pairs): image_pool.append((img1, id_num)) # A图，ID=id_num image_pool.append((img2, id_num)) # B图，ID=id_num random.shuffle(image_pool) 步骤1：将两组图片配对 步骤2：构建图片池（每对拆成两张独立图片，并分配相同ID） 步骤3：打乱顺序（每次游戏图片位置不同） 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 4、网格布局——④将图片池分配到网格 # 确保图片数量足够（需要16张，共18张，足够） grid = [] for row in range(4): for col in range(4): # 从图片池中取出一张图片 img, img_id = image_pool[row * 4 + col] x = col * tile_size + margin y = row * tile_size + margin grid.append([img, img_id, (x, y)]) # 使用列表便于修改 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 4、网格布局——⑤绘制网格函数 def draw_grid(): screen.fill(bg_color) # 清空背景 for img, img_id, pos in grid: if img is not None: # 图片未被移除 screen.blit(img, pos) pygame.display.flip() # 刷新屏幕 新知讲授 四 5、实操任务三 完成4×4网格布局，显示所有图片 计算边距使网格居中 构建图片池并随机打乱 将图片分配到网格中 编写draw_grid()函数并调用 任务三 交互与匹配逻辑 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 1、匹配逻辑 游戏状态 selected = None （当前选中的图片索引） 玩家单击图片 selected == None （第一次单击） 记录selected= 当前索引 selected != None （第二次单击） 比较两张图片的ID 同一张图片 （忽略） ID不同 （不匹配） ID相同 （匹配） selected不变 （但取消高亮） 两张图片设为None 匹配数+1 selected = None 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 2、代码实现——①获取鼠标单击位置 for event in pygame.event.get(): if event.type == pygame.QUIT: running = False elif event.type == pygame.MOUSEBUTTONDOWN: mouse_x, mouse_y = pygame.mouse.get_pos() # 判断单击了哪个图片 for i, (img, img_id, (x, y)) in enumerate(grid): if img is not None: if x <= mouse_x <= x + tile_size and y <= mouse_y <= y + tile_size: # 单击了第i张图片 handle_click(i) 判断鼠标是否点在图片区域内 机位固定：摄像机本身不移动（如不推、拉、摇、移）。 新知讲授 四 2、代码实现——②匹配逻辑实现 selected = None # 全局选中的图片索引 def handle_click(clicked_index): global selected if selected is None: selected = clicked_index # 选中当前图片 return if selected == clicked_index: selected = None # 取消选中 return img1, id1, pos1 = grid[selected] img2, id2, pos2 = grid[clicked_index] if id1 == id2: # 匹配成功，移除两张图片 grid[selected] = (None, id1, pos1) grid[clicked_index] = (None, id2, pos2) # 匹配失败，什么都不做 selected = None # 无论成功失败，清除选中状态 通过配对ID判断两张图片是否属于同一组， 而不是直接比较图片对象。 新知讲授 四 3、实操任务四 实现鼠标单击匹配功能 检测鼠标单击事件 判断单击了哪张图片 实现选中状态（用变量存储选中的图片索引） 比较两次单击图片的ID，相同则移除 在draw_grid()中可视化选中效果（边框） 师生互动 五 1、pygame.display.flip()和 pygame.display.update() 有什么区别？ 2、在4×4网格中，如何计算第2行第3列图片的屏幕显示坐标？（其中边距为40，格子为180） 3、鼠标单击图片时，程序如何判断单击了哪一张图片？ 答案： 1、flip() 更新整个窗口，update() 可只更新指定区域。简单游戏用 flip() 更方便。 2、x = 40 + 2×180 = 400，y = 40 + 1×180 = 220。公式：x = 边距 + 列×格宽，y = 边距 + 行×格高。 3、遍历网格，用碰撞检测判断鼠标坐标是否在图片区域内：x≤mx≤x+宽 且 y≤my≤y+高。 随堂练习 六 1 、下列（ ）函数用于将图片绘制到屏幕上。 A. screen.draw() B. screen.image() C. screen.blit() D. screen.render() 答案：C 解析：screen.blit(source, dest)将源图像绘制到屏幕的指定位置。 随堂练习 六 2 、在Pygame中，用于更新整个屏幕显示的函数是（ ） A. screen.update() B. pygame.display.update() C. pygame.display.flip() D. screen.refresh() 答案：C 解析：pygame.display.flip()更新整个屏幕的内容，确保所有修改立即显示。 随堂练习 六 3 、下列（ ）函数用于加载图片文件。 A. pygame.load.image() B. pygame.image.load() C. pygame.graphics.load() D. pygame.sprite.load() 答案：B 解析：pygame.image.load(file)加载图片文件并返回Surface对象。 随堂练习 六 4 、在RGB颜色模型中，(255, 0, 0)表示（ ）。 A. 绿色 B. 蓝色 C. 红色 D. 黑色 答案：C 解析：RGB模型中(255, 0, 0)表示红色，红色分量最大，绿蓝为0。 随堂练习 六 5 、（多项选择题）（ ）是Pygame模块的常用功能。 A. 图形绘制 B. 声音处理 C. 数据库操作 D. 用户输入处理 答案：ABD 解析：Pygame支持图形、声音、输入处理，但不包含数据库操作。 随堂练习 六 6 、（多项选择题）（ ）函数属于Pygame的事件处理相关。 A. pygame.event.get() B. pygame.mouse.get_pos() C. pygame.display.flip() D. pygame.QUIT 答案：ABD 解析：pygame.QUIT是事件类型，event.get()获取事件，mouse.get_pos()获取鼠标位置；display.flip()是屏幕更新函数。 随堂练习 六 7、(是非选择题)pygame.QUIT事件在用户按下键盘时触发。 A.正确 B.错误 答案：B 解析：pygame.QUIT在用户点击窗口关闭按钮时触发，键盘事件是KEYDOWN。 随堂练习 六 8、(是非选择题pygame.font.SysFont('SimHei', 58)中的58表示字体颜色。 A.正确 B.错误 答案：B 解析：58表示字体大小（像素），颜色在render()中设置。 随堂练习 六 9、Pygame中使用 方法将 区域填充为指定的颜色，为后续的图像绘制、 等操作提供了干净的背景。为了设定统一的屏幕风格，通常会预定义 ，并在每次刷新屏幕时 ，确保用户界面的一致性。 答案：fill（） 整个屏幕 文字显示 颜色变量 应用颜色填充 解析：Pygame中使用fill（）方法将整个屏幕区域填充为指定的颜色，为后续的图像绘制、文字显示等操作提供了干净的背景。为了设定统一的屏幕风格，通常会预定义颜色变量，并在每次刷新屏幕时应用颜色填充，确保用户界面的一致性。 课堂小结 七 谢谢 $