ثم نحتاج إلى إرفاق عنصرين آخرين:

  1. عنصر سنعرض فيه النص الذي يتعين على اللاعبين كتابته:
    . سنقوم بإضافة النص الذي يجب كتابته باستخدام كود جافا سكريبت البسيط:
            var text2type = \\'Some text that needs to be typed...\\';            function init(){                $(\\'#txt\\').text( text2type );            }
  1. عنصر يحتاج إلى التركيز، حيث يمكننا إضافة مستمع للحدث عندما يضغط اللاعب على المفتاح. لا نحتاج حقًا إلى عرض العنصر، بل نحتاج فقط إلى وجوده في الصفحة ويجب أن يكون مرئيًا، وإلا فلن يتمكن من التركيز عليه. ومع ذلك، إذا لم نرغب في إظهاره، فسنضبط عرضه وارتفاعه على 0.

الآن نحن بحاجة إلى التأكد من أن عنصر إدخال النص هو محور التركيز دائمًا. نقوم أولاً بإعلان حدث في علامة boda=y التي ستحدد التركيز على عنصر إدخال النص عند النقر على النص الأساسي، وهو ما يعني عمليًا في أي مكان في الصفحة:

نحتاج أيضًا إلى ضبط التركيز عندما يتم تحميل الصفحة وتكون جاهزة.

$( document ).ready(function() {    $(\\'#textinput\\').focus();});

الآن نحن بحاجة إلى ترميز الجزء الأكثر أهمية، وهو الكود الذي يتعامل مع جزء الكتابة. الكود سهل للغاية، وله 3 طرق رئيسية:

\\'use strict\\';class TypingGame {    constructor( text, div ) {      this.text = text;      this.history = \\\"\\\";      this.misspelled = false;      this.stats = [];    }    add(c) {      if ( c == this.text.substring( this.history.length, this.history.length   1 ) ){        this.history  = c;        this.misspelled = false;      }      else{        this.misspelled = true;      }      this.render();    }    render(){        let cursorstyle = \\'cursor\\'   ( this.misspelled ? \\'-misstyped\\' : \\'\\' );      $(\\'#txt\\').html(         \\'\\'   this.history   \\'\\'          \\'\\'   this.text.substring( this.history.length, this.history.length   1 )   \\'\\'          \\'\\'   this.text.substring( this.history.length   1 )   \\'\\'      );    }  }

بالنسبة للجزء التالي، نحتاج إلى تحديث كائن الطابعة، عندما يتم إدخال حرف جديد في عنصر إدخال النص (تذكر أن لدينا مستمعًا هناك

الآن نحن بحاجة إلى التأكد من أن عنصر إدخال النص هو محور التركيز دائمًا. نقوم أولاً بإعلان حدث في علامة boda=y التي ستحدد التركيز على عنصر إدخال النص عند النقر على النص الأساسي، وهو ما يعني عمليًا في أي مكان في الصفحة:

نحتاج أيضًا إلى ضبط التركيز عندما يتم تحميل الصفحة وتكون جاهزة.

$( document ).ready(function() {
    $('#textinput').focus();
});

الآن نحن بحاجة إلى ترميز الجزء الأكثر أهمية، وهو الكود الذي يتعامل مع جزء الكتابة. الكود سهل للغاية، وله 3 طرق رئيسية:

'use strict';

class TypingGame {

    constructor( text, div ) {
      this.text = text;
      this.history = "";

      this.misspelled = false;
      this.stats = [];
    }

    add(c) {

      if ( c == this.text.substring( this.history.length, this.history.length   1 ) ){
        this.history  = c;
        this.misspelled = false;
      }
      else{
        this.misspelled = true;
      }

      this.render();
    }


    render(){

        let cursorstyle = 'cursor'   ( this.misspelled ? '-misstyped' : '' );

      $('#txt').html( 
        ''   this.history   ''  
        ''   this.text.substring( this.history.length, this.history.length   1 )   ''
          ''   this.text.substring( this.history.length   1 )   ''
      );

    }


  }

بالنسبة للجزء التالي، نحتاج إلى تحديث كائن الطابعة، عندما يتم إدخال حرف جديد في عنصر إدخال النص (تذكر أن لدينا مستمعًا هناك 

            function updateText(){

                let c = $('#textinput').val();
                if ( c.length > 0 ) {
                    typer.add( c.slice(-1) );
                }
                $('#textinput').val('');
                showCurrent()
            }

الآن لدينا النموذج الأولي الأول مع آليات اللعبة الخاصة بلعبة الكتابة العاملة. في القسم التالي سنقوم بإضافة بعض العناصر الإضافية لقياس سرعة الكتابة بالكلمات في الدقيقة والأحرف في الدقيقة (wpm وcpm) ولعرض الأداء في مربع حوار لطيف.

بيان الافراج تم نشر هذه المقالة على: https://dev.to/websilvercraft/create-a-speed-typing-game-in-javascript-4lpc?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفه
أحدث البرنامج التعليمي أكثر>
تصنيفأكثر>
تعلم اليابانية تعلم اللغة الكورية تعلم اللغة الصينية تعلم لغة أجنبية لعبة مشكلة شائعة ملحقات التكنولوجيا منظمة العفو الدولية برنامج تعليمي برمجة شرط

دراسة اللغة الصينية

أداةأكثر>
فك تشفير الصورة Base64
بينيين الصينية
ترميز يونيكود
JS ضغط تشفير التشويش
أداة تشفير URL الست عشري
أداة تحويل ترميز UTF-8
أدوات تشفير وفك تشفير Ascii عبر الإنترنت
أداة التشفير MD5
أداة تشفير وفك تشفير النصوص Hash/Hash عبر الإنترنت
تشفير SHA عبر الإنترنت

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3