ความคิดเห็น: มันเป็นเกมปิงปองที่มีผู้เล่น 2 คนโดยใช้การแข่งขันแป้นพิมพ์ ในบทนี้เราจะ: 1 เตรียมเครื่องมือพัฒนา 2. สร้างเกมแรกของเรา - ปิงปอง 3. เรียนรู้ที่จะใช้ไลบรารี jquery javascript สำหรับการวางตำแหน่งพื้นฐาน 4. รับอินพุตแป้นพิมพ์
ในบทนี้เราจะ:
เตรียมเครื่องมือพัฒนา
สร้างเกมแรกของเรา - ปิงปอง
เรียนรู้ที่จะใช้ไลบรารี jQuery JavaScript สำหรับการวางตำแหน่งพื้นฐาน
รับอินพุตแป้นพิมพ์
การสร้างเกมปิงปองด้วยการให้คะแนน
ภาพหน้าจอต่อไปนี้ของเกมเป็นผลลัพธ์ของการศึกษาของเราในบทนี้ มันเป็นเกมปิงปองที่มีผู้เล่น 2 คนเล่นบนแป้นพิมพ์
ดังนั้นเรามาเริ่มสร้างเกมของเราตอนนี้
เตรียมพร้อมสำหรับสภาพแวดล้อมการพัฒนา
การพัฒนาเกมและการพัฒนาเว็บไซต์ HTML5 นั้นคล้ายคลึงกัน เราต้องการเว็บเบราว์เซอร์และเครื่องมือแก้ไขข้อความที่ยอดเยี่ยม
เครื่องมือแก้ไขข้อความจำนวนมากนั้นยอดเยี่ยมเพียงแค่ใช้สิ่งที่คุณชอบ หากคุณไม่มีฉันขอแนะนำให้คุณใช้ Notepad ++ เครื่องมือแก้ไขขนาดเล็กและรวดเร็ว เกี่ยวกับเบราว์เซอร์เราต้องใช้เบราว์เซอร์ที่รองรับคุณสมบัติ HTML5, CSS3 และสามารถจัดหาเครื่องมือแก้ไขข้อบกพร่องได้
มีเบราว์เซอร์หลายตัวให้เลือก: Apple Safari (), Google Chrome (), Mozilla Firefox () และ Opera () ซึ่งทั้งหมดรองรับคุณสมบัติที่เราต้องการ
เตรียมเอกสาร HTML
ทุกเว็บไซต์หน้าและเกม HTML5 เริ่มต้นด้วยเอกสาร HTML เริ่มต้น และเอกสาร HTML นี้เริ่มต้นด้วยรหัส HTML พื้นฐาน เราจะเริ่มการพัฒนาเกม HTML5 ด้วย index.html
เวลาดำเนินการ
เราจะสร้างเกม HTML5 Ping Pong ของเราตั้งแต่เริ่มต้น ดูเหมือนว่าเราต้องเตรียมทุกอย่างด้วยตัวเองและอย่างน้อยก็โชคดีที่เราสามารถช่วยเราในห้องสมุด JavaScript JQuery เป็นไลบรารี JavaScript ที่เราจะใช้ในตัวอย่างทั้งหมดของเรา สิ่งนี้จะช่วยลดความซับซ้อนของตรรกะ JavaScript ของเรา:
1. สร้างโฟลเดอร์ใหม่ที่เรียกว่า pingpong
2. สร้างโฟลเดอร์อื่นที่เรียกว่า JS ในโฟลเดอร์
3. ดาวน์โหลด jQuery
4. เลือกการผลิตและคลิกดาวน์โหลด jquery
5. บันทึก jQuery-1.7.1.min.js ในโฟลเดอร์ที่เราสร้างขึ้น 2
6. สร้างไฟล์ใหม่ชื่อ index.html และบันทึกลงในโฟลเดอร์ที่สร้างโดย 1
7. เปิดไฟล์ index.html ด้วยตัวแก้ไขข้อความและแทรกเทมเพลต HTML ที่ว่างเปล่า:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> ปิงปอง </title>
</head>
<body>
<ส่วนหัว>
<H1> ปิงปอง </h1>
</header>
<footer>
นี่คือตัวอย่างของการสร้างเกมปิงปอง
</footer>
</body>
</html>
8. อ้างถึงไฟล์ jQuery ก่อนแท็ก Body End
<script src = js/jQuery-1.7.1.min.js> </script>
9. ในที่สุดเราต้องการให้แน่ใจว่า jQuery ถูกโหลดสำเร็จ เรามักจะวางรหัสต่อไปนี้เพื่อตรวจสอบหลังจากไฟล์ jQuery ก่อนแท็ก Body End:
<script>
$ (function () {
การแจ้งเตือน (ยินดีต้อนรับสู่การต่อสู้ปิงปอง);
-
</script>
10. บันทึก index.html และเปิดด้วยเบราว์เซอร์ของคุณ เราควรเห็นหน้าต่างพรอมต์ต่อไปนี้ ซึ่งหมายความว่า jQuery ของเราถูกตั้งค่าอย่างถูกต้อง:
เกิดอะไรขึ้น?
เราเพิ่งสร้างหน้า HTML5 พื้นฐานด้วย jQuery และทำให้แน่ใจว่า jQuery โหลดถูกต้อง
ใหม่ html5 doctype
ทั้งแท็ก Doctype และ Meta นั้นง่ายขึ้นใน HTML5
ใน HTML4.01 เราประกาศว่า Doctype ต้องการรหัสต่อไปนี้:
<! doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
มันยาวใช่มั้ย อย่างไรก็ตามใน HTML5 การประกาศ DocTyp นั้นง่ายกว่ามาก:
<! doctype html>
เรายังไม่ได้ประกาศรุ่น HTML ซึ่งหมายความว่า HTML5 จะเข้ากันได้กับเวอร์ชัน HTML ก่อนหน้านี้และรุ่น HTML ในอนาคตจะรองรับรุ่น HTML5
แท็กเมตาก็ง่ายขึ้นเช่นกัน ตอนนี้เราใช้รหัสต่อไปนี้เพื่อกำหนดชุดอักขระ HTML:
<meta charset = utf-8>