كيفية إنشاء تفاعل المستخدم في لعبة HTML5 - الدمى

أكبر الفرق بين لعبة HTML5 والرسوم المتحركة هو تفاعل المستخدم. إذا كنت تريد أن تجعل من لعبة، تحتاج المستخدم على المشاركة. وهنا كيفية القيام بذلك.

وفيما يلي رمز:

سيارة. هتمل فار سين؛ فار كار؛ فونكتيون إينيت () {سين = نيو سين ()؛ كار = نيو سبريت (سين، "كار. ينغ"، 50، 30)؛ سيارة. setAngle (270)؛ سيارة. setSpeed ​​(0)؛ مشهد. ستارت ()؛} // إند إينيت فونكتيون أوبديت () {سين. واضح()؛ // تشيك كيس إف (كيسدون [K_LEFT]) { كار. changeAngleBy (-5)؛ } // إند إف إف (كيسدون [K_RIGHT]) { كار. changeAngleBy (5)؛ } // إند إف إف (كيسدون [K_UP]) { كار. changeSpeedBy (1)؛ } // إند إف إف (كيسدون [K_DOWN]) { كار. changeSpeedBy (-1)؛ } // إند إف كار. تحديث ()؛} // نهاية التحديث

قيادة السيارة!

كيفية استخدام لوحة المفاتيح لعبتك

بطريقة أو بأخرى يحتاج المستخدم للتفاعل مع الصفحة. لوحة المفاتيح هي واحدة من أسهل عناصر الإدخال للاستخدام. يوفر سيمبليغام بضع طرق للتحقق من لوحة المفاتيح، ولكن تقنية أقوى يستخدم متغير خاص يسمى كيسدون. وإليك كيف يعمل:

• كيسدون هو صفيف عالمي. يتم إنشاء هذا المتغير تلقائيا عند إنشاء مشهد. وهو عبارة عن مجموعة من القيم المنطقية - وهذا يعني أن كل عنصر يمكن أن يكون صحيحا فقط أو كاذبا فقط.

• هناك ثابت محدد لكل مفتاح. كل مفتاح على لوحة المفاتيح القياسية لديه ثابت خاص محددة بالفعل. على سبيل المثال، يمثل K_A المفتاح A، و K_B يمثل المفتاح B.

• كيسدون يحكي حالة كل مفتاح. إذا تم الضغط على المفتاح A حاليا، فستحتوي كيسدون [A] على القيمة ترو. إذا لم يتم الضغط على المفتاح A، سيحتوي كيسدون [A] على القيمة فالس.

• يمكنك تحديد الوضع الحالي لأي مفتاح. مجرد التحقق من كيسدون [] مجموعة لتحديد الوضع الحالي لأي مفتاح.

• يمكن أن يكون لديك مفاتيح متعددة في وقت واحد. والغرض الأساسي من هذه التقنية هو السماح لمفاتيح متعددة للضغط في وقت واحد. في الحوسبة العادية، فإنه من غير المعتاد أن يكون أكثر من مفتاح واحد في وقت واحد. في الألعاب، فإنه من الشائع جدا للضغط على أكثر من مفتاح واحد في وقت واحد، لذلك تحتاج إلى آلية يمكن أن تدعم هذا التوقع.

كيفية نقل اللعبة العفريت

أساسا، العفريت لديه موقف، التي تسيطر عليها X و Y الخصائص. إذا كنت تتذكر من فئة الرياضيات، يمثل X القيم الأفقية، و Y هو للموقع الرأسي. الأصل (0، 0) هو الزاوية العلوية اليسرى من الشاشة.

X ينسق العمل تماما كما تتذكر من فئة الرياضيات. كما القيم X الحصول على أكبر، العفريت يتحرك إلى اليمين. في الرسومات الكمبيوتر، Y يعمل مختلفة قليلا مما كان عليه في فئة الرياضيات.معظم أجهزة العرض تفحص من أعلى إلى أسفل، لذلك Y هو 0 في الجزء العلوي من الشاشة ويزيد كما كنت تتحرك إلى أسفل.

لاحظ أن أقصى ارتفاع وعرض يتم تخزينها في المتغيرات: المشهد. الارتفاع والمشهد. عرض.

