2023互動技術: SangMo互動技術 Week04 UNO卡牌製作

UNO卡牌遊戲製作

STEP1

製作空白卡牌外框，來放卡牌，利用for(for(rect))

程式碼如下:

void setup(){
  size(400,400);
}
int[][] card = new int[8][11];
void draw(){
  background(255);
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      rect(j*32,i*50,32,50);
  }
 }
}
執行圖:

STEP2

新增顏色，利用Color+Fill

程式碼:

void setup(){
  size(400,400);
}
int[][] card = new int[8][11];
color[] C = {#FF5555, #FFAA00,#55AA55,#5555FF};
void draw(){
  background(255);
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      fill(C[i%4]);
      rect(j*32,i*50,32,50);
  }
 }
}
執行圖:
STEP3
製作更好的卡牌外框，利用stroke+fill+rect+noStroke
程式碼:
void setup(){
  size(400,400);
}
int[][] card = new int[8][11];
color[] C = {#FF5555, #FFAA00,#55AA55,#5555FF};
void draw(){
  background(255);
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      drawCard(j*32,i*50,C[i%4]);
      fill(C[i%4]);
  }
 }
}
void drawCard(int x,int y, color c){
  stroke(128);
  fill(255);
  rect(x,y,32,50,7);///利用help找到7是圓弧外框的值
  noStroke();
  fill(c);
  rect(x+3,y+3,32-5,50-5,4);
}
執行圖:

STEP4
在卡牌內新增白色橢圓Rotate+translate+push/popMatrix+ellipse
程式碼:
void setup(){
  size(400,400);
}
int[][] card = new int[8][11];
color[] C = {#FF5555, #FFAA00,#55AA55,#5555FF};
void draw(){
  background(255);
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      drawCard(j*32,i*50,C[i%4]);
      fill(C[i%4]);
  }
 }
}
void drawCard(int x,int y, color c){
  stroke(128);
  fill(255);
  rect(x,y,32,50,7);
  noStroke();
  fill(c);
  rect(x+3,y+3,32-5,50-5,4);

  pushMatrix();
  fill(255);
  translate(x+16,y+25);
  rotate(radians(35));
  ellipse(0,0,20,30);
  popMatrix();
}
執行圖:
STEP5-1
加上卡牌數字
程式碼:
void setup(){
  size(400,400);
}
int[][] card = new int[8][11];
color[] C = {#FF5555, #FFAA00,#55AA55,#5555FF};
void draw(){
  background(255);
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      drawCard(j*32,i*50,C[i%4]);
      fill(C[i%4]);
  }
 }
}
void drawCard(int x,int y, color c){
  stroke(128);
  fill(255);
  rect(x,y,32,50,7);
  noStroke();
  fill(c);
  rect(x+3,y+3,32-5,50-5,4);
  
  pushMatrix();
  fill(255);
  translate(x+16,y+25);
  rotate(radians(35));
  ellipse(0,0,20,30);
  popMatrix();
  
  textSize(9);
  textAlign(CENTER,CENTER);
  text("1",x+7,y+6);
  
  textSize(20);
  fill(c);
  text("1",x+16,y+22);
}
執行圖:
STEP6
需要修改本來的程式，方便後續的卡片製作完整，並加上洗牌功能
程式碼:
void setup(){
  size(400,400);
  myShuffle();
}
void myShuffle(){
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      cardN[i*11+j] = j;
      cardC[i*11+j] = C[i%4];
    }
  }
}
///int[][] card = new int[8][11];
int [] cardN = new int[88]; //card number
int [] cardC = new int[88];
color[] C = {#FF5555, #FFAA00,#55AA55,#5555FF};
void draw(){
  background(255);
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      drawCard(j*32,i*50,cardC[i*11+j],cardN[i*11+j]);
  }
 }
}
void drawCard(int x,int y, color c,int n){
  stroke(128);
  fill(255);
  rect(x,y,32,50,7);
  noStroke();
  fill(c);
  rect(x+3,y+3,32-5,50-5,4);
  
  pushMatrix();
  fill(255);
  translate(x+16,y+25);
  rotate(radians(35));
  ellipse(0,0,20,30);
  popMatrix();
  
  textSize(9);
  textAlign(CENTER,CENTER);
  text(""+n,x+7,y+6);
  
  textSize(20);
  fill(c);
  text(""+n,x+16,y+22);
}
洗牌程式:
void setup(){
  size(400,400);
  myShuffle();
}
void myShuffle(){
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      cardN[i*11+j] = j;
      cardC[i*11+j] = C[i%4];
    }
  }
  int a= int(random(88)),b=int(random(88));
  int temp=cardN[a];
  cardN[a] = cardN[b];
  cardN[b] = temp;
  temp= cardC[a];
  cardC[a] = cardC[b];
  cardC[b] = temp;
}
///int[][] card = new int[8][11];
int [] cardN = new int[88]; //card number
int [] cardC = new int[88];
color[] C = {#FF5555, #FFAA00,#55AA55,#5555FF};
void draw(){
  background(255);
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      drawCard(j*32,i*50,cardC[i*11+j],cardN[i*11+j]);
  }
 }
}
void drawCard(int x,int y, color c,int n){
  stroke(128);
  fill(255);
  rect(x,y,32,50,7);
  noStroke();
  fill(c);
  rect(x+3,y+3,32-5,50-5,4);
  
  pushMatrix();
  fill(255);
  translate(x+16,y+25);
  rotate(radians(35));
  ellipse(0,0,20,30);
  popMatrix();
  
  textSize(9);
  textAlign(CENTER,CENTER);
  text(""+n,x+7,y+6);
  
  textSize(20);
  fill(c);
  text(""+n,x+16,y+22);
}


