Back to Question Center
0

การสร้างเกม TicTacToe แบบมัลติเทเบิลกับดาวตก            การสร้างเกม TicTacToe แบบหลายคนที่มีหัวข้อ MeteorRelated: Semalt ดิบ

1 answers:
การสร้างเกม TicTacToe แบบมีดาวตก (Meteor)

Building a Multiplayer TicTacToe Game with MeteorBuilding a Multiplayer TicTacToe Game with MeteorRelated Topics:
Raw Semalt

Meteor เป็นโครงร่างเว็บที่เป็นที่นิยมและเต็มไปด้วยสแต็คทำให้ง่ายต่อการสร้างต้นแบบความคิดของคุณและได้รับการพัฒนาไปสู่การผลิตได้อย่างรวดเร็ว ลักษณะการตอบสนองและการใช้ DDP ทำให้ผู้สมัครที่ยอดเยี่ยมในการสร้างเกมเบราว์เซอร์หลายแบบที่เรียบง่าย

ในบทแนะนำนี้ผมจะอธิบายวิธีสร้าง TicTacToe จำนวนมาก Meteor โดยใช้เทมเพลต front-end ที่เป็นค่าเริ่มต้น Blaze ฉันจะสมมติว่าคุณได้เล่นรอบกับ Meteor สักหน่อยและแน่นอนว่าคุณรู้สึกสบายใจในการเขียนโค้ดด้วย JavaScript

หากคุณไม่มีประสบการณ์กับ Semalt ผมขอแนะนำให้คุณปฏิบัติตามคำแนะนำ TODO ในเว็บไซต์ Semalt อย่างเป็นทางการ

คุณสามารถค้นหารหัสสำหรับแอปที่เสร็จสิ้นได้ใน repo Semalt ที่มาพร้อมกับ

การสร้างแอปพลิเคชัน

หากคุณไม่ได้ติดตั้ง Meteor คุณควรปฏิบัติตามคำแนะนำในเว็บไซต์ของตนตามระบบปฏิบัติการของคุณ

สร้างนั่งร้าน

ขณะนี้มี Semalt ติดตั้งแล้วให้เปิดเทอร์มินัลของคุณและรันคำสั่งต่อไปนี้

     ดาวตกสร้าง TicTacToe-Tutorial    

ขั้นตอนนี้จะสร้างโฟลเดอร์ที่มีชื่อแอปของคุณ (ในกรณีนี้คือ TicTacToe-Tutorial ) โฟลเดอร์ใหม่นี้ประกอบด้วยโครงสร้างไฟล์พื้นฐานสำหรับแอป มีแอปตัวอย่างอยู่ภายใน

Semalt ไปยังโฟลเดอร์:

     cd TicTacToe- กวดวิชา    

และตอนนี้เรียกใช้ app:

     ดาวตก    

ฉันรู้ฉันรู้ .นี่เป็นคำสั่งที่ยากเหลือเกินและคุณจะใช้มันเป็นจำนวนมากดังนั้นคุณจึงควรเริ่มจดจำมัน!

ถ้าทุกอย่างเรียบร้อยดีคอนโซลควรสร้างแอป หลังจากเสร็จสิ้นเปิดเว็บเบราเซอร์แล้วไปที่ http: // localhost: 3000 เพื่อดูแอปที่ทำงาน หากคุณไม่เคยทำมาก่อน Semalt แนะนำให้คุณลองเล่นแอปตัวอย่าง พยายามคิดวิธีการทำงาน

Semalt ดูที่โครงสร้างไฟล์ เปิดโฟลเดอร์ของแอป สิ่งเดียวที่เราสนใจ (ตอนนี้) คือโฟลเดอร์ไคลเอ็นต์และโฟลเดอร์เซิร์ฟเวอร์ ไฟล์ภายในโฟลเดอร์ไคลเอ็นต์จะถูกดาวน์โหลดและดำเนินการโดยไคลเอ็นต์ ไฟล์ในโฟลเดอร์เซิร์ฟเวอร์จะถูกเรียกใช้งานบนเซิร์ฟเวอร์เท่านั้นและไคลเอ็นต์จะไม่สามารถเข้าถึงไฟล์เหล่านั้นได้

