用JS寫了一個打字遊戲，反正我是通不了關

時間 2019-11-26

原文原文鏈接

　　今天想寫個簡單的遊戲，打字遊戲好像都沒寫過，那麼就寫打字遊戲吧， gamePad包含了關卡的信息，能夠用來調整給個關卡字符下落的速度；html

　　getRandom函數會返回一個字符對象，這個對象包含了字符下落的速度和當前被定位的x，y值，一整框代碼比較有借鑑的地方就是，只用了一個定時器，而不是每個字符都用一個定時器，那樣會嚴重影響性能；git

　　沒使用第三方的庫，純手賤，用原生的js寫遊戲github

<html>
<head>
    <meta charset="utf-8">
    <style>
        #conatiner{
            width:400px;
            height:500px;
            border:1px solid #eee;
            position: relative;
        }
    </style>
</head>
    <body>
        <span>typing</span>
        <div>
             <span id="score">0</span>得分
        </div>
        <div id="conatiner">
            
        </div>
        <button id="start">開始遊戲</button>
    </body>
    <script>
        var gamePad = {
            1 : {
                speed : 100
            },
            2 : {
                speed : 90
            },
            3 : {
                speed : 70
            },
            4 : {
                speed : 40
            },
            5 : {
                speed : 20
            }
        }
        var getRandom = function() {
            //隨即一個97到122的字符;
            var charCode = 97+Math.floor(Math.random()*26);
            var speed = Math.ceil(Math.random()*4);
            return {
                code : String.fromCharCode(charCode),
                speed : speed,
                y : 0,
                x  : Math.floor(Math.random()*390),
            }
        };
        function game( n , score ) {
            var eConatiner = document.getElementById("conatiner");
            var eScore = document.getElementById("score");
            var showArr = []; //字符對象的列表
            var shoted = 0;
            //隨機一個字符對象， 包含了字符的運動速度，字符的值
            //讓showArr這個數組的數據運動;
            var run = function() {
                //隨機生成字符對象
                if(Math.random()>0.9) {
                    var obj = getRandom();
                    showArr.push(obj);
                }
                //讓元素運動
                for(var i=0 ;i < showArr.length; i++) {
                    showArr[i].y+=showArr[i].speed;
                    if(showArr[i].y>500) {
                        //showArr.splice(i,1);
                        clear();
                        alert("遊戲失敗");
                        location.reload();
                    }
                }
                eConatiner.innerHTML = "";
                //讓元素添加到界面中;
                for(var i=0 ;i < showArr.length; i++) {
                    var eSpan = document.createElement("span");
                    eSpan.style.position = "absolute";
                    eSpan.innerHTML = showArr[i].code;
                    eSpan.style.left = showArr[i].x;
                    eSpan.style.top = showArr[i].y;
                    eConatiner.appendChild(eSpan);
                }
            }
            var keyup = function(ev) {
                for(var i=0 ;i < showArr.length; i++) {
                    if(showArr[i].code === ev.key || String.fromCharCode(ev.keyCode).toLowerCase() == showArr[i].code) {
                        showArr.splice(i,1);
                        shoted++;
                        eScore.innerHTML = shoted;
                        if(shoted === score && gamePad[n+1] === undefined) {
                            alert("少俠你好厲害， 你好快， 真的好快好快的");
                        }else if(shoted === score) {
                            clear();
                            alert("進入下一關");
                            game(n+1, score+10)
                        }
                        return;
                    }
                }
            }
            var clear = function() {
                clearInterval(game.timer);
                window.removeEventListener("keyup", keyup);
            }
            window.addEventListener("keyup", keyup);
            game.timer = setInterval(run,gamePad[n].speed);
        }
        document.getElementById("start").addEventListener("click", function() {
            game(1, 10);
        });
    </script>
</html>

　　從新整理代碼，修改爲面向對象樣子，過程式的代碼太亂了，雖說是面向對象，只是JS看起來舒服多；小程序

