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

Several ways to backup MySql database

mysqldump tool backup Back up the entire database...

Implementing a random roll caller based on JavaScript

This article shares the specific code of JavaScri...

JavaScript canvas realizes dynamic point and line effect

This article shares the specific code for JavaScr...

How to create a stylish web page design (graphic tutorial)

"Grand" are probably the two words that ...

Detailed explanation of the relationship between Linux and GNU systems

Table of contents What is the Linux system that w...

Detailed explanation of Docker fast build and Alibaba Cloud container acceleration configuration under Windows 7 environment

The previous article on Docker mentioned the cons...

Docker enables seamless calling of shell commands between container and host

As shown below: nsenter -t 1 -m -u -n -i sh -c &q...

The iframe child page operates the parent page and implements the effect of shielding the page pop-up layer

Question: In index.html, iframe introduces son.htm...

Two ways to achieve horizontal arrangement of ul and li using CSS

Because li is a block-level element and occupies ...

The table table uses: nth-child() to achieve alternate color change and alignment

Core code <!DOCTYPE html> <html lang=&qu...

Steps to run ASP.NET Core in Docker container

There are too much knowledge to learn recently, a...

js to realize a simple advertising window

This article shares the specific code of js to im...

Coexistence of python2 and python3 under centos7 system

The first step is to check the version number and...

JavaScript+html to implement front-end page sliding verification

This article shares the specific code of JavaScri...

Tips for using top command in Linux

First, let me introduce the meaning of some field...