الأفعى هي واحدة من الألعاب الأكثر شهرة وشعبية في عالم الترفيه الكمبيوتر. إنها لعبة أركيد بسيطة ولكنها تسبب الإدمان يتحكم فيها اللاعب في حركة الثعبان من خلال جمع الطعام وتجنب الاصطدام بذيله أو حدود الملعب. على الرغم من بساطته ، فإن إنشاء ثعبان كامل في جافا سكريبت يمكن أن يكون تجربة ممتعة وغنية بالمعلومات للمطور.
في هذا الدليل خطوة بخطوة ، وسوف ننظر في كيفية إنشاء ثعبان في جافا سكريبت باستخدام هتمل5 و كس 3. ننفذ منطق اللعبة والتحكم في حركة الثعابين وتوليد الطعام والتعامل مع الاصطدام. ونحن أيضا إضافة التصميم إلى عناصر الملعب واجهة لجعل ثعبان لدينا تبدو جذابة والمهنية.
لإنشاء ثعبان ، سوف نستخدم المبادئ الأساسية لبرمجة جافا سكريبت ، مثل الشروط والحلقات والوظائف. وسوف نستكشف أيضا العمل مع عناصر دوم ، إضافة وإزالة العناصر ، والتعامل مع الحدث ، واستخدام أجهزة ضبط الوقت.
في النهاية ، سنحصل على لعبة ثعبان كاملة يمكن إطلاقها في أي متصفح حديث والاستمتاع باللعبة من أجل متعتك. يمكن أن يكون هذا المشروع أيضا بمثابة نقطة انطلاق ممتازة لإنشاء ألعاب أركيد أخرى أو لتوسيع وظائف الثعبان ، وإضافة ميزات وعناصر لعب جديدة.
- التحضير لإنشاء ثعبان في جافا سكريبت
- تركيب وتكوين البرامج والأدوات اللازمة
- إنشاء الملف الرئيسي للعبة
- تحديد المتغيرات والثوابت الأساسية
- تحقيق حركة الثعبان والتفاعل
- إضافة الطعام والتعامل مع الاصطدامات
- تنفيذ نظام الحسابات والمستويات
- الانتهاء من اللعبة وميزات إضافية
- سؤال وجواب
- كيف يمكنني إنشاء ثعبان في جافا سكريبت?
- ما هي الأدوات اللازمة لإنشاء ثعبان في جافا سكريبت?
- كم من الوقت سوف يستغرق لإنشاء ثعبان كاملة في جافا سكريبت?
- ما هي مهارات البرمجة اللازمة لإنشاء ثعبان في جافا سكريبت?
- هل من الممكن إنشاء ثعبان في جافا سكريبت دون استخدام المكتبة?
التحضير لإنشاء ثعبان في جافا سكريبت
يتطلب إنشاء لعبة ثعبان في جافا سكريبت عدة خطوات أولية. من الضروري التعرف على أساسيات لغة جافا سكريبت ، وتعلم كيفية العمل مع عناصر دوم وفهم مبادئ دورة اللعبة. فيما يلي الخطوات التي ستساعدك على الاستعداد لإنشاء ثعبان في جافا سكريبت.
- فهم لغة جافا سكريبت: قبل البدء في إنشاء ثعبان ، يجب أن يكون لديك فهم أساسي للغة جافا سكريبت. تعلم المفاهيم الأساسية وبناء الجملة للغة ، مثل المتغيرات والوظائف والمشغلين والتعبيرات الشرطية.
- التعرف على دوم: للعمل مع واجهة رسومية من لعبة الثعبان ، وسوف تحتاج إلى معرفة دوم (نموذج كائن وثيقة) ، وهي البنية التي تمثل وثيقة هتمل في شكل كائنات. تعلم الطرق والخصائص الأساسية التي تسمح لك بالتفاعل مع عناصر دوم.
- تعلم دورة اللعبة: تلعب دورة اللعبة دورا مهما في لعبة الثعبان. دورة اللعبة مسؤولة عن تحديث حالة اللعبة وإعادة رسم الشاشة بتردد معين. استكشاف أساليب مختلفة لتنفيذ دورة اللعبة واختيار أنسب واحد لمشروعك.
- الممارسة والتجريب: إنشاء ثعبان كامل في جافا سكريبت هو مهمة غير تافهة تتطلب الممارسة والتجريب. استخدم المعرفة التي تعلمتها لإنشاء نسخة بسيطة من الثعبان ، ثم أضف ميزات جديدة تدريجيا وتحسين طريقة اللعب.
باتباع هذه الخطوات ، ستكون جاهزا لإنشاء ثعبان جافا سكريبت كامل. ثعبان هو مشروع كبير لأولئك الذين يرغبون في وضع معرفتهم جافا سكريبت موضع التنفيذ وتطوير المهارات في إنشاء تطبيقات الويب التفاعلية.
تركيب وتكوين البرامج والأدوات اللازمة
لإنشاء ثعبان كامل في جافا سكريبت ، سنحتاج إلى العديد من البرامج والأدوات. فيما يلي قائمة بالمكونات المطلوبة:
- محرر النصوص: ستحتاج إلى محرر نصوص لكتابة التعليمات البرمجية وتحريرها. يمكنك استخدام أي محرر نصوص من اختيارك ، مثل النص السامي أو رمز الاستوديو المرئي أو الذرة أو المفكرة++.
- متصفح الويب: سوف تحتاج إلى متصفح ويب لعرض واختبار ثعبان الخاص بك. يوصى باستخدام أحدث إصدارات المتصفحات الشائعة مثل جوجل كروم أو موزيلا فايرفوكس أو سفاري.
- بوابة: بوابة هو نظام التحكم في الإصدار الذي يسمح لك لإدارة مريح وتتبع التغييرات في المشروع الخاص بك. إذا لم تكن قد قمت بتثبيت جيت بعد ، تحتاج إلى تحميل وتثبيته من الموقع الرسمي https://git-scm.com/downloads .
- عقدة.شبيبة: عقدة.شبيبة هي بيئة وقت تشغيل جافا سكريبت تسمح لك بتشغيل شفرة جافا سكريبت على الخادم أو على سطر الأوامر. يمكنك تحميل وتثبيت العقدة.شبيبة من الموقع الرسمي https://nodejs.org .
بعد تثبيت جميع البرامج والأدوات اللازمة ، ستكون جاهزا لبدء إنشاء ثعبان كامل في جافا سكريبت.
إنشاء الملف الرئيسي للعبة
قبل أن نبدأ في إنشاء ثعبان في جافا سكريبت ، نحتاج إلى إنشاء الملف الرئيسي للعبة. سيحتوي هذا الملف على جميع الوظائف والمتغيرات الضرورية التي تتحكم في طريقة اللعب.
أولا ، دعنا ننشئ الوظيفة الرئيسية للعبة ، والتي سيتم استدعاؤها في كل مرة يتم فيها تحديث حالة اللعبة. دعنا نحدده على النحو التالي:
وظيفة غاميلوب () {
// رمز اللعبة
}
الآن دعونا إنشاء المتغيرات اللازمة للعبة للعمل. وسوف نحتاج المتغيرات لتخزين العرض والارتفاع من الملعب ، فضلا عن مجموعة لتخزين إحداثيات الثعبان:
عرض قماش فار = 800;
فار كانفاشيت = 600;
ثعبان فار = [];
بعد ذلك ، سوف نقوم بإنشاء وظيفة من شأنها تهيئة الملعب والثعبان:
وظيفة الحرف الأول () {
// تهيئة الملعب
// تهيئة الثعبان
}
الآن دعونا كتابة التعليمات البرمجية التي سيتم استدعاؤها عند تحميل الصفحة والتي سوف تهيئة اللعبة:
نافذة.تحميل = وظيفة () {
// عند تحميل الصفحة ، نتصل
الحرف الأول الحرف الأول () وظيفة;
// البداية
حلقة لعبة سيتينتيرفال (جيملوب ، 1000/30);
}
في هذا الرمز ، نستخدم وظيفة النافذة.تحميل ، وهو ما يسمى عندما يتم تحميل الصفحة بالكامل. نحن تهيئة اللعبة عن طريق استدعاء وظيفة إينيت ، ومن ثم بدء حلقة اللعبة باستخدام وظيفة سيتينرفال. في هذه الحالة ، سيتم تحديث دورة اللعبة بمعدل 30 إطارا في الثانية.
يعد إنشاء الملف الرئيسي للعبة خطوة مهمة ضرورية لمزيد من العمل على الثعبان في جافا سكريبت. في الأقسام التالية ، سنضيف وظائف جديدة ونحسن اللعبة لجعلها كاملة ومثيرة للاهتمام للاعب.
تحديد المتغيرات والثوابت الأساسية
في هذا الدليل ، سنقوم بإنشاء ثعبان كامل في جافا سكريبت ، لذلك سنحتاج إلى بعض المتغيرات والثوابت.
المتغيرات:
- قماش هو متغير لتخزين إشارة إلى قماش الذي سيتم رسم الثعبان.
- كتكس هو متغير لتخزين سياق رسم ثعبان على قماش.
- الثعبان هو متغير لتخزين مجموعة من إحداثيات جسم الثعبان.
- الاتجاه هو متغير لتخزين اتجاه حركة الثعبان.
- الغذاء هو متغير لتخزين إحداثيات الطعام.
- النتيجة هي متغير لتخزين النتيجة الحالية للعبة.
- السرعة هي متغير لتخزين سرعة اللعبة الحالية.
الثوابت:
- قماش_عرض هو ثابت لتخزين عرض قماش.
- ارتفاع قماش هو ثابت لتخزين ارتفاع قماش.
- حجم الثعبان ثابت لتخزين حجم جزء واحد من جسم الثعبان.
- حجم الطعام هو ثابت لتخزين حجم الوجبة.
- زيادة النتيجة هي ثابت لتخزين قيمة زيادة النتيجة عند تناول الطعام.
- زيادة السرعة هي ثابت لتخزين قيمة زيادة سرعة اللعبة عند تناول الطعام.
في المستقبل ، سوف نستخدم هذه المتغيرات والثوابت للتحكم في طريقة اللعب وعرضها على اللوحة القماشية.
تحقيق حركة الثعبان والتفاعل
من أجل تحقيق حركة الثعبان ، من الضروري التحكم في اتجاه حركته وتحديث موقعه في الملعب.
يتطلب تفاعل الثعبان مع الطعام والعقبات أيضا آليات معينة.
معالجة ضغطات المفاتيح:
- إنشاء مستمع حدث لوحة المفاتيح لتتبع ضغطات المفاتيح;
- وظائف معالج ملزمة للمفاتيح المقابلة;
- تغيير اتجاه حركة الثعبان اعتمادا على المفتاح المضغوط.
تحديث موقف الأفعى:
- يقوم بتحديث اتجاه رأس الثعبان بناء على الاتجاه الحالي للحركة;
- إضافة جزء جديد من جسم الثعبان إلى بداية صفيف جزء الجسم;
- إزالة الجزء الأخير من جسم الثعبان من مجموعة الأجزاء.
التفاعل مع الطعام:
- التحقق من اصطدام رأس الثعبان بإحداثيات الطعام;
- إضافة جزء جديد من جسم الثعبان عند تناول الطعام;
- توليد إحداثيات جديدة للطعام بعد تناوله.
التفاعل مع العقبات:
- التحقق من اصطدام رأس الثعبان بإحداثيات العوائق;
- وقف حركة الثعبان عندما يصطدم مع عقبة.
يعد تنفيذ حركة الثعبان وتفاعله أحد الأجزاء الرئيسية لإنشاء لعبة ثعبان كاملة في جافا سكريبت. تسمح هذه الآليات للاعب بالتحكم في الثعبان وجمع الطعام وتجنب العقبات وكسب النقاط.
إضافة الطعام والتعامل مع الاصطدامات
لإنشاء ثعبان كامل في جافا سكريبت ، تحتاج إلى إضافة وظيفة تسمح له "بتناول الطعام". في هذا القسم ، سننظر في كيفية تنفيذ إضافة الطعام والتعامل مع التصادم.
أولا ، دعونا إنشاء وظيفة كريتفود ، والتي سوف تولد موقف جديد للأغذية على playing الملعب. سوف نستخدم الجدول لعرض الملعب ، وذلك لتوليد موقف من المواد الغذائية ، وسوف نحتاج للحصول على قيم عشوائية لإحداثيات العمود والصف من الجدول.
وظيفة كريتفود () {فار الغذاء = {
العقيد: الرياضيات.الكلمة (الرياضيات.عشوائي () * (عرض اللعبة - 1)) + 1,
الصف: الرياضيات.الكلمة (الرياضيات.عشوائي () * (ارتفاع اللعبة - 1)) + 1
};
عودة الطعام;
}
تستخدم وظيفة كريتفود متغيرات عرض اللعبة وارتفاع اللعبة ، والتي تمثل عرض وارتفاع الملعب. يجب تحديد هذه القيم مسبقا.
الآن نحن بحاجة إلى إضافة التعامل مع تصادم الثعابين مع الطعام. للقيام بذلك ، سنقوم بإنشاء تشيكوظيفة الاصطدام التي سوف تحقق ما إذا كان الثعبان في نفس المكان مثل الطعام. إذا حدث تصادم ، ونحن سوف تزيد من طول الثعبان وتوليد موقف جديد لتناول الطعام.
وظيفة تشيككوليسيون () {فار رأس الأفعى = ثعبان.الجسم [0];
فار فودموقف = الغذاء;
إذا (رأس الأفعى.الصف = = = موقع الطعام.صف & & رأس الأفعى.العقيد = = = موقع الطعام.العقيد) {
ثعبان.تنمو();
الغذاء = خلق الغذاء();
}
}
في الكود أعلاه ، نقارن إحداثيات رأس الثعبان (العنصر الأول في مصفوفة الجسم) بإحداثيات الطعام. إذا كانت تتطابق ، فإننا نسمي طريقة النمو لزيادة طول الثعبان وإنشاء موضع جديد لتناول الطعام.
الآن يمكننا إضافة مكالمة إلى وظيفة تشيككوليسيون في حلقة اللعبة للتحقق من الاصطدامات في كل خطوة.:
وظيفة غاميلوب () {// ... تحديث موقف الثعبان ...
// ... رسم الملعب ...
تحقق من الاصطدام();
// ... ما تبقى من رمز حلقة اللعبة ...
}
الآن سوف يأكل الثعبان الطعام ويزيد طوله في كل مرة يصادفه.
تنفيذ نظام الحسابات والمستويات
عنصر مهم في لعبة الثعبان هو نظام التسجيل والمستوى. يسمح لك بتتبع تقدم اللاعب وتعيين صعوبة اللعبة.
يعرض نظام التسجيل النتيجة الحالية للاعب. في كل مرة يأكل فيها الثعبان الطعام ، تزداد النتيجة. يمكن تنفيذ ذلك باستخدام متغير يقوم بتخزين النتيجة الحالية ، ووظيفة ستزيدها عند تناول الطعام. على سبيل المثال:
دعونا النتيجة = 0;زيادة الدالة () {
النتيجة++;
}
، وتحديث قيمته باستخدام جافا سكريبت:
النتيجة: 0
وظيفة أوبداتسكوري () {
وثيقة.جيتليمنتبيد ("النتيجة").إينيرتمل = "النتيجة:" + النتيجة;
}
لتحديث الفاتورة المعروضة.
يتيح لك نظام المستوى ضبط صعوبة اللعبة اعتمادا على إنجازات اللاعب. على سبيل المثال ، مع كل إنجاز لدرجة معينة ، يزداد المستوى ، مما يؤثر على سرعة الثعبان أو معلمات اللعبة الأخرى.
لتنفيذ نظام مستوى ، يمكنك استخدام متغير يقوم بتخزين المستوى الحالي ، ووظيفة سيتم استدعاؤها عند الوصول إلى مستوى جديد.
دع المستوى = 1;وظيفة زيادة المستوى () {
مستوى++;
}
:
المستوى: 1
وظيفة أوبداتليفيل () {
وثيقة.جيتليمنتبيد ("المستوى").إينيرتمل = "المستوى:" + المستوى;
}
لتحديث المستوى المعروض.
وبالتالي ، فإن تنفيذ نظام التسجيل والمستوى يسمح للاعب بتتبع تقدمه وزيادة صعوبة اللعبة عند وصوله إليها.
الانتهاء من اللعبة وميزات إضافية
عندما تصل لعبة الثعبان إلى هدفها وتأكل كل التفاح في الملعب ، تعتبر اللعبة مكتملة. في هذا القسم ، سنلقي نظرة على كيفية إضافة إكمال اللعبة وبعض الميزات الإضافية.
نهاية اللعبة:
لإكمال اللعبة ، تحتاج إلى تعيين شرط سيتم بموجبه اعتبار اللعبة مكتملة. في هذه الحالة ، عندما يأكل الثعبان كل التفاح ، نضيف الشيك التالي:
- نتحقق مما إذا كان هناك أي تفاح متبقي في الملعب. إذا كان الأمر كذلك ، تستمر اللعبة. إذا لم يكن كذلك ، فانتقل إلى الخطوة التالية.
- نعرض رسالة حول نهاية اللعبة.
يمكننا استخدام وظيفة تشيكجاموفر للتحقق مما إذا كان هناك أي تفاح متبقي في الحقل. في هذه الوظيفة ، نحصل أولا على جميع عناصر فئة "التفاح" ونتحقق من طولها. إذا كان الصفر ، ثم تم أكل كل التفاح ، وتنتهي اللعبة. إضافة التعليمات البرمجية التالية إلى وظيفة تشيكغاميوفر:
إذا (وثيقة.الحصول على عناصر اسم الفئة ('أبل').الطول = = = 0) {
تنبيه ('ان اللعبة قد انتهت!');
كليرينتيرفال (غامينتيرفال);
}
وظائف إضافية:
في الواقع ، لدينا الكثير من الخيارات لميزات إضافية في لعبة الثعبان. قد يشمل بعضها:
- عداد النقاط: إضافة نقاط لكل تفاحة تؤكل وعرضها على الصفحة.
- مستويات الصعوبة: زيادة سرعة الثعبان أو إضافة عقبات في مستويات أعلى.
- المحاضر: حفظ أفضل نتيجة وعرضها على الصفحة.
- المؤثرات الصوتية: تشغيل الأصوات عند تناول التفاح أو الاصطدام بالعقبات.
- قائمة الإعدادات: إضافة القدرة على تغيير لون الثعبان أو الخلفية أو إعدادات اللعبة الأخرى.
هذه ليست سوى بعض الاحتمالات. يمكنك الاستمرار في تطوير لعبة الثعبان وإضافة ميزات جديدة وتحسينها كما يحلو لك.
في هذه المقالة ، قمنا بمراجعة أساسيات إنشاء لعبة ثعبان في جافا سكريبت. أنشأنا الملعب ، ثعبان والتفاح وأضاف المنطق بحيث ثعبان يمكن أن تتحرك وتنمو وأكل التفاح. يمكنك استخدام المعرفة التي اكتسبتها لإنشاء لعبتك الخاصة أو تعديل رمز الثعبان الحالي وفقا لتفضيلاتك. حظا سعيدا مع التنمية!
سؤال وجواب
كيف يمكنني إنشاء ثعبان في جافا سكريبت?
لإنشاء ثعبان في جافا سكريبت ، ستحتاج إلى معرفة أساسيات اللغة وبعض المكونات ، مثل لوحة الرسم لعرض ومعالجة إدخال المستخدم. توفر مقالة "كيفية إنشاء ثعبان كامل في جافا سكريبت: دليل خطوة بخطوة" دليلا مفصلا خطوة بخطوة لإنشاء ثعبان في جافا سكريبت.
ما هي الأدوات اللازمة لإنشاء ثعبان في جافا سكريبت?
لإنشاء ثعبان في جافا سكريبت ، ستحتاج إلى معرفة أساسية بلغة البرمجة ، ومكتبة للرسم على قماش (على سبيل المثال ، واجهة برمجة تطبيقات قماش) ومعالجة إدخال المستخدم. في المقالة " كيفية إنشاء ثعبان كامل في جافا سكريبت: دليل خطوة بخطوة" يستخدم هتمل ، كس وجافا سكريبت.
كم من الوقت سوف يستغرق لإنشاء ثعبان كاملة في جافا سكريبت?
يعتمد الوقت الذي تقضيه في إنشاء ثعبان جافا سكريبت كامل على مستوى معرفتك اللغوية وخبرتك في البرمجة. إذا كانت لديك معرفة أساسية بجافا سكريبت وكنت على دراية بإنشاء الألعاب ، فيمكنك قضاء عدة ساعات إلى عدة أيام عليها. توفر مقالة "كيفية إنشاء ثعبان كامل في جافا سكريبت: دليل خطوة بخطوة" دليلا خطوة بخطوة يسمح لك بإنشاء ثعبان في غضون أيام قليلة.
ما هي مهارات البرمجة اللازمة لإنشاء ثعبان في جافا سكريبت?
لإنشاء ثعبان في جافا سكريبت ، ستحتاج إلى مهارات البرمجة الأساسية ، بما في ذلك معرفة أساسيات لغة جافا سكريبت ، وفهم العمل مع دوم ، والقدرة على معالجة إدخال المستخدم وإدارة العناصر على اللوحة. ستكون الخبرة في العمل مع أطر الألعاب أو المكتبات مفيدة ، ولكنها ليست إلزامية. توفر مقالة "كيفية إنشاء ثعبان كامل في جافا سكريبت: دليل خطوة بخطوة" دليلا مفصلا لإنشاء ثعبان في جافا سكريبت.
هل من الممكن إنشاء ثعبان في جافا سكريبت دون استخدام المكتبة?
نعم ، يمكنك إنشاء ثعبان في جافا سكريبت دون استخدام المكتبة. المقالة" كيفية إنشاء ثعبان كامل في جافا سكريبت: دليل خطوة بخطوة " يستخدم جافا سكريبت نقية و هتمل قماش أبي. ومع ذلك ، يمكن أن يؤدي استخدام أطر اللعبة أو المكتبات إلى تبسيط عملية إنشاء لعبة وإضافة ميزات إضافية مثل الرسوم المتحركة والصوت.