JavaScript typing game

JavaScript typing game

This article shares the specific code of JavaScript to implement typing games for your reference. The specific content is as follows

Effect picture:

Demand Analysis:

1. Display the letters to be entered in the char div, in uppercase
2. Display the accuracy rate in the result div at all times, such as 98%
3. Bind key events to documents
4. If the input content is consistent with the char, the correct animation is displayed: animated zoomIn, and the input letter is replaced
5. If the input content is inconsistent with the char, an error animation will be displayed: animated shake error
6. Whether it is correct or wrong, the accuracy rate in the result is updated from time to time

source code:

HTML Part

<mian>
 <div id="char">A</div>
 <div id="result">Please press the letter displayed on the screen</div>
</mian>

CSS part

1. In order to achieve some special effects, first create an animate.css file and encapsulate some animation effects in it

/*animate.css*/
.animated {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}

.animated.infinite {
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}

.animated.hinge {
 -webkit-animation-duration: 2s;
 animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
 -webkit-animation-duration: .75s;
 animation-duration: .75s;
}
@-webkit-keyframes zoomIn {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
 }

 50% {
 opacity: 1;
 }
}

@keyframes zoomIn {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
 }

 50% {
 opacity: 1;
 }
}

.zoomIn {
 -webkit-animation-name: zoomIn;
 animation-name: zoomIn;
}
  .animated {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
@-webkit-keyframes shake {
 from, to
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }

 10%, 30%, 50%, 70%, 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
 }

 20%, 40%, 60%, 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
 }
}

@keyframes shake {
 from, to
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }

 10%, 30%, 50%, 70%, 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
 }

 20%, 40%, 60%, 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
 }
}

.shake {
 -webkit-animation-name: shake;
 animation-name: shake;
}

2.css main code, no animation effects version

<style>
 body {
  margin: 0;
  /*Turn on the elastic layout and align the sub-elements in the elastic layout horizontally and vertically in the center*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*Center the text*/
  text-align: center;
  /*Set the background color gradient*/
  background: radial-gradient(circle, #444, #111, #000);
 }

 #char {
  font-size: 400px;
  color: lightgreen;
  /*Set text shadow*/
  /*text-shadow: horizontal position vertical position blur distance shadow color*/
  /*Position can be negative*/
  text-shadow: 0 0 50px #666;
 }

 #result {
  font-size: 20px;
  color: #888;
 }

 /*Find the div element with id char and class name error*/
 #char.error {
  color: red;
 }
</style>

JavaScript

1. In order to simplify the code, first encapsulate some commonly used custom constructors

<script>
// Define a function: rand
// Parameters: minimum integer, maximum integer // Return: a random integer between two integers function rand(min, max) {
 return parseInt(Math.random() * (max - min + 1)) + min;
} 
</script>

2. In the main part of js, you need to use the encapsulated function and call it

<script>
 // Get the relevant element var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('result');

 // code is used to record the code of the letters on the page. Use global variables and you can use it everywhere. var code, tirme;

 var rightNum = 0;//Correct number var wrongNum = 0;//Wrong number // 1 Display the letter to be entered in the char div, in uppercase showChar();
 // 3 Bind key events to the document document.onkeyup = function (e) {
 // Event object e = window.event || e;
 // Get the key code var keyCode = e.keyCode || e.which;
 // 4 If the input content is consistent with the char if (keyCode == code) {
  // Display the correct animation: animated zoomIn
  charDiv.className = "animated zoomIn";
  rightNum++;
  showChar()
 }
 // 5 If the input content is inconsistent with char else {
  // Display error animation: animated shake error
  charDiv.className = "animated shake error";
  wrongNum++
 }
 // In order to have animation next time, remove the class name after this animation is finished setTimeout(function () {
  charDiv.className = "";
 }, 500)
 // 6 Whether it is correct or wrong, the accuracy rate in result is updated from time to time // Accuracy rate = correct times / total times resultDiv.innerHTML = "Accuracy rate:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // Function: Randomly display the letters to be entered in the char div: uppercase function showChar() {
  // First randomly select a letter code code = rand(65, 90);
  // Convert to a letter var char = String.fromCharCode(code);
  // Display in the char div charDiv.innerHTML = char;
 }
</script>

Total code

<html>