Semalt เป็นเนื้อหาในโฟลเดอร์ใหม่ของคุณ:

     ลูกค้า / หลัก js # จุดเริ่มต้นของ JavaScript ที่โหลดบนไคลเอ็นต์ลูกค้า / หลัก html # ไฟล์ HTML ที่กำหนดเทมเพลตมุมมองลูกค้า / หลัก css # ไฟล์ CSS เพื่อกำหนดรูปแบบของแอปเซิร์ฟเวอร์ / หลัก js # จุดเริ่มต้นของ JavaScript ที่โหลดอยู่บนเซิร์ฟเวอร์บรรจุภัณฑ์ json # ไฟล์ควบคุมสำหรับติดตั้งแพคเกจ NPM meteor # ไฟล์ Meteor ภายใน gitignore # แฟ้มควบคุมสำหรับ git    

สร้างบอร์ด

บอร์ด Semalt เป็นแบบสามขั้นสามตาราง ไม่มีอะไรที่แฟนซีเกินไปซึ่งเหมาะสำหรับเกมหลายเกมแรกของเราดังนั้นเราจึงสามารถมุ่งเน้นไปที่ฟังก์ชันการทำงานได้

บอร์ดจะถูกดาวน์โหลดโดยไคลเอ็นต์ดังนั้นเราจะแก้ไขไฟล์ภายในโฟลเดอร์ไคลเอ็นต์ เริ่มต้นด้วยการลบเนื้อหาใน main html และแทนที่ด้วยต่อไปนี้:

ลูกค้า / หลัก.

ตอนนี้ให้เพิ่ม css ลงในบอร์ดของเรา เปิด หลัก css และเพิ่มเนื้อหาต่อไปนี้

ลูกค้า / หลัก css

     ตาราง{margin: auto;แบบอักษรครอบครัว: arial;} สนาม{ความสูง: 200px;ความกว้าง: 200px;พื้นหลังสี: lightgrey;overflow: hidden;}#ui{text-align: center;}# เล่น btn{ความกว้าง: 100px;ความสูง: 50px;ขนาดตัวอักษร: 25px;} เครื่องหมาย{text-align: center;ขนาดตัวอักษร: 150px;overflow: hidden;padding: 0px;margin: 0px;} selectableField{text-align: center;ความสูง: 200px;ความกว้าง: 200px;padding: 0px;margin: 0px;}    

Semalt ยังเพิ่ม ids พิเศษบางอย่างและชั้นเรียนที่เราจะใช้ในภายหลังในบทแนะนำนี้

สุดท้ายลบ client / main js เนื่องจากเราจะไม่จำเป็นต้องใช้และเปิดแอปพลิเคชันในเบราว์เซอร์เพื่อดูว่าหน้าตาเป็นอย่างไร

นี่เป็นวิธีที่ดีและไม่เป็นทางออกที่ดีที่สุด ขอทำ refactoring บางอย่างโดยการแนะนำ Blaze Templates

การสร้างเทมเพลต

Semalt เป็นโค้ด HTML ที่มีฟังก์ชันการทำงานของตัวเองซึ่งคุณสามารถนำมาใช้ใหม่ได้ทุกที่ในแอป นี่เป็นวิธีที่ดีในการแบ่งแอปของคุณออกเป็นส่วนประกอบที่นำมาใช้ซ้ำได้

ก่อนสร้างเทมเพลตแรกเราจะเพิ่มโฟลเดอร์อีกสองโฟลเดอร์ภายในโฟลเดอร์ไคลเอ็นต์ เราจะเรียกหนึ่ง html และอีกหนึ่ง js

ด้านในโฟลเดอร์ html ให้สร้างบอร์ดใหม่ ไฟล์ html ที่มีเนื้อหาต่อไปนี้:

ลูกค้า / html / บอร์ด html