Native JS to achieve simple typing games
This is a pure code article oh, hope you can understand what the code represents, hey hey!
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> /* background-color: RGB (255,255,255); margin-left: 80px; width: 80px; height: 50px; text-align: center; line-height: 50px; font-size: 28px; font-weight: bold; border: 1px solid black; box-sizing: border-box; } button { margin-top: 10px; margin-left: 80px; width: 80px; height: 40px; } </style> </head> <body> <! <div class="score">0</div> <! <button> Start </button> <! <div class="box"></div> <script> class Word {constructor() {// Set this. Speed = 1; this.timeout = 50; this.timeout2 = 1000; // Set the initial value of the loop state false this.flag = false; // call the function this.btn = document.querySelector('button'); This.btn. onclick = () => {// Set the loop state to true this.flag = true; this.create(this.speed); // Set button unavailable this.btn.disabled = true; } // Create an array to store the letter label this.arr = []; / / set the keyboard press event document. The onkeydown = (eve) = > {let e = eve | | window. The event; let keycode = e.keyCode || e.which; // Convert the keyCode value pressed to the letter let keyword = string.fromCharcode (keyCode); For (var I = 0; i < this.arr.length; I ++) {if (this.arr[I].innerhtml == keyword) {if (this.arr[I].innerhtml == keyword) document.querySelector('.score').innerText - 0; // -0 to change the string to a number // let the score+ 1 score++; // Add the score to the div document.querySelector('.score').innertext = score; If (score % 10 == 0) {if (this.timeout2 <= 400) {this.timeout2 = 300; if (this.timeout == 1) { this.timeout = 1; if (score % 10 == 0) { this.speed += 1; } } else this.timeout -= 7; } else this.timeout2 -= 200; } // Remove the element this.arr[I].remove(); // Remove the element this.arr.splice(I, 1); break; }}}} create(speed) {// create a span tag let span = document.createElement('span'); // Add the label to the array this.arr.push(span); SetStyle (span, {width: '50px', height: '50px', position: 'absolute', top: '0', left: this.getRandom(500, document.documentElement.clientWidth - 499) + 'px', borderRadius: "50%", lineHeight: '50px', textAlign: 'center', backgroundColor: this.getColor(), color: "#fff", fontWeight: "bold", fontSize: Let box = document.querySelector('.box'); AppendChild (span); // Append the tag node to box. Let randNum = this.getrandom (65, 91); let randNum = this.getrandom (65, 91); // convert keyCode to letters let word = string.fromCharcode (randNum); // Add the letter span.innertext = word to the new span tag; Let times = setInterval(() => {// Get the span from the top let t = sp.offsetTop; // Add the distance of each movement t += speed; / / determine whereabouts to the bottom Game over the if (t > = document. DocumentElement. ClientHeight - 50) {/ / empty & delay timer, clearInterval (times); clearTimeout(this.t2); // Output GAME OVER alert('GAME OVER'); // Clear the page & array this.arr = []; box.innerHTML = ''; This.btn. disabled = false; Document.queryselector ('.score').innerText = 0; // Restore the initial drop distance this.speed = 1; // Restore the initial drop speed this.timeout = 50; Timeout2 = 1000; // Restore initial letter generation speed this.timeout2 = 1000; // Set the loop state to false this.flag = false; Top = t + "px"}, this.timeout); // Loop generates the letter if (this.flag) {clearTimeout(this.t2); This.t2 = setTimeout(() => {this.create(this.speed); }, this.timeout2); SetStyle (tag, styleObj) {for (var attr in styleObj) {tag.style[attr] = styleObj[attr]; GetRandom (a, b = 0) {var Max = math.max (a, b); var min = Math.min(a, b); return Math.floor(Math.random() * (max - min)) + min; GetColor (hex = true) {if (hex) {var color = '#'; for (var i = 0; i < 3; i++) { var rgb = this.getRandom(256).toString(16); rgb = rgb.length === 1 ? '0' + rgb : rgb; color += rgb } return color; } return `rgb(${this.getRandom(256)},${this.getRandom(256)},${this.getRandom(256)})` } } new Word; </script> </body> </html>Copy the code【 Typing games 】