كيفية تعديل قيمة مؤقت جافا سكريبت للعبة الكتابة باستخدام أزرار HTML

ضبط المؤقت الديناميكي لكتابة اللعبة باستخدام الأزرار

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

ستوضح لك هذه المقالة كيفية إنشاء حل في JavaScript يسمح للاعبين بالاختيار بين إعدادات المؤقت المختلفة باستخدام الأزرار. على سبيل المثال، سيؤدي تحديد زر "30 ثانية" إلى ضبط المؤقت على 30 ثانية، بينما يؤدي النقر على زر "60 ثانية" إلى تغييره إلى 60 ثانية.

ستأخذ وظيفة JavaScript القيمة من الزر الذي تم النقر عليه وتقوم بتحديث كل من المؤقت وعنوان اللعبة ديناميكيًا. يمكن لهذا النوع من المرونة أن يعزز تجربة المستخدم، مما يجعل اللعبة أكثر قابلية للتخصيص وممتعة لمستويات المهارة المختلفة.

بحلول نهاية هذا الدليل، سيكون لديك ميزة ضبط المؤقت كاملة الوظائف باستخدام HTML وJavaScript. سنغطي أيضًا كيفية تحديث قيمة المؤقت المعروضة على عنوان الصفحة لتعكس مدة المؤقت المحددة.

يأمر	مثال للاستخدام
document.querySelector()	يُستخدم لتحديد عنصر HTML
addEventListener()	يربط حدثًا محددًا (مثل النقر) بعنصر زر. في هذا السياق، يتم استخدامه لتشغيل وظيفة ChangeTimer() عندما ينقر المستخدم على زر، مما يسمح بالتفاعل الديناميكي مع إعدادات المؤقت.
innerText	تسمح هذه الخاصية بتعديل النص المرئي داخل عنصر HTML. في هذا الحل، يتم استخدامه لتحديث قيمة المؤقت في عنوان الصفحة عند النقر فوق الزر.
onClick	سمة معالج الأحداث المضمنة المستخدمة في الطريقة البديلة لإرفاق وظيفة ChangeTimer() مباشرة بحدث النقر على الزر. يتيح ذلك طريقة أبسط وأقل نمطية لتحديث المؤقت ديناميكيًا.
test()	يتم استخدام هذه الطريقة في اختبار الوحدة باستخدام Jest. وهو يحدد حالة اختبار حيث يتم تقييم الوظيفة التي يتم اختبارها (على سبيل المثال، ChangeTimer()) لضمان تحديث المؤقت بشكل صحيح. فهو يضمن أن الكود يتصرف كما هو متوقع في سيناريوهات مختلفة.
expect()	أمر Jest يتحقق مما إذا كانت القيمة الفعلية (مثل المؤقت المحدث) تطابق القيمة المتوقعة. يتم استخدامه في اختبارات الوحدة للتحقق من تحديث gameTime وdocument.title بشكل صحيح بعد نقرة زر.
toBe()	أمر Jest آخر يتحقق من المساواة الصارمة. فهو يضمن أنه بعد استدعاء ChangeTimer()، يكون وقت اللعبة هو بالضبط ما هو متوقع (على سبيل المثال، 30000 مللي ثانية لمدة 30 ثانية).
getElementById()	يُستخدم لتحديد أزرار معينة حسب معرفاتها (على سبيل المثال، "ثلاثون"، "ستون"). تعد هذه الطريقة مهمة لربط مستمعي الأحداث بالأزرار وتحفيز التغيير الديناميكي للمؤقت استجابة لتفاعل المستخدم.

إنشاء مؤقتات ديناميكية باستخدام أزرار JavaScript وHTML

تم تصميم البرامج النصية المذكورة أعلاه للسماح للمستخدم بضبط مؤقت اللعبة ديناميكيًا في لعبة الكتابة عن طريق النقر فوق أزرار HTML. في البداية، نعلن عن متغير ، والذي يحمل الوقت بالمللي ثانية (30 ثانية افتراضيًا، مضروبًا في 1000 للتحويل إلى مللي ثانية). الوظيفة الرئيسية تكمن في وظيفة تقوم بتحديث قيمة المؤقت بناءً على الزر الذي تم النقر عليه. تتلقى هذه الطريقة قيمة الزر (على سبيل المثال، 30 أو 60 أو 90) وتقوم بتحديث gameTime متغير وفقا لذلك. بالإضافة إلى ذلك، يقوم البرنامج النصي بتحديث عنوان الصفحة ليعكس مدة المؤقت المحددة، مما يوضح للمستخدمين مقدار الوقت المتاح لهم.

بالنسبة للسلوك الديناميكي، نستخدم مستمعي الأحداث، وتحديدًا يأمر. يسمح هذا للبرنامج النصي بالتفاعل عندما ينقر المستخدم على أي من الأزرار. يتم تعيين معرف لكل زر، وعند النقر عليه، يتم تشغيله وظيفة، وتمرير القيمة الزمنية المعنية. يعد هذا الأسلوب مفيدًا للتعامل مع أزرار متعددة بكفاءة دون الحاجة إلى JavaScript مضمّن متكرر في بنية HTML. يتضمن البرنامج النصي أيضًا خيارًا احتياطيًا حيث يمكنك استخدام معالجات الأحداث المضمنة مثل إذا تم تفضيل البساطة على النمطية.