執行圖:
STEP7
洗牌功能利用for迴圈重複多次執行
程式碼:
void setup(){
  size(400,400);
  myShuffle();
}
void myShuffle(){
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      cardN[i*11+j] = j;
      cardC[i*11+j] = C[i%4];
    }
  }for(int i=0;i<100;i++){
    int a= int(random(88)),b=int(random(88));
    int temp=cardN[a];
    cardN[a] = cardN[b];
    cardN[b] = temp;
    temp= cardC[a];
    cardC[a] = cardC[b];
    cardC[b] = temp;
 }
}
///int[][] card = new int[8][11];
int [] cardN = new int[88]; //card number
int [] cardC = new int[88];
color[] C = {#FF5555, #FFAA00,#55AA55,#5555FF};
void draw(){
  background(255);
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      drawCard(j*32,i*50,cardC[i*11+j],cardN[i*11+j]);
  }
 }
}
void drawCard(int x,int y, color c,int n){
  stroke(128);
  fill(255);
  rect(x,y,32,50,7);
  noStroke();
  fill(c);
  rect(x+3,y+3,32-5,50-5,4);
  
  pushMatrix();
  fill(255);
  translate(x+16,y+25);
  rotate(radians(35));
  ellipse(0,0,20,30);
  popMatrix();
  
  textSize(9);
  textAlign(CENTER,CENTER);
  text(""+n,x+7,y+6);
  
  textSize(20);
  fill(c);
  text(""+n,x+16,y+22);
}
執行圖:

STEP8
在右方顯示大卡片，float s 生成數值，並把所有數值*s
程式碼:
void setup(){
  size(800,400);
  myShuffle();
}
void myShuffle(){
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      cardN[i*11+j] = j;
      cardC[i*11+j] = C[i%4];
    }
  }for(int i=0;i<100;i++){
    int a= int(random(88)),b=int(random(88));
    int temp=cardN[a];
    cardN[a] = cardN[b];
    cardN[b] = temp;
    temp= cardC[a];
    cardC[a] = cardC[b];
    cardC[b] = temp;
 }
}
int [] cardN = new int[88]; //card number
int [] cardC = new int[88];
color[] C = {#FF5555, #FFAA00,#55AA55,#5555FF};
void draw(){
  background(255);
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      drawCard(j*32,i*50,cardC[i*11+j],cardN[i*11+j],32);
  }
 }
 drawCard(450,50,cardC[7],cardN[77],128);
}
void drawCard(int x,int y, color c,int n,int w){
  float s = w/32.0;
  stroke(128);
  fill(255);
  rect(x,y,32*s,50*s,7*s);
  noStroke();
  fill(c);
  rect(x+2.5*s,y+2.5*s,32*s-5*s,50*s-5*s,4*s);
  
  pushMatrix();
  fill(255);
  translate(x+16*s,y+25*s);
  rotate(radians(35));
  ellipse(0,0,20*s,30*s);
  popMatrix();
  
  textSize(9*s);
  textAlign(CENTER,CENTER);
  text(""+n,x+7*s,y+6*s);
  
  textSize(20*s);
  fill(c);
  text(""+n,x+16*s,y+22*s);
}
執行圖:


