สปีดคิวบิงรูบิก 3x3x3 แบบ 3D ที่เล่นได้บนเว็บ
(rubiks-cube-sandy.vercel.app)นี่คือรูบิก 3D บนเว็บที่สร้างด้วย Three.js และ React
ผมพยายามทำให้ควบคุมได้รวดเร็วและเป็นธรรมชาติด้วยคีย์ลัดบนคีย์บอร์ด
และได้ทำตัวจับเวลาสำหรับสปีดคิวบิงไว้ด้วย
ฟีเจอร์หลัก
• แอนิเมชันการหมุน 3D ที่เป็นธรรมชาติเหมือนลูกบาศก์จริง
• ควบคุมได้รวดเร็วด้วยการแมปคีย์บอร์ด QWEASD
• รองรับมุมกล้อง 16 แบบ (มุมบน ล่าง มุมขอบ ฯลฯ)
• ตัวจับเวลาสำหรับสปีดคิวบิงและการจัดการสถิติ
• ระบบจัดอันดับออนไลน์
• ฟังก์ชันเลิกทำ/ทำซ้ำ
ที่มาของการพัฒนา
ระหว่างที่เริ่มสนใจ Three.js และกำลังมองหาโปรเจกต์เว็บ 3D
ผมคิดว่าคงจะสนุกถ้าสามารถเล่นสปีดคิวบิงที่ชอบอยู่แล้วบนเว็บ และแข่งขันสถิติกับคนอื่นทางออนไลน์ได้ จึงพัฒนาขึ้นมา
หลังจากเรียนรู้ Three.js แล้ว ก็ใช้ Claude Code ในการพัฒนา
ผมพยายามมอบประสบการณ์ให้ใกล้เคียงกับลูกบาศก์จริงมากที่สุด แต่แน่นอนว่าต้องใช้เวลาปรับตัวสักหน่อย..! ยังมีจุดที่ต้องปรับปรุงอีกมาก ถ้าได้ลองใช้แล้วส่งฟีดแบ็กมาให้จะขอบคุณมากครับ!
p.s. สถิติดีที่สุดของผู้พัฒนาคือ 1:14:361 :)
14 ความคิดเห็น
ขอบคุณสำหรับคำพูดดี ๆ ครับ!
เห็นสถิติสะสมเพิ่มขึ้นทีละรายการแล้วก็รู้สึกดีมากเลย ฮ่าๆ
แม้แต่ผมที่คุ้นมือจากการทำมันขึ้นมาเอง สถิติดีที่สุดก็ยังอยู่ที่ 1 นาที 14 วินาที
แต่ก็มีคนที่ทำได้ถึง 1 นาทีภายในวันเดียว ทำเอาผมตกใจเลย..!
เจ๋งมาก 555
โอ้.. ชวนให้นึกถึงความหลังเลย..
น่าจะดีถ้าสามารถควบคุมกล้องด้วยปุ่มตัวอักษรภาษาอังกฤษแทนปุ่มลูกศรได้ด้วย ผมใช้คีย์บอร์ดที่ต้องกดปุ่มลูกศรร่วมกับปุ่มอื่นเสมอจึงจะพิมพ์ได้
แน่นอนว่าอาจมีกรณีแบบนั้นได้เหมือนกันนะครับ
ขอบคุณสำหรับความคิดเห็นดี ๆ ครับ!
ผมได้อัปเดตให้สะท้อนตามนั้นแล้วครับ :)
ดูเหมือนว่าจะอนุญาตให้รับอินพุตจากคีย์ได้ก็ต่อเมื่อแอนิเมชันการหมุนจบแล้วเท่านั้น
ถ้าเก็บอินพุตคีย์ไว้ในคิว (
limit=1) แล้วหลังจากแอนิเมชันเสร็จค่อยให้การทำงานถัดไปรันตามปุ่มล่าสุดที่กด ก็น่าจะควบคุมได้ลื่นไหลขึ้นครับได้อัปเดตโดยนำไปสะท้อนไว้แล้วครับ!
ขอบคุณสำหรับความเห็นดี ๆ 👍
ขอบคุณสำหรับคำพูดดี ๆ ครับ
ได้อัปเดตการตั้งค่าพรีเซ็ตสีโดยนำฟีดแบ็กไปปรับใช้แล้ว
ขอฝากความสนใจไว้ด้วยนะครับ :)
ทำได้ดีมากเลย!
ว้าว เจ๋งมากเลย
ว้าว เจ๋งมากครับ แต่ผมเล่นคิวบ์เองไม่เป็น.. 555
ขอบคุณครับ :)
ถ้าเพิ่มปุ่มหมุนทวนเข็มนาฬิกาเป็นปุ่มควบคุมทางขวาได้ก็น่าจะใช้งานได้สะดวกขึ้นครับ/ค่ะ ดูเหมือนว่ามือซ้ายจะทำงานหนักอยู่ข้างเดียวมากเลย 555 แล้วก็โทนสีส้มจัดเกินไปหน่อย บนจอของผม/ฉันแยกจากสีแดงได้ไม่ค่อยชัดครับ/ค่ะ :(
ผมตั้งให้มือขวาทำหน้าที่เปลี่ยนมุมมอง เลยพยายามลดการควบคุมตัวคิวบ์ให้น้อยที่สุด แต่ดูแล้วมือซ้ายยุ่งกว่าจริง ๆ นะครับ จะลองพิจารณาคอนโทรลฝั่งขวาด้วยครับ!
ส่วนเรื่องโทนสีก็คงต้องลองเพิ่มตัวเลือกบางอย่างให้ได้ด้วยเหมือนกันครับ
ขอบคุณสำหรับฟีดแบ็กครับ :)