← 编程学习中心
📖

Preparation

8 个课程
1
如何学习编程
2
计算机基础
3
键盘初识与基准键位
4
字母与数字基础
5
Shift键魔法
6
编程符号专精
7
功能键与修饰键
8
键盘学习总结与进阶
📚

Basics

22 个课程
1
什么是编程?
2
Hello World - 你的第一个程序
3
变量基础概念 - 给信息贴标签
4
变量赋值和操作 - 变量的高级用法
5
数据类型基础 - 数字和字符串
6
基础运算符 - 数字运算王国
7
布尔类型与比较运算符 - 程序的判断基础
8
条件判断基础 - 让程序学会做决定
9
变量作用域 - 变量的生存范围
10
条件语句进阶 - 复杂判断与嵌套结构
11
逻辑运算符 - 简化复杂条件判断
12
循环语句 - 程序的重复机器
13
循环进阶 - break、continue与循环控制
14
嵌套循环与作用域
15
循环调试实战技巧
16
循环不变量 - 理解循环的数学规律
17
数组基础 - 数据的收纳盒
18
数组操作方法 - 添加、删除和管理
19
数组高级 - 探索数组的强大功能
20
引用概念 - 变量的不同行为
21
函数基础 - 解决重复代码的秘密武器
22
函数实践与应用 - 巩固基础,实战应用
🚀

Intermediate

11 个课程
1
从控制台到画布 - p5.js初体验
2
图形绘制工具箱 - 基础图形函数
3
让世界多彩 - 颜色系统详解
4
文字的艺术 - 文本绘制与样式
5
球体动起来 - 动画基础入门
6
球体的交互魔法 - 鼠标与条件判断
7
面向对象编程 - Class类与实例
8
球的家族 - 循环与数组应用
9
球的个性 - 函数封装与参数化
10
球的变身 - 形状模式与高级绘制
11
球的世界 - 综合创作项目
🎯

Advanced

6 个课程
1
对象类型
2
对象类型应用
3
自定义类型
4
函数进阶 - 箭头函数与高级编程技巧
5
内置方法 - 字符串与数组的魔法工具
6
Switch语句与字符串模板 - 更优雅的代码表达
← 编程学习中心
📖

Preparation

8 个课程
1
如何学习编程
2
计算机基础
3
键盘初识与基准键位
4
字母与数字基础
5
Shift键魔法
6
编程符号专精
7
功能键与修饰键
8
键盘学习总结与进阶
📚

Basics

22 个课程
1
什么是编程?
2
Hello World - 你的第一个程序
3
变量基础概念 - 给信息贴标签
4
变量赋值和操作 - 变量的高级用法
5
数据类型基础 - 数字和字符串
6
基础运算符 - 数字运算王国
7
布尔类型与比较运算符 - 程序的判断基础
8
条件判断基础 - 让程序学会做决定
9
变量作用域 - 变量的生存范围
10
条件语句进阶 - 复杂判断与嵌套结构
11
逻辑运算符 - 简化复杂条件判断
12
循环语句 - 程序的重复机器
13
循环进阶 - break、continue与循环控制
14
嵌套循环与作用域
15
循环调试实战技巧
16
循环不变量 - 理解循环的数学规律
17
数组基础 - 数据的收纳盒
18
数组操作方法 - 添加、删除和管理
19
数组高级 - 探索数组的强大功能
20
引用概念 - 变量的不同行为
21
函数基础 - 解决重复代码的秘密武器
22
函数实践与应用 - 巩固基础,实战应用
🚀

Intermediate

11 个课程
1
从控制台到画布 - p5.js初体验
2
图形绘制工具箱 - 基础图形函数
3
让世界多彩 - 颜色系统详解
4
文字的艺术 - 文本绘制与样式
5
球体动起来 - 动画基础入门
6
球体的交互魔法 - 鼠标与条件判断
7
面向对象编程 - Class类与实例
8
球的家族 - 循环与数组应用
9
球的个性 - 函数封装与参数化
10
球的变身 - 形状模式与高级绘制
11
球的世界 - 综合创作项目
🎯

Advanced

6 个课程
1
对象类型
2
对象类型应用
3
自定义类型
4
函数进阶 - 箭头函数与高级编程技巧
5
内置方法 - 字符串与数组的魔法工具
6
Switch语句与字符串模板 - 更优雅的代码表达

球的家族 - 循环与数组应用

概念介绍

想象一下,如果我们要管理100个球,难道要创建100个变量吗?ball1X, ball1Y, ball2X, ball2Y... 这样太复杂了!这里就要用到数组这个强大的工具。数组就像一个储物柜,可以存放很多个相似的东西,而循环则是高效处理数组中每个元素的方法。

学习目标

  • 掌握数组存储多个球的概念和方法
  • 学会用for循环遍历数组绘制所有球
  • 理解从分散变量到对象数组的进化
  • 学习动态管理:添加、删除球对象
  • 掌握批量操作和群体效果

🔄 复习:基础课程中的数组

还记得基础课程中学的数组吗?

