2022年10月24日 星期一

2022互動技術week07

# Week07


## step01-1_今天的第1個目標,是把上次上課時, 象棋暗棋做完。但上次沒有把暗棋的位置弄亂, 所以接續上週的程式, 先把有錯的程式, 像是紅色、黑色的字弄對name[i][j] vs. name2[i][j]。還有 for迴圈的範圍弄對。接下來, 利用 for迴圈跑1000次, 亂數決定 i1,j1 及 i2,j2 以便做棋子的交換,便完成洗牌。


int [][]show={

  { 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}

};

int [][]board={

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

  { 5, 6, 6, 7, 7, 7, 7, 7},

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

  {-5,-6,-6,-7,-7,-7,-7,-7}

};

void setup(){

  size(500,300);

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

  textFont(font);

  textAlign(CENTER, CENTER);

  for(int k=0; k<1000; k++){

    int i1= int(random(4)), j1=int(random(8));

    int i2= int(random(4)), j2=int(random(8));

    int temp= board[i1][j1];

    board[i1][j1]=board[i2][j2];

    board[i2][j2]=temp;

  }

}

void draw(){

  background(#F0B82C);

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

    line( x, 50, x, 250);

  }

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

    line( 50, y, 450, y);

  }  

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

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

      if(show[i][j]==0){

        fill(255);

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

      }else{

        int id = board[i][j];

        drawChess(50+25+j*50, 50+25+i*50, id);

      }

    }

  }

}

void mousePressed(){

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

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

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

        if( show[i][j]==0 ) show[i][j] = 1;

      }

    }

  }

}

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

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

void drawChess(int x, int y, int id){

    fill(255);

    ellipse( x, y, 40, 40);

    if(id>0){

      fill(0);

      text( name[id-1], x, y-3);

    }else{

      fill(255,0,0);

      text( name2[-id-1], x, y-3);

    }

}


## step01-2_想要讓棋子可以移動,應該要先能選棋子,所以我們用綠色,來標示我們要移動的棋子


int [][]show={

  { 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}

};

int [][]board={

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

  { 5, 6, 6, 7, 7, 7, 7, 7},

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

  {-5,-6,-6,-7,-7,-7,-7,-7}

};

void setup(){

  size(500,300);

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

  textFont(font);

  textAlign(CENTER, CENTER);

  for(int k=0; k<1000; k++){

    shuffle_one();

  }

}

void shuffle_one(){

  int i1= int(random(4)), j1=int(random(8));

  int i2= int(random(4)), j2=int(random(8));

  int temp= board[i1][j1];

  board[i1][j1]=board[i2][j2];

  board[i2][j2]=temp;  

}

void draw(){

  background(#F0B82C);

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

    line( x, 50, x, 250);

  }

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

    line( 50, y, 450, y);

  }  

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

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

      if(show[i][j]==0){

        fill(255);

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

      }else{

        int id = board[i][j];

        drawChess(50+25+j*50, 50+25+i*50, id);

      }

    }

  }

  if(moving){

    drawChess(50+25+moveJ*50, 50+25+moveI*50, 9);

  }

}

int moveI = -1, moveJ = -1;

boolean moving = false;

void mousePressed(){

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

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

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

        if( show[i][j]==0 ) show[i][j] = 1;

        else {

          moveI = i;

          moveJ = j;

          moving = true;

        }

      }

    }

  }

}

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

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

void drawChess(int x, int y, int id){

    fill(255);

    ellipse( x, y, 40, 40);

    if(id==9){

      fill(0,255,0);

      ellipse( x, y, 40, 40);

    }else if(id>0){

      fill(0);

      text( name[id-1], x, y-3);

    }else{

      fill(255,0,0);

      text( name2[-id-1], x, y-3);

    }

}


## step02-1_想要移動棋子時, 需要先確定誰要被移動。之前是用全綠去畫棋子,其實不太好。所以, 我們改成2步驟, (1) 改用 fill(0,255,0, 128) 半透明的綠色圓,蓋在棋子上, (2) 利用 moveID 來畫那個隨著mouse移動、手正持著的棋子


int [][]show={

  { 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}

};

int [][]board={

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

  { 5, 6, 6, 7, 7, 7, 7, 7},

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

  {-5,-6,-6,-7,-7,-7,-7,-7}

};

void setup(){

  size(500,300);

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

  textFont(font);

  textAlign(CENTER, CENTER);

  for(int k=0; k<1000; k++){

    shuffle_one();

  }

}

void shuffle_one(){

  int i1= int(random(4)), j1=int(random(8));

  int i2= int(random(4)), j2=int(random(8));

  int temp= board[i1][j1];

  board[i1][j1]=board[i2][j2];

  board[i2][j2]=temp;  

}

void draw(){

  background(#F0B82C);

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

    line( x, 50, x, 250);

  }

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

    line( 50, y, 450, y);

  }  

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

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

      if(show[i][j]==0){

        fill(255);

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

      }else{

        int id = board[i][j];

        drawChess(50+25+j*50, 50+25+i*50, id);

      }

    }

  }

  if(moving){

    fill(0,255,0, 128);

    ellipse(50+25+moveJ*50, 50+25+moveI*50, 40,40);

    

    drawChess(mouseX, mouseY, moveID);

  }

}

