XO game this exam live on netlify server

TIC TAC TOE หรือ Xs and Os

XO เป็นเกมกระดานชนิดหนึ่ง เนื่องจากวิธีการเล่นผู้เล่นแต่ละฝ่ายจะผลัดกันเขียนรูปวงกลม (O) และกากบาท (X) บนกระดาษ ชาวไทยจึงนิยมเรียกว่าโอเอกซ์

กติกาการเล่น

ให้ผู้เล่นเขียนตารางขนาด 3×3 บนกระดาษ (กว้าง 3 ช่อง ยาว 3 ช่อง) โดยความกว้างของช่องๆ หนึ่งนั้นจะกว้างเท่าไหร่ก็ได้ จากนั้นผู้เล่นทั้ง 2 คนจะกำหนดกันเองว่าใครจะเป็นฝ่ายได้เล่นก่อน คนที่เล่นก่อนจะเขียนเครื่องหมาย O (หรือ X ก็ได้แล้วแต่) จากนั้นอีกคนหนึ่งก็จะเขียนเครื่องหมายตรงข้ามกับผู้เล่นก่อนหน้านี้ทำไว้ โดยที่ผู้เล่นห้ามเขียนเครื่องหมายของตัวเองซ้ำช่องที่มีคนเขียนก่อนหน้านี้ จากนั้นทั้ง 2 ฝ่ายก็จะผลัดกันเขียนเครื่องหมายของตัวเองจนเต็มกระดาน 3×3 ดังกล่าว

วิธีการตัดสินหาผู้ชนะ

เกมนี้จะมีผู้ชนะก็ต่อเมื่อมีผู้เล่นคนหนึ่งเขียนเครื่องหมายของตัวเองเรียงเป็นแนวตรงหรือแนวทแยงต่อกัน 3 อัน เพราะฉะนั้นผู้เล่นแต่ละฝ่ายควรจะพยายามที่จะวางเครื่องหมายของตัวเองให้ได้ตามแนว ในขณะเดียวกันก็ควรจะวางเครื่องหมายของตัวเองกั้นแนวที่ผู้เล่นอีกฝ่ายที่กำลังสร้างด้วย แต่ถ้าเล่นกันจนจบแล้วไม่มีผู้เล่นฝ่ายใดสามารถที่จะวางเครื่องหมายให้เรียงไปตามแนวได้ ถือว่าเสมอกัน

ในโปรแกรมนี้ทำอะไรบ้าง

1. สามารถกำหนด ขนาดตารางของ XO นอกจาก 3x3 เป็นขนาดใด ๆ ก็ได้
2. เก็บ history play ในเกมนั้น
3. เพิ่มเติมอาจเพิ่มกติกาได้ว่า สามารถกาติดกัน 3 หรือ 5 ช่องจะเป็นผู้ชนะ

Algorithm

1. ต้องไม่กาซ้ำ
2. ถ้าหากผู้เล่นฝ่าย o กา ให้กำหนดค่าในตำแหน่งนั้นๆเป็น o
3. ถ้าหากผู้เล่นฝ่าย x กา ให้กำหนดค่าในตำแหน่งนั้นๆเป็น x
4. เมื่อกาแล้วสลับฝั่งเล่น
5. ตรวจสอบจาก ซ้ายไปขวา ที่มีค่าเหมือนกันทีละแถวเช่น 123, 456, 789
6. ตรวจสอบจาก บนลงล่าง ที่มีค่าเหมือนกันทีละแถวเช่น 147, 258, 369
7. ตรวจสอบแบบ แนวทแยง ที่มีค่าเหมือนกันเช่น 159, 357

    // let temp_input_len = Number(input_len);
    // let temp_input_len = initialInput_len;
    let temp_input_len = 5;
    let startAt = 1;
    let num1 = 0;

    let arr1 = []; // แนวนอน
    let arr2 = []; // แนวตั้ง
    let arr31 = []; // แนวทแยงจากจุดบนซ้าย
    let arr32 = []; // แนวทแยงจากจุดบนขวา

    for (let i = 1; i <= temp_input_len; i++) {
      let temp_arr1 = [];
      let temp_arr2 = [];
      for (let j = 0; j < temp_input_len; j++) {
        num1++;
        if (num1) {
          temp_arr1.push(num1);
        }
        if (!(num1 % temp_input_len)) {
          arr1[i - 1] = temp_arr1;
        }

        let num2 = i + temp_input_len * j;
        if (num2) {
          temp_arr2.push(i + temp_input_len * j);
        }
        if (temp_arr2.length === temp_input_len) {
          arr2[i - 1] = temp_arr2;
        }
      }
      arr31.push(startAt * i + temp_input_len * (i - 1));
      arr32.push(temp_input_len * i - startAt * (i - 1));
    }