في الحل البديل، نربط مباشرة الحدث إلى الأزرار. تنفذ هذه الطريقة تعمل مباشرة على الزر الذي يتم النقر عليه. إنه نهج مباشر ولكنه يفتقر إلى مرونة طريقة مستمع الحدث. إن بساطة هذه الطريقة مفيدة للتطبيقات الأصغر والأقل تعقيدًا. ومع ذلك، للحصول على تعليمات برمجية أكثر قابلية للتطوير، توفر مستمعي الأحداث مرونة أكبر وتسمح بتحديثات أسهل للبرنامج النصي دون تعديل بنية HTML مباشرة. تهدف كلتا الطريقتين إلى حل نفس المشكلة، وهي ضبط المؤقت وتحديث العنوان ديناميكيًا بناءً على اختيار المستخدم.

وأخيرًا، نقوم بتنفيذ اختبارات الوحدة باستخدام Jest، وهو إطار عمل اختبار JavaScript. ال تعد الوظائف ضرورية للتحقق من تحديث المؤقت بشكل صحيح. من خلال اختبار سيناريوهات متعددة، مثل ما إذا كان سيتم ضبط المؤقت على 30 ثانية، أو 60 ثانية، أو 90 ثانية، تضمن اختبارات الوحدة هذه صحة البرنامج النصي. أوامر مثل و يتم استخدامها للتحقق من أن قيمة المؤقت الفعلية وعنوان الصفحة يتطابقان مع النتائج المتوقعة. تضمن مرحلة الاختبار هذه أن منطق المؤقت الخاص بك يعمل بشكل صحيح عبر حالات الاستخدام المختلفة، مما يوفر الثقة في قوة الحل الخاص بك.

// Solution 1: Using event listeners to change timer value dynamically
let gameTime = 30 * 1000; // Default timer set to 30 seconds
const titleElement = document.querySelector('title');
function changeTimer(value) {
    gameTime = value * 1000; // Update timer to selected value
    titleElement.innerText = value + 's'; // Update the title
}
// Attach event listeners to buttons
document.getElementById('thirty').addEventListener('click', () => changeTimer(30));
document.getElementById('sixty').addEventListener('click', () => changeTimer(60));
document.getElementById('ninety').addEventListener('click', () => changeTimer(90));
// HTML Buttons:
// <button id="thirty" type="button">30s</button>
// <button id="sixty" type="button">60s</button>
// <button id="ninety" type="button">90s</button>

<script>
let gameTime = 30 * 1000;
function changeTimer(value) {
    gameTime = value * 1000;
    document.title = value + 's';
}
</script>
<button onClick="changeTimer(30)">30s</button>
<button onClick="changeTimer(60)">60s</button>
<button onClick="changeTimer(90)">90s</button>

// Jest Test Cases
test('Timer should update to 30 seconds', () => {
    changeTimer(30);
    expect(gameTime).toBe(30000);
    expect(document.title).toBe('30s');
});
test('Timer should update to 60 seconds', () => {
    changeTimer(60);
    expect(gameTime).toBe(60000);
    expect(document.title).toBe('60s');
});
test('Timer should update to 90 seconds', () => {
    changeTimer(90);
    expect(gameTime).toBe(90000);
    expect(document.title).toBe('90s');
});

تعزيز التفاعل مع اللعبة من خلال تخصيص المؤقت

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

لتنفيذ ذلك، يمكنك استخدام جافا سكريبت وظيفة. بمجرد ضبط الموقت، setInterval يمكن استخدامه لإنشاء عد تنازلي يقلل من قيمة المؤقت كل ثانية. عندما يصل المؤقت إلى الصفر، يمكن للوظيفة إما إيقاف اللعبة أو تنبيه المستخدم بانتهاء الوقت. تعمل هذه الوظيفة، جنبًا إلى جنب مع القدرة على تغيير المؤقت ديناميكيًا باستخدام الأزرار، على تحسين تجربة اللعب بشكل كبير. تعد الواجهة سريعة الاستجابة أمرًا أساسيًا للحفاظ على تفاعل اللاعبين، وتعد التعليقات في الوقت الفعلي إحدى الطرق لتحقيق ذلك.

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

1. كيف أستخدم لإنشاء العد التنازلي؟
2. يمكنك استخدام من خلال ضبطه على التنفيذ كل 1000 مللي ثانية (ثانية واحدة) وتقليل قيمة المؤقت في كل مرة. عندما تصل القيمة إلى الصفر، يمكنك إيقاف العد التنازلي باستخدام .
3. ما هو الغرض من ؟
4. يستخدم لإيقاف العد التنازلي أو أي إجراء متكرر آخر بدأ بواسطة . من المهم التأكد من توقف العد التنازلي عندما يصل إلى الصفر.
5. كيف يمكنني تحديث عنوان HTML ديناميكيًا؟
6. يستخدم لتعيين نص عنوان الصفحة. يمكن تحديث هذا داخل الخاص بك وظيفة على أساس قيمة الوقت المحدد.
7. هل يمكنني التعامل مع أخطاء المستخدم عند اختيار مؤقت؟
8. نعم، يمكنك إضافة التحقق من الصحة عن طريق التحقق من تحديد خيار مؤقت صالح قبل بدء العد التنازلي. إذا لم يتم اختيار وقت صالح، فيمكنك عرض تنبيه أو مطالبة.
9. كيف أقوم بتشغيل وظيفة عند النقر فوق الزر؟
10. يمكنك إرفاق وظيفة بزر باستخدام أو عن طريق الاستخدام المباشر في عنصر HTML الخاص بالزر.

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

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