--- 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= var inputElement var txts=[] function setup(){ createCanvas (windowWidth, windowHeight); background (100); inputElement=createInput("") inputElement. position (50, 50 ) inputElement. input (userInput) } function userInput(){ txts.push({ text: this.value(), x: width/2, y: 50 }) this.value('') } function draw() { background(0); fill(255) textSize(50) for(var i=0;i<txts.length;i++){ let txt = txts[i] text(txt,text, txt.x , txt .y) } } ``` --- ### 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. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲.md 打开方式 当前显示11. 學生版_物件導向與向量(1) - Class 粒子系統與互動遊戲.md。