ucc的week04互動技術上課筆記

# Week04 2022-09-26

```

=>这个iPhone 14 Pro系列灵动岛游戏有点意思！🤣🤣🤣

(https://www.facebook.com/watch/?v=2296475820490477)

1. 主題: 打磚塊
2. 主題: 圍棋

```

## 1-1做出類似動態島彈力球的遊戲
```C
1.一樣設定出畫面的大小

=>size(500,500);

2.  ellipse( x , y , 寬 , 長); 

=> ellipse(x,y,10,10);//橢圓

  --目前成果會做出一個往右上角前進的小球

```

## 1-2 加入反彈座標

```C

1.再多加入2個變數vx,vy

=> 讓速度變化

2.設定if判斷句

=> x超過畫面換方向,y進行反彈

```

## 1-3 加入反彈板(半完成)

```C

1.設定背景顏色

=> backgrounf(#6ED4F2);

2.透過rect做出反彈板板

=>  rect(boardx,470,100,15,5);

3.將boardx變數設定為mouseX ///使得反彈板板會跟著滑鼠一起移動

=> int boardx=mouseX;

4.設定白球碰到板子時會進行回彈(x~x+100)

=> if(y>470 && x>boardx && x<boardx+100) vy=-vy;

```

## 讓彈珠檯有加速度的感覺(快完成)

```C

1. 在板子中間控制

=> 將boardx改為 mouseX- boardW/2

2.算出滑鼠的移動量加進vx

=> vx+=(mouseX-pmouseX)/2;

```

## 讓反彈板可以縮放

```C

1.右鍵是縮小

=> if(mousePressed && mouseButton==RIGHT) boardw *= 0.99;

2.左鍵是放大

=> if(mousePressed && mouseButton==LEFT) boardw *= 1.01; 

```

## FINAL PROGRAM!!!

```C

void setup(){

  size(500,500);

}

float x=250,y=250;

float vx=1.0,vy=-2.5;

float boardx,boardy=470,boardw=100,boardh=20;

void draw(){

  background(#6ED4F2);

  boardx=mouseX-boardw/2;

  rect(boardx,boardy,boardw,boardh,20);

  ellipse(x,y,10,10);//橢圓

  x=x+vx;

  y=y+vy;

  if(x>500) vx=-vx;

  if(x<0) vx=-vx;

  if(y<0) vy=-vy;

  if((y>boardy && y<boardy+boardh) && (x>boardx && x<boardx+boardw))

  {

    vy=-vy;

    vx+=(mouseX-pmouseX)/2;

  }

  if(mousePressed && mouseButton==LEFT) boardw *= 1.01; 

  if(mousePressed && mouseButton==RIGHT) boardw *= 0.99;

}

```

## 2-1圍棋的雛型
```C

1.一樣先設定出視窗範圍

2.透過for畫出9*9顆白測棋子

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

          {

            for(int y=50;y<=450;y+=50)

            {

                  ellipse(x,y,50,50);

            }

          }

    

```

## 2-2 判別為黑子還白子

```C

1.土法煉鋼

=> 如果數字是1為黑子否則為白子

  

```

## 設定1時下黑子2時下白子 0是都不下(半完成)

```

1.透過for畫出棋盤格線

=> for(int i=1;i<=9;i++){

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

               line( 50 , i*50 , 450 , i*50);//橫線

               line(i*50,   50 , i*50, 450 );//直線

                 }

       }

2.讀到1時畫黑子

=> if(go[i][j]==1){

         fill(0);

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

       }

3.讀到2時畫白子

=>  else if(go[i][j]==2){

         fill(255);

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

       }

```

## 真的可以玩的圍棋來啦!!(白子先攻)

```C

1.設定1變數為n

2.判斷下棋的位置             

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

      int i = (mouseY-25)/50;

3.切換黑白子

=> go[i][j] = (N%2==0)?1:2;

```

## SECOND PROGRAM

```C

void setup(){

 size(500,500); 

}

int [][] go={

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

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

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

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

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

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

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

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

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

};///建立9*9的陣列

int N=0;

void mousePressed()

{

    int j = (mouseX-25)/50;

    int i = (mouseY-25)/50;

    go[i][j] = (N%2==0)?1:2;

    N++;

}

void draw(){

   background(246,194,108);

   for(int i=1;i<=9;i++){

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

       line( 50 , i*50 , 450 , i*50);//橫線

       line(i*50,   50 , i*50, 450 );//直線

     }

   }

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

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

       if(go[i][j]==1){

         fill(0);//當讀到1時畫黑棋

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

       }

       else if(go[i][j]==2){

         fill(255);

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

       }

     }

   }

}

```