หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Codewords: เกมกระดานแบบเรียลไทม์ที่มีผู้เล่นหลายคนบนเว็บ

ฉันเป็นแฟนเกมกระดานและนักสะสมตัวยง นอกจากนี้ ฉันยังเป็นนักออกแบบ UX และนักออกแบบเกมอีกด้วย ฉันคิดมาระยะหนึ่งแล้วว่าจะผสมผสานสิ่งเหล่านี้เข้ากับการสร้างเกมกระดานดิจิทัลได้

ความคิดของฉันคือฉันสามารถสร้างหน้าจอขนาดใหญ่ (เป็นจอคอมพิวเตอร์หรือ - ดียิ่งขึ้น - ทีวีในห้องนั่งเล่น) ทำงานเป็นกระดานทั่วไปที่ผู้เล่นทุกคนแชร์ และใช้โทรศัพท์มือถือของผู้เล่นเป็นชิ้นส่วนและวิธีการ ปฏิสัมพันธ์.

อย่างที่ฉันบอกไป ฉันชอบเกมกระดานและฉันชอบปฏิสัมพันธ์ทางสังคมที่พวกเขาอนุญาต ฉันชอบองค์ประกอบทางกายภาพที่พวกเขามีด้วย แต่ฉันเข้าใจว่าพวกเขาใช้พื้นที่ขนาดใหญ่ในบ้านทุกหลัง และหลายครั้งก็หาซื้อยากและลำบากในการขนย้ายไปยังสถานที่ต่างๆ

ดังนั้นฉันจึงคิดว่าเกมกระดานดิจิทัลเหล่านี้อาจเป็นทางเลือกที่สนุกแทนเกมที่ใครๆ ยังหาซื้อไม่ได้ หรือเป็นเกมที่คุณสามารถเล่นได้ทุกที่ที่มีอินเทอร์เน็ต

การสร้าง Ludoratory

ความหลงใหลอีกอย่างที่ฉันมีคือการเขียนโค้ด ตั้งแต่ฉันยังเป็นเด็ก ฉันมักจะยุ่งกับ BASIC และตอนนี้ในฐานะนักออกแบบ ฉันมักจะพยายามทำความเข้าใจเกี่ยวกับการเขียนโค้ดสำหรับเว็บให้มากขึ้น

ในช่วงหลายเดือนที่ผ่านมา ฉันได้ศึกษาเฟรมเวิร์กจาวาสคริปต์บางอย่าง เช่น Vue และ React และฉันตัดสินใจว่าจะพยายามทำให้เกมเหล่านี้มีชีวิตขึ้นมาได้

สำหรับสิ่งนี้ ฉันกำลังเริ่มซีรีส์เกมภายใต้แบรนด์ “Ludoratory” โดยจะเป็นการทดลองเกี่ยวกับการพัฒนาเว็บและการออกแบบเกม ทุกเกมมีไว้เพื่อให้เล่นฟรี ไม่มีโฆษณาหรือการติดตาม และต้องใช้โค้ดโอเพ่นซอร์ส ฉันหวังว่าฉันจะสามารถเรียนรู้กับพวกเขาไปพร้อมๆ กับการทำอะไรสนุกๆ ให้กับคนอื่นๆ ไปด้วย

รหัสคำ

ชื่อรหัสโดย Vlaada Chvátil คือเป้าหมายแรกของฉันสำหรับ Ludoratory ของฉัน

หากคุณยังไม่ได้เล่น ฉันขอแนะนำให้คุณลองหาสำเนาโดยเร็วที่สุด เพราะมันเป็นเกมที่น่าทึ่ง

สิ่งที่ฉันคิดคือ Codewords เป็นเกมกระดานเวอร์ชันผู้เล่นหลายคนแบบเรียลไทม์ ซึ่งมีหน้าจอขนาดใหญ่เก็บคำศัพท์ทั้งหมด และโทรศัพท์มือถือถูกใช้เป็นแผนที่ของผู้ดูแลโค้ด มีการเปลี่ยนแปลงเล็กน้อยจากเกมต้นฉบับ (ฉันสร้างเกมโดยใช้กฎของบ้านที่เราเล่น) ดังนั้นฉันจึงเขียนบทความสั้น ๆ เพื่ออธิบายกฎที่นี่

เครดิต

ฉันออกแบบและเขียนโค้ดสำหรับเกมโดยใช้ความช่วยเหลือจากเฟรมเวิร์ก ไลบรารี และแหล่งข้อมูล:

  • Vue.js สำหรับส่วนหน้าโดยใช้ Vue-CLI พร้อมรองรับ PWA
  • Firebase สำหรับจัดการการอัปเดตแบบเรียลไทม์
  • Vue QRCode โดย xkeshi สำหรับการสร้าง QRCodes สำหรับเกมใหม่แต่ละเกม
  • Vue Translate โดย javisperez เพื่อให้เกมสามารถเล่นได้ทั้งภาษาอังกฤษหรือโปรตุเกส
  • ภาพถ่ายใบหน้าชายที่มีเงาคลุมเครือ โดย Malik Earnest สำหรับภาพพื้นหลัง
  • เอฟเฟกต์ CSS Glitch โดย Mary Lou บน Codrops สำหรับภาพพื้นหลังด้วย

แปลเป็นภาษาฝรั่งเศสโดย Yves Pelletier

การตั้งค่าโครงการ 

 npm install

คอมไพล์และโหลดซ้ำเพื่อการพัฒนา 

 npm run serve

คอมไพล์และลดขนาดสำหรับการผลิต 

 npm run build

Lints และแก้ไขไฟล์ 

 npm run lint

แค่นั้นแหละ!

คุณสามารถเล่นเกมได้แล้วที่ https://codewords.ludoratory.com อย่างที่ฉันบอกไปแล้วว่าโค้ดอยู่บน github ฉันอยากฟังคำวิจารณ์ ข้อสงสัย ความคิดเห็น และข้อเสนอแนะที่คุณอาจมีเกี่ยวกับเกม รหัสของฉัน หรือโครงการ Ludoratory

ขอบคุณและฉันหวังว่าคุณจะสนุกกับเกม

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด