原生JS面向物件實現打字小遊戲

本文例項為大家分享了面向物件實現打字小遊戲的具體程式碼，供大家參考，具體內容如下

Demo介紹

通過鍵盤點選下落小球所顯示的數字，小球重新整理再任意位置重新掉落。並且，每五個球后掉落速度加快
小球重新整理位置大小，顏色隨機。用面向物件class方法實現
該demo原始碼可直接使用。賦值到html檔案然後開啟就可以使用，可用作學校課設使用

原始碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" c 
ontent="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;">當前分數<div class="score" >0</div></div>
    <div class="title">原生js小Demo：打字練習遊戲</div>
    <div class="name">作者：lz</div>
</body>
<script>
    class TypingGame {
        constructor() {
            this.oSpan
     http://www.cppcns.com 
       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
                    // 讓分數+1
                    score++
                    // 加1以後的分數放進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",boXnqTsGPZ 
rderRadius: "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)
                //XnqTsGPZ 如果這個標籤到了瀏覽器的最低端，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截圖

原生JS面向物件實現打字小遊戲

還可以改進的地方
可以自行改寫
可以增加打錯提示，且可以隨機重新整理的高度。可以進行一些速度優化。把動畫改成requestAnimationFrame()效果更真實。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

原生JS面向物件實現打字小遊戲

Demo介紹

原始碼

原生JS面向物件實現打字小遊戲

JS實戰面向物件貪吃蛇小遊戲示例

C#實現打字小遊戲

JS面向物件實現飛機大戰

node.js面向物件實現（一）類和物件

node.js面向物件實現（二）繼承

java面向物件程式設計--猜拳小遊戲

原生js實現的金山打字小遊戲（例項程式碼詳解）

原生js實現2048小遊戲

js面向物件之實現淘寶放大鏡

JS面向物件之單選框實現

JS面向物件之多選框實現

JS面向物件程式設計實現的Tab選項卡案例詳解

JS面向物件程式設計實現的拖拽功能案例詳解

C#實現簡單打字小遊戲

js+canvas實現五子棋小遊戲

js canvas實現五子棋小遊戲

js面向物件封裝級聯下拉選單列表的實現步驟

js面向物件方式實現拖拽效果

用js實現拼圖小遊戲

原生JS面向物件實現打字小遊戲

Demo介紹

原始碼

相關推薦