最后更新：2026-09-04 00:01
实验16 爱心代码¶
难度：★☆☆ | 预估时长：__ 分钟
16.1 实验目的¶
- 知识目标：了解前端 HTML+CSS+JavaScript 动态特效原理，理解 Python Tkinter 窗口可视化与粒子特效逻辑设计。
- 技能目标：能独立运行网页版与 Python 版爱心代码特效，掌握双击运行、自定义文字与背景音乐、交互彩蛋等修改方法。
- 素养目标：培养编程创意表达与新媒体可视化审美，提升趣味特效开发与交互设计的工程素养。
16.2 实验环境¶
16.2.1 网页HTML版本¶
系统：Windows 10、MacOS、Linux 全平台兼容
- 运行工具：任意主流浏览器（Chrome、Edge、火狐等）
- 环境要求：无需安装插件、无需部署环境，原生浏览器直接运行
16.2.2 Python代码版本¶
- 操作系统：Windows 10/11
- 运行环境：Python 3.8 及以上版本
- 依赖库：tkinter（系统自带）、pygame（背景音乐版需手动安装）、random、math、sys（内置无需安装）
- 运行工具：Python IDLE、VS Code、PyCharm 均可
16.3 实验重难点¶
- 重点：网页版与 Python 版爱心特效的运行与交互使用，以及自定义文案、背景音乐的修改方法。
- 难点：Python 背景音乐完整版依赖 pygame 的安装配置，以及音频文件与代码同目录的部署要求。
16.4 实验内容¶
本次实验共 3 个核心源码文件，功能区分如下：
- [实验16-爱心代码与粒子特效合集-爱心代码2.html]：网页版完整版特效，支持明暗双背景、雪花粒子、文字汇聚爱心、破碎动画、一键重放、背景音乐，画面动态效果丰富，适配所有设备屏幕。
- [实验16-爱心代码与粒子特效合集-爱心代码1.py]：Python 简易版，核心实现弹窗爱心成型、满屏随机暖心文案弹窗、自动关闭特效，轻量化无依赖，运行稳定无报错。
- **[实验16-爱心代码与粒子特效合集-爱心代码-BGM版.py]：Python 进阶完整版，在简易版基础上新增樱花粒子飘落、双重反转彩蛋、心动问答交互、躲避按钮、背景音乐、空格键一键退出等拓展功能。
16.4.1 任务1：运行网页HTML版爱心特效¶
1. 任务描述
下载网页版完整版源码 实验16-爱心代码与粒子特效合集-爱心代码2.html，在浏览器中运行并体验动态爱心汇聚、粒子飘落、弹窗特效、动态文案、背景切换、交互彩蛋等可视化浪漫特效，并学会自定义文字与背景音乐。
生活类比（必填项；若无新概念可删除此块）
粒子特效 就像 夜空中飘落的雪花，每一片都是一个独立运动的小元素，它的作用是营造浪漫动态氛围、增强画面的层次感与沉浸感。
2. 实验步骤
- 步骤 1：将下载的 实验16-爱心代码与粒子特效合集-爱心代码2.html 文件保存至电脑本地文件夹，文件名称无需修改。
- 步骤 2：鼠标双击 HTML 文件，自动调用默认浏览器打开运行特效页面。
- 步骤 3：页面加载完成后，自动播放核心特效：随机暖心文字从四面八方汇聚成标准爱心形状，顶部展示「for you ♥」标题。
- 步骤 4：文字汇聚成型停留 2 秒后，自动触发爱心破碎消散动画，动态效果循环展示。
- 步骤 5：交互功能使用——点击页面右下角「重放 / 切换背景」按钮，可一键切换浅色/暗黑两种主题背景，同时重置所有特效，重新播放爱心汇聚动画；切换至暗黑背景后，自动开启雪花飘落粒子特效、文字发光描边效果，并自动适配设备性能优化动画帧率；首次点击页面任意位置，自动触发背景音乐循环播放，解决浏览器自动播放限制问题。
- 步骤 6：自定义修改——右键在 实验16-爱心代码与粒子特效合集-爱心代码2.html 文件上选择用 VS Code 打开：
往下翻到约第 150 行，把里面的文字改成你想让人看到的：
第 145 行把里面的链接换成你想要的音乐链接：
!!! note "如何找到音频在线链接" 浏览器打开 https://tonzhon.com/，按一下键盘上的 F12 键，参考下方视频：
1 | |
- 步骤 7：分享给他人——浏览器输入微信网页传输助手 https://filehelper.weixin.qq.com/，发到微信后其他人点击文件、选择用浏览器打开即可使用。
常见错误与排错（必填项；无坑则填 本任务常规操作即可，如无报错可跳过）
- 若打开网页无音乐：检查电脑是否连接扬声器，否则听不到声音；
- 本任务常规操作即可，如无报错可跳过其余排查。
16.4.2 任务2：运行 Python 版爱心特效¶
1. 任务描述
使用 Python 简易版（爱心代码1.py）与完整版（爱心代码-BGM版.py）体验弹窗爱心成型、满屏暖心弹窗、樱花粒子飘落、双重反转彩蛋、心动问答交互、背景音乐等趣味效果，并掌握环境配置与快捷键退出。
生活类比（必填项；若无新概念可删除此块）
Tkinter 窗口 就像 一个空白画框，它的作用是承载按钮、文字、弹窗等可视化元素，并把它们呈现给用户。
2. 实验步骤
- 步骤 1：前置环境配置——参考 Python安装和本地Pycharm配置指南.docx 文件配置环境（Python 3.8 及以上）。
- 步骤 2（简易版）：打开 PyCharm，把爱心代码1.py 文件拖入软件放手，右键运行：
- 步骤 3（完整版）：把
和 实验16-爱心代码与粒子特效合集-爱心代码-BGM版.py 分别拖到你的项目上面：
- 步骤 4：运行代码，程序自动启动樱花粒子全屏飘落特效，同时播放循环背景音乐；依次经历四步：a. 弹窗汇聚成爱心轮廓，最后一个弹窗展示专属文案「充实自己」；b. 爱心弹窗清空，生成满屏随机暖心弹窗，樱花粒子持续飘落；c. 满屏弹窗依次关闭，触发双重反转彩蛋弹窗，依次展示「你以为就结束了？」「666还有反转？」提示；d. 弹出终极交互面板，展示「你心动了吗？」问答界面。
- 步骤 5：交互操作——点击「心动了」即可关闭程序；鼠标悬浮「没感觉」按钮时，按钮会自动随机躲避；全局快捷键：按下空格键可随时安全退出程序，背景音乐渐变淡出。
常见错误与排错（必填项；无坑则填 本任务常规操作即可，如无报错可跳过）
- 若提示
pygame模块报错：执行pip install pygame安装依赖，若无安装权限可直接运行简易版代码； - 若无背景音乐：检查音频文件是否和代码在同一文件夹，音频文件损坏不影响特效运行；
- 若弹窗超出屏幕：代码已内置屏幕边界限制，自动适配电脑分辨率，无需手动调整；
- 若程序闪退：使用 Python 3.8 及以上版本运行，关闭电脑杀毒软件拦截即可。
16.5 实验总结¶
本次实验掌握了以下要点：
- 一是前端动态动画原理，能运行网页版爱心特效并完成主题切换、粒子与自定义文案修改（对应知识目标）；
- 二是 Python Tkinter 窗口可视化与粒子特效开发，能配置并运行 Python 双版本、处理依赖与交互彩蛋（对应技能目标）。
16.6 作业提交¶
- 提交地点：吾爱作业网
- 提交内容：运行的截图至少 1 张。
16.7 知识检测¶
- [ ] （填空）网页版爱心代码特效无需部署环境，使用____浏览器直接打开 HTML 文件即可运行。（任意主流）
- [ ] （选择）Python 背景音乐完整版需要额外安装的第三方库是？（pygame）
- A. tkinter
- B. pygame
- C. random
- D. math
- [ ] （选择）运行 Python 完整版时，按下哪个键可随时安全退出程序？（空格键）
查看解析
正确答案：网页版用任意主流浏览器直接打开即可运行；背景音乐版额外依赖 pygame 库；空格键可随时安全退出程序。
本课相关资源¶
实验素材下载
点击下方链接获取本节课全部资源（含课件、任务清单、安装包等）： 🔗 夸克网盘
| 序号 | 资源名称 | 类型 | 说明 |
|---|---|---|---|
| 1 | 最新-实验16 爱心代码.docx | Word | 实验原始文档 |
| 2 | python-3.10.6-amd64.exe | 软件 | 软件工具 |
| 3 | Python安装和Pycharm配置准备工作.docx | Word | 文档素材 |
| 4 | Python安装和本地Pycharm配置指南.docx | Word | 文档素材 |
| 5 | 【改】实验16-爱心代码与粒子特效合集-爱心代码2.html | HTML | |
| 6 | 大爱心.html | HTML | |
| 7 | 实验16 爱心代码操作手册.docx | Word | 文档素材 |
| 8 | 实验16-爱心代码.zip | ZIP | 学习素材/数据集 |
| 9 | 实验16-爱心代码与粒子特效合集-爱心代码-BGM版.py | 代码 | |
| 10 | 实验16-爱心代码与粒子特效合集-爱心代码1.py | 代码 | |
| 11 | 实验16-爱心代码与粒子特效合集-爱心代码2.html | HTML | |
| 12 | bgm.mp3 | 音频 | 音频素材 |
| 13 | 操作.mp4 | 视频 | 操作演示 |