int moveI = -1, moveJ = -1, moveID = -1;

boolean moving = false;

void mousePressed(){

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

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

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

        if( show[i][j]==0 ) show[i][j] = 1;

        else {

          moveI = i;

          moveJ = j;

          moveID = board[i][j];

          moving = true;

        }

      }

    }

  }

}

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

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

void drawChess(int x, int y, int id){

    fill(255);

    ellipse( x, y, 40, 40);

    //if(id==9){

    //  fill(0,255,0);

    //  ellipse( x, y, 40, 40);

    //}else 

    if(id>0){//黑

      fill(0);

      text( name[id-1], x, y-3);

    } else {

      fill(255,0,0);

      text( name2[-id-1], x, y-3);

    }

}


## step02-2_在moving時,mouseReleased()時,要把棋子移動過去, 也就是先把原本位置 board[moveI][moveJ] 清空,再把 board[i][j]=moveID, 便能做出移動棋子的效果。另外要小心,如果drawChess()時,如果id是0表示是空的,便不要畫它哦


int [][]show={

  { 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}

};

int [][]board={

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

  { 5, 6, 6, 7, 7, 7, 7, 7},

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

  {-5,-6,-6,-7,-7,-7,-7,-7}

};

void setup(){

  size(500,300);

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

  textFont(font);

  textAlign(CENTER, CENTER);

  for(int k=0; k<1000; k++){

    shuffle_one();

  }

}

void shuffle_one(){

  int i1= int(random(4)), j1=int(random(8));

  int i2= int(random(4)), j2=int(random(8));

  int temp= board[i1][j1];

  board[i1][j1]=board[i2][j2];

  board[i2][j2]=temp;  

}

void draw(){

  background(#F0B82C);

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

    line( x, 50, x, 250);

  }

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

    line( 50, y, 450, y);

  }  

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

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

      if(show[i][j]==0){

        fill(255);

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

      }else{

        int id = board[i][j];

        drawChess(50+25+j*50, 50+25+i*50, id);

      }

    }

  }

  if(moving){

    fill(0,255,0, 128);

    ellipse(50+25+moveJ*50, 50+25+moveI*50, 40,40);

    

    drawChess(mouseX, mouseY, moveID);

  }

}

int moveI = -1, moveJ = -1, moveID = -1;

boolean moving = false;

void mousePressed(){

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

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

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

        if( show[i][j]==0 ) show[i][j] = 1;

        else {

          moveI = i;

          moveJ = j;

          moveID = board[i][j];

          moving = true;

        }

      }

    }

  }

}

void mouseReleased(){

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

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

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

        if( moving ){

          board[moveI][moveJ]=0;

          board[i][j]=moveID;

          moving = false;

        }

      }

    }

  }

}

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

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

void drawChess(int x, int y, int id){

    if(id==0) return;

    fill(255);

    ellipse( x, y, 40, 40);

    //if(id==9){

    //  fill(0,255,0);

    //  ellipse( x, y, 40, 40);

    //}else 

    if(id>0){//黑

      fill(0);

      text( name[id-1], x, y-3);

    } else {

      fill(255,0,0);

      text( name2[-id-1], x, y-3);

    }

}


## step03-1_想要播放音樂,先從 keyboard ninja 網頁下載它的音樂素材 mp3 檔。接著在 Processing-Sketch-Libraries-Manage Libraries裡,找到Sound並且下載。最後在程式中, import完之後, 使用 SoundFile 物件,便能play播放它


import processing.sound.*;


void setup(){

  SoundFile file = new SoundFile(this, "Intro Song_Final.mp3");

  file.play();

}

void draw(){

  

}

void mousePressed(){

  SoundFile file2 = new SoundFile(this, "In Game Music.mp3");

  file2.play();

}


## step03-2_如果音樂檔案很多,應該要在外面宣告SoundFile變數, 在 setup()裡把它們準備好, 然後重覆使用這些變數


import processing.sound.*; //音樂功能 


SoundFile file1, file2, file3, file4;

void setup(){

  file1 = new SoundFile(this, "Intro Song_Final.mp3");

  file2 = new SoundFile(this, "In Game Music.mp3");

  file3 = new SoundFile(this, "Monkey 1.mp3");

  file4 = new SoundFile(this, "Fruit Missed.mp3");

  

  file1.play();

}

void draw(){

  

}

void mousePressed(){

  file2.play();

}

void keyPressed(){

  file3.play();

}

於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)
  • 期末作業 過馬路
      import processing.sound.*;   // 加入音樂函式庫 SoundFile sound   // 宣告音檔   int fin = 0;   // 初始狀態為 0 PImage playerStay;   // 宣告圖片 ( 玩家...
  • Week_16 2022.12.19
    1. 期末作品目前成果 ---------------------------------- github ----------------------------------
  • week15_新手上碌
       1 .優化球的軌跡 1-1.斜率判斷方向：         /*         p2.x>p1.x&&p2.y<p1.y//向右上/          p2.x<p1.x&&p2.y>p1.y//向左下       ...