التعليق: إنها لعبة بينغ بونج مع لاعبين يستخدمون مسابقة لوحة المفاتيح ؛ في هذا الفصل ، سنقوم: 1. إعداد أداة التطوير 2. قم ببناء أول لعبتنا - Ping Pong 3. تعلم استخدام مكتبة JQuery JavaScript لتحديد المواقع الأساسية 4. الحصول على إدخال لوحة المفاتيح
في هذا الفصل سنقوم:
إعداد أدوات التنمية
بناء لعبتنا الأولى - بينغ بونغ
تعلم كيفية استخدام مكتبة JQuery JavaScript لتحديد المواقع الأساسية
الحصول على مدخلات لوحة المفاتيح
إنشاء لعبة Ping Pong بتسجيل
لقطات الشاشة التالية للعبة هي نتائج دراستنا في هذا الفصل. إنها لعبة Ping Pong مع لاعبين يلعبان على لوحة مفاتيح.
لذلك ، لنبدأ في إنشاء لعبتنا الآن.
الاستعداد لبيئة التنمية
HTML5 تطوير اللعبة وتطوير موقع الويب متشابهان. نحتاج إلى متصفح الويب وأداة تحرير نص ممتازة.
العديد من أدوات تحرير النصوص ممتازة ، فقط استخدم ما تريد. إذا لم يكن لديك واحدة ، فإنني أوصيك باستخدام Notepad ++ ، وهي أداة تحرير صغيرة وسريعة. فيما يتعلق بالمتصفحات ، نحتاج إلى متصفح يدعم ميزات HTML5 و CSS3 ويمكن تزويدها بأدوات تصحيح الأخطاء.
هناك العديد من المتصفحات للاختيار من بينها: Apple Safari () و Google Chrome () و Mozilla Firefox () و Opera () ، وكلها تدعم الميزات التي نحتاجها.
إعداد مستندات HTML
تبدأ كل موقع ويب و PAGE و 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>
<header>
<h1> ping pong </h1>
</header>
<Tower>
هذا مثال على إنشاء لعبة Ping Pong.
</tower>
</body>
</html>
8. راجع ملف jQuery قبل علامة نهاية الجسم
<script src = js/jquery -1.7.1.min.js> </script>
9. أخيرًا ، نريد التأكد من تحميل jQuery بنجاح. عادة ما نضع الرمز التالي للتحقق بعد ملف jQuery قبل علامة نهاية الجسم:
<script>
$ (function () {
تنبيه (مرحبًا بك في معركة Ping Pong.) ؛
}) ؛
</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>