　　經過面向對象的思惟把JS代碼各個模塊進行封裝，避免做用域的混亂不堪：數組

<html>
<head>
    <meta charset="utf-8">
    <style>
        #conatiner{
            width:400px;
            height:500px;
            border:1px solid #eee;
            position: relative;
        }
    </style>
</head>
    <body>
        <span>typing</span>
        <div>
             <span id="score">0</span>得分 ; 
             須要：<span id="need"></span>分；
        </div>
        <div id="conatiner">
            
        </div>
        <button id="start">開始遊戲</button>
    </body>
    <script>
        var eConatiner = document.getElementById("conatiner");
        var eScore = document.getElementById("score");
        var getRandom = function() {
            //隨即一個97到122的字符;
            var charCode = 97+Math.floor(Math.random()*26);
            var speed = Math.ceil(Math.random()*4);
            return {
                code : String.fromCharCode(charCode),
                speed : speed,
                y : 0,
                x  : Math.floor(Math.random()*390),
            }
        };

        function Game( n , score , eConatiner, eScore ,need) {
            this.need = need;
            this.need.innerHTML = score;
            this.showArr = []; //字符對象的列表
            this.shoted = 0;
            this.n = n;
            this.score = score;
            this.eConatiner = eConatiner;
            this.eScore = eScore;
            this.events();
            this.run();
            this.timer = setInterval(this.run.bind(this), Game.gamePad[n].speed);
        }
        Game.gamePad = {
            1 : {
                speed : 100
            },
            2 : {
                speed : 90
            },
            3 : {
                speed : 70
            },
            4 : {
                speed : 40
            },
            5 : {
                speed : 20
            }
        }
        Game.prototype.keyup = function(ev) {
            showArr = this.showArr;
            for(var i=0 ;i < showArr.length; i++) {
                if(showArr[i].code === ev.key || String.fromCharCode(ev.keyCode).toLowerCase() == showArr[i].code) {
                    showArr.splice(i,1);
                    this.shoted++;
                    this.eScore.innerHTML = this.shoted;
                    if(this.shoted === this.score && Game.gamePad[this.n+1] === undefined) {
                        alert("少俠你好厲害， 你好快， 真的好快好快的");
                    }else if(this.shoted === this.score) {
                        this.unbind();
                        alert("進入下一關");
                        new Game(this.n+1, this.score+10, this.eConatiner, this.eScore, this.need);
                    }
                    return;
                }
            }
        }
        Game.prototype.events = function() {
            this.keyup = this.keyup.bind(this);
            window.addEventListener("keyup", this.keyup);
        }
        Game.prototype.unbind = function() {
            clearInterval(this.timer);
            window.removeEventListener("keyup", this.keyup);
        }
        //隨機一個字符對象， 包含了字符的運動速度，字符的值
        //讓showArr這個數組的數據運動;
        Game.prototype.run = function(){
            showArr = this.showArr;
            //隨機生成字符對象
            if(Math.random()>0.9) {
                var obj = getRandom();
                showArr.push(obj);
            }
            //讓元素運動
            for(var i=0 ;i < showArr.length; i++) {
                showArr[i].y+=showArr[i].speed;
                if(showArr[i].y>500) {
                    alert("遊戲失敗");
                    location.reload();
                }
            }
            this.eConatiner.innerHTML = "";
            //讓元素添加到界面中;
            for(var i=0 ;i < showArr.length; i++) {
                var eSpan = document.createElement("span");
                eSpan.style.position = "absolute";
                eSpan.innerHTML = showArr[i].code;
                eSpan.style.left = showArr[i].x;
                eSpan.style.top = showArr[i].y;
                this.eConatiner.appendChild(eSpan);
            }
        }
        document.getElementById("start").addEventListener("click", function() {
            new Game(1, 10, eConatiner, eScore, document.getElementById("need"));
        });
    </script>
</html>