<head>
 <meta charset="utf-8">
 <title>Typing Game</title>
 <!--Introduce animate.css animation library-->
 <link rel="stylesheet" href="animate.css" >
 <style>
 body {
  margin: 0;
  /*Turn on the elastic layout and align the sub-elements in the elastic layout horizontally and vertically in the center*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*Center the text*/
  text-align: center;
  /*Set the background color gradient*/
  background: radial-gradient(circle, #444, #111, #000);
 }

 #char {
  font-size: 400px;
  color: lightgreen;
  /*Set text shadow*/
  /*text-shadow: horizontal position vertical position blur distance shadow color*/
  /*Position can be negative*/
  text-shadow: 0 0 50px #666;
 }

 #result {
  font-size: 20px;
  color: #888;
 }

 /*Find the div element with id char and class name error*/
 #char.error {
  color: red;
 }
 </style>
</head>

<body>
 <mian>
 <div id="char">A</div>
 <div id="result">Please press the letter displayed on the screen</div>
 </mian>
</body>

</html>
<script>
 // Define a function: rand
 // Parameters: minimum integer, maximum integer // Return: a random integer between two integers function rand(min, max) {
 return parseInt(Math.random() * (max - min + 1)) + min;
 }
</script>
<script>
 // Get the relevant element var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('result');

 // code is used to record the code of the letters on the page. Use global variables and you can use it everywhere. var code, tirme;

 var rightNum = 0;//Correct number var wrongNum = 0;//Wrong number // 1 Display the letter to be entered in the char div, in uppercase showChar();
 // 3 Bind key events to the document document.onkeyup = function (e) {
 // Event object e = window.event || e;
 // Get the key code var keyCode = e.keyCode || e.which;
 // 4 If the input content is consistent with the char if (keyCode == code) {
  // Display the correct animation: animated zoomIn
  charDiv.className = "animated zoomIn";
  rightNum++;
  showChar()
 }
 // 5 If the input content is inconsistent with char else {
  // Display error animation: animated shake error
  charDiv.className = "animated shake error";
  wrongNum++
 }
 // In order to have animation next time, remove the class name after this animation is finished setTimeout(function () {
  charDiv.className = "";
 }, 500)
 // 6 Whether it is correct or wrong, the accuracy rate in result is updated from time to time // Accuracy rate = correct times / total times resultDiv.innerHTML = "Accuracy rate:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // Function: Randomly display the letters to be entered in the char div: uppercase function showChar() {
  // First randomly select a letter code code = rand(65, 90);
  // Convert to a letter var char = String.fromCharCode(code);
  // Display in the char div charDiv.innerHTML = char;
 }
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Native JS to implement click number game
  • Implementing a puzzle game with js
  • js to implement the snake game with comments
  • Native js to implement 2048 game
  • JavaScript jigsaw puzzle game
  • Native js implements a minesweeper game with custom difficulty
  • js canvas to realize the Gobang game
  • How to use JavaScript to write a fighting game
  • Implementing a simple minesweeper game based on JavaScript
  • JavaScript implementation of the Game of Life

<<:  How to install docker on centos

>>:  Detailed examples of converting rows to columns and columns to rows in MySQL

Recommend

Detailed process of deploying Docker to WSL2 in IDEA

The local environment is Windows 10 + WSL2 (Ubunt...

Detailed explanation of the relationship between React and Redux

Table of contents 1. The relationship between red...

How to use shtml include

By applying it, some public areas of the website c...

Introduction to partitioning the root directory of Ubuntu with Vmvare virtual machine

Table of contents Preface Rationale Procedure 1. ...

How to use mysqladmin to get the current TPS and QPS of a MySQL instance

mysqladmin is an official mysql client program th...

Detailed explanation of sql_mode mode example in MySQL

This article describes the sql_mode mode in MySQL...

Vue achieves the top effect through v-show

html <div class="totop" v-show="...

Which is faster among MySQL full-text index, joint index, like query, and json query?

Table of contents Query Background 1. Like query ...

Example code of how CSS matches multiple classes

CSS matches multiple classes The following HTML t...

HTML optimization techniques you must know

To improve the performance of web pages, many dev...

CSS border half or partially visible implementation code

1. Use pseudo-classes to display half of the Bord...

Put frameset in body through iframe

Because frameset and body are on the same level, y...

Implementation steps of vue-element-admin to build a backend management system

Recently, when I was working on a conference heal...

v-for directive in vue completes list rendering

Table of contents 1. List traversal 2. The role o...

Vue-pdf implements online preview of PDF files

Preface In most projects, you will encounter onli...