جميع وسائل الحركة المختلفة هي حقا عن التلاعب X و Y. يمكنك تعيين هذه القيم يدويا (سيتبوسيتيون ()، سيتكس ()، و سيتي ())، أو يمكنك تغيير القيم (تشانجكسبي ()، تشانجيبي ()). كل من هذه الأساليب يعمل على الفور، حتى تتمكن من استخدامها لتوجيه موقف أو حركة العفريت.

بعض هذه الوظائف تبدو مشابهة لبعضها البعض. على سبيل المثال، تشانجكسباي () يبدو كثيرا مثل سيتشانجكس (). هذه الوظائف لها فرق دقيق ولكن مهم. الدالة تشانجكسبي () بتغيير قيمة X مرة واحدة. إذا كنت ترغب في استمرار التغيير، عليك أن تستمر في استدعاء هذه الوظيفة.

الدالة سيتشانجكس () أكثر قوة لأنه يمكنك استدعائها مرة واحدة، ويغير مرارا وتكرارا x بأي قيمة تحددها حتى تتصل سيتشانجكس () مرة أخرى.

بالنسبة لمعظم العفاريت، كنت تريد حقا أن تعطي ببساطة العفريت زاوية وسرعة، والسماح لها بالرحيل. الكائن العفريت لديه بالضبط الطرق التي تحتاجها لهذا السلوك. سيتانغل () يسمح لك لتحديد اتجاه العفريت سوف تذهب، و سيتسبيد () يتيح لك تحديد سرعة للذهاب في هذا الاتجاه. مثل معظم وظائف الحركة، هناك أيضا تشانجانغل () و تشانجسبيد () أساليب.

كيفية السيطرة على السيارة في اللعبة

آلية كيسدون يمكن الجمع بين أساليب الحركة للسيطرة بسهولة سيارتك. وإليك التعليمات البرمجية ذات الصلة من التحديث () مرة أخرى:

تحديث وظيفة () {مشهد. واضح()؛ // تشيك كيس إف (كيسدون [K_LEFT]) { كار. changeAngleBy (-5)؛ } // إند إف إف (كيسدون [K_RIGHT]) { كار. changeAngleBy (5)؛ } // إند إف إف (كيسدون [K_UP]) { كار. changeSpeedBy (1)؛ } // إند إف إف (كيسدون [K_DOWN]) { كار. changeSpeedBy (-1)؛ } // إند إف كار. تحديث ()؛} // نهاية التحديث

الترميز الفعلي من السهل جدا أن نفهم:

1. مسح المشهد.

   كالمعتاد، فإن الدرجة الأولى من العمل في وظيفة التحديث () لتنظيف غرفة اللعب. تأكد من مسح الإطار السابق قبل إجراء أي شيء آخر.

2. تحقق من الضغط على السهم الأيسر.

   استخدم آلية كيسدون لتحديد ما إذا كان يتم الضغط على السهم الأيسر حاليا.

3. إذا تم الضغط على السهم الأيسر، أدر السيارة إلى اليسار.

   إذا كان المستخدم يضغط حاليا على مفتاح السهم الأيسر، أدر السيارة خمس درجات عكس اتجاه عقارب الساعة. استخدم طريقة تشانجانجليبي () لتغيير المظهر المرئي للسيارة وكذلك الاتجاه الذي تسلكه.

4. كرر للسهم لليمين.

   تشيك السهم الأيمن مشابه، ولكن هذه المرة تتحول السيارة خمس درجات في اتجاه عقارب الساعة.

5. استخدم السهم لأعلى لتسريع.

   إذا قام المستخدم بالضغط على السهم لأعلى، فغير سرعة السيارة. استخدام قيمة إيجابية لتسريع السيارة. لن يستغرق الكثير لأن هذا الرمز يتم التحقق 20 مرات في الثانية.

6. قم ببطء السيارة لأسفل مع السهم لأسفل.

   استخدم آلية مشابهة للسهم المتجه لأسفل.تغيير السرعة بواسطة قيمة سلبية لإبطاء السيارة. هذا النهج يسمح للقيم السلبية، وسوف سيارة احتياطية إذا كنت تريد.

7. ارسم السيارة في موقعها الجديد.

   من الأهمية بمكان أن نتذكر أن استدعاء وظائف الحركة العفريت لا يغير موقع السيارة! فإنه يغير البيانات الداخلية فقط في ذاكرة اللعبة. يجب عليك استدعاء طريقة تحديث السيارة () لرؤية هذه التغييرات في العمل.