WEEK03,課堂作業

第1節
教圍棋的棋盤格子
利用for迴圈畫格子
交線的粗細
用color selector較方便選自己喜歡的顏色
增加了滑鼠事件，滑鼠移到哪框框跟著移到哪

int nowX ,nowY;

void setup() {

  size(700, 700);視窗大小

}

void draw() {

  background(245, 200, 104);背景顏色

  noFill();畫框框不會填滿色彩

  strokeWeight(5);線的粗細

  rect(50, 50, 600, 600);最外面的框框

  strokeWeight(1);裡面線的粗細

  for (int i=0;i<10;i++) {劃出裡面線

    line(50, 50+i*60, 650, 50+i*60);

    line(50+i*60, 50, 50+i*60, 650);

  }

  fill(128,128,0);移動滑鼠的顏色

  rect(nowX*60+50,nowY*60+50,60,60);滑鼠移動的框框

}

void mouseMoved(){滑鼠現在的位置和移動的位置

  nowX =(mouseX-50)/60;

  nowY =(mouseY-50)/60;

  println("mouseX;" + mouseX + "mouseY;" + mouseY + " nowX " + nowX + " nowY " +nowY );印出滑鼠的XY座標

  

}

第2節
宣告陣列，使用for迴圈來進行陣列的比較畫圖，滑鼠按下格子會變色
int nowX ,nowY;宣告陣列
int[] [] array= new int[10] [10];
void setup() {
  size(700, 700);
}
void draw() {
  background(245, 200, 104);
  noFill();
  strokeWeight(5);
  rect(50, 50, 600, 600);
  strokeWeight(1);
  for (int i=0;i<10;i++) {
    line(50, 50+i*60, 650, 50+i*60);
    line(50+i*60, 50, 50+i*60, 650);
  }
  fill(128,128,0);滑鼠移動框框的顏色
  rect(nowX*60+50,nowY*60+50,60,60);
  fill(58,80,214);滑鼠按下框框改變得顏色
  for(int i=0;i<10;i++){使用for迴圈來進行陣列比較畫圖
    for(int j=0;j<10;j++){
    if(array[i][j]==1) rect(i*60+50,j*60+50,60,60);
    }
  }
}
void mousePressed(){滑鼠按壓事件
 array[nowX][nowY]=1;
}
void mouseMoved(){
  nowX =(mouseX-50)/60;
  nowY =(mouseY-50)/60;
  println("mouseX;" + mouseX + "mouseY;" + mouseY + " nowX " + nowX + " nowY " +nowY );

}

第3節

完成五子棋

int nowColor=1;
int nowX ,nowY;
int[] [] array= new int[10] [10];
void setup() {
  size(700, 700);
}
void draw() {
  background(245, 200, 104);
  noFill();
  strokeWeight(5);
  rect(50, 50, 600, 600);
  strokeWeight(1);
  for (int i=0;i<10;i++) {
    line(50, 50+i*60, 650, 50+i*60);
    line(50+i*60, 50, 50+i*60, 650);
  }
  fill(128,128,0);
  rect(nowX*60+50,nowY*60+50,60,60);
  fill(58,80,214);
  for(int i=0;i<10;i++){
    for(int j=0;j<10;j++){
    if(array[i][j]==1) {fill(0,0,125); ellipse(i*60+50,j*60+50,60,60);}把框框改成圓圈圈
    if(array[i][j]==2) {fill(125,0,125); ellipse(i*60+50,j*60+50,60,60);}把框框改成圓圈圈
 
 
    }
  }
}
void mousePressed(){
 array[nowX][nowY]=nowColor;
 if(nowColor==1) nowColor=2; 改變棋子的顏色
 else if(nowColor==2) nowColor=1;
}
void mouseMoved(){
  nowX =(mouseX)/60;
  nowY =(mouseY)/60;
  println("mouseX;" + mouseX + "mouseY;" + mouseY + " nowX " + nowX + " nowY " +nowY );

}

貼影片分享

心得:這個影片還蠻有趣的，這是個小遊，可以訓練你的反應能力，圓球要躲立方體不能讓圓球碰到立方體，訓練你的反應能力，躲越久分數越高但是玩久眼睛會有點不舒服。(1)今天學到了如何自己做出一個小遊戲五子棋，還蠻開心的，學程式學到現在居然可以自己做出一個小遊戲，(2)現在陣列搭配for迴圈還不太會用還要多多練習才行，(3)還想學一些有關Processing  art的東西或是Processing game 可以做更多更有趣的遊戲。