達yo - week07

 今天要做的是google在2016年推出的萬聖節的小遊戲

1.1

在上面畫出線條

讓滑鼠按下去的時候有線可以畫出來

但放開時線條會消失

void mouseReleased(){

  background(255);

}

加入角色:玩家、ghost

*ghost移動時會有殘影，如果在void draw()函式裡加入background(255)來清背景，

ghost不會有殘影，但線就不會有殘影，看不到線被畫完整，需解決*

解決按下滑鼠能夠畫出有殘影的線(這一步畫出的是圓點)

執行畫面

放開滑鼠按鍵，線條消失

*用倒過來的for迴圈*

用正的for迴圈會清不乾淨，效率也慢

將圓點改成線條

  for(int i=0;i<pt.size()-1;i++){

    PVector p = pt.get(i),p2 = pt.get(i+1);

    line(p.x, p.y, p2.x, p2.y);//ellipse(p.x,p.y,3,3);

  }

要減1，不然會超過範圍，導致執行當機

執行畫面

2.1

畫出橫線到一定的長度變紅線

算差距

畫線

執行畫面

讓玩家跟ghost不跟線條一樣粗和變色

所以在它們前面各自加上stroke(0)

把顏色改成黑色

strokeWeight(1)它們的線條粗細

執行畫面

畫出往右下變成綠色線條

算往右下的移動量

往右下的移動量超過30就會變綠色

執行畫面

2.2

處理程式的小Bug:線條畫太快會沒有辦法變色 (因為沒有累積到變色的量)

改成float讓計算更精細

將x跟y的移動累積量相加做開根號

來解決畫太快沒法變色的問題

畫線

執行畫面

3.1

畫出往右上會變綠色的線條

往右下:green_part1

往右上:green_ok

畫完往右下 畫往右上

    if(green_part1==false && rightdown>150) green_part1 = true;
    else if(green_part1==true && rightup>150)green_ok = true;

畫線

執行畫面

執行畫面

做出往下的黃色勾勾

執行畫面

程式碼

ArrayList<PVector>pt = new ArrayList<PVector>();
void setup(){
  size(400,400);
  background(255);
}
float ghostX = 400,ghostY = 20;
void mouseDragged(){//按下mouse鍵，再拖它
  pt.add(new PVector(mouseX,mouseY));
}
void draw(){
  background(255);
  strokeWeight(1);
  stroke(0);ellipse(200,200,15,15);
  stroke(0);ellipse(ghostX,ghostY,15,15);
  //if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);
  strokeWeight(4);//線條變粗
  float dpx=0,dpy=0;//要看p.x和p2.x的差距 p.y和p2.y的差距
  float rightdown = 0,green_rightup = 0;//往右下,往右上
  float rightup = 0, yellow_rightdown = 0;//往右上，往左下
  boolean green_part1 = false,green_ok = false;
  boolean yellow_part1 = false,yellow_ok = false;
  for(int i=0;i<pt.size()-1;i++){
    PVector p = pt.get(i),p2 = pt.get(i+1);
    dpx += abs(p2.x - p.x);//累積x的移動量
    dpy += abs(p2.y - p.y);//累積y的移動量
    if(p2.x-p.x > 0 && p2.y-p.y > 0)rightdown += sqrt(dpx*dpx+dpy*dpy);
    if(green_part1 && p2.x-p.x > 0 && p2.y-p.y < 0)green_rightup += sqrt(dpx*dpx+dpy*dpy);
    if(p2.x-p.x > 0 && p2.y-p.y < 0)rightup += sqrt(dpx*dpx+dpy*dpy);
    if(yellow_part1 && p2.x-p.x > 0 && p2.y-p.y > 0)yellow_rightdown += sqrt(dpx*dpx+dpy*dpy);
    //ellipse(p.x,p.y,10,10);
    if(green_part1==false && rightdown>150) green_part1 = true;
    else if(green_part1==true && green_rightup>150)green_ok = true;
    if(yellow_part1==false && rightup>150) yellow_part1 = true;
    else if(yellow_part1==true && yellow_rightdown>150)yellow_ok = true;
  }
  if(dpx>100 && dpy<40) stroke(255,0,0);//type1紅色的橫線
  else if(dpx<40 && dpy>100) stroke(0,0,255);//type2藍色的直線
  else if(green_ok) stroke(0,255,0);///type3全部完成
  //else if(green_part1) stroke(0,128,0);//暗暗的綠色，type3的前半段，
  else if(yellow_ok) stroke(255,255,0);//type4全部完成
  else stroke(0);//不是，就黑色
  for(int i=0;i<pt.size()-1;i++){
    PVector p = pt.get(i),p2 = pt.get(i+1);
    line(p.x,p.y,p2.x,p2.y);
  }
  float dx = 200-ghostX,dy = 200-ghostY,len = sqrt(dx*dx+dy*dy);
  ghostX += dx/len/3;
  ghostY += dy/len/3;
  
}
void mouseReleased(){
  //background(255);
  for(int i=pt.size()-1;i>=0;i--){//倒過來的for迴圈
    pt.remove(i);
  }
}