ucc的week03互動技術上課筆記

 # week03

## 今日主題

```

1.撲克牌

2.圍棋

3.象棋

```

## 複習

```

1.放牌、秀牌、洗牌

2.如何選到牌

3.class物件

```

## 上週程式碼

>>> 亂數選取任意花色卡牌

```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);

}

```

## 進階更改程式

>>> 透過滑鼠點擊來變更花色,myshuffle()

```

void setup(){

  size(500,500);

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

  textFont(font);

  myShuffle();

}

void myShuffle(){

  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);

}

void mousePressed(){///透過滑鼠點擊改變花色

  myShuffle();

}

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);

}

``` 

## 做出52張牌的格子

```

1.寫出一個for迴圈,跑從1~52

2.取餘數的方式取出個位數到10,11從下一行開始

3.再畫出格子的大小

```

## 格子裡加入花色名稱

>>> 使用Pfont可以讓中文字正確顯示(上禮拜有筆記可以看)

```C

1. 宣告字串,裡面有所有花色的名稱

=>   

 String []faces={

  "黑桃A","黑桃2","黑桃3","黑桃4","黑桃5","黑桃6","黑桃7","黑桃8","黑桃9","黑桃10","黑桃J","黑桃Q","黑桃K",

  "紅心A","紅心2","紅心3","紅心4","紅心5","紅心6","紅心7","紅心8","紅心9","紅心10","紅心J","紅心Q","紅心K",

  "方塊A","方塊2","方塊3","方塊4","方塊5","方塊6","方塊7","方塊8","方塊9","方塊10","方塊J","方塊Q","方塊K",

  "梅花A","梅花2","梅花3","梅花4","梅花5","梅花6","梅花7","梅花8","梅花9","梅花10","梅花J","梅花Q","梅花K"

};

2.在void draw裡設定文字顏色為黑色,並排列在格子中

=> fill(0); text(faces[i],x+25,y+80);

```

目前的程式碼

```C

void setup()

{

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

  textFont(font);

  size(700,700);

}

String []faces={

  "黑桃A","黑桃2","黑桃3","黑桃4","黑桃5","黑桃6","黑桃7","黑桃8","黑桃9","黑桃10","黑桃J","黑桃Q","黑桃K",

  "紅心A","紅心2","紅心3","紅心4","紅心5","紅心6","紅心7","紅心8","紅心9","紅心10","紅心J","紅心Q","紅心K",

  "方塊A","方塊2","方塊3","方塊4","方塊5","方塊6","方塊7","方塊8","方塊9","方塊10","方塊J","方塊Q","方塊K",

  "梅花A","梅花2","梅花3","梅花4","梅花5","梅花6","梅花7","梅花8","梅花9","梅花10","梅花J","梅花Q","梅花K"

};

void draw(){

  background(#629BE3);

  for(int i=0;i<52;i++){

    int x=(i%10)*60;//除法10的餘數(個位數)

    int y=int(i/10)*120;//十位數

    fill(255);rect(x,y,60,120);

    fill(0); text(faces[i],x+25,y+80);

  }

}

```

## 將紅心和方塊變成紅色

>>> 使用indexOf

```C

void setup()

{

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

  textFont(font);

  size(800,600);

}

String []faces={

  "黑桃A","黑桃2","黑桃3","黑桃4","黑桃5","黑桃6","黑桃7","黑桃8","黑桃9","黑桃10","黑桃J","黑桃Q","黑桃K",

  "紅心A","紅心2","紅心3","紅心4","紅心5","紅心6","紅心7","紅心8","紅心9","紅心10","紅心J","紅心Q","紅心K",

  "方塊A","方塊2","方塊3","方塊4","方塊5","方塊6","方塊7","方塊8","方塊9","方塊10","方塊J","方塊Q","方塊K",

  "梅花A","梅花2","梅花3","梅花4","梅花5","梅花6","梅花7","梅花8","梅花9","梅花10","梅花J","梅花Q","梅花K"

};

void draw(){

  background(#629BE3);

  for(int i=0;i<52;i++){

    int x=(i%13)*60;//除法10的餘數(個位數)

    int y=int(i/13)*120;//十位數

    fill(255);rect(x,y,60,120);

    if(faces[i].indexOf("紅心")==-1 && faces[i].indexOf("方塊")==-1) fill(0);

    else fill(255,0,0);

    text(faces[i],x+10,y+60);

  }

}

```

## 透過滑鼠點擊來做洗牌

```

1.設定兩個變數做交換

2.  String temp=faces[a];

     faces[a]=faces[b];

     faces[b]=temp;

```

前面程式碼加上新加上的程式碼

```C

void mousePressed(){

  int a=int(random(52));

  int b=int(random(52));

  //目標:faces[a] vs faces[b]交換

  String temp=faces[a];

  faces[a]=faces[b];

  faces[b]=temp;

}

```

## 今日總結

```

1.以第一周的程式為基底

2.加入今日第5個程式的宣告

3.使得程式變成亂數抽取4張

```

```C

void setup(){

  size(500,500);

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

  textFont(font);

  myShuffle();

}

String []faces={

  "黑桃A","黑桃2","黑桃3","黑桃4","黑桃5","黑桃6","黑桃7","黑桃8","黑桃9","黑桃10","黑桃J","黑桃Q","黑桃K",

  "紅心A","紅心2","紅心3","紅心4","紅心5","紅心6","紅心7","紅心8","紅心9","紅心10","紅心J","紅心Q","紅心K",

  "方塊A","方塊2","方塊3","方塊4","方塊5","方塊6","方塊7","方塊8","方塊9","方塊10","方塊J","方塊Q","方塊K",

  "梅花A","梅花2","梅花3","梅花4","梅花5","梅花6","梅花7","梅花8","梅花9","梅花10","梅花J","梅花Q","梅花K"

};

String face1,face2,face3,face4;

void myShuffle(){

  for(int k=0;k<10000;k++){

    int a=int(random(52));

    int b=int(random(52));

    //目標:faces[a] vs faces[b]交換

    String temp=faces[a];

    faces[a]=faces[b];

    faces[b]=temp;

  }

  face1=faces[0];

  face2=faces[1];

  face3=faces[2];

  face4=faces[3];

}

void mousePressed(){

  myShuffle();

}

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);

}

```

許願:

做出塔羅牌占卜的功能,固定人抽取卡牌數,總和並解出相關卡牌顯示的預言