STEP9
點擊滑鼠，右邊就抽牌並顯示大卡牌，並把左邊牌隱藏
程式碼:
void setup(){
  size(800,400);
  myShuffle();
}
void myShuffle(){
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      cardN[i*11+j] = j;
      cardC[i*11+j] = C[i%4];
    }
  }for(int i=0;i<100;i++){
    int a= int(random(88)),b=int(random(88));
    int temp=cardN[a];
    cardN[a] = cardN[b];
    cardN[b] = temp;
    temp= cardC[a];
    cardC[a] = cardC[b];
    cardC[b] = temp;
 }
}
int [] cardN = new int[88]; //card number
int [] cardC = new int[88];
color[] C = {#FF5555, #FFAA00,#55AA55,#5555FF};
void draw(){
  background(255);
  if(mousePressed && mouseButton ==RIGHT){
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      drawCard(j*32,i*50,cardC[i*11+j],cardN[i*11+j],32);
   }
  }
 }else drawCard(50,50,#000000,99,128);///pick card
 for(int i=0;i<mycard;i++){
 drawCard(450+40*i,50,cardC[i],cardN[i],128);
  }
}
int mycard = 0;
void mousePressed(){
  if(mouseButton==LEFT) mycard++;
}
void drawCard(int x,int y, color c,int n,int w){
  float s = w/32.0;
  stroke(128);
  fill(255);
  rect(x,y,32*s,50*s,7*s);
  noStroke();
  fill(c);
  rect(x+2.5*s,y+2.5*s,32*s-5*s,50*s-5*s,4*s);
  
  pushMatrix();
  fill(255);
  translate(x+16*s,y+25*s);
  rotate(radians(35));
  ellipse(0,0,20*s,30*s);
  popMatrix();
  
  textSize(9*s);
  textAlign(CENTER,CENTER);
  text(""+n,x+7*s,y+6*s);
  
  textSize(20*s);
  fill(c);
  text(""+n,x+16*s,y+22*s);
}
執行圖:
STEP10
點擊滑鼠，右邊就抽牌並顯示4人的大卡牌
程式碼:
void setup(){
  size(900,900);
  myShuffle();
}
void myShuffle(){
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      cardN[i*11+j] = j;
      cardC[i*11+j] = C[i%4];
    }
  }for(int i=0;i<100;i++){
    int a= int(random(88)),b=int(random(88));
    int temp=cardN[a];
    cardN[a] = cardN[b];
    cardN[b] = temp;
    temp= cardC[a];
    cardC[a] = cardC[b];
    cardC[b] = temp;
 }
}
int [] cardN = new int[88]; //card number
int [] cardC = new int[88];
color[] C = {#FF5555, #FFAA00,#55AA55,#5555FF};
void draw(){
  background(255);
  if(mousePressed && mouseButton ==RIGHT){
  for(int i=0;i<8;i++){
    for(int j=0;j<11;j++){
      drawCard(j*32,i*50,cardC[i*11+j],cardN[i*11+j],32);
   }
  }
 }else drawCard(50,50,#000000,99,128);///pick card
 for(int i=0;i<mycard;i++){
   if(i%4==0)drawCard(430+40*i/4,50,cardC[i],cardN[i],128);
   if(i%4==1)drawCard(630-40+40*i/4,350,cardC[i],cardN[i],128);
   if(i%4==2)drawCard(430-80+40*i/4,650,cardC[i],cardN[i],128);
   if(i%4==3)drawCard(230-120+40*i/4,350,cardC[i],cardN[i],128);
  }
}
int mycard = 0;
void mousePressed(){
  if(mouseButton==LEFT) mycard++;
}
void drawCard(int x,int y, color c,int n,int w){
  float s = w/32.0;
  stroke(128);
  fill(255);
  rect(x,y,32*s,50*s,7*s);
  noStroke();
  fill(c);
  rect(x+2.5*s,y+2.5*s,32*s-5*s,50*s-5*s,4*s);
  
  pushMatrix();
  fill(255);
  translate(x+16*s,y+25*s);
  rotate(radians(35));
  ellipse(0,0,20*s,30*s);
  popMatrix();
  
  textSize(9*s);
  textAlign(CENTER,CENTER);
  text(""+n,x+7*s,y+6*s);
  
  textSize(20*s);
  fill(c);
  text(""+n,x+16*s,y+22*s);
}
執行圖: