Buat permainan menaip dalam javascript untuk mengukur kelajuan wpm-tutorial js-php.cn

Buat permainan menaip dalam javascript untuk mengukur kelajuan wpm

Mary-Kate Olsen

Lepaskan： 2024-10-02 18:19:02

asal

614 orang telah melayarinya

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>

Salin selepas log masuk

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 );
            }

Salin selepas log masuk

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>

Salin selepas log masuk

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();
});

Salin selepas log masuk

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>'
      );

    }


  }

Salin selepas log masuk

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()
            }

Salin selepas log masuk

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!