再...再課11單 - Week11 - 互動技術概論 - 隨機座位表

今天要做亂數的座位表 (random)

首先先做出座位表還有等等每個位子的號碼要用的文字 (再這裡是Hello)

程式碼：

void setup()
{
  size(600, 500);
}
void draw()
{
  background(255);
  for(int i=0; i<4; i++)
  {
    for(int j=0; j<6; j++)
    {
      fill(#F5B4B4); rect(j*100, i*100, 100,100);
      fill(0); text("Hello", j*100+25, i*100+50);
    } 
  }
}

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

再來是亂數的排好各個位子。

可是這時候數字還是會有重複的。

程式碼：

void setup()
{
  size(600, 500);
  for(int i=0; i<4; i++)
  {
    for(int j=0; j<6; j++)
    {
      value[i][j]=int (random(40));
    }
  }
}
int [][] value = new int[4][6];
void draw()
{
  background(255);
  for(int i=0; i<4; i++)
  {
    for(int j=0; j<6; j++)
    {
      fill(#F5B4B4); rect(j*100, i*100, 100,100);
      fill(0); text(value[i][j], j*100+25, i*100+50);
    } 
  }
}

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

把號碼打亂後，跑出不重複的數字 (用array)

程式碼：

void setup()
{
  size(600, 500);
  for(int i=0; i<4; i++)
  {
    for(int j=0; j<6; j++)
    {
      value[i][j]=i*6+j + 10; //從10開始，數字不重複
    }
  }
  for(int k=0; k<2; k++)  //交換兩次
  {
    int i= int(random(4)), j=int(random(6));
    int i2=int(random(4)), j2=int(random(6));
    int temp = value[i][j] = value[i2][j2];
    value[i][j] = value[i2][j2];
    value[i2][j2] = temp;
  }
}
int [][] value = new int[4][6];
void draw()
{
  background(255);
  for(int i=0; i<4; i++)
  {
    for(int j=0; j<6; j++)
    {
      fill(#F5B4B4); rect(j*100, i*100, 100,100);
      fill(0); text(value[i][j], j*100+25, i*100+50);
    } 
  }
}
------------------------------------------------------------------------------------------------------

接下來要做的是關卡的轉場。

首先先有三個不同顏色背景的關卡。

程式碼：

int state = 0;
void setup()
{
  size(400, 400);
}
void draw()
{
  if(state==0)
  {
    background(255); //白色
  }
  else if(state==1)
  {
    background(255, 0, 0);
  }
  else if(state==2)
  {
    background(0, 0, 255);
  }
}
------------------------------------------------------------------------------------------------------
當再一開始的白色場景按一下，就會開始遊戲。
再來加上keyCode，當兩個方格重疊的時候，場景會轉換。
按下右鍵方格會向右移動。

程式碼：
int state = 0;
void setup()
{
  size(400, 400);
  textSize(50);
}
int x=50, y=50;
void draw()
{
  if(state==0)
  {
    background(255); //開頭，白色場景
    fill(0); text("Click to Star", 80, 200);
  }
  else if(state==1) //第1關，紅色場景
  {
    background(255, 0, 0);
    fill(255); rect(300, 50, 50, 50);
    fill(128); rect(x, y, 50, 50);
  }
  else if(state==2) //第2關，藍色場景
  {
    background(0, 0, 255);
  }
}
void mousePressed()
{
  if(state==0) state=1;
}
void keyPressed()
{
  if(state==1 && keyCode==RIGHT)
  {
    x += 10;
    if(x==300) state=2; //當白色方格重疊到灰色的，進到下一關
  }
}
------------------------------------------------------------------------------------------------------
然後當方格重疊後，會跳到藍色場景，然後中間有數字開始倒數 (t)，當數字=0的時候，
返回一開始的白色場景。
程式碼：
int state = 0;
void setup()
{
  size(400, 400);
  textSize(50);
}
int x=50, y=50, t=100;
void draw()
{
  if(state==0)
  {
    background(255); //開頭，白色場景
    fill(0); text("Click to Star", 80, 200);
  }
  else if(state==1) //第1關，紅色場景
  {
    background(255, 0, 0);
    fill(255); rect(300, 50, 50, 50);
    fill(128); rect(x, y, 50, 50);
    t=100;
  }
  else if(state==2) //第2關，藍色場景
  {
    background(0, 0, 255);
    fill(255, 255, 0); text("Wait "+ t, 80 ,200);
    t--;
    if(t==0) state=0;
  }
}
void mousePressed()
{
  if(state==0) state=1;
}
void keyPressed()
{
  if(state==1 && keyCode==RIGHT)
  {
    x += 10;
    if(x==300) state=2; //當白色方格重疊到灰色的，進到下一關
  }
}
------------------------------------------------------------------------------------------------------
再來是做拋物線的籃球機，先讓球跟著滑鼠動。

程式碼：
PImage imgRack;
void setup()
{
  size(300, 300);
  imgRack = loadImage("rack.PNG");
}
void draw()
{
  background(255);
  image(imgRack, 0, 0);
  if(mousePressed)
  {
    fill(255); ellipse(posX, posY, 20, 20);
    line(posX, posY, mouseX, mouseY);
  }
  fill(#FFA652); ellipse(mouseX, mouseY, 20, 20);
}
float posX=-100, posY=-100;
void mousePressed()
{
  posX = mouseX;
  posY = mouseY;
}

------------------------------------------------------------------------------------------------------
設定拋的線。

程式碼：
PImage imgRack;
void setup()
{
  size(300, 300);
  imgRack = loadImage("rack.PNG");
}
void draw()
{
  background(255);
  image(imgRack, 0, 0);
  if(flying)
  {
    x += vx;
    y += vy;
    vy += 0.98;
  }
  else
  {
    x = mouseX;
    y = mouseY;
    if(mousePressed)
    {
      fill(255); ellipse(posX, posY, 20, 20);
      line(posX, posY, x, y);
    }
  }

  fill(#FFA652); ellipse(x, y, 20, 20);
}
boolean flying = false;
float x, y, vx ,vy;
float posX=-100, posY=-100;
void mousePressed()
{
  posX = mouseX;
  posY = mouseY;
}
void mouseRelease()
{
  vx = posX-mouseX;
  vy = posY-mouseY;
  flying = true;
}