ucc的week05互動技術上課筆記

 # Week04 2022-09-26

## 今日主題

```

1. 卜象棋暗棋

2. 記憶卡片遊戲

3. 主題: 圖片                              

```

## 1-1圍棋的線條

```C

1.利用等差級數的想法來畫線

2.第一個for畫出x軸的線條

=> for(int x=50;x<=450;x+=50){

          line(x,50,x,500);

            }

3.第二個for畫出y軸的線條

=> for(int y=50;y<=500;y+=50){

          line(50,y,450,y);

            }

```

## 1-2分出楚河漢界的感覺還有小標記

```C

1.楚河漢界在哪裡嘞

=> for (int x=50; x<=450; x+=50) {

    line(x, 50, x, 250);

    line(x, 300, x, 500);

      }

2.i是算出2維陣列中的橫行

3.J試算出2維陣列中的縱行

4.在透過for將board[i][j]的值帶入

=>for (int i=0; i<4; i++) {

    for (int j=0; j<9; j++) {

      text(board[i][j], 50+j*50, 50+i*50);

        }

     }

```

## 1-3把象旗子的東西到棋盤上!!

```C

1.加入PFont用來顯示中文字

2.使文字置中對齊

=> textAlign(CENTER,CENTER);

3.宣告變數id為剛剛2維陣列的代表,並從1開始

=> int id=board[i][j];

4.讀到0時請陣列回去重新開始

=> if(id==0)continue;

```

## 1-4 做出對手的棋和棋子的形狀

```C

1.加入對手名稱字串

=>String[]name2={"帥", "仕", "相", "俥", "傌", "炮", "兵"};

2.將對手棋的位置加上負號並印出(紅色)

=>  {-7, 0, -7, 0, -7, 0, -7, 0, -7},

  {-0, -6, 0, 0, 0, 0, 0, -6, 0},

  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0},

  {-4, -5, -3, -2, -1, -2, -3, -5, -4},

=>text(name2[-id-1], 50+j*50, 50+i*50-3);

```

##1-5 滑鼠點擊下棋!!

```C

1.加入mousePressed

2.當滑鼠點擊時，棋子變成將，也可以取代其他棋子

=> void mousePressed(){

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

    for(int j=0;j<9;j++){

      if(dist(mouseX,mouseY,50+j*50,50+i*50)<20){

        board[i][j]=1;

      }

    }

  }

}

```

## FIRST PROGRAM

>>> 可以移動的棋子

```

1.加入背景才不會有殘影!

2.可以移動的棋子

=> if(handChess!=0)ellipse(mouseX,mouseY,40,40);

=> int handChess=0;

3.拖曳的程式碼

=> void mouseReleased(){

  int i=(mouseY+25-50)/50;

  int j=(mouseX+25-50)/50;

  board[i][j]=handChess;

  handChess=0;

}

```

```C

int [][]board={

  {4, 5, 3, 2, 1, 2, 3, 5, 4},

  {0, 0, 0, 0, 0, 0, 0, 0, 0},

  {0, 6, 0, 0, 0, 0, 0, 6, 0},

  {7, 0, 7, 0, 7, 0, 7, 0, 7},

  {0, 0, 0, 0, 0, 0, 0, 0, 0},

  {0, 0, 0, 0, 0, 0, 0, 0, 0},

  {-7, 0, -7, 0, -7, 0, -7, 0, -7},

  {-0, -6, 0, 0, 0, 0, 0, -6, 0},

  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0},

  {-4, -5, -3, -2, -1, -2, -3, -5, -4},

};//1:將,2:士,3:象,4:車,5:馬,6:包,7:卒

String[]name={"將", "士", "象", "車", "馬", "包", "卒"};

String[]name2={"帥", "仕", "相", "俥", "傌", "炮", "兵"};

void setup() {

  size(500, 550);

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

  textFont(font);

  textAlign(CENTER, CENTER);

}

void draw() {

  background(#F7A246);

  for (int x=50; x<=450; x+=50) {

    line(x, 50, x, 250);

    line(x, 300, x, 500);

  }

  for (int y=50; y<=500; y+=50) {

    line(50, y, 450, y);

  }

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

    for (int j=0; j<9; j++) {

      int id=board[i][j];

      if (id==0)continue;

      if (id>0) {

        fill(255);

        ellipse(50+j*50, 50+i*50, 40, 40);

        fill(0);

        text(name[id-1], 50+j*50, 50+i*50-3);

      } else if (id<0) {

        fill(255);

        ellipse(50+j*50, 50+i*50, 40, 40);

        fill(255,0,0);

        text(name2[-id-1], 50+j*50, 50+i*50-3);

      }

    }

  }

  if(handChess!=0)ellipse(mouseX,mouseY,40,40);

}

int handChess=0;

void mousePressed(){

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

    for(int j=0;j<9;j++){

      if(dist(mouseX,mouseY,50+j*50,50+i*50)<20){

        handChess=board[i][j];

        board[i][j]=0;

      }

    }

  }

}

void mouseReleased(){

  int i=(mouseY+25-50)/50;

  int j=(mouseX+25-50)/50;

  board[i][j]=handChess;

  handChess=0;

}

```

## 暗棋部分程式碼

