Shulou(Shulou.com)06/03 Report--

Native JS object-oriented how to achieve typing Mini Game, many novices are not very clear, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

By clicking on the number displayed by the falling ball on the keyboard, the ball refreshes and falls again at any position. And the falling speed is accelerated after every five balls.

The size of the refresh position of the ball is random. Using object-oriented class method to realize

The demo source code can be used directly. Assign the value to the html file and then open it to use it. It can be used as a school curriculum.

Source code Document. Title {width: 1200px; height: 80px; margin:400px auto; color: darkblue; text-shadow: 3px 3px 3px black; font-size: 80px; font-weight: bolder; text-align: center; font-family: "italics";} .name {width: 1000px; height: 40px Margin:0 auto; color: skyblue; text-shadow: 3px 3px 3px black; font-size: 40px; font-weight: bolder; text-align: center; font-family: "italics" } current score 0 native js small Demo: typing practice author: lz class TypingGame {constructor () {this.oSpan this.speed = 2; this.timer = ""; this.word This.colors = ["red", "orange", "purple", "black", "pink", "blue", "skyblue", "yellowgreen", "brown", "tomato", "indianred", "orchid", "peru", "aqua", "slateblue", "gray", "grey", "crimson", "green"] / Color set this.createWord (this.speed) _ document.onkeydown = e = > {var e = e | | window.event; var keycode = e.keyCode | | e.whicht; / / TypingGame.oSpan=this.$$ ("span"); var keyword = String.fromCharCode (keycode). ToLowerCase () if (this.word = keyword) {/ / knock out a-score / / get the original score var score = this.$ ('.Score' False). InnerText-0 / / put the score after + 1 score++ / / into the div document.querySelector ('.score'). InnerText = score if (score = 5) {this.speed + = 2max / every five letters Speed up the fall} this.oSpan.parentElement.removeChild (this.oSpan) this.createWord (this.speed)} createWord (speed) {let wh=this.getRandom (30pm 80) / / Random size this.oSpan = this.creEle ('span') / / console.log (this.oSpan) this.setStyle (this.oSpan, {width: wh+ "px", height: wh+ "px", position: 'absolute', top: 0, left: this.getRandom (document.documentElement.clientWidth-30) + "px" BorderRadius: "50%", lineHeight: '30pxdye, textAlign:' center', backgroundColor: this.colors [this.getRandom (18)], color: "white", fontWeight: "bold", textAlign: "center" LineHeight:wh+ "px"}) document.body.appendChild (this.oSpan) / / Random character: 9700122 var randomNum = this.getRandom (97,123) this.word = String.fromCharCode (randomNum) This.oSpan.innerText = this.word / / this tag should move down slowly this.elementsMove (this.speed) } elementsMove () {/ / console.log (this.oSpan) / / timer clearInterval (this.timer) this.timer = setInterval (() = > {/ / get height var t = this.oSpan.offsetTop; / / increase height t + = this.speed Console.log (this.speed) / / if this tag reaches the lowest end of the browser, GAME OVER if (t > = document.documentElement.clientHeight-30) {clearInterval (this.timer) if (confirm ("GAME OVER, do you want to replay?)) {location.reload () / / Replay}} / / top this.oSpan.style.top = t + "px"}, 50)} setStyle (ele) set to the tag after enlarged StyleObj) {for (var attr in styleObj) {ele.style [attr] = styleObj [attr]} $(tag, all = false) {return all? Document.querySelectorAll (tag): document.querySelector (tag);} creEle (tag) {return document.createElement (tag)} getRandom (a, b = 0) {var max = Math.max (a, b) Var min = Math.min (a, b) return Math.floor (Math.random () * (max-min)) + min}} new TypingGame

Demo screenshot

There is room for improvement.

You can rewrite it yourself.

The height at which the wrong prompt can be increased and can be refreshed randomly. Some speed optimizations can be made. It is more realistic to change the animation to requestAnimationFrame ().

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.