วันพุธที่ 28 สิงหาคม พ.ศ. 2556

Riversi/Othello Board with Pieces

Full Othello Board

นี่เป็นการสร้างตารางเล่นโอเทลโล่ โดยการใช้โค้ดบางอย่างมาดัดแปลง เพื่อให้เข้ากับเกม อันดับแรก ผมสร้างตัวแปรชนิดต่างๆ สำหรับการเก็บข้อมูล เช่น ตัวแปร x สำหรับการเก็บข้อมูลในแกน X, ตัวแปร y สำหรับการเก็บข้อมูลในแกน Y, Array 2 มิติ เพื่อการแทนค่าในโอเทลโล่ เป็นต้น ตัวแปรเหล่านี้ ผมกำหนดให้เป็นตัวแปรชนิด Global Variable เพื่อให้แทนค่าได้ทั้งฟังก์ชั่น ฟังก์ชั่นส่วนใหญ่ที่ผมสร้างขึ้น ผมกำหนดให้อยู่ใน setup ในฟังก์ชั่นหลักตัวนี้ ผมสร้างเงื่อนไขหลายอย่าง ไม่ว่าจะเป็นลูป หรือเงื่อนไขธรรมดา ไม่ว่าจะเพื่อการสร้างหรือการนับ และการออกแบบรูปทรงต่างๆ ของหมาก รวมทั้งการตกแต่งด้วยสีสันเพื่อให้สังเกตได้ง่าย สามารถกำหนดจำนวนของหมาก และแถวได้ตาม Array 2 มิติ

Processing Code

int x = 50;  /*กำหนดตัวแปรชนิด Global Variable สองตัวเพื่อให้แทนค่าได้ทุกฟังก์ชั่นในโปรแกรม*/
int y = 50;
float [][] Otello = {
  {
    random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
  , {
      random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
  , {
      random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
  , {
      random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
  , {
      random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
  , {
      random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
  , {
      random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
  , {
      random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
  , {
      random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
  , {
      random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
  , {
      random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
  , {
      random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2), random(0, 2)
  }
};  /*กำหนด Array 2 มิติ โดยให้ตัวเลขแต่ละตัวออกมาแทนค่าได้ตามเงื่อนไขในการวนลูปที่เรากำหนดขึ้น ในนี้ ตัวเลขแต่ละตัวในวงเล็บนี้ถูกกำหนดให้นำออกมาใช้แบบสุ่มตามหลักทศนิยม หรือฟังก์ชั่น float พร้อมกับฟังก์ชั่นในการสุ่มเลือก หรือ random() เราจะสังเกตได้ว่า สีของวงกลมที่ใช้แทนเบี้ยนั้นมีการเปลี่ยนไปเรื่อยทุกการใช้งานทีละครั้ง ยิ่งเรากำหนดตัวเลขมากขึ้น การเปลี่ยนสีก็ยิ่งนานขึ้น*/
int i = 0;  /*กำหนเพื่อการนับ*/  
int j = 0;
void setup() {  /*ฟังก์ชั่นหลักในการตั้งค่าโดยไม่มีการวนซ้ำ*/ 
  size(600, 600);  /*กำหนดความกว้างและสูงของพื้นที่ หรือ size(width, height)*/
  background(255, 251, 126);  /*ฟังก์ชั่นที่ใช้ในการเติมสีให้กับพื้นหลังโดยสีที่ใส่ไปนี้คือ สีเหลืองอ่อน สามารถกำหนดได้ตามค่าของแม่สี หรือเครื่องหมาย #*/
  while (x < 600) {  /*ในกรณีที่ x น้อยกว่า 600 จึงจะทำการเข้าวนลูปได้*/ 
    strokeWeight(3);  //ฟังก์ชั่นที่ใช้ในการกำหนดน้ำหนักของเส้นโดยใส่ตัวเลขลงไปในวงเล็บ
    line(x, 0, x, 600);  /*ถ้าเงื่อนไขข้างบนไม่เป็นจริง จะวาดเส้นที่กำหนดด้วยฟังก์ชั่น line(x1, y1, x2, y2)*/
    x = x+50;  //ค่า x จะมีค่าเพิ่มขึ้นทีละ 50 ในเงื่อนไขนี้ หากเป็นจริง
  }
  while (y < 600) {  /*ในกรณีที่ y น้อยกว่า 600 จึงจะทำการเข้าวนลูปได้*/ 
    line(0, y, 600, y);  /*ถ้าเงื่อนไขข้างบนไม่เป็นจริง จะวาดเส้นที่กำหนดด้วยฟังก์ชั่น line(x1, y1, x2, y2)*/
    y = y+50;  //ค่า y จะมีค่าเพิ่มขึ้นทีละ 50 ในเงื่อนไขนี้ หากเป็นจริง
  }
  x = 25;  //กำหนดให้ค่าของตัวแปรทั้งสองนี้ใหม่ และยังคงเป็นจำนวนเต็ม เพื่อนำมาใช้กับลูปถัดไป
  y = 25;
  while(i < Otello.length){  /*ในกรณีที่ i น้อยกว่าความยาวของ OX หรือ 12 จึงจะทำการเข้าวนลูปได้*/ 
    while(j < Otello[i].length){  /*ในกรณีที่ j น้อยกว่าความยาวของ OX หรือ 12 จึงจะทำการเข้าวนลูปได้*/ 
      if(Otello[i][j] <= 1){  /*เงื่อนไขที่ว่า OX [i][j] มีค่าเท่ากับ 1 หรือไม่ ถ้าใช่จะสร้างวงกลมตามที่กำหนดด้วยฟังก์ชั่นวาดวงรี หรือ ellipse(x, y, width, height) พร้อมกำหนดใส่สีดำ หรือสีขาว*/ 
        fill(0);  //สีดำ
      } else {  /*ฟังก์ชั่นที่ใช้กำหนดอีกเงื่อนไขหนึ่ง*/
        fill(255);  //สีขาว
      }
      strokeWeight(2);  //ฟังก์ชั่นที่ใช้ในการกำหนดน้ำหนักของเส้นโดยใส่ตัวเลขลงไปในวงเล็บ
      ellipse(x, y, 40, 40);  //วาดวงกลมสองชั้นเพื่อทำเป็นเบี้ยในกระดานเล่นเกม
      ellipse(x, y, 20, 20);
      x = x+50;  //ค่า x จะมีค่าเพิ่มขึ้นทีละ 50 ในเงื่อนไขนี้ หากเป็นจริง
      j = j+1;  //ค่า j จะมีค่าเพิ่มขึ้นทีละ 1 ในเงื่อนไขนี้ หากเป็นจริง
    }
    j = 0;    //กำหนดให้ค่าของตัวแปรทั้งหมดนี้ใหม่ หลังจากที่ผ่านลูปชั้นก่อนนี้มา หากเป็นจริงจะสิ้นสุดการวนลูป หากไม่เป็นจริง จะยังคงทำการวนลูปซ้ำต่อไป
    x = 25;
    y = y+50;  //ค่า y จะมีค่าเพิ่มขึ้นทีละ 50 ในเงื่อนไขนี้ หากเป็นจริง
    i = i+1;  //ค่า i จะมีค่าเพิ่มขึ้นทีละ 1 ในเงื่อนไขนี้ หากเป็นจริง
  }
}

Canvas


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

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