2023年10月5日 星期四

再...再課4單 互動技術概論 - Week04 - UNO小遊戲

今天要做像uno的小遊戲。


-------------------------------------------------------------------------

首先先把格子畫出來。


程式碼：

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*50, i*50, 50, 50);
    }
  }
}

-------------------------------------------------------------------------
然後加上uno牌的四個顏色。

程式碼：
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);
    }
  }
}


-------------------------------------------------------------------------
讓卡牌邊框變得有弧度。

程式碼：
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]);
    }
  }
}
void drawCard(int x, int y, color c)
{
  stroke(128);
  fill(255);
  rect(x, y, 32, 50, 7); //7是弧度。
  noStroke();
  fill(c);
  rect(x+3, y+3, 32-5, 50-5, 4); //4是弧度。
}


-------------------------------------------------------------------------
加上uno卡牌中間的橢圓。

程式碼：
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]);
    }
  }
}
void drawCard(int x, int y, color c)
{
  stroke(128);
  fill(255);
  rect(x, y, 32, 50, 7); //7是弧度。
  noStroke();
  fill(c);
  rect(x+3, y+3, 32-5, 50-5, 4); //4是弧度。
  
  pushMatrix();
  fill(255);
  translate(x+16, y+25);
  rotate(radians(50));
  ellipse(0, 0, 20, 30);
  popMatrix();
}


-------------------------------------------------------------------------
加上uno牌左上角的小數字。
(先以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]);
    }
  }
}
void drawCard(int x, int y, color c)
{
  stroke(128);
  fill(255);
  rect(x, y, 32, 50, 7); //7是弧度。
  noStroke();
  fill(c);
  rect(x+3, y+3, 32-5, 50-5, 4); //4是弧度。
  
  pushMatrix();
  fill(255);
  translate(x+16, y+25);
  rotate(radians(50));
  ellipse(0, 0, 20, 30);
  popMatrix();
  
  textSize(9);
  textAlign(CENTER, CENTER);
  text("1", x+5, y+5);
  
  textSize(20);
  fill(c);
  text("1", x+16, y+22);
}


-------------------------------------------------------------------------
讓uno牌上的數字逐漸增加。

程式碼：
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], j);
    }
  }
}
void drawCard(int x, int y, color c, int n)
{
  stroke(128);
  fill(255);
  rect(x, y, 32, 50, 7); //7是弧度。
  noStroke();
  fill(c);
  rect(x+3, y+3, 32-5, 50-5, 4); //4是弧度。
  
  pushMatrix();
  fill(255);
  translate(x+16, y+25);
  rotate(radians(50));
  ellipse(0, 0, 20, 30);
  popMatrix();
  
  textSize(9);
  textAlign(CENTER, CENTER);
  text(""+n, x+5, y+5);
  
  textSize(20);
  fill(c);
  text(""+n, x+16, y+22);
}


-------------------------------------------------------------------------
新增洗牌的函式(myShuffle)，先把顏色、數字調整好。


程式碼：
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]; // card color
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], 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); //7是弧度。
  noStroke();
  fill(c);
  rect(x+3, y+3, 32-5, 50-5, 4); //4是弧度。
  
  pushMatrix();
  fill(255);
  translate(x+16, y+25);
  rotate(radians(50));
  ellipse(0, 0, 20, 30);
  popMatrix();
  
  textSize(9);
  textAlign(CENTER, CENTER);
  text(""+n, x+7, y+5);
  
  textSize(20);
  fill(c);
  text(""+n, x+16, y+22);
}


-------------------------------------------------------------------------
加上random(隨機)。

程式碼：
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]; // card color
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], 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); //7是弧度。
  noStroke();
  fill(c);
  rect(x+3, y+3, 32-5, 50-5, 4); //4是弧度。
  
  pushMatrix();
  fill(255);
  translate(x+16, y+25);
  rotate(radians(50));
  ellipse(0, 0, 20, 30);
  popMatrix();
  
  textSize(9);
  textAlign(CENTER, CENTER);
  text(""+n, x+7, y+5);
  
  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];
    }
  }
  for(int i=0; i<1000; 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]; // card color
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], 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); //7是弧度。
  noStroke();
  fill(c);
  rect(x+3, y+3, 32-5, 50-5, 4); //4是弧度。
  
  pushMatrix();
  fill(255);
  translate(x+16, y+25);
  rotate(radians(50));
  ellipse(0, 0, 20, 30);
  popMatrix();
  
  textSize(9);
  textAlign(CENTER, CENTER);
  text(""+n, x+7, y+5);
  
  textSize(20);
  fill(c);
  text(""+n, x+16, y+22);
}


-------------------------------------------------------------------------
讓牌縮放。

程式碼：
void setup()
{
  size(600, 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<1000; 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]; // card color
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], 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; //scale size
  stroke(128);
  fill(255);
  rect(x, y, 32*s, 50*s, 7*s); //7是弧度。
  noStroke();
  fill(c);
  rect(x+2.5*s, y+2.5*s, 32*s-5*s, 50*s-5*s, 5*s); //4是弧度。
  
  pushMatrix();
  fill(255);
  translate(x+16*s, y+25*s);
  rotate(radians(50));
  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);
}


-------------------------------------------------------------------------
加入像抽卡牌的畫面，按下右鍵會顯示牌洗完的樣子，左鍵則是抽卡。
(這時候的牌是按照上面洗牌後的順序得到。)

程式碼：
void setup()
{
  size(600, 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<1000; 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]; // card color
color []  C = {#FF5555, #FFAA00, #55AA55, #5555FF};
void draw()
{
  background(255);
  if(mousePressed && mouseButton==RIGHT) //cheat key
  {
    for(int i=0; i<8; i++)
    {
      for(int j=0; j<11; j++)
      {
        //drawCard(j*32, i*50, C[i%4], j);
        drawCard(j*32, i*50, cardC[i*11+j], cardN[i*11+j], 32);
      }
    }
  }
  else drawCard(50, 50, #000000, 99 ,128); //牌堆
  for(int i=0; i<myCard; i++ )
  {
    drawCard(430+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; //scale size
  stroke(128);
  fill(255);
  rect(x, y, 32*s, 50*s, 7*s); //7是弧度。
  noStroke();
  fill(c);
  rect(x+2.5*s, y+2.5*s, 32*s-5*s, 50*s-5*s, 5*s); //4是弧度。
  
  pushMatrix();
  fill(255);
  translate(x+16*s, y+25*s);
  rotate(radians(50));
  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);
}


-------------------------------------------------------------------------
因為會有四個人玩，所以發成四堆。

程式碼：
void setup()
{
  size(850, 850);
  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<1000; 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]; // card color
color []  C = {#FF5555, #FFAA00, #55AA55, #5555FF};
void draw()
{
  background(255);
  if(mousePressed && mouseButton==RIGHT) //cheat key
  {
    for(int i=0; i<8; i++)
    {
      for(int j=0; j<11; j++)
      {
        //drawCard(j*32, i*50, C[i%4], j);
        drawCard(j*32, i*50, cardC[i*11+j], cardN[i*11+j], 32);
      }
    }
  }
  else drawCard(50, 50, #000000, 99 ,128); //牌堆
  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; //scale size
  stroke(128);
  fill(255);
  rect(x, y, 32*s, 50*s, 7*s); //7是弧度。
  noStroke();
  fill(c);
  rect(x+2.5*s, y+2.5*s, 32*s-5*s, 50*s-5*s, 5*s); //4是弧度。
  
  pushMatrix();
  fill(255);
  translate(x+16*s, y+25*s);
  rotate(radians(50));
  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);
}
於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)