```C

 # Week04 2022-09-26

## 今日主題

```

1. 卜象棋暗棋

2. 記憶卡片遊戲

3. 主題: 圖片                              

```

## 1-1圍棋的線條

```C

1.利用等差級數的想法來畫線

2.第一個for畫出x軸的線條

=> for(int x=50;x<=450;x+=50){

          line(x,50,x,500);

            }

3.第二個for畫出y軸的線條

=> for(int y=50;y<=500;y+=50){

          line(50,y,450,y);

            }

```

## 1-2分出楚河漢界的感覺還有小標記

```C

1.楚河漢界在哪裡嘞

=> for (int x=50; x<=450; x+=50) {

    line(x, 50, x, 250);

    line(x, 300, x, 500);

      }

2.i是算出2維陣列中的橫行

3.J試算出2維陣列中的縱行

4.在透過for將board[i][j]的值帶入

=>for (int i=0; i<4; i++) {

    for (int j=0; j<9; j++) {

      text(board[i][j], 50+j*50, 50+i*50);

        }

     }

```

## 1-3把象旗子的東西到棋盤上!!

```C

1.加入PFont用來顯示中文字

2.使文字置中對齊

=> textAlign(CENTER,CENTER);

3.宣告變數id為剛剛2維陣列的代表,並從1開始

=> int id=board[i][j];

4.讀到0時請陣列回去重新開始

=> if(id==0)continue;

```

## 1-4 做出對手的棋和棋子的形狀

```C

1.加入對手名稱字串

=>String[]name2={"帥", "仕", "相", "俥", "傌", "炮", "兵"};

2.將對手棋的位置加上負號並印出(紅色)

=>  {-7, 0, -7, 0, -7, 0, -7, 0, -7},

  {-0, -6, 0, 0, 0, 0, 0, -6, 0},

  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0},

  {-4, -5, -3, -2, -1, -2, -3, -5, -4},

=>text(name2[-id-1], 50+j*50, 50+i*50-3);

```

##1-5 滑鼠點擊下棋!!

```C

1.加入mousePressed

2.當滑鼠點擊時，棋子變成將，也可以取代其他棋子

=> void mousePressed(){

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

    for(int j=0;j<9;j++){

      if(dist(mouseX,mouseY,50+j*50,50+i*50)<20){

        board[i][j]=1;

      }

    }

  }

}

```

## FIRST PROGRAM

>>> 可以移動的棋子

```

1.加入背景才不會有殘影!

2.可以移動的棋子

=> if(handChess!=0)ellipse(mouseX,mouseY,40,40);

=> int handChess=0;

3.拖曳的程式碼

=> void mouseReleased(){

  int i=(mouseY+25-50)/50;

  int j=(mouseX+25-50)/50;

  board[i][j]=handChess;

  handChess=0;

}

```

```C

int [][]board={

  {4, 5, 3, 2, 1, 2, 3, 5, 4},

  {0, 0, 0, 0, 0, 0, 0, 0, 0},

  {0, 6, 0, 0, 0, 0, 0, 6, 0},

  {7, 0, 7, 0, 7, 0, 7, 0, 7},

  {0, 0, 0, 0, 0, 0, 0, 0, 0},

  {0, 0, 0, 0, 0, 0, 0, 0, 0},

  {-7, 0, -7, 0, -7, 0, -7, 0, -7},

  {-0, -6, 0, 0, 0, 0, 0, -6, 0},

  {0, 0, 0, 0, 0, 0, 0, 0, 0, 0},

  {-4, -5, -3, -2, -1, -2, -3, -5, -4},

};//1:將,2:士,3:象,4:車,5:馬,6:包,7:卒

String[]name={"將", "士", "象", "車", "馬", "包", "卒"};

String[]name2={"帥", "仕", "相", "俥", "傌", "炮", "兵"};

void setup() {

  size(500, 550);

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

  textFont(font);

  textAlign(CENTER, CENTER);

}

void draw() {

  background(#F7A246);

  for (int x=50; x<=450; x+=50) {

    line(x, 50, x, 250);

    line(x, 300, x, 500);

  }

  for (int y=50; y<=500; y+=50) {

    line(50, y, 450, y);

  }

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

    for (int j=0; j<9; j++) {

      int id=board[i][j];

      if (id==0)continue;

      if (id>0) {

        fill(255);

        ellipse(50+j*50, 50+i*50, 40, 40);

        fill(0);

        text(name[id-1], 50+j*50, 50+i*50-3);

      } else if (id<0) {

        fill(255);

        ellipse(50+j*50, 50+i*50, 40, 40);

        fill(255,0,0);

        text(name2[-id-1], 50+j*50, 50+i*50-3);

      }

    }

  }

  if(handChess!=0)ellipse(mouseX,mouseY,40,40);

}

int handChess=0;

void mousePressed(){

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

    for(int j=0;j<9;j++){

      if(dist(mouseX,mouseY,50+j*50,50+i*50)<20){

        handChess=board[i][j];

        board[i][j]=0;

      }

    }

  }

}

void mouseReleased(){

  int i=(mouseY+25-50)/50;

  int j=(mouseX+25-50)/50;

  board[i][j]=handChess;

  handChess=0;

}

```