---
# System prepended metadata

title: 11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲

---


---
tags: 程式設計,第十一章,物件導向與向量 - Class 粒子系統與互動遊戲，學生版,互動藝術程式創作入門,Creative Coding
---
# 11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲

![](https://i.imgur.com/Su8jVvA.png)


```javascript=



```



---

![](https://i.imgur.com/zcXNt71.gif)

加上一些屬性內容
```javascript=



```
## 如果要產生多個圓，就會顯得很複雜的程式碼




* 為什麼要用類別(Class)來生成物件呢？
* 可以大量快速建立同類型的物件
* 把常常針對物件執行的函式綁訂在方法上面，簡化程式碼，例如圖形的繪製與更新
* 建立類型的方法
- Class語法
    - new class 建立物件
    - constructor 初始化
        - this
        - args 參數
    - method 自訂函數
        - update / draw

---



### 利用class，先產生一個圓
![](https://i.imgur.com/9UW8BWy.gif)

```javascript=



```


---
![](https://i.imgur.com/RTyLFb8.gif)
宣告一個陣列balls=[]

```javascript=


```


---
## 可以傳參數
![](https://i.imgur.com/E0WwbWU.gif)

```javascript=



```


## 如果沒有傳值過去，可設定預設值
![](https://i.imgur.com/E0WwbWU.gif)


```javascript=



```
---
## 改變大小

![](https://i.imgur.com/KnK87Hk.gif)


```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=



```




---
對於物件畫面的重畫
![](https://i.imgur.com/cUCBkfx.gif)
```javascript=



```
11. 學 ... 遊戲.md
目前顯示的是「11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲.md」。