Native JS object-oriented typing game

Native JS object-oriented typing game

This article shares the specific code of JS object-oriented typing game for your reference. The specific content is as follows

Demo Introduction

Click the number displayed by the falling ball through the keyboard, and the ball will refresh and fall again at any position. In addition, after every five balls, the dropping speed will increase, the position and size of the balls will be refreshed, and the colors will be random. The demo source code can be used directly by implementing the object-oriented class method. Assign it to the HTML file and then open it to use it. It can be used as a school course design

Source code

<!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, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .title{
        width: 1200px;
        height: 80px;
        margin:400px auto;
        color: darkblue;
        text-shadow: 3px 3px 3px black;
        font-size: 80px;
        font-weight: bold;
        text-align: center;
        font-family: "楷体";

    }
    .name{
        width: 1000px;
        height: 40px;
        margin:0 auto;
        color: skyblue;
        text-shadow: 3px 3px 3px black;
        font-size: 40px;
        font-weight: bold;
        text-align: center;
        font-family: "楷体";
    }
</style>

<body>
    <div style="font-size: 40px;">Current score<div class="score" >0</div></div>
    <div class="title">Native js small Demo: typing practice game</div>
    <div class="name">Author: lz</div>
</body>
<script>
    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 collection this.createWord(this.speed);
            document.onkeydown = e => {
                var e = e || window.event;
                var keycode = e.keyCode || e.which;
                // TypingGame.oSpan = this.$$("span");
                var keyword = String.fromCharCode(keycode).
                    toLowerCase()
                if (this.word === keyword) {
                    // Knock one down - score // Get the original score var score = this.$('.score', false).innerText - 0
                    // Let the score +1
                    score++
                    // Put the score after adding 1 into the div document.querySelector('.score').innerText = score
                    if (score === 5) {
                        this.speed += 2 // Every five letters, the falling speed increases}
                    this.oSpan.parentElement.removeChild(this.oSpan)
                    this.createWord(this.speed)
                }
            }


        }
        createWord(speed) {
            let wh=this.getRandom(30,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: '30px',
                textAlign: 'center',
                backgroundColor: this.colors[this.getRandom(18)],
                color: "white",
                fontWeight: "bold",
                textAlign:"center",
                lineHeight:wh+"px"
            })

            document.body.appendChild(this.oSpan)
            // Random characters: 97~122
            var randomNum = this.getRandom(97, 123)
            this.word = String.fromCharCode(randomNum);

            this.oSpan.innerText = this.word
            // This label should move slowly downward this.elementsMove(this.speed);
        }
        elementsMove() {
            // console.log(this.oSpan)
            // Timer clearInterval(this.timer)
            this.timer = setInterval(() => {
                // Get height var t = this.oSpan.offsetTop;
                // Increase the height t += this.speed;
                console.log(this.speed)
                // If this tag reaches the bottom of the browser, GAME OVER
                if (t >= document.documentElement.clientHeight - 30) {
                    clearInterval(this.timer)
                    if (confirm("GAME OVER, Do you want to play again?")) {
                        location.reload(); //Refresh and play again}
                }
                // Set the top of the label after enlarging
                this.oSpan.style.top = t + "px"
            }, 50)
        }
        setStyle(ele, 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;
</script>

</html>

Demo screenshots

Areas for improvement

You can rewrite it yourself, add error prompts, and refresh the height randomly. Some speed optimizations could be done. Changing the animation to requestAnimationFrame() will make the effect more realistic.

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:
  • JS realizes typing game
  • js to realize typing games
  • JavaScript to achieve a simple typing game
  • Native js to realize typing animation game
  • JavaScript game development: "Romance of the Three Kingdoms: The Legend of Cao Cao" component development (Part 3) Typewriter-like text output in scenario dialogue
  • JavaScript typing game code
  • JavaScript typing game implementation code
  • JavaScript balloon typing game

<<:  Ubuntu 20.04 Chinese input method installation steps

>>:  Vertical and horizontal splitting of MySQL tables

Recommend

Vue component encapsulates sample code for uploading pictures and videos

First download the dependencies: cnpm i -S vue-uu...

How to encapsulate query components based on element-ui step by step

Table of contents Function Basic query functions ...

JavaScript to achieve floor effect

This article shares the specific code of JavaScri...

Introduction to the role of HTML doctype

Document mode has the following two functions: 1. ...

Vue implements the sample code of adding, deleting, modifying and checking the tree structure

In fact, many companies have functions similar to...

HTML table markup tutorial (15): table title

<br />This tag can be used to directly add a...

A brief analysis of the underlying principles of MySQL transactions and isolation levels

Table of contents Preface 1. Brief Analysis of th...

Summary of several situations in which MySQL indexes fail

1. Indexes do not store null values More precisel...

How to view version information in Linux

How to view version information under Linux, incl...

Vue uses drag and drop to create a structure tree

This article example shares the specific code of ...

Detailed explanation of how to pass values ​​between react hooks components (using ts)

Table of contents From father to son From son to ...

Should I use Bootstrap or jQuery Mobile for mobile web wap

Solving the problem Bootstrap is a CSS framework ...

Detailed explanation of Svn one-click installation shell script under linxu

#!/bin/bash #Download SVN yum -y install subversi...

Comparing Document Locations

<br />A great blog post by PPK two years ago...

Vue+Element realizes paging effect

This article example shares the specific code of ...