原生JS面向?qū)ο髮崿F(xiàn)打字小游戲

更新時間：2021年09月13日 17:37:45 作者：我是真的不會前端

這篇文章主要為大家詳細介紹了原生JS面向?qū)ο髮崿F(xiàn)打字小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS面向?qū)ο髮崿F(xiàn)打字小游戲的具體代碼，供大家參考，具體內(nèi)容如下

Demo介紹

通過鍵盤點擊下落小球所顯示的數(shù)字，小球刷新再任意位置重新掉落。并且，每五個球后掉落速度加快
小球刷新位置大小，顏色隨機。用面向?qū)ο骳lass方法實現(xiàn)
該demo源碼可直接使用。賦值到html文件然后打開就可以使用，可用作學校課設使用

源碼

<!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: bolder;
        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: bolder;
        text-align: center;
        font-family: "楷體";
    }
</style>

<body>
    <div style="font-size: 40px;">當前分數(shù)<div class="score" >0</div></div>
    <div class="title">原生js小Demo：打字練習游戲</div>
    <div class="name">作者：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"]//顏色集合
            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) {
                    // 打掉一個 - 計分
                    // 獲取原來的分
                    var score = this.$('.score', false).innerText - 0
                    // 讓分數(shù)+1
                    score++
                    // 加1以后的分數(shù)放進div中
                    document.querySelector('.score').innerText = score
                    if (score === 5) {
                        this.speed += 2//每過五個字母，下落速度加快
                    }
                    this.oSpan.parentElement.removeChild(this.oSpan)
                    this.createWord(this.speed)
                }
            }


        }
        createWord(speed) {
            let wh=this.getRandom(30,80);//隨機大小
            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)
            // 隨機字符：97~122
            var randomNum = this.getRandom(97, 123)
            this.word = String.fromCharCode(randomNum);

            this.oSpan.innerText = this.word
            // 這個標簽要慢慢向下運動
            this.elementsMove(this.speed);
        }
        elementsMove() {
            // console.log(this.oSpan)
            // 定時器
            clearInterval(this.timer)
            this.timer = setInterval(() => {
                // 獲取高度

                var t = this.oSpan.offsetTop;
                // 加大高度
                t += this.speed;
                console.log(this.speed)
                // 如果這個標簽到了瀏覽器的最低端，GAME OVER
                if (t >= document.documentElement.clientHeight - 30) {
                    clearInterval(this.timer)
                    if (confirm("GAME OVER, 是否重玩?")) {
                        location.reload();//刷新重玩
                    }
                }
                // 加大后設置給標簽的top
                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截圖