🎹 Python钢琴节奏大师 · 第4章
系列：Python钢琴节奏大师：从零到游戏开发实战[1]章节：第4章 / 共12章标题：钢琴绘制篇-用循环画出7个白键do-re-mi上一章：第3章-绘图基础篇[2]下一章：第5章-钢琴进阶篇[3]
画白键——钢琴的"骨架"
今日目标：计算7个白键的位置，用循环绘制7个白键，给每个键编号，为后续添加黑键和交互打下基础。
💡 本章核心：用循环批量绘制，画出钢琴的白键骨架
🎹 效果预览
完成本篇学习后，你的窗口里会出现一排白色的钢琴键：
┌────────────────────────────────────────────────────────────┐│ ││ ││ ││ ││ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ││ │ 0 │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ 5 │ │ 6 │ ││ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ││ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ││ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ││ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ││ │ do│ │ re│ │ mi│ │ fa│ │sol│ │ la│ │ si│ ││ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ └───┘ ││ │└────────────────────────────────────────────────────────────┘ 7个白键，对应 do re mi fa sol la si
这是钢琴键盘的"骨架"，明天我们会在上面添加黑键！
🤔 钢琴键盘的基本知识
什么是"白键"？
钢琴上有两种键：
- 白键：7个一组，对应 do、re、mi、fa、sol、la、si（或C、D、E、F、G、A、B）
为什么先画白键？
白键是钢琴键盘的基础：
📝 第一步：规划白键的尺寸和位置
确定参数
我们需要先确定几个关键数字：
# 白键参数WHITE_KEY_WIDTH = 80# 每个白键的宽度（像素）WHITE_KEY_HEIGHT = 300# 每个白键的高度（像素）WHITE_KEY_COUNT = 7# 白键数量（do re mi fa sol la si）# 起始位置（第一个白键的左上角）START_X = 100# 距离窗口左边100像素START_Y = 200# 距离窗口顶部200像素
为什么要这样设置？
计算每个白键的位置
7个白键的x坐标分别是：
规律：第n个键的x坐标 = START_X + n × WHITE_KEY_WIDTH
📝 第二步：用循环绘制7个白键
为什么要用循环？
不用循环的话，代码要这样写：
# 这样写太麻烦了！pygame.draw.rect(screen, WHITE, (100, 200, 80, 300))pygame.draw.rect(screen, WHITE, (180, 200, 80, 300))pygame.draw.rect(screen, WHITE, (260, 200, 80, 300))pygame.draw.rect(screen, WHITE, (340, 200, 80, 300))pygame.draw.rect(screen, WHITE, (420, 200, 80, 300))pygame.draw.rect(screen, WHITE, (500, 200, 80, 300))pygame.draw.rect(screen, WHITE, (580, 200, 80, 300))
7个键就要写7行，如果画88个键（真钢琴）要写88行！太麻烦了。
什么是循环？
循环就是让计算机重复执行同样的操作。
想象你在数数字：1、2、3、4、5、6、7... 数到7就停。
Python的 for 循环可以帮我们自动完成：
for i inrange(7): # i会依次变成 0, 1, 2, 3, 4, 5, 6print(i) # 打印当前的i
输出：
0123456
range() 函数详解
range(7) # 生成 0, 1, 2, 3, 4, 5, 6（从0开始，到7结束，不包括7）range(3, 8) # 生成 3, 4, 5, 6, 7（从3开始，到8结束）range(0, 10, 2) # 生成 0, 2, 4, 6, 8（步长为2）
用循环画白键
for i inrange(7): # i从0到6 x = START_X + i * WHITE_KEY_WIDTH # 计算当前键的x坐标 pygame.draw.rect(screen, WHITE, (x, START_Y, WHITE_KEY_WIDTH, WHITE_KEY_HEIGHT))
执行过程：
📝 第三步：添加边框
白键和白键之间需要有分隔线，不然看起来就是一个大白块。
两种方法画边框
方法1：先画黑底，再画白键（留出缝隙）
# 先画整个键盘区域的黑色背景keyboard_width = WHITE_KEY_COUNT * WHITE_KEY_WIDTHpygame.draw.rect(screen, BLACK, (START_X, START_Y, keyboard_width, WHITE_KEY_HEIGHT))# 再画白键（稍微小一点，露出黑边）for i inrange(WHITE_KEY_COUNT): x = START_X + i * WHITE_KEY_WIDTH# 宽度和高度都减2，留出1像素的黑边 pygame.draw.rect(screen, WHITE, (x+1, START_Y+1, WHITE_KEY_WIDTH-2, WHITE_KEY_HEIGHT-2))
方法2：画完白键再画线
# 先画白键for i inrange(WHITE_KEY_COUNT): x = START_X + i * WHITE_KEY_WIDTH pygame.draw.rect(screen, WHITE, (x, START_Y, WHITE_KEY_WIDTH, WHITE_KEY_HEIGHT))# 再画分隔线for i inrange(1, WHITE_KEY_COUNT): # 从1开始，画6条线 x = START_X + i * WHITE_KEY_WIDTH pygame.draw.line(screen, BLACK, (x, START_Y), (x, START_Y + WHITE_KEY_HEIGHT), 2)
我们使用方法2，更直观易懂。
📝 第四步：显示音名
在键上标注 do、re、mi... 让学习者知道每个键对应什么音。
添加文字的方法
Pygame显示文字需要3步：
# 1. 创建字体（系统默认字体，大小24）font = pygame.font.SysFont(None, 24)# 2. 渲染文字（生成一个图片surface）text_surface = font.render("do", True, BLACK) # True表示抗锯齿# 3. 贴到屏幕上（在指定位置）screen.blit(text_surface, (x + 30, START_Y + 250)) # 30和250是微调位置
音名列表
# 7个白键对应的音名NOTE_NAMES = ["do", "re", "mi", "fa", "sol", "la", "si"]
在循环中显示音名
for i inrange(WHITE_KEY_COUNT):# 画白键 x = START_X + i * WHITE_KEY_WIDTH pygame.draw.rect(screen, WHITE, (x, START_Y, WHITE_KEY_WIDTH, WHITE_KEY_HEIGHT))# 显示音名 text = font.render(NOTE_NAMES[i], True, BLACK)# 文字居中：键的x + (键宽-文字宽)/2 text_x = x + (WHITE_KEY_WIDTH - text.get_width()) // 2 text_y = START_Y + WHITE_KEY_HEIGHT - 40# 距离底部40像素 screen.blit(text, (text_x, text_y))
🎯 完整代码
import pygame# 初始化pygamepygame.init()# ========== 窗口设置 ==========SCREEN_WIDTH = 800SCREEN_HEIGHT = 600screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))pygame.display.set_caption("钢琴白键")# ========== 颜色定义 ==========BLACK = (0, 0, 0)WHITE = (255, 255, 255)GRAY = (200, 200, 200)# ========== 白键参数 ==========WHITE_KEY_WIDTH = 80# 白键宽度WHITE_KEY_HEIGHT = 300# 白键高度WHITE_KEY_COUNT = 7# 白键数量# 键盘起始位置START_X = 100# 左边距START_Y = 200# 上边距# 音名列表NOTE_NAMES = ["do", "re", "mi", "fa", "sol", "la", "si"]# 创建字体（用于显示音名）font = pygame.font.SysFont(None, 36)# ========== 游戏循环 ==========running = Truewhile running:# 处理事件for event in pygame.event.get():if event.type == pygame.QUIT: running = False# 填充背景 screen.fill((50, 50, 50)) # 深灰色背景，突出白键# ========== 绘制白键 ==========for i inrange(WHITE_KEY_COUNT):# 计算当前键的x坐标 x = START_X + i * WHITE_KEY_WIDTH# 画白键 pygame.draw.rect(screen, WHITE, (x, START_Y, WHITE_KEY_WIDTH, WHITE_KEY_HEIGHT))# 画键的边框（让按键更立体） pygame.draw.rect(screen, GRAY, (x, START_Y, WHITE_KEY_WIDTH, WHITE_KEY_HEIGHT), 1)# 显示音名 text = font.render(NOTE_NAMES[i], True, BLACK)# 计算文字位置（水平居中，底部对齐） text_x = x + (WHITE_KEY_WIDTH - text.get_width()) // 2 text_y = START_Y + WHITE_KEY_HEIGHT - 50 screen.blit(text, (text_x, text_y))# 显示键编号（小字，在顶部） num_font = pygame.font.SysFont(None, 24) num_text = num_font.render(str(i), True, GRAY) num_x = x + (WHITE_KEY_WIDTH - num_text.get_width()) // 2 num_y = START_Y + 20 screen.blit(num_text, (num_x, num_y))# 画分隔线（让键与键之间更清晰）for i inrange(1, WHITE_KEY_COUNT): x = START_X + i * WHITE_KEY_WIDTH pygame.draw.line(screen, BLACK, (x, START_Y), (x, START_Y + WHITE_KEY_HEIGHT), 2)# 更新显示 pygame.display.flip()# 退出pygame.quit()
🔍 代码重点解析
1. 循环绘制
for i inrange(WHITE_KEY_COUNT): x = START_X + i * WHITE_KEY_WIDTH
这是核心逻辑，用循环代替重复代码。
2. 文字居中计算
text_x = x + (WHITE_KEY_WIDTH - text.get_width()) // 2
(WHITE_KEY_WIDTH - text.get_width()) 是剩余空间
3. 画立体边框
pygame.draw.rect(screen, GRAY, (x, START_Y, WHITE_KEY_WIDTH, WHITE_KEY_HEIGHT), 1)
最后一个参数 1 表示线宽为1像素，画出细边框让按键更有立体感。
🎨 动手改造
改造1：改变白键颜色
把白键改成其他颜色：
# 象牙色（更真实的钢琴键颜色）IVORY = (255, 255, 240)pygame.draw.rect(screen, IVORY, (x, START_Y, WHITE_KEY_WIDTH, WHITE_KEY_HEIGHT))
改造2：添加按键按下效果
模拟按键被按下的样子（后面会真正实现交互）：
# 画阴影（在按键下方）pygame.draw.rect(screen, (100, 100, 100), (x+2, START_Y+WHITE_KEY_HEIGHT-10, WHITE_KEY_WIDTH-4, 10))
改造3：调整键的数量
改成14个键（两组 do-re-mi）：
WHITE_KEY_COUNT = 14NOTE_NAMES = ["do", "re", "mi", "fa", "sol", "la", "si","do", "re", "mi", "fa", "sol", "la", "si"]
注意：窗口可能不够宽，需要调整 START_X 或 WHITE_KEY_WIDTH。
❓ 常见问题
Q1：文字显示不出来
检查：
- 字体是否正确创建？
font = pygame.font.SysFont(None, 36)
Q2：键之间有缝隙
原因：分隔线画在白键上面了
解决：先画所有白键，再画分隔线
Q3：音名显示位置不对
调整：修改 text_y 的值，改变垂直位置
Q4：循环只画了6个键
检查：range(WHITE_KEY_COUNT) 是否正确？
range(7) 生成 0-6，正好7个数。
Q5：黑键什么时候画？
预告：下节课！黑键要画在白键上面。
🎯 课后练习
练习1：彩色钢琴键
给每个白键不同的颜色，做成彩虹钢琴：
COLORS = [RED, ORANGE, YELLOW, GREEN, CYAN, BLUE, PURPLE]pygame.draw.rect(screen, COLORS[i], ...)
练习2：显示完整音名
同时显示音名和唱名：
# do (C)# re (D)# ...
练习3：添加键位提示
在键上显示对应的键盘按键（为下篇做准备）：
KEYBOARD_KEYS = ["A", "S", "D", "F", "G", "H", "J"]
练习4（挑战）：画两组白键
画14个白键（两个八度），注意调整窗口大小或键的宽度。
🎬 下篇预告
第5篇：《画黑键——钢琴的"灵魂"》
明天我们将：
黑白键齐全，钢琴键盘就完整了！
📦 本课资源
pygame.font.SysFont() - 创建字体text.get_width() - 获取文字宽度
🎉 恭喜你完成第4课！
今天你已经：
明天添加黑键，钢琴键盘就完整了！
本系列文章面向零基础中小学生，每篇都有详细步骤和配图说明。遇到问题欢迎在评论区留言！关注回复“钢琴”免费获取源码下载地址。
