Bingo Game จะแบ่งส่วนของการทำงานเป็น 2 ส่วน คือ Server และ Client การทำงานของ Server จะทำหน้าที่รอรับผู้เล่น(Client) เชื่อมต่อเข้ามา โดยตั้งชื่อและส่งตัวเลขที่ตัวเองถืออยู่ในมือ เมื่อ Server ได้รับข้อมูลตัวเลขเสร็จจะเริ่มนับถอยหลัง 15 วินาที เพื่อรอผู้เล่นคนอื่นๆ ถ้าไม่มีใครเชื่อมต่อเข้ามาอีก Server จะทำการเริ่มสุ่มตัวเลขขึ้นมาทุกๆ 5 วินาที และฝั่งผู้เล่นจะแสดงตารางตัวเลขสุ่มที่ไม่ซ้ำกันขึ้นมา เมื่อผู้เล่นคนไหน Bingo ตัวเลขไม่ว่าจะเป็นแนวตั้ง แนวนอน หรือทแยงมุม จะเป็นผู้ชนะและทุกคนที่เล่นผู้จะเห็นชื่อของผู้ชนะปรากฏที่หน้าจอ

การออกแบบ และการทำงาน

    Bingo Game ออกแบบให้ผู้เล่นร่วมเล่นได้มากกว่าหนึ่งคน และระบุได้ว่าจะเล่นสูงสุดได้กี่คน ซึ่งจะมีคนทำหน้าที่เป็น Server ได้แค่ 1 คนเท่านั้น ส่วนผู้เล่นจะกี่คนก็ได้แล้วแต่เราจะกำหนดเอาไว้

Source code : https://github.com/anunpanya/piebingo

Server

    ฟังก์ชั่น microgear.on(‘connected’,function()) เมื่อ microgear เชื่อมต่อ NETPIE สำเร็จ จะทำการ subscribe รอรับ message จาก client(ผู้เล่น) ที่ topic /bingo/client และแสดง QR Code สำหรับให้ผู้เล่นสแกนเข้าร่วมเล่นเกม

    ฟังก์ชั่น microgear.on(‘message’,function()) เมื่อมีผู้เล่นเชื่อมต่อเข้ามา จะส่ง message มาให้ server คือ client|name|array_bingo จะเก็บ name และ array_bingo ลง array client และ bingoClients เอาไว้เช็คข้อมูลและจำนวนของผู้เล่น หลังจากนั้นจะเริ่มนับถอยหลัง 15 วินาทีรอผู้เล่นคนอื่นเข้าร่วมเล่นเกม

    ถ้าหากผู้เล่นส่ง message ที่เป็น check|name|bingo_number แสดงว่าผู้เล่นคนนั้น Bingo แล้ว และ server จะทำการตรวจสอบว่า Bingo จริงหรือไม่ ถ้าเป็นจริงจะทำการส่ง message ไปบอกผู้เล่นทุกคนว่า BINGO|name ผู้เล่นที่ชื่อนี้เป็นผู้ชนะเกม Bingo และเกมก็จะหยุด สั่ง stopFunction();

    เมื่อมีผู้เข้าร่วมเกม bingo จะเริ่มนับถอยหลังโดยเรียกฟังก์ชั่น serverStartFunction(); เก็บค่า setInterval ไว้ในตัวแปร serverStartCountdown จะนับถอยหลังไปเรื่อยๆ ทุก 1 วินาที จนไม่มีผู้เล่นเข้าร่วมและเวลาเหลือ 0 ซึ่งจะเริ่มนับถอยหลังก็ต่อเมื่อเวลามากกว่า 0 และผู้เล่นมากกว่า 0 และส่ง message ไปบอกผู้เล่นทุกคนว่าจะเริ่มทำการเล่นภายในอีกกี่วินาที โดยใช้ microgear.publish(topic,message) เมื่อเวลาน้อยกว่า 0 จะทำการปิดรับผู้เล่นที่จะเข้าร่วมเล่นเกม start = 1 และ startFunction(); เก็บค่า setInterval ไว้ในตัวแปร serverStartBingo เรียกใช้ฟังก์ชั่นทุกๆ 5 วินาที ตามค่า timespeed กำหนดเอาไว้ จากนั้น clearInterval serverStartCountdown ที่ใช้นับถอยหลังเพื่อหยุดนับและส่ง message start บอกผู้เล่นว่าเกมได้เริ่มต้นขึ้นแล้ว

    ฟังก์ชั่น startFunction(); ทำหน้าที่สุ่มตัวเลขบิงโกขึ้นมา จะทำงานก็ต่อเมื่อ start เป็น 1, time เป็น 0 และเลขที่สุ่มยังไม่ครบตามที่ rage กำหนดไว้ ถ้าเป็น 50 คือ 1-50 เมื่อสุ่มตัวเลขได้แล้วจะทำการส่งไปยังอยู่เล่นโดย microgear.publish(topic,pop|number) และแสดงตัวเลขที่สุ่มได้บนหน้าจอ เมื่อมีสุ่มครบแล้วจะทำการหยุดสุ่ม stopFunction();

