DeveloperFeaturedJavaScriptLeap MotionProgramming Language

LEAP MOTION กับ JS สร้างเกม เป่า ยิ๊ง ฉุบ Rock Paper Scissors

ตัวอย่างการสร้างเกม Rock Paper Scissors หรือ เป่ายิ๊งฉุบ ด้วย LEAP Motion กับ Javascript กับงานที่ไป Contribute Repo ร่วมกับนักพัฒนาคนอื่น

ในเมื่อเริ่ม Join งานนวัตกรรมแล้ว โจทย์หนึ่งคือ Leap Motion กับการเปลี่ยนการเรียนการสอนด้านการพัฒนา สื่อเชิงโต้ตอบ ก็เลยต้องไป Join Developer Group มากมาย และก่อนหน้านี้พักใหญ่ๆ ก็ได้ไป Contribute ตัว Repo ช่วย nandico (https://github.com/nandico) ในเรื่องของการแก้ Javascript ช่วยมาประมาณหนึ่งจนเค้าเงียบหายไปก็เลยขอ อนุญาตินำตัว Repo ที่เราไปช่วยมาเขียน tutorial ซะเลย ซึ่งเจ้าตัวก็อนุญาติ (เดี๋ยวนี้ทำงานสายวิชาการต้องมีการให้เครดิตผู้พัฒนาเริ่มต้นนะครับ)

งานนี้ก็เช่นเดิมครับ เอามาปรับแต่งเขียนใหม่เล็กน้อย บางไฟล์ก็เป็นของ nandico ไปเลยคือ LeapHelper.js ไม่ต้องไปแก้อะไร เสียเวลา

สร้าง File HTML ขึ้นมาก่อนครับใน XAMPP หรือ Apache ก็ได้

โดยการเตรียมพร้อมคือการ เตรียมสร้าง CONSTANT ที่เกี่ยวข้องกับ State ของมือ และการรับค่า Detect ตัว Leap Motion ของเราครับ

ตามด้วย Style Sheet ของเราเล็กน้อย

ตามด้วย Function ของเราที่ต้องสร้างขึ้นมาครับ ให้สร้างไฟล์ชื่อ function.js ครับ

โดยการทำงานนั้นจะมีการทำงานดังนี้

setModeReady คือการ Detect มือเราว่าพร้อมสำหรับเล่นเกมหรือเปล่าโดยการ แบ มือไว้ก่อนแล้วทำการ กำมือให้เรียบร้อย ก็จะเข้าสู่โหมดการนับถอยหลังคือ countToPlay เพื่อเล่นเกม เป่า ยิ๊ง ฉุบ ต่อกับระบบ AI ที่สุ่มค่าออกมา

ส่วนของการเล่นเกมคือ ส่วน ตรงนี้ครับ เป็นการเก็บค่า มือ ของเราจาก บทเรียนก่อนหน้านี้: Leap Motion กับการ Detect Hand หรือมือของเรา

เมื่อได้ค่ามาจะทำการแปลงเป็นเงื่อนไขตัวเลขตามทฤษฏี Computation Theory ปรกติๆ

โดยเราจะใช้ตัวแปรรับค่า paper, scissors และ rock มาเทียบกับรูปภาพเหล่านี้ครับ โดยตัวสีฟ้าคือ มือของเรา และ สีแดงคือ ศัตรู (ใช้ e_ นำหน้าไฟล์ครอบอีกที)

e_paper.png
e_paper.png
e_rock.png
e_rock.png
e_scissors.png
e_scissors.png
paper.png
paper.png
rock.png
rock.png
scissors.png
scissors.png

ไปแก้ไข index.html ด้วยการเพิ่ม

และ ส่วนนี้ก่อน <body>

ทำการ Run ตัว HTML ของเรา พร้อมต่อ Leap Motion เข้ากับเครื่องคอมพิวเตอร์ของเรา

ต่อ Leap Motion กับเครื่องซะ
ต่อ Leap Motion กับเครื่องซะ
เริ่มเกมโดย แบมือเหนือ Leap motion แล้ว กำมือ
เริ่มเกมโดย แบมือเหนือ Leap motion แล้ว กำมือ
ทดสอบการเล่นเกม
ทดสอบการเล่นเกม
มีค่าความคลาดเคลื่อนของ กรรไกร กับ ค้อน บ่อยเล็กน้อย
มีค่าความคลาดเคลื่อนของ กรรไกร กับ ค้อน บ่อยเล็กน้อย

Source code: สามารถเข้าไปที่ GitHub ของ nandico ตรงก็ได้ หรือ ใช้ตัวที่ขอ อนุญาติ Repo มาแล้วที่ http://www.daydev.com/download/repository-js-leap.zip

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน