# 第二次作業 陳昱廷
---
## 產生多個元件
---
### class的constructor定義內容
#### 執行後的畫面
```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的畫圖程式碼
#### 執行後的圖片
```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的移動內容
#### 執行後的畫面
```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
// }
// }
```
---
### 發射子彈
#### 執行後的畫面
```javascript=
//---------------按一下產生一個飛彈----------------------------
bullet = new Bullet({
r:20,
color:"#6F00D2",
}) //在滑鼠按下的地方，產生一個新的 Bullet class元件(產生一個飛彈)
bullets.push(bullet) //把bullet的物件放入到bullets陣列內(丟到倉庫)
bullet_sound.play()
}
```
---
### 物件消失不見
#### 執行後的圖片
```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
// }
// }
```
---
### 計算得分
#### 執行後的畫面
```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)
}
}
```
Sign in with Wallet
Connect another wallet