互動技術概論week2_uc

# Week02

## 今天要做很像塔羅牌的東西

### PART1!!!

```

1.先做出背景

==> size(500,500);

2.劃出第一個牌面

==> rect(100,100,150,250,20);

3.填入顏色

==> fill(#629BE3);

4.畫入內側牌的大小

==> int w=25;

        rect(100-w/2,100-w/2,150+w,250+w,20);

```

### PART2 劃出好多張牌

>>> 圖片中的int w要設多少可以自己決定喔!!

```C

1.透過void setup畫出背景大小500x500

2.透過void draw呼叫出下方函式繪製出的圖像

3.函式draw card()裡面設置x,y數值==>卡片成型的位置✧*｡٩(ˊᗜˋ*)

void setup(){

  size(500,500);

}

int w=25;

void draw(){

  drawCard(100,100);

  drawCard(150,100);

}

void drawCard(int x,int y){

  fill(255);

  rect(x-w/2,y-w/2,150+w,250+w,20);

  fill(#629BE3);

  rect(x,y,150,250,20);

}

```

### PART3 做出像撲克牌面的東西~

```C

1.最一開始的步驟跟前面沒有不一樣

2.把DrawCard改名成PokerCard(但其實不改也沒差)

3.然後打上文字的位置

      fill(0);

      textSize(40);

      text(face,x,y+40);

```

### PART4 加上中文字怎麼加???

>>> 只要加上  PFont font=createFont("標楷體",40);  和 textFont(font);

就可以變成中文字喔~

```C

void setup(){

  size(500,500);

  PFont font=createFont("標楷體",40);

  textFont(font);

}

int w=25;

void draw(){

  drawPokerCard(100,100,"黑桃4");

  drawPokerCard(130,150,"紅心3");

  drawPokerCard(160,200,"方塊5");

  drawPokerCard(190,250,"梅花J");

}

void drawPokerCard(int x,int y,String face){

  fill(255);

  rect(x-w/2,y-w/2,150+w,250+w,20);

  fill(#629BE3);

  rect(x,y,150,250,20);

  fill(0);

  textSize(40);

  text(face,x,y+40);

}

```

### PART5 透過 IF indexof來判斷顏色差別

>>>   if(face.indexOf("黑桃")==-1 && face.indexOf("梅花")==-1) fill(#FF0000); else fill(0);

>>>  除了梅花和黑桃外，紅心和方塊的文字會變成紅色

```C

void setup(){

  size(500,500);

  PFont font=createFont("標楷體",40);

  textFont(font);

}

int w=25;

void draw(){

  drawPokerCard(100,100,"黑桃4");

  drawPokerCard(130,150,"紅心3");

  drawPokerCard(160,200,"方塊5");

  drawPokerCard(190,250,"梅花J");

}

void drawPokerCard(int x,int y,String face){

  fill(255);

  rect(x-w/2,y-w/2,150+w,250+w,20);

  fill(#629BE3);

  rect(x,y,150,250,20);

  if(face.indexOf("黑桃")==-1 && face.indexOf("梅花")==-1) fill(#FF0000);

  else fill(0);

  textSize(40);

  text(face,x,y+40);

}

```

### PART6 隨機抽出4張亂數牌

```C

1.將黑桃、方塊、紅心、梅花加入陣列裏頭

==>  String []flower={"黑桃","紅心","方塊","梅花"};

2.分別宣告 從花色中C4取1，隨機的數值1~13 加1是為了讓數值不為0

==> face1=flower[int(random(4))]+int(random(13)+1);

3. 在draw 上面宣告 字串String

==> String face1,face2,face3,face4;

4. 最後隨機用出牌組

==> void draw(){

      drawPokerCard(100,100,face1);

      drawPokerCard(130,150,face2);

      drawPokerCard(160,200,face3);

      drawPokerCard(190,250,face4);

    }

```

```C

最後程式碼

void setup(){

  size(500,500);

  PFont font=createFont("標楷體",40);

  textFont(font);

  String []flower={"黑桃","紅心","方塊","梅花"};

  face1=flower[int(random(4))]+int(random(13)+1);

  face2=flower[int(random(4))]+int(random(13)+1);

  face3=flower[int(random(4))]+int(random(13)+1);

  face4=flower[int(random(4))]+int(random(13)+1);

}

String face1,face2,face3,face4;

void draw(){

  drawPokerCard(100,100,face1);

  drawPokerCard(130,150,face2);

  drawPokerCard(160,200,face3);

  drawPokerCard(190,250,face4);

}

void drawPokerCard(int x,int y,String face){

  int w=25;

  fill(255);

  rect(x-w/2,y-w/2,150+w,250+w,20);

  fill(#629BE3);

  rect(x,y,150,250,20);

  if(face.indexOf("黑桃")==-1 && face.indexOf("梅花")==-1) fill(#FF0000);

  else fill(0);

  textSize(40);

  text(face,x,y+40);

}

```