---
tags: 程式設計,第十一章,物件導向與向量 - Class 粒子系統與互動遊戲，學生版,互動藝術程式創作入門,Creative Coding
---
# 11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲
```javascript=
```
---
加上一些屬性內容
```javascript=
```
## 如果要產生多個圓，就會顯得很複雜的程式碼
* 為什麼要用類別(Class)來生成物件呢？
* 可以大量快速建立同類型的物件
* 把常常針對物件執行的函式綁訂在方法上面，簡化程式碼，例如圖形的繪製與更新
* 建立類型的方法
- Class語法
- new class 建立物件
- constructor 初始化
- this
- args 參數
- method 自訂函數
- update / draw
---
### 利用class，先產生一個圓
```javascript=
```
---
宣告一個陣列balls=[]
```javascript=
```
---
## 可以傳參數
```javascript=
var colors = "fec5bb-fcd5ce-fae1dd-f8edeb-e8e8e4-d8e2dc-ece4db-ffe5d9-ffd7ba-fec89a".split("-").map(a=>"#"+a)
class Ball{
constructor(args){ //預設值
this.r =args.r || random(150)
this.p = args.p || {x:random(width),y:random(height)} //位置
this.v = {x:random(-1,1),y:random(-1,1)} //
this.color = random(colors)
}
}
var ball
var balls = []
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
for(var i=0;i<10;i++){
ball = new Ball({
p:{x:width/2,y:height/2}
}) //產生一個新的Ball class元件
balls.push(ball)
}
}
function draw() {
background(0);
for(var i =0;i<balls.length;i++){
let ball = balls[i]
fill(ball.color)
ellipse(ball.p.x, ball.p.y , ball.r);
ball.p.x += ball.v.x
ball.p.y += ball.v.y
}
}
```
## 如果沒有傳值過去，可設定預設值
```javascript=
```
---
## 改變大小
```javascript=
```
---
## 初始值設定後，設定他的一些動作
繪製與動作
繪製
```javascript=
```
---
### class的內容設定
```javascript=
```
---
### 實際運作的程式碼
```javascript=
```
---
## 針對陣列，for的另外一種寫法
也可以把
```javascript=
for(var i=0;i<balls.length;i++){
```
改為
```javascript=
for(let ball of balls){
```
(另外，需要取消執行let ball = balls[i];)
---
```javascript=
```
## 設定跳動的球
* 加入加速度
```javascript=
```
---
## 加入摩擦力
```javascript=
this.v.x*=0.99
this.v.y*=0.99
```
---
```javascript=
```
---
對於物件畫面的重畫
```javascript=
```
11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲.md
打开方式
当前显示11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲.md。
Sign in with Wallet
Connect another wallet