วันพฤหัสบดีที่ 19 กันยายน พ.ศ. 2556

Chessboard with Pieces



Chess Board
นี่เป็นฟังก์ชั่นสำหรับการวาดกระดานหมากรุก โดยการกำหนดลูปหลายลูปมาซ้อนกัน และนำเอามาวางบนลายของตารางหมากรุกแต่ละช่องที่เราวาดไว้ การออกแบบในครั้งนี้ ใช้เวลาค่อนข้างมาก เพราะเราต้องพยายามออกแบบให้ใกล้เคียงกับของจริง บางครั้งอาจต้องใช้รูปทรงบางอย่างมาแทนตัวหมากบางตัว ต้องใช้การกำหนดเงื่อนไข และ Array มาช่วยในการวาดถึงจะสำเร็จ และยังต้องแยกสร้างฟังก์ชั่นสำหรับตัวหมากแต่ละตัวเอาไว้อย่างละชุด เพื่อให้แทนหมากตัวเดียวกัน แต่คนละสีบนสองฝั่นของกระดานหมากรุก

Processing Code

int x = 0;  //กำหนดตัวแปรชนิด Global Variable เพื่อให้แทนค่าได้ทุกฟังก์ชั่น ตัวนี้เป็นค่าในแกน X นอกจากนี้ตัวแปรทุกตัวถูกกำหนดให้เป็นจำนวนเต็มด้วยฟังก์ชั่นที่นำหน้า int
int y = 0;  //กำหนดค่าในแกน Y
int blackwhite = 0;  //ค่ากำหนดสีของตารางหมากรุก
int [][] chess= {  //ตัวกำหนดว่า จะวาดอะไรบนกระดาน
  {
    1, 2, 3, 4, 5, 3, 2, 1
  }  //กำหนดตำแหน่งของเรือ ม้า บิชอป ควีน ขุน บิชอป ม้า และเรือ ตามลำดับ ทั้งหมด 8 ตัว ฝ่ายสีดำ
  , {
    6, 6, 6, 6, 6, 6, 6, 6
  }  //กำหนดตำแหน่งของเบี้ยทั้ง 8 ตัวตามลำดับบนแถวเดียวกัน ฝ่ายสีดำ
  , {
    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
  }  //พื้นที่ว่างที่มีลายแถบสี
  , {
    6, 6, 6, 6, 6, 6, 6, 6
  }  //กำหนดตำแหน่งของเบี้ยทั้ง 8 ตัวตามลำดับบนแถวเดียวกัน ฝ่ายสีขาว
  , {
    1, 2, 3, 4, 5, 3, 2, 1
  }  //กำหนดตำแหน่งของเรือ ม้า บิชอป ควีน ขุน บิชอป ม้า และเรือ ตามลำดับ ทั้งหมด 8 ตัว ฝ่ายสีขาว
};
int i = 0;  //ตัวนับ Array
int j = 0;  //ตัวนับ Array
void setup() {  //ฟังก์ชั่นหลักที่ใช้ในการกำหนดเรียกใช้งานฟังก์ชั่นต่างๆ
  size(800, 800);  //ฟังก์ชั่นที่ใช้ในการกำหนดพื้นที่ของพื้นหลัง หรือ size(width, height)
  noStroke();  //ฟังก์ชั่นหลักที่ใช้ในการระบุว่า ไม่มีขอบ
  //การวาดตาราง
  while (y <= 800) {  //กำหนดเงื่อนไขเป็นลูป ถ้าเงื่อนไขภายในเป็นจริง จึงจะเกิดลูป
    while (x <= 800) {
      if (blackwhite == 0) {  //กำหนดเงื่อนไขภายในวงเล็บ ถ้าเป็นจริง จะเกิดผล
        fill(46, 42, 196);  //ฟังก์ชั่นที่ใช้ในการเติมสีให้กับสิ่งต่างๆ โดยการเติมสีตามแม่สี หรือเครื่องหมาย # สังเกตได้จาก Color Selector
        blackwhite = 1;
      }
      else if (blackwhite == 1) {  //กำหนดเงื่อนไขอีกกรณีหนึ่ง
        fill(144, 224, 255);  //เติมสีฟ้าอ่อน
        blackwhite = 0;
      }
      rect(x, y, 100, 100);  //ฟังก์ชั่นที่ใช้ในการวาดรูปสี่เหลี่ยม หรือ rect(x, y, width, height)
      x = x+100;  //ค่า x มีค่าเพิ่มขึ้นทีละ 100
    }
    x = 0;
    y = y+100;
  }
  x = 50;  //ค่าในแกน X ของตัวหมาก
  y = 50;  //ค่าในแกน Y ของตัวหมาก
  //การสร้างตัวหมากรุก
  while(i < chess.length) {  //กรณีที่ i มีค่าน้อยกว่าความยาวของ Array ชื่อ chess
   while(j < chess[i].length) {  //การกำหนดตัวหมาก 
     if(chess[i][j] == 1) {
     //วาดเรือ
     rook(x, y);
     } else if(chess[i][j] == 2) {
     //วาดม้า
     knight(x, y);
     } else if(chess[i][j] == 3) {
     //วามบิชอป
     bishop(x, y);
     } else if(chess[i][j] == 4) {
     //วาดควีน
     queen(x, y);
     } else if(chess[i][j] == 5) {
     //วาดขุน
     king(x, y);
     } else if(chess[i][j] == 6) {
     //วาดเบี้ย
     pawn(x, y);
    }
    x = x+100;  //เลื่อนตำแหน่งตัวหมาก
    j = j+1;
   }
   j = 0;
   x = 50;
   y = y+100;
   i = i+1;
  }
}
void rook(int x, int y) {  //ฟังก์ชั่นที่ใช้ในการสร้างเรือ
  noStroke();
  if(y < 400) {
   fill(0);  //เติมสีดำ
  } else if(y > 400) {
   fill(255);   //เติมสีขาว
  }
 int h = x-30;
 int k = y-40;
 rect(h, k+10, 12, 20);
 rect(h+24, k+10, 12, 20);
 rect(h+48, k+10, 12, 20);
 rect(h, k+20, 60, 10);
 rect(h+14, k+20, 32, 60);
 rect(h, k+70, 60, 10);
}
void knight(int x, int y){  //ฟังก์ชั่นที่ใช้ในการวาดม้า
  noStroke();
  if(y < 400){
   fill(0);
  } else if(y > 400){
   fill(255);
  }
  int h = x-25;
  int k = y-15;
  rect(h, k, 35, 20);
  triangle(h, k, h+40, k, h+30, k-20);  //ฟังก์ชั่นที่ใช้ในการวาดรูปสามเหลี่ยม หรือ triangle(x1, y1, x2, y2, x3, y3)
  triangle(h+40, k-20, h+10, k+50, h+50, k+50);
  triangle(h+30, k-20, h+30, k, h+50, k-20);
  if(y < 400) {
   fill(255);
  } else if(y > 400){
   fill(0);
  }
  ellipse(h+25, k, 5, 5);
}
void bishop(int x, int y) {  //ฟังก์ชั่นที่ใช้ในการวาดบิชอป
  noStroke();
  if(y < 400) {
   fill(0);
  } else if(y > 400){
   fill(255);
  }
  int h = x;
  int k = y-30;
  triangle(h, k, h+29, k+26, h-29, k+26);
  ellipse(h, k+30, 60, 30);  //ฟังก์ชั่นที่ใช้ในการวาดวงรี หรือ ellipse(x, y, width, height)
  ellipse(h, k, 10, 10);
  triangle(h, k, h-20, k+60, h+20, k+60);
  stroke(255);  //ฟังก์ชั่นที่ใช้ในการเติมสีในเส้น ใช้แบบเดียวกับฟังก์ชั่น fill() สีที่ใส่นี้คือ สีขาว
  if(y < 400) {
   stroke(255);
  } else if(y > 400) {
   stroke(0);
  }
  strokeWeight(3);  //ฟังก์ชั่นที่ใช้ในการเพิ่มความหนาของเส้นของสิ่งต่างๆ
  line(h, k+15, h, k+31);  //ฟังก์ชั่นที่ใช้ในการวาดเส้น หรือ line(x1, y1, x2, y2)
  line(h-8, k+23, h+8, k+23);
}
void queen(int x, int y) {  //ฟังก์ชั่นที่ใช้ในการวาดควีน
  noStroke();
  if(y < 400){
   fill(0);
  } else if(y > 400){
   fill(255);
  }
  int h = x-26;
  int k = y+10;
  rect(h, k, 52, 20);
  triangle(h, k+20, h+10, k, h-5, k-25);
  triangle(h+10, k, h+26, k, h+15, k-30);
  triangle(h+26, k, h+42, k, h+37, k-30);
  triangle(h+52, k+20, h+42, k, h+57, k-25);
  ellipse(h-5, k-25, 10, 10);
  ellipse(h+15, k-30, 10, 10);
  ellipse(h+37, k-30, 10, 10);
  ellipse(h+57, k-25, 10, 10);
}
void king(int x, int y) {  //ฟังก์ชั่นที่ใช้ในการวาดขุน
  noStroke();
  if(y < 400){
   fill(0);
  } else if(y > 400){
   fill(255);
  }
  int h = x-27;
  int k=y;
  rect(h, k, 54, 25);
  triangle(h, k, h, k-25, h+18, k);
  triangle(h+18, k, h+27, k-25, h+36, k);
  triangle(h+36, k, h+54, k, h+54, k-25);
  if(y < 400) {
   fill(255);
  } else if(y > 400) {
   fill(0);
  }
  ellipse(h+10, k+10, 7, 7);
  ellipse(h+27, k+10, 7, 7);
  ellipse(h+44, k+10, 7, 7);
  strokeWeight(4);
  if(y < 400) {
   stroke(0);
  } else if(y > 400) {
   stroke(255);
  }
  line(h+27, k-20, h+27, k-35);
  line(h+22, k-27, h+32, k-27);
}
void pawn(int x, int y) {  //ฟังก์ชั่นที่ใช้ในการวาดเบี้ย 
  noStroke();
  if(y < 400) {
   fill(0);
  } else if(y > 400) {
   fill(255);
  }
  int h = x;
  int k = y-15;
  ellipse(h, k+15, 70, 70);
  fill(0);
  ellipse(h, k+15, 50, 50);
  fill(#FFFFFF);
  ellipse(h, k+15, 30, 30);
  //triangle(h, k, h-20, k+50, h+20, k+50);
}

Canvas


ไม่มีความคิดเห็น:

แสดงความคิดเห็น