• สร้าง array เก็บตำแหน่งที่ใช้ตรวจสอบที่มีค่าเหมือนกัน

• arr1 คือการชนะแบบแนวนอนเช่น 123, 456, 789

• arr2 คือการชนะแบบแนวตั้งเช่น 147, 258, 369

• arr31 คือการชนะแบบแนวทแยง ตรวจสอบจากบนซ้ายไปล่างขวาเช่น 159

• arr32 คือการชนะแบบแนวทแยง ตรวจสอบจากบนขวาไปล่างซ้าย 357

• arr1 จะมีรูปแบบประมาณนี้ [[1,2,3], [4,5,6], [7,8,9]]

• arr2 จะมีรูปแบบประมาณนี้ [[1,4,7], [2,5,8], [3,6,9]]

• arr31 จะมีรูปแบบประมาณนี้ [1,5,9]

• arr32 จะมีรูปแบบประมาณนี้ [3,5,7]

• นี้คือการตรวจสอบหาผู้ชนะ จากค่าใน array ที่มีค่าเหมือนกันทั้งหมด ตัวอย่าง ["x","x","x"]

  function compareAllValueInArray(arr) {
    if (arr[0].length === undefined) {
      arr = [arr];
    }
    let IsWin = false;
    arr.map((el) => {
      [el].map((items) => {
        let arrCompare = [];
        items.map((item) => {
          // console.log(item);
          arrCompare.push(games[item]);
        });
        // console.log(arrCompare);

        let result = !!arrCompare.reduce(function (a, b) {
          return a === b ? a : NaN;
        });

        if (result) IsWin = true;
      });
      // console.log("end loop 1");
    });

    return IsWin;
  }

จากโค้ดด้านบนคือการตรวจสอบค่าใน array ที่ส่งมาเหมือนกันหรือไม่ ถ้าเหมือกันจะ return true แล้วโปรแกรมจะ alert ว่าได้ผู้ชนะแล้วต่อไป

ค่าที่ส่งมาก็มาจาก arr1, arr2, arr31, arr32 นั้นแหละ

SETUP

โปรเจคนี้นำ React มาใช้สร้าง frontend ใช้ CSS Module ตกแต่ง การนำไปใช้งานสามารถทำได้ 2 วิธี

1. รันโปรแกรมผ่าน localhost เป็น development mode
2. รันโปรแกรมผ่าน web server เช่น apache เป็น production mode

วิธีที่ 1 development mode

1. ในเครื่องติดตั้ง node แล้ว
2. ดาวน์โหลดเป็นไฟล์ zip หรือใช้ git clone https://github.com/apisit110/tictactoe.git
3. หลักจากได้ไฟล์มา เข้าไปที่โฟลเดอร์โปรเจคแล้วทำการติดตั้ง dependencies ด้วยคำสั่ง npm install หรือ yarn
4. เมื่อติดตั้ง dependencies เสร็จแล้วรันคำสั่ง npm run start หรือ yarn start เพื่อเริ่มโปรเจค

วิธีที่ 2 production mode

1. ในเครื่องติดตั้ง node แล้ว
2. ดาวน์โหลดเป็นไฟล์ zip หรือใช้ git clone https://github.com/apisit110/tictactoe.git
3. หลักจากได้ไฟล์มา เข้าไปที่โฟลเดอร์โปรเจคแล้วทำการติดตั้ง dependencies ด้วยคำสั่ง npm install หรือ yarn
4. ใช้โปรแกรมจำลอง web server เช่น xampp หรือ Web Server for Chrome(แนะนำอันนี้โหลดง่ายใช้ง่าย)
5. เมื่อติดตั้ง dependencies เสร็จแล้วฤนคำสั่ง npm run build หรือ yarn build เพื่อสร้าง static file
6. นำไฟล์ในโฟลเดอร์ build ที่ได้ ไป deploy บน web server

official document https://create-react-app.dev/docs/deployment/

อ้างอิง

โอเอกซ์