من خلال إنشاء مشاريع الألعاب الممتعة هذه ، يمكنك جعل البرمجة أقل إرهاقًا وأيضًا صقل مهاراتك في نفس الوقت.
حقيقة أن 98.4 ٪ من جميع مواقع الويب تستخدم JavaScript هو السبب في أنك يجب أن تعرفها كمطور. بالنظر إلى الماضي ، فإن إنشاء لعبة باستخدام JavaScript لا يساعدك فقط على التعلم بسرعة. يتيح لك أيضًا إتقان كيفية تطبيق المفاهيم البسيطة على المعقدة في مواقف مختلفة أثناء العمل - سواء كنت مبتدئًا أو متجددًا.
إذا تعلمت بشكل أفضل من خلال العروض التوضيحية المرئية ، فإن دروس الألعاب المبنية على JavaScript على YouTube تستحق وقتك.
1. لعبة الورق مع جافا سكريبت
تُظهر لك لعبة بطاقة JavaScript هذه مع Gavin Lon الطريق حول تقليب البطاقات مع أكثر من 600 سطر من كود JavaScript. بينما ينصب التركيز الرئيسي على تعليم JavaScript ، ستتعلم أيضًا الجمع بين قوة تصميم CSS مع بنية HTML الخاصة بـ DOM لتحقيق الاستجابة مع JavaScript.
الهدف النهائي للمشروع هو قلب ورقتين ، ويخمن اللاعب الآس عندما تتبدل البطاقات في النهاية. كل بطاقة عبارة عن صورة لأربعة أدوار مختلفة للبطاقة. لذا ، بينما لن تصمم البطاقات بنفسك ، ستتعلم كيفية التعامل مع مواقعها بشكل متجاوب ، وزيادة جولات اللعبة ، وإضافة أو إزالة الدرجات مع تغير المستويات ، وتخزين نتائج اللعبة في
التخزين المحلي للمتصفح—جميعها باستخدام JavaScript.البرنامج التعليمي متدرج ويسهل اتباعه على الرغم من الرفع الثقيل الذي ستفعله خلف الكواليس. إنه مثالي للمبتدئين والمرطبات. على الرغم من أن هذا يتعلق ببناء لعبة ورق ، إلا أنه يعرضك لمعظم تقنيات الأسلاك في JavaScript في مواقف الحياة الواقعية. بالإضافة إلى ذلك ، فإنه يكشف عن قدرتك على التفكير.
2. 2D اندلاع لعبة مع جافا سكريبت
إذا كنت ترغب في تعلم التحكم في فترات العمل ونقل عناصر DOM ديناميكيًا باستخدام JavaScript ، فإن Ania Kubów توضح مدى متعة هذا البرنامج التعليمي للعبة الاختراق باستخدام JavaScript. بالإضافة إلى ذلك ، يوضح الفيديو أيضًا كيفية استضافة مشروعك وعرضه على أصحاب العمل المحتملين.
فكر في كل الاحتمالات في لعبة الاختراق ؛ منصة متحركة مع كرة تضرب الجدران بشكل عرضي لكسر الطوب فوقها. وستقوم بترميز نظام المكافآت في هذا أيضًا. بشكل عام ، فإن هذا البرنامج التعليمي للعبة الاختراق يستحق التفكير فيما إذا كنت تريد إنشاء شيء ما من الألف إلى الياء دون استخدام وكلاء تابعين لجهات خارجية أو صور من مصادر.
أثناء توصيل منطقك داخل الوظائف ، يعلم الفيديو المزيد عن فئة JavaScript ومفاهيم الكائن في خطوات سهلة ، بما في ذلك أفضل ممارسات البيان الشرطي مثل حالة التبديل.
3. لعبة جافا سكريبت الأفعى
اكتشف حنين لعبة Snake II من Nokia 3310 من خلال بناء لعبة ثعبان JavaScript هذه مع Kyle. من المحتمل أنك لعبت هذا من قبل ومن المحتمل أن تقوم بتشغيله عدة مرات في العمر لأنك ستقوم بتشفير واحدة باستخدام Vanilla JavaScript.
أثناء تعليمك ربط DOM معًا بشكل ديناميكي ، يوضح هذا الفيديو كيف يمكنك إنشاء واستخدام وحدات مخصصة في JavaScript. لذلك فهو يفتح لك فرصة للتعرف على كيفية فصل المخاوف باستخدام مبدأ عدم تكرار نفسك (DRY).
خلف الكواليس ، ستتقن مفاهيم JavaScript أكثر تقدمًا. المهام ، بما في ذلك إنشاء شبكة لاعب ، ووضع الطعام ، وبناء جسم الثعبان ، وإطالة الثعبان ، وترميز منطق التنقل ، وإنشاء مخطط المكافآت والعقوبات ، والتحكم في سرعة الثعبان ، سوف يعرضك للجوهر جافا سكريبت.
4. لعبة تيك تاك تو مع جافا سكريبت
ربما يتم شحذ طريقة لعب Tic Tac Toe عندما تبني واحدة باستخدام JavaScript في فيديو آخر باستخدام Kyle. هذا بسيط ولكنه ذو قيمة مشروع للمبتدئين جافا سكريبت لتتناولها بينما ستحل المشكلات المعقدة.
لا ينتهي الفيديو بـ JavaScript فقط. يوضح أيضًا كيفية التحكم في تصميم واجهة المستخدم باستخدام CSS. من خلال الاتساق والالتزام ، يمكنك معرفة كل التقنيات المطلوبة تقريبًا لبدء رحلة تطوير الويب في هذا الفيديو.
أثناء معالجة DOM باستخدام JavaScript ، يلف الفيديو العبء الثقيل حول فوز الترميز وقرارات الرسم ، وتقرير منعطفات اللاعبين ، ومحاذاة الكائن. وظائف JavaScript وحلقاتها وشروطها هي بعض المفاهيم المتقدمة التي ستتعلمها في هذا الفيديو التعليمي JavaScript Tic tac Toe.
5. الشريحة لعبة اللغز مع جافا سكريبت
يمكن أن تكون الألغاز مهمة للتفكير. لكن بناء واحد باستخدام Vanilla JavaScript يبدو وكأنه طريقة ممتعة لاستكشاف إبداعك وتعلم أساسيات مفاهيم JavaScript المعقدة.
إنك تريد الترميز في هذا البرنامج التعليمي - إذا كنت ترغب في معرفة كيفية استخدام مفاهيم JavaScript ، بما في ذلك المفاتيح الشرطية ومعالجة موضع DOM الديناميكي باستخدام وظائف مخصصة ومضمنة.
على الرغم من أن المدرس يضع JavaScript داخل علامة البرنامج النصي في ملف HTML ، يمكنك تدوير البرنامج النصي الخاص بك في ملف JavaScript مخصص وربطه بـ DOM في حالتك من أجل الوضوح. بغض النظر ، من الأفضل التركيز على المنطق الأساسي وعملية التفكير لتحقيق هدفك ، بما في ذلك كيفية تطبيق ما تتعلمه هنا على سيناريوهات أكثر واقعية.
6. لعبة سباق السيارات مع جافا سكريبت
قد لا يعطي إنشاء لعبة سباق سيارات باستخدام Vanilla JavaScript أفضل إخراج رسومي. لكن توصيل لعبة سباق سيارات تعمل أثناء اتباع هذا البرنامج التعليمي سيعلمك الاستفادة من قوة وظائف JavaScript في أي تطبيق.
يتضمن هذا البرنامج التعليمي وضع سيارتين (حمراء وزرقاء) على مضمار السباق. تظهر السيارة الزرقاء بشكل عشوائي من أي اتجاه ، وتحاول السيارة الحمراء التي تمثل اللاعب تجنب الاصطدام. تنتهي اللعبة بمجرد وجود اتصال بين السيارتين.
على الرغم من أن هذا وصف بسيط لما ستنشئه في هذا ، فسوف تتعلم بعض المنطق المتقدم لجافا سكريبت للتعامل مع DOM والتصميم. ستحصل أيضًا على نظرة ثاقبة لمشغلي JavaScript أثناء إنشاء مكافآت اللاعب والعقوبات.
أثناء إضافة وظائف إلى المسار ، تتضمن بعض المفاهيم التي ستتعلمها أحداث JavaScript ، والشروط ، والوظائف المجهولة ، والرسوم المتحركة لـ JavaScript ، والتحكم في الفاصل الزمني ، وغير ذلك الكثير.
7. لعبة ماريو مع جافا سكريبت
هذا البرنامج التعليمي للعبة JavaScript Mario هو كل ما تحتاجه لتغمس رأسك في التفاصيل الدقيقة لجافا سكريبت. أثناء إنشاء لعبة Mario باستخدام JavaScript تبدو معقدة ، يوضح Chris ، مدرسك ، أنها أكثر من ممكن في مقطع فيديو YouTube هذا. لذلك قد ترغب في الاستمتاع واستكشاف قدرتك على التفكير النقدي من خلال البناء على طول.
على الرغم من أن المبتدئين قد يجدون البرنامج التعليمي متقدمًا بعض الشيء ، إلا أنه مهمة رائعة لمن ينعشون نقل مهاراتهم في JavaScript إلى المستوى التالي.
إلى جانب التعرف على التلاعب بالعناصر ، ستستخدم قوة JavaScript الخالصة في بناء نموذج معياري سريع الاستجابة لواجهة اللعبة باستخدام البرمجة الشيئية (OOP). نظرًا لأن المشغل متحرك بنشاط ، فإن تطبيق التحكم في لوحة مفاتيح JavaScript ، ومعالجة الأحداث ، والحلقات ، المشغلون ، والظروف ، والوظائف المدمجة والمخصصة ، هي من بين تجارب المشاريع المشتركة التي ستتمتع بها يكسب.
8. بناء كاسحة ألغام مع جافا سكريبت
تريد استكشاف قوة الوظائف العودية و طرق المصفوفة في ضرب عناصر DOM بجافا سكريبت؟ قد ترغب في البدء باستخدام برنامج JavaScript Minesweeper التعليمي بواسطة Ania Kubów على Traversy Media.
إنها تنطوي على الكثير من الاهتمام بالتفاصيل. لكنه برنامج تعليمي سهل الاستخدام للمبتدئين وواحد من أفضل البرامج التي تلتف بين يديك حول نظام تخطيط الشبكة باستخدام JavaScript. الهدف النهائي هو إنشاء قالب شبكي حيث يتجنب اللاعبون الدوس على لغم.
بقدر ما يبدو الأمر بسيطًا ، ستكتب الكثير من منطق البرمجة الذي يتضمن معظم تقنيات JavaScript الأساسية لتوصيل وظائف اللعبة خلف الكواليس.
9. بوكيمون جافا سكريبت لعبة البرنامج التعليمي مع قماش HTML
يعد Pokemon أحد أكثر مشاريع الألعاب تعقيدًا التي يمكنك إنشاؤها باستخدام JavaScript. ومع ذلك ، إذا كنت تعمل لساعات طويلة من البرمجة الصارمة باستخدام JavaScript وكنت مستعدًا للخروج مجددًا بثقة أكبر ، فمن الأفضل أن تدخل هذا البرنامج التعليمي.
بالإضافة إلى البرمجة النصية والرسوم المتحركة لـ DOM باستخدام JavaScript ، يعلمك الفيديو كيفية نقل الأصول وعرضها ، بما في ذلك الصوت والصور ، باستخدام JavaScript. هناك الكثير الذي يكشف عنه البرنامج التعليمي حول JavaScript والذي ستجده ذا قيمة في أي مشاكل ترميز واقعية.
بالإضافة إلى تقنيات معالجة JavaScript الأساسية الأخرى ، يستخدم البرنامج التعليمي أيضًا مفاهيم OOPs بشكل كبير ؛ يعد هذا أمرًا ذا قيمة إذا كنت تخطط للخوض لاحقًا في TypeScript. أحد العوامل المبسطة في هذا البرنامج التعليمي هو كيف يحدد المعلم المهام.
من السهل التراجع عندما تتخيل النظام المعقد الذي ستنشئه لإنجاح هذا الأمر. لكن فكر فيما ستكسبه في النهاية.
تعلم تطبيقات حل المشكلات في JavaScript
تستخدم الألعاب بعضًا من أكثر المنطق استجابةً وبديهية في البرمجة. لذلك من المفيد تعلم JavaScript من صنع واحدة. على الرغم من أن هذه البرامج التعليمية تعتمد على الألعاب ، إلا أنها تعرضك لمفاهيم JavaScript الأساسية المطبقة على العديد من مشكلات الترميز الأخرى ، بما في ذلك تطوير الويب وإنشاء تطبيقات الأجهزة المحمولة. حتى إذا كنت تخطط للانتقال لاحقًا إلى أطر العمل ، فسوف تقوم بتطبيق هذه المفاهيم بغض النظر.