Client

    ฟังก์ชั่น microgear.on(‘connected’,function()) เมื่อผู้เล่น Scan QR Code จาก Server จะได้ URL สำหรับเข้าร่วมเล่นเกม อันดับแรกจะต้องตั้งชื่อผู้เล่นก่อน เมื่อตั้งชื่อเสร็จและกดปุ่มยืนยันจะตรวจสอบความถูกต้อง หากได้รับข้อมูลชื่อจะเชื่อมต่อ NETPIE และ subscribe ที่ topic /bingo/server จากนั้นจะทำการสุ่มตาราง bingo ของผู้เล่นขึ้นมา แล้วส่ง message ไปยัง server เพื่อขอเข้าร่วมเล่นเกม

    ฟังก์ชั่น microgear.on(‘message’,function()) จะรอรับ message แบ่งเป็น
        time|sec : เวลาจะเริ่มต้นเล่นเกม จะเริ่มภายใน sec ที่ส่งมา มีหน่วยเป็นวินาที
        start : เกมได้เริ่มต้นขึ้นแล้ว ตารางบิงโกจะปรากฏขึ้นมา
        pop|number : number ตัวเลขสำหรับบิงโกที่สุ่มขึ้นมาไม่ซ้ำกัน
        BINGO|playername : playername ชื่อผู้เล่นที่ชนะเกมบิงโก

    ฟังก์ชั่น checkBingo() เมื่อผู้เล่น click เลือกตัวเลขที่บิงโกถูกต้องจะขึ้นสีแดง และตรวจสอบบิงโกครบหรือไม่ ถ้าครบแล้วจะส่ง message ไปบอก server ที่ subscribe /bingo/client อยู่

เพิ่มเติม

playerMax : จำนวนสูงสุดผู้เล่นที่สามารถเข้าร่วมได้ ถ้าไม่ต้องการจำกัดผู้เล่นให้ใส่ค่าเป็น 0
rage : จำนวนสูงสุดของตัวเลขในการสุ่มบิงโก
timespeed : เวลาในการสุ่มบิงโก หน่วยเป็นมิลลิวินาที เช่น 5วินาที ใส่เป็น 5000
time : เวลาสำหรับนับถอยหลังรอผู้เข้าร่วมหน่วยเป็นวินาที เช่น 15วินาที ใส่เป็น 15

ตัวอย่างการใช้งาน

อันดับแรกต้องรันไฟล์ server ก่อน
server : http://rawgit.com/anunpanya/piebingo/master/index.html#APPID:KEY:SECRET
client : http://rawgit.com/anunpanya/piebingo/master/client.html#APPID:KEY:SECRET

ภาพตัวอย่าง

server client