This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Hi, I’m Ned👀, a junior with less than two years of experience at 🌹

The road ahead is still long 🎉, work hard to refuel it ❤~

preface

Code is not only used for our work, but also should be used for our entertainment, today with friends to live the whole!

After reading this article, you will learn how to live ~

When I was a child I remember a software called jinshan typing through, there is a typing aircraft war do not know whether there is a small partner played, of course, I do not come to him so good, I can only do a relatively simple (low with version), low seems really low.

Here’s how it works:

Start the whole live

Page composition is relatively simple, one is the letter we want to type, one is the following line of small words, used to do prompt.

     <div id="char">A</div>
     <div id="result">Please press the letter on the screen on the key</div>
Copy the code

Next is to do some simple layout, is to center the content, color and so on to do some adjustment, we first paste the code, after a detailed discussion.

    body{
        margin: 0;
        /* Turn on the elastic layout and make the children of the elastic layout horizontally centered and vertically centered */
        display: flex;
        /* Sets or retrieves the alignment of the elastic box element in the main axis (horizontal axis) */
        justify-content: center;
        align-items: center;
        /* Center the text */
        text-align: center;
        /* Sets the warp gradient of the background color */
        background: radial-gradient(circle,# 444.# 000.# 000);
    }
    #char{
        font-size: 400px;
        /*color: lightgreen; * /
        color: #90EE90;
        /* Set text shadow */
        /*text-shadow: horizontal position vertical position blur distance shadow color */
        The /* position can be negative */
        text-shadow: 0 0 50px # 666;
    }
    #result{
        font-size: 20px;
        color: # 888;
    }
    /* Find the div element */ whose id is char and class name is error
    #char.error{
        color: red;

    }
Copy the code

We define an error class that turns the letters red to indicate when the user makes a typo.

The radial gradient used for the background is also interesting. You have to set two stop colors to create a gradient effect from the center to the periphery. The first parameter has two cases, ellipse and circle, which we can choose.

If you are interested in this, you can also check out the Rookie tutorial radial Gradient.

Next we write our JS logic.

First define and get the variables and Dom nodes we need

    // indicates the correct number of times
    var okCount=0;
    // The number of errors
    var errorCount=0;
    // Get the div to display the character
    var charBox=document.getElementById('char');
    // Get the div to display the result
    var result=document.getElementById('result');
Copy the code

Accuracy = number of correct/total number of correct, let’s write another function to show the result, show the number of correct and false, and the accuracy.

    // display the result of the calculation
    function showResult(){
        var rate=100*okCount/(okCount+errorCount);
        // Display the correct number of errors and the correct rate
        result.innerHTML='right'+okCount+'个'+'wrong'+errorCount+'个'+'correct rate'+rate.toFixed(2) +The '%';
    }
Copy the code

ToFixed (2) preserves two decimal places

Let’s write another function that randomly retrieves the values of letters A to Z.

var code = 0; // Store random numbers
 // Get any character between A and Z
    function show(){
        // get a random number between [0,1)
        var rand=Math.random();
        // Get a random number between 0 and 26 (26 not included)
        code=rand*26;
        Math.floor(a) rounds down the number a to the nearest integer less than or equal to a
        // Get any integer between 0 and 25
        code=Math.floor(code);
        // Get any integer between 65 and 90
        code=code+65;
        // Convert the ASCII decimal encoding to the corresponding character
        // Get any character from A to Z
        var char=String.fromCharCode(code);
        // Display characters on the interface
        charBox.innerHTML=char;
    }
Copy the code

Use random numbers to generate ASCII code values from A to Z, and then use String. FromCharCode to convert them into English letters and display them on the page.

The final step is to listen for the user’s keyboard keystroke event, using the window.onKeyDown event.

    // Keyboard down event
    window.onkeydown=function(ev){
        // Get the ASCII encoding of the key
        var key=ev.keyCode;
        // Determine whether the number corresponding to the key letter is the same as the randomly obtained number
        if(key==code){
            // The number of correct keystrokes +1
            okCount ++;
            // Redisplay new characters when the keystroke is correct
            show();
        }else{
            // Key error, error count +1
            errorCount ++;
        }   
        showResult();
    }
Copy the code

Now that it’s done, let’s see how it works!

But of course our good programmers want to give the user a slightly (better) user experience! So let’s introduce an Animate. CSS animation library.

Combined with our small game, we chose zoomIn and Shake two animations, one as the animation accompanying the appearance of English letters, and the other as the animation reminding users of mistakes. We add the class name of the corresponding animation to our element when we listen to the user’s key to make a judgment, and remove the corresponding class name after 0.5s to prevent conflicts.

    // Keyboard down event
    window.onkeydown=function(ev){
        // Get the ASCII decimal code of the key
        var key=ev.keyCode;
        // Determine whether the number corresponding to the key letter is the same as the randomly obtained number
        if(key==code){
            // The number of correct keystrokes +1
            okCount ++;
            // Redisplay new characters when the keystroke is correct
            show();
            // Add the correct animation to the div with js
            charBox.className ='animated zoomIn';
        }else{
            // Key error, error count +1
            errorCount ++;
            // Add animation for keystroke error
            charBox.className='animated shake error';
        }
        showResult();
        // Clear the animation after 0.5 seconds
        setTimeout(clearAnimated,500);
    }
    function clearAnimated(){
        // Clear the animation
        charBox.className=' ';
    }
Copy the code

So far, our whole life for today is over ~

The last

I hope you are happy, always thinking about how to achieve the needs of the product manager will be very tired, in the spare time is better to use our good code to live the whole ~

Let oneself, also let the people around happy happy, also can let oneself mood become relaxed!