🎹 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）
• 黑键：5个一组，位于白键之间，对应升调和降调

为什么先画白键？

白键是钢琴键盘的基础：

1. 白键排列整齐，宽度相同
2. 黑键位置是相对于白键确定的
3. 白键面积大，更容易点击

📝 第一步：规划白键的尺寸和位置

确定参数

我们需要先确定几个关键数字：

# 白键参数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. 创建字体对象
2. 渲染文字（生成图片）
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

• text.get_width() 获取文字的宽度
• (WHITE_KEY_WIDTH - text.get_width()) 是剩余空间
• 除以2就是左边的留白
• // 是整除（取商的整数部分）

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：文字显示不出来

检查：

1. 字体是否正确创建？font = pygame.font.SysFont(None, 36)
2. blit 位置是否在窗口内？
3. 文字颜色是否与背景相同？

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篇：《画黑键——钢琴的"灵魂"》

明天我们将：

• 学习黑键的位置规律
• 计算5个黑键的坐标
• 理解"层级"概念（黑键在白键之上）
• 完成完整的钢琴键盘绘制

黑白键齐全，钢琴键盘就完整了！

📦 本课资源

• 完整代码：04_white_keys.py
• 核心概念：
• for 循环
• range() 函数
• 坐标计算
• 文字渲染和显示
• 关键函数：
• pygame.font.SysFont() - 创建字体
• font.render() - 渲染文字
• screen.blit() - 贴图/文字
• text.get_width() - 获取文字宽度

🎉 恭喜你完成第4课！

今天你已经：

• ✅ 学会了用循环绘制多个图形
• ✅ 理解了坐标计算
• ✅ 掌握了文字显示方法
• ✅ 画出了7个带音名的白键

明天添加黑键，钢琴键盘就完整了！

本系列文章面向零基础中小学生，每篇都有详细步骤和配图说明。遇到问题欢迎在评论区留言！关注回复“钢琴”免费获取源码下载地址。