加载代码编辑器...

现在我们要把数组的概念应用到球的图形世界中!


📦 数组存储球

从单个球到球的数组

加载代码编辑器...

数组中的球对象

每个球不再是简单的位置变量,而是一个包含所有属性的对象:

🏷️ TypeScript类型:给球对象贴标签

当我们有很多球对象时,如何确保每个球都有相同的属性?如何避免写错属性名?TypeScript的类型定义就是我们的解决方案!

为什么需要类型定义?

想象一下,如果没有统一的"球"的模板:

加载代码编辑器...

定义球的类型

使用type关键字定义一个球的"模板":

加载代码编辑器...

类型就像是球的"产品说明书":

  • 规定了每个球必须有哪些属性
  • 规定了每个属性应该是什么类型
  • TypeScript会帮我们检查错误

使用类型定义创建球

加载代码编辑器...

🔄 与基础课程的连接

还记得基础课程中的变量类型吗?

加载代码编辑器...

现在我们在升级!:

  • 基础课程:简单数据类型(string, number, boolean)
  • 中级课程:复杂对象类型(Ball类型包含多个属性)

就像从搭积木块到搭建完整的汽车模型!

📦 函数与球对象:传递、修改和复制

现在我们有了Ball类型,让我们学习如何用函数来操作球对象。这是游戏中非常重要的概念!

值传递 vs 引用传递

还记得基础课程中的函数参数吗?现在我们要学习一个重要的概念:

加载代码编辑器...

🤔 重要概念理解

引用传递 vs 值传递:

  • 引用传递:函数直接修改原始对象
  • 值传递:函数只处理值的副本

生活中的例子:

  • 引用传递:就像直接在原文件上编辑
  • 值传递:就像先复印文件,在复印件上编辑

实际游戏应用

加载代码编辑器...

现在我们学会了:

  • ✅ 类型定义:确保数据结构一致性
  • ✅ 函数传递:如何操作对象参数
  • ✅ 引用 vs 值:理解对象修改机制
  • ✅ 实际应用:碰撞检测和游戏逻辑

🔄 循环渲染球群

让我们回到之前的球群渲染例子:

加载代码编辑器...

🔄 循环渲染球群

规则排列的球

加载代码编辑器...

随机分布的球

加载代码编辑器...

💻 实践练习

练习1:彩色球阵 🌈

创建不同颜色的球阵列:

加载代码编辑器...

练习2:动态球数 ➕➖

动态改变球的数量:

加载代码编辑器...

练习3:球群动画 🌊

所有球同时做相同动画:

加载代码编辑器...

练习4:球的互动 🤝

球之间的简单互动:

加载代码编辑器...

练习5:点击添加球 🖱️

点击画布添加新球到数组:

加载代码编辑器...

练习6:球的分类 🏷️

根据属性对球进行分类管理:

加载代码编辑器...

练习7:球的管理系统 🗂️

完整的球对象管理系统:

加载代码编辑器...

练习8:高级数据管理 📊

使用高级数组方法管理球的属性:

加载代码编辑器...

🎯 本课重点总结

核心概念

  • ✅ 数组存储:用数组管理多个球对象
  • ✅ 循环渲染:for循环遍历数组绘制所有球
  • ✅ 对象数组:每个球是包含多个属性的对象
  • ✅ 动态管理:添加、删除数组中的球对象

数组操作

  • ✅ 添加元素:balls.push(newBall)
  • ✅ 删除元素:balls.splice(index, 1)
  • ✅ 遍历数组:for (let i = 0; i < balls.length; i++)
  • ✅ 数组长度:balls.length

高级应用

  • ✅ 批量操作:同时对所有球执行相同操作
  • ✅ 分类管理:按属性对球进行分组
  • ✅ 统计计算:使用filter, reduce等高级方法
  • ✅ 性能优化:合理的数组管理策略

与基础课程的连接

  • ✅ 数组基础:从简单数据到复杂对象数组
  • ✅ 循环应用:for循环在图形渲染中的应用
  • ✅ 数据结构:对象存储多维信息

🚀 下一步

太棒了!你已经学会了管理球的世界!你掌握了:

  • 📦 数组管理:高效存储和组织多个球
  • 🔄 循环渲染:批量绘制和更新球群
  • 🎯 动态管理:实时添加和删除球对象
  • 📊 高级操作:统计、分类、筛选球群

下一课我们将学习:

  • 🔧 函数封装:创建可重用的球绘制函数
  • 🎨 参数化设计:用函数参数控制球的外观
  • 🏗️ 模块化思维:将复杂功能分解为简单函数
  • 💡 代码重用:减少重复,提高效率

准备好让你的代码变得更加优雅和高效了吗?

p5.js官方参考

  • Learn: Arrays
  • Reference: push()
  • Reference: pop()
  • Reference: splice()
  • Reference: filter()
  • Reference: colorMode()
Previous lesson
Previous
面向对象编程 - Class类与实例
Next
球的个性 - 函数封装与参数化
Next lesson