---
# System prepended metadata

title: 第二次作業  陳昱廷

---

#  第二次作業  陳昱廷
---
## 產生多個元件
---
### class的constructor定義內容
#### 執行後的畫面
![](https://hackmd.io/_uploads/ByyzoDNIh.gif)

```javascript=
var monster_colors ="e7ecef-274c77-6096ba-a3cef1-8b8c89".split("-").map(a=>"#"+a)
class Monster{//宣告一個怪物類別，名稱為Monster
    constructor(args){//預設值，基本資料(物件的顏色，移動的速度，大小，初始顯示位置)
        this.r = args.r || random(45,80) //設計怪物的主體，如果傳參數args.r來設定怪物大小，沒有傳參數，就以100為主
        this.p = args.p || createVector(random(width),random(height)) //建立一個向量，由電腦亂數抽取顯示的初始位置
        this.v = args.v || createVector(random(-1,1),random(-1,1))//移動的速度，如果沒有傳參數args參數，就會利用亂數(-1~1之間)抽出X，Y軸的移動速度
        this.color = args.color || random(monster_colors)
        this.mode = random(["happy","bad"])
    }
    draw(){//畫出元件
        push()//重新設定圓點位置
             translate(this.p.x,this.p.y)//將原點座標移動到物件中心
             fill(this.color)
             noStroke()
             ellipse(0,0,this.r)
            
             if(this.mode=="happy"){
                 fill(255)
                 ellipse(0,0,this.r/2)
                 fill(0)//黑色
                 ellipse(0,0,this.r/3)
             }else{
                 fill(255)
                 arc(0,0,this.r/2,this.r/2,0,PI)
                 fill(0)
                 arc(0,0,this.r/3,this.r/3,0,PI)
             }
                 stroke(this.color)
                 strokeWeight(3)
                 noFill()
                //  line(this.r/2,0,this.r,0)
                
                for(var j=0;j<6;j++){//怪物6隻腳
                    rotate(PI/3) //旋轉60度 180/3
                    beginShape()
                    for(var i=0;i<(this.r/2);i++){
                        vertex(this.r/2+i,sin(i/4+frameCount/10)*10)
                    }
                    endShape()
                }
               
                        

        pop()//原點恢復到視窗左上角
    }

    update(){//計算出移動元件後的位置
        this.p.add(this.v)
        if(this.p.x<=0 || this.p.x>=width){ // X軸碰到左邊(<=0)，或是碰到右邊(>=width)
            this.v.x = -this.v.x //把速度方向改變
          }
          if(this.p.y<=0 || this.p.y>=height){ //Y軸碰到上邊(<=0)，或是碰到下邊(>=height)
            this.v.y = -this.v.y //把速度方向改變
          }

    }
}

```
---
### class的畫圖程式碼
#### 執行後的圖片
![](https://hackmd.io/_uploads/BJj-q4182.png)

```javascript=
// let points = [
// [7,10],[12,6],[12,4],[9,1],[10,-2],[10,-7],[5,-10],[1,-11],[1,-13],[-3,-13],[-14,-4],[-13,4],
// [-11,9],[-12,13],[-10,16],[-8,17],[-5,13],[3,13],[7,16],[10,15],[10,13],[7,10]
// ]

// let points =[[6, -3], [5, 0], [7, 2],[7,4],[6,5],[9,5],[9,6],[8,7],[7,8],[6,8],[5,10],[4,10],[4,9],[5,8],[4,5],[0,5],[-2,4],[-4,1],[-4,-6],[-5,-7],[-10,-6],[-9,-7],[-4,-8],[-3,-7],[-1,-5],[4,4],[3,2],[3,1],[5,-3],[4,-4],[5,-4],[6,-3],[4,1],[5,2],[1,-4],[2,-5],[2,-8],[8,-8],[7,-7],[3,-7],[3,-1],[4,-1],[3,-1],[2,-3],[0,-5],[-4,-2],[-3,-4],[-1,-5],[-1,-9],[5,-10],[6,-9],[0,-8],[0,-5],[1,0],[-1,3],[5,-4],[6,-4],[7,-3],[6,1]];

let points = [[0, 0], [-1,-3], [0, -3],[3,-4],[6,-3],[6,-9],[8,-9],[8,-6],[8,-2],[6,-3],[-4,-5],[-5,-2],[-8,1],[-11,0],[-13,1],[-12,1], [-10,2], [-11, 5],[-10,7],[-8,8],[-5,9],[-2,9], [3,7],[6,8],[9,7],[10,6],[12,4],[12,0],[11,-3],[11,-9],[9,-9],[9,-4],[8,-2],[8,1],[9,4],[-1,-3],[-2,-7],[-2,-9],[-4,-9],[-4,-5],[-5,0],[-13,1],[-14,3],[-14,8],[-13,5],[-12,6],[-11,6]]; //list資料，(犀牛)

var fill_colors = "22577a-38a3a5-57cc99-80ed99-c7f9cc".split("-").map(a=>"#"+a)
var line_colors = "e6ccb2-ddb892-b08968-7f5539-9c6644".split("-").map(a=>"#"+a)



//---------------設定畫point所有點的物件變數----------
var ball //目前要處理的物件，暫時放在 ball 變數內
var balls = [] // 把產生的"所有"物件，為物件的倉庫，所有的物件資料都在此

//---------------設定飛彈物件的定義-----------
var bullet //目前要處理的物件，暫時放在 bullet 變數內
var bullets = []

var score =0

//---------------設定怪物物件的定義-----------
var monster //目前要處理的物件，暫時放在 monster 變數內
var monsters = [] 


function preload(){
	rhino_sound = loadSound("sound/rhino.wav");
  bullet_sound =  loadSound("sound/Launching wire.wav")
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  for(var i=0;i<15;i=i+1){// 
     ball= new Obj({}) // 產生一個新的obj class 元件
     balls.push(ball) //把ball的物件放入到陣列內
  }
  for(var i=0;i<15;i=i+1){// 
    monster= new Monster({}) // 產生一個新的monster class 元件
    monsters.push(monster) //把monster的物件放入到陣列內
 }
}

function draw() {
  background("#66B3FF");
  // for(var j=0;j<balls.length;j=j+1){
  //   ball=balls[j]
  //   ball.draw()
  //   ball.update()
  // }
 
  //大象顯示
  for(let ball of balls)//只要是陣列的方式，都可以利用此方式處理
  {
    ball.draw()
    ball.update()
    for(let bullet of bullets){
        if(ball.isBallInRanger(bullet.p.x,bullet.p.y)){
          balls.splice(balls.indexOf(ball),1)
          bullets.splice(bullets.indexOf(bullet),1)
          score = score+1
          rhino_sound.play()
        
        }
    }
  }

  //飛彈顯示
  for(let bullet of bullets)//只要是陣列的方式，都可以利用此方式處理
  {
    bullet.draw()
    bullet.update()
  }

  //怪物顯示
  for(let monster of monsters)//只要是陣列的方式，都可以利用此方式處理
  {
    monster.draw()
    monster.update()
  }

  textSize(50)
  text(score,50,50) //在座標為(50,50)上，顯示score分數內容
  push()
    let dx = mouseX - width/2 //設定中心隨滑鼠轉動
    let dy = mouseY - height/2 //設定中心隨滑鼠轉動
    let angle = atan2(dy,dx) //設定中心隨滑鼠轉動
    translate(width/2,height/2) //設定中心隨滑鼠轉動
    fill("#9a8c98")
    noStroke()
    rotate(angle) //設定中心隨滑鼠轉動
    triangle(-25,25,-25,-25,50,0)
    fill("#00A600")
    ellipse(0,0,30)
  pop()
}

//------------------------加入滑鼠按下增加新物件
function mousePressed(){
  // ball= new Obj({
  //   p:{x:mouseX,y:mouseY}
  // }) // 在滑鼠按下的地方，產生一個新的obj class 元件
  // balls.push(ball) //把ball的物件放入到陣列內(丟到倉庫)

  //在物件上按下滑鼠，物件消失不見，分數加1
  // for(let ball of balls){ //檢查每一個物件
  //   if(ball.isBallInRanger()){
  //     balls.splice(balls.indexOf(ball),1) //<將物件資料刪除>從倉庫balls取出背滑鼠按到的物件編號(balls.indexOf(ball),1)，只取一個
  //     score=score+1
  //   }
  // }
//---------------按一下產生一個飛彈----------------------------
bullet = new Bullet({
  r:20,
  color:"#6F00D2",
}) //在滑鼠按下的地方，產生一個新的 Bullet class元件(產生一個飛彈)
bullets.push(bullet) //把bullet的物件放入到bullets陣列內(丟到倉庫)
bullet_sound.play()
}


```
---
### class的移動內容
#### 執行後的畫面
![](https://hackmd.io/_uploads/HklpoP4Un.gif)

![](https://s21.aconvert.com/convert/p3r68-cdx67/x4r7z-kkgtz.gif)
```javascript=
class Obj{// 宣告一個類別，針對一個畫的圖案，
  constructor(args){//預設值，基本資料(物件的顏色，移動的速度，大小，初始顯示位置)
    // this.p = args.p || {x:random(width), y:random(height)}//該物件初始位置，產生亂數，螢幕視窗大小中隨意產生。||(or)當產生一個物件時，有傳給位置參數，則使用該參數，如果沒有
    this.p = args.p || createVector(random(width),random(height))
    // this.v = {x:random(-1,1),y:random(-1,1)}//物件移動的速度
    this.v = createVector(random(-1,1),random(-1,1)) //把原本的({X:...,Y:...}改成向量方式呈現
    this.size = random(5,20)//物件放大之倍率
    this.color = random(fill_colors) 
    this.stroke = random(line_colors)//物件框線顏色
  }
  //-----------------------------------------------------------------

  //------------------------------畫圖--------------------------------
  draw(){//畫出單一個物件形狀
    push()//執行push()的指令後，依照我的設定，設定原點(0，0)的位置
     translate(this.p.x,this.p.y)// 以該物件位置為原點
     scale(this.v.x<0?1:-1,-1)//前方條件成立 1 ，否則為-1 大象移動方向依照鼻子方向
     fill(this.color)
     stroke(this.stroke)
     strokeWeight(3)
     beginShape()
     for(var k=0;k<points.length;k=k+1){
      // vertex(points[k][0]*this.size,points[k][1]*this.size)//只要設定一個點，當指令到endShape()，會把所有的點串接再一起
      curveVertex(points[k][0]*this.size,points[k][1]*this.size)
     }
     endShape() 
    pop()//執行pop()，原點(0，0)的設定，回到視窗的左上角
  }
//---------------------------物件碰到視窗周圍，改變方向------------------------
  update(){ //移動程式碼內容
  // this.p.x=this.p.x+this.v.x //改變新位置，X軸目前位置(this.p.x)加上X軸的移動速度
  // this.p.y=this.p.y+this.v.y //Y軸目前位置(this.p.y)加上Y軸的移動速度
  this.p.add(this.v) // 設定好向量後，使用add，就可以與上面兩行指令一樣的效果
  //向量用sub==>減號

  //知道滑鼠的位置，並建立滑鼠的向量
  let mouseV = createVector(mouseX,mouseY) // 把滑鼠的位置轉換成一個向量值
  let delta = mouseV.sub(this.p).limit(this.v.mag()*2)//sub計算出滑鼠所在位置的向量(mouseV)到物件向量(this.p)的距離，每次以3移動靠近
  //this.v.mag() 代表該物件的速度大小(一個向量值有大小與方向)
  this .p.add(delta)

  if(this.p.x<=0 || this.p.x>=width){ // X軸碰到左邊(<=0)，或是碰到右邊(>=width)
    this.v.x = -this.v.x //把速度方向改變
  }
  if(this.p.y<=0 || this.p.y>=height){ //Y軸碰到上邊(<=0)，或是碰到下邊(>=height)
    this.v.y = -this.v.y //把速度方向改變
  }
} 
  isBallInRanger(x,y){ //功能:判斷滑鼠按下的位置是否在物件的範圍內
    let d = dist(x,y,this.p.x,this.p.y)  //計算兩點(滑鼠按下的點與物件中心點)之間的距離，放到d變數內
    if(d<4*this.size){//d<? 要依照自己畫的圖形的座標值大小判斷 ? 要填寫多少 
       return true //滑鼠與物件的距離小於物件的寬度，代表碰觸了，則傳回true的值(碰觸)
    } else{
       return false //滑鼠與物件的距離大於物件的寬度，代表沒有碰觸，則傳回false的值(未碰觸)
}
}
}


```
---
### 產生20個相同class的元件
```javascript=
//定義一個bullet 物件的class
class Bullet{
  constructor(args){//預設值，基本資料(物件的顏色，移動的速度，大小，初始顯示位置)
      this.r = args.r || 20 //設計的飛彈有大有小時，就傳參數，args.r來設定飛彈大小，沒有傳參數，就以20為主
      this.p = args.p || createVector(width/2,height/2,mouseY-height/2) //建立一個向量{x:width/2,y:height/2}
      this.v = args.v || createVector(mouseX-width/2,mouseY-height/2).limit(5)
      this.color = args.color || "#921AFF"
  }
draw(){ //繪出物件程式碼
  push()
     translate(this.p.x,this.p.y)
     fill(this.color)
     noStroke()
     ellipse(0,0,this.r)
  pop()

}
update(){ //計算出移動後的位置
   //this.p.x = this.p.x+this.v.x
   //this.p.y = this.p.y+this.v.y  
   this.p.add(this.v)
}
}

```
---
### 元件的大小，元件的左右移動，速度不一
```javascript=
update(){//計算出移動元件後的位置
        this.p.add(this.v)
        if(this.p.x<=0 || this.p.x>=width){ // X軸碰到左邊(<=0)，或是碰到右邊(>=width)
            this.v.x = -this.v.x //把速度方向改變
          }
          if(this.p.y<=0 || this.p.y>=height){ //Y軸碰到上邊(<=0)，或是碰到下邊(>=height)
            this.v.y = -this.v.y //把速度方向改變
          }

    }

```
---
### 滑鼠按下之後，消失不見
```javascript=
//------------------------加入滑鼠按下增加新物件
function mousePressed(){
  // ball= new Obj({
  //   p:{x:mouseX,y:mouseY}
  // }) // 在滑鼠按下的地方，產生一個新的obj class 元件
  // balls.push(ball) //把ball的物件放入到陣列內(丟到倉庫)

  //在物件上按下滑鼠，物件消失不見，分數加1
  // for(let ball of balls){ //檢查每一個物件
  //   if(ball.isBallInRanger()){
  //     balls.splice(balls.indexOf(ball),1) //<將物件資料刪除>從倉庫balls取出背滑鼠按到的物件編號(balls.indexOf(ball),1)，只取一個
  //     score=score+1
  //   }
  // }

```
---
### 發射子彈
#### 執行後的畫面
![](https://hackmd.io/_uploads/r12ShwVU2.gif)

![](https://s33.aconvert.com/convert/p3r68-cdx67/y012a-f8ykg.gif)
```javascript=
//---------------按一下產生一個飛彈----------------------------
bullet = new Bullet({
  r:20,
  color:"#6F00D2",
}) //在滑鼠按下的地方，產生一個新的 Bullet class元件(產生一個飛彈)
bullets.push(bullet) //把bullet的物件放入到bullets陣列內(丟到倉庫)
bullet_sound.play()
}

```
---
### 物件消失不見
#### 執行後的圖片
![](https://hackmd.io/_uploads/SJXJTDNU2.gif)

```javascript=
function mousePressed(){
  // ball= new Obj({
  //   p:{x:mouseX,y:mouseY}
  // }) // 在滑鼠按下的地方，產生一個新的obj class 元件
  // balls.push(ball) //把ball的物件放入到陣列內(丟到倉庫)

  //按下滑鼠，射出飛彈，物件消失不見，分數加1
  // for(let ball of balls){ //檢查每一個物件
  //   if(ball.isBallInRanger()){
  //     balls.splice(balls.indexOf(ball),1) //<將物件資料刪除>從倉庫balls取出背滑鼠按到的物件編號(balls.indexOf(ball),1)，只取一個
  //     score=score+1
  //   }
  // }
```
---
### 計算得分
#### 執行後的畫面
![](https://hackmd.io/_uploads/B11KhvV8n.gif)

```javascript=
textSize(50)
  text(score,50,50) //在座標為(50,50)上，顯示score分數內容
  push()
    let dx = mouseX - width/2 //設定中心隨滑鼠轉動
    let dy = mouseY - height/2 //設定中心隨滑鼠轉動
    let angle = atan2(dy,dx) //設定中心隨滑鼠轉動
    translate(width/2,height/2) //設定中心隨滑鼠轉動
    fill("#9a8c98")
    noStroke()
    rotate(angle) //設定中心隨滑鼠轉動
    triangle(-25,25,-25,-25,50,0)
    fill("#00A600")
    ellipse(0,0,30)
  pop()

```
---
## 結束後顯示畫面，所有程式碼
### (1.sketch.js2.obj.js3.monster.js4.bullet.js)
```javascript=
// let points = [
// [7,10],[12,6],[12,4],[9,1],[10,-2],[10,-7],[5,-10],[1,-11],[1,-13],[-3,-13],[-14,-4],[-13,4],
// [-11,9],[-12,13],[-10,16],[-8,17],[-5,13],[3,13],[7,16],[10,15],[10,13],[7,10]
// ]

// let points =[[6, -3], [5, 0], [7, 2],[7,4],[6,5],[9,5],[9,6],[8,7],[7,8],[6,8],[5,10],[4,10],[4,9],[5,8],[4,5],[0,5],[-2,4],[-4,1],[-4,-6],[-5,-7],[-10,-6],[-9,-7],[-4,-8],[-3,-7],[-1,-5],[4,4],[3,2],[3,1],[5,-3],[4,-4],[5,-4],[6,-3],[4,1],[5,2],[1,-4],[2,-5],[2,-8],[8,-8],[7,-7],[3,-7],[3,-1],[4,-1],[3,-1],[2,-3],[0,-5],[-4,-2],[-3,-4],[-1,-5],[-1,-9],[5,-10],[6,-9],[0,-8],[0,-5],[1,0],[-1,3],[5,-4],[6,-4],[7,-3],[6,1]];

let points = [[0, 0], [-1,-3], [0, -3],[3,-4],[6,-3],[6,-9],[8,-9],[8,-6],[8,-2],[6,-3],[-4,-5],[-5,-2],[-8,1],[-11,0],[-13,1],[-12,1], [-10,2], [-11, 5],[-10,7],[-8,8],[-5,9],[-2,9], [3,7],[6,8],[9,7],[10,6],[12,4],[12,0],[11,-3],[11,-9],[9,-9],[9,-4],[8,-2],[8,1],[9,4],[-1,-3],[-2,-7],[-2,-9],[-4,-9],[-4,-5],[-5,0],[-13,1],[-14,3],[-14,8],[-13,5],[-12,6],[-11,6]]; //list資料，(犀牛)

var fill_colors = "22577a-38a3a5-57cc99-80ed99-c7f9cc".split("-").map(a=>"#"+a)
var line_colors = "e6ccb2-ddb892-b08968-7f5539-9c6644".split("-").map(a=>"#"+a)



//---------------設定畫point所有點的物件變數----------
var ball //目前要處理的物件，暫時放在 ball 變數內
var balls = [] // 把產生的"所有"物件，為物件的倉庫，所有的物件資料都在此

//---------------設定飛彈物件的定義-----------
var bullet //目前要處理的物件，暫時放在 bullet 變數內
var bullets = []

var score =0

//---------------設定怪物物件的定義-----------
var monster //目前要處理的物件，暫時放在 monster 變數內
var monsters = [] 


function preload(){
	rhino_sound = loadSound("sound/rhino.wav");
  bullet_sound =  loadSound("sound/Launching wire.wav")
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  for(var i=0;i<15;i=i+1){// 
     ball= new Obj({}) // 產生一個新的obj class 元件
     balls.push(ball) //把ball的物件放入到陣列內
  }
  for(var i=0;i<15;i=i+1){// 
    monster= new Monster({}) // 產生一個新的monster class 元件
    monsters.push(monster) //把monster的物件放入到陣列內
 }
}

function draw() {
  background("#66B3FF");
  // for(var j=0;j<balls.length;j=j+1){
  //   ball=balls[j]
  //   ball.draw()
  //   ball.update()
  // }
 
  //大象顯示
  for(let ball of balls)//只要是陣列的方式，都可以利用此方式處理
  {
    ball.draw()
    ball.update()
    for(let bullet of bullets){
        if(ball.isBallInRanger(bullet.p.x,bullet.p.y)){
          balls.splice(balls.indexOf(ball),1)
          bullets.splice(bullets.indexOf(bullet),1)
          score = score+1
          rhino_sound.play()
        
        }
    }
  }

  //飛彈顯示
  for(let bullet of bullets)//只要是陣列的方式，都可以利用此方式處理
  {
    bullet.draw()
    bullet.update()
  }

  //怪物顯示
  for(let monster of monsters)//只要是陣列的方式，都可以利用此方式處理
  {
    monster.draw()
    monster.update()
  }

  textSize(50)
  text(score,50,50) //在座標為(50,50)上，顯示score分數內容
  push()
    let dx = mouseX - width/2 //設定中心隨滑鼠轉動
    let dy = mouseY - height/2 //設定中心隨滑鼠轉動
    let angle = atan2(dy,dx) //設定中心隨滑鼠轉動
    translate(width/2,height/2) //設定中心隨滑鼠轉動
    fill("#9a8c98")
    noStroke()
    rotate(angle) //設定中心隨滑鼠轉動
    triangle(-25,25,-25,-25,50,0)
    fill("#00A600")
    ellipse(0,0,30)
  pop()
}

//------------------------加入滑鼠按下增加新物件
function mousePressed(){
  // ball= new Obj({
  //   p:{x:mouseX,y:mouseY}
  // }) // 在滑鼠按下的地方，產生一個新的obj class 元件
  // balls.push(ball) //把ball的物件放入到陣列內(丟到倉庫)

  //在物件上按下滑鼠，物件消失不見，分數加1
  // for(let ball of balls){ //檢查每一個物件
  //   if(ball.isBallInRanger()){
  //     balls.splice(balls.indexOf(ball),1) //<將物件資料刪除>從倉庫balls取出背滑鼠按到的物件編號(balls.indexOf(ball),1)，只取一個
  //     score=score+1
  //   }
  // }
//---------------按一下產生一個飛彈----------------------------
bullet = new Bullet({
  r:20,
  color:"#6F00D2",
}) //在滑鼠按下的地方，產生一個新的 Bullet class元件(產生一個飛彈)
bullets.push(bullet) //把bullet的物件放入到bullets陣列內(丟到倉庫)
bullet_sound.play()
}


```
```javascript=
class Obj{// 宣告一個類別，針對一個畫的圖案，
  constructor(args){//預設值，基本資料(物件的顏色，移動的速度，大小，初始顯示位置)
    // this.p = args.p || {x:random(width), y:random(height)}//該物件初始位置，產生亂數，螢幕視窗大小中隨意產生。||(or)當產生一個物件時，有傳給位置參數，則使用該參數，如果沒有
    this.p = args.p || createVector(random(width),random(height))
    // this.v = {x:random(-1,1),y:random(-1,1)}//物件移動的速度
    this.v = createVector(random(-1,1),random(-1,1)) //把原本的({X:...,Y:...}改成向量方式呈現
    this.size = random(5,20)//物件放大之倍率
    this.color = random(fill_colors) 
    this.stroke = random(line_colors)//物件框線顏色
  }
  //-----------------------------------------------------------------

  //------------------------------畫圖--------------------------------
  draw(){//畫出單一個物件形狀
    push()//執行push()的指令後，依照我的設定，設定原點(0，0)的位置
     translate(this.p.x,this.p.y)// 以該物件位置為原點
     scale(this.v.x<0?1:-1,-1)//前方條件成立 1 ，否則為-1 大象移動方向依照鼻子方向
     fill(this.color)
     stroke(this.stroke)
     strokeWeight(3)
     beginShape()
     for(var k=0;k<points.length;k=k+1){
      // vertex(points[k][0]*this.size,points[k][1]*this.size)//只要設定一個點，當指令到endShape()，會把所有的點串接再一起
      curveVertex(points[k][0]*this.size,points[k][1]*this.size)
     }
     endShape() 
    pop()//執行pop()，原點(0，0)的設定，回到視窗的左上角
  }
//---------------------------物件碰到視窗周圍，改變方向------------------------
  update(){ //移動程式碼內容
  // this.p.x=this.p.x+this.v.x //改變新位置，X軸目前位置(this.p.x)加上X軸的移動速度
  // this.p.y=this.p.y+this.v.y //Y軸目前位置(this.p.y)加上Y軸的移動速度
  this.p.add(this.v) // 設定好向量後，使用add，就可以與上面兩行指令一樣的效果
  //向量用sub==>減號

  //知道滑鼠的位置，並建立滑鼠的向量
  let mouseV = createVector(mouseX,mouseY) // 把滑鼠的位置轉換成一個向量值
  let delta = mouseV.sub(this.p).limit(this.v.mag()*2)//sub計算出滑鼠所在位置的向量(mouseV)到物件向量(this.p)的距離，每次以3移動靠近
  //this.v.mag() 代表該物件的速度大小(一個向量值有大小與方向)
  this .p.add(delta)

  if(this.p.x<=0 || this.p.x>=width){ // X軸碰到左邊(<=0)，或是碰到右邊(>=width)
    this.v.x = -this.v.x //把速度方向改變
  }
  if(this.p.y<=0 || this.p.y>=height){ //Y軸碰到上邊(<=0)，或是碰到下邊(>=height)
    this.v.y = -this.v.y //把速度方向改變
  }
} 
  isBallInRanger(x,y){ //功能:判斷滑鼠按下的位置是否在物件的範圍內
    let d = dist(x,y,this.p.x,this.p.y)  //計算兩點(滑鼠按下的點與物件中心點)之間的距離，放到d變數內
    if(d<4*this.size){//d<? 要依照自己畫的圖形的座標值大小判斷 ? 要填寫多少 
       return true //滑鼠與物件的距離小於物件的寬度，代表碰觸了，則傳回true的值(碰觸)
    } else{
       return false //滑鼠與物件的距離大於物件的寬度，代表沒有碰觸，則傳回false的值(未碰觸)
}
}
}
```
---
```javascript=
var monster_colors ="e7ecef-274c77-6096ba-a3cef1-8b8c89".split("-").map(a=>"#"+a)
class Monster{//宣告一個怪物類別，名稱為Monster
    constructor(args){//預設值，基本資料(物件的顏色，移動的速度，大小，初始顯示位置)
        this.r = args.r || random(45,80) //設計怪物的主體，如果傳參數args.r來設定怪物大小，沒有傳參數，就以100為主
        this.p = args.p || createVector(random(width),random(height)) //建立一個向量，由電腦亂數抽取顯示的初始位置
        this.v = args.v || createVector(random(-1,1),random(-1,1))//移動的速度，如果沒有傳參數args參數，就會利用亂數(-1~1之間)抽出X，Y軸的移動速度
        this.color = args.color || random(monster_colors)
        this.mode = random(["happy","bad"])
    }
    draw(){//畫出元件
        push()//重新設定圓點位置
             translate(this.p.x,this.p.y)//將原點座標移動到物件中心
             fill(this.color)
             noStroke()
             ellipse(0,0,this.r)
            
             if(this.mode=="happy"){
                 fill(255)
                 ellipse(0,0,this.r/2)
                 fill(0)//黑色
                 ellipse(0,0,this.r/3)
             }else{
                 fill(255)
                 arc(0,0,this.r/2,this.r/2,0,PI)
                 fill(0)
                 arc(0,0,this.r/3,this.r/3,0,PI)
             }
                 stroke(this.color)
                 strokeWeight(3)
                 noFill()
                //  line(this.r/2,0,this.r,0)
                
                for(var j=0;j<8;j++){//怪物8隻腳
                    rotate(PI/3) //旋轉60度 180/3
                    beginShape()
                    for(var i=0;i<(this.r/2);i++){
                        vertex(this.r/2+i,sin(i/4+frameCount/10)*10)
                    }
                    endShape()
                }
               
                        

        pop()//原點恢復到視窗左上角
    }

    update(){//計算出移動元件後的位置
        this.p.add(this.v)
        if(this.p.x<=0 || this.p.x>=width){ // X軸碰到左邊(<=0)，或是碰到右邊(>=width)
            this.v.x = -this.v.x //把速度方向改變
          }
          if(this.p.y<=0 || this.p.y>=height){ //Y軸碰到上邊(<=0)，或是碰到下邊(>=height)
            this.v.y = -this.v.y //把速度方向改變
          }

    }
}
```
---
```javascript=
//定義一個bullet 物件的class
class Bullet{
  constructor(args){//預設值，基本資料(物件的顏色，移動的速度，大小，初始顯示位置)
      this.r = args.r || 20 //設計的飛彈有大有小時，就傳參數，args.r來設定飛彈大小，沒有傳參數，就以20為主
      this.p = args.p || createVector(width/2,height/2,mouseY-height/2) //建立一個向量{x:width/2,y:height/2}
      this.v = args.v || createVector(mouseX-width/2,mouseY-height/2).limit(5)
      this.color = args.color || "#921AFF"
  }
draw(){ //繪出物件程式碼
  push()
     translate(this.p.x,this.p.y)
     fill(this.color)
     noStroke()
     ellipse(0,0,this.r)
  pop()

}
update(){ //計算出移動後的位置
   //this.p.x = this.p.x+this.v.x
   //this.p.y = this.p.y+this.v.y  
   this.p.add(this.v)
}
}
```
