Rumah > Artikel > hujung hadapan web > Buat permainan menaip dalam javascript untuk mengukur kelajuan wpm

Buat permainan menaip dalam javascript untuk mengukur kelajuan wpm

Mary-Kate Olsenasal: 2024-10-02 18:19:02609semak imbas

Create a typing game in javascript to measure wpm speed

Buat permainan menaip laju dalam javascript

Dalam tutorial ini, kami akan mencipta permainan menaip mudah yang akan mengukur kelajuan menaip kami dalam wpm - perkataan seminit, aksara seminit, salah ejaan dan akan membolehkannya memperbaikinya. Kami hanya akan menggunakan javascript dan jQuery (ia tidak benar-benar diperlukan, tetapi ia akan menjadikan permainan menaip kami kurang bertele-tele supaya kami boleh menumpukan perhatian pada aplikasi yang lain.

Kami bermula dengan mencipta halaman html mudah:

<!DOCTYPE html>
<html>
    <head>
        <title>Typing Test WPM: How fast can you type? ⌨️?</title>
        <meta charset="UTF-8">        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/jquery-3.2.1.slim.min.js"></script>
        <script src="js/typing.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">

    </head>
    <body >
    </body>
</html>

Kemudian kita perlu melampirkan 2 lagi elemen:

Elemen di mana kami akan memaparkan teks yang perlu ditaip oleh pemain:
. Kami akan menambah teks yang perlu ditaip menggunakan sekeping kod javascript yang mudah:

            var text2type = 'Some text that needs to be typed...';

            function init(){
                $('#txt').text( text2type );
            }

Elemen yang perlu mempunyai fokus, di mana kita boleh menambah pendengar acara apabila pemain menekan kekunci. Kami tidak perlu memaparkan elemen itu, kami hanya perlu mempunyainya dalam halaman itu dan ia mesti kelihatan, jika tidak, ia tidak boleh menerima fokus. Walau bagaimanapun, jika kami tidak mahu menunjukkannya, kami akan menetapkan lebar dan ketinggiannya kepada 0.

<div style="position: absolute; top:0; left:0; z-index:-1;visibilitygg:hidden;">
      <textarea id="textinput" style="width:0;height:0;" oninput="updateText()"></textarea>
</div>

Kini kita perlu memastikan, elemen input teks sentiasa menjadi tumpuan. Mula-mula kami mengiklankan acara dalam teg boda=y yang akan menetapkan fokus kepada elemen input teks apabila klik pada badan, yang secara praktikal bermaksud di mana-mana dalam halaman:

Kami juga perlu menetapkan fokus apabila halaman dimuatkan dan sedia.

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

Sekarang kita perlu kod bahagian yang paling penting, kod yang mengendalikan bahagian menaip. Kodnya agak mudah, ia mempunyai 3 kaedah utama:

pembina yang menetapkan teks yang perlu ditaip dan memulakan beberapa pembolehubah kelas.
kaedah tambah, yang menambah aksara baharu yang ditaip, yang boleh mengakibatkan ralat atau tidak.
kaedah pemaparan ialah memaparkan teks dengan pemain boleh mendapatkan maklum balas visual tentang kemajuan dan mereka boleh melihat apabila kemudian salah eja sesuatu.

'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( 
        '<span class="typed">' + this.history + '</span>' +
        '<span class="' + cursorstyle + '">' + this.text.substring( this.history.length, this.history.length + 1 ) + '</span>'
        + '<span class="totype">' + this.text.substring( this.history.length + 1 ) + '</span>'
      );

    }


  }

Untuk bahagian seterusnya, kita perlu mengemas kini objek penaip, apabila huruf baharu dimasukkan dalam elemen input teks(ingat kita mempunyai pendengar di sana ).

            function updateText(){

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

Kini kami mempunyai prototaip pertama dengan mekanik permainan permainan menaip yang berfungsi. Dalam bahagian seterusnya kita akan menambah beberapa lagi elemen untuk mengukur kelajuan menaip dalam perkataan seminit dan aksara seminit (wpm dan cpm) dan untuk memaparkan prestasi pada dialog yang bagus.

Atas ialah kandungan terperinci Buat permainan menaip dalam javascript untuk mengukur kelajuan wpm. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery less html Object if for Error using class Chars Event constructor this prototype display input

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mendapat id borang. Ia bukan seperti yang anda fikirkanArtikel seterusnya：Mendapat id borang. Ia bukan seperti yang anda fikirkan

Artikel berkaitan

Lihat lagi