jsdemo
/
typinggame.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS打字小游戏</title>
    <style>
        body {
            padding: 0px;
            margin: 0;
        }

        #gameStage {
            width: 100%;
            height: 500px;
            background-color: papayawhip;
        }

        #score{

            text-align:center;
            color: green;
            fron-size:40px;
        }
        #gameTimer{
            text-align:center;
            color: red;
            fron-size:40px;
        }
    </style>
</head>
<body>


<div id="gameStage"></div>
<div id="score"></div>
<div id = "gameTimer"></div>
<!--//<input id="start" type="button"value ="start game"/>-->

<script>
    /**
     * 字母
     * @param id
     * @param alphabet
     * @param posX
     * @param posY
     * @param size
     * @constructor
     */


    function Word(id, alphabet, posX, posY, size) {

        //初始化数据
        this.id = id || '';
        this.alphabet = alphabet || 'a';
        this.posX = posX || 0;
        this.posY = posY || 0;
        this.size = size || 64;


        // 新建
        this.create = function () {
            var str = '<span class="word" id="alphabet-' + this.id + '">' + this.alphabet + '</span>';
            var gameStage = document.getElementById('gameStage');
            gameStage.innerHTML += str;

            var divNode = document.getElementById('alphabet-' + this.id);//获取字母的值
            divNode.style.position = 'absolute';
            divNode.style.fontSize = this.size + 'px';
            divNode.style.left = this.posX + 'px';
            divNode.style.top = this.posY + 'px';

        };

        // 重置.
        this.reset = function () {
            var divNode = document.getElementById('alphabet-' + this.id);
            divNode.style.display = 'none';
            this.moveTo(0, 0);
        };

        // 移动到指定点
        this.moveTo = function (posX, posY) {
            this.posX = posX;
            this.posY = posY;

            var divNode = document.getElementById('alphabet-' + this.id);
            divNode.style.left = posX + 'px';
            divNode.style.top = posY + 'px';
        };

    }

    /**
     * 导演类
     */
    var director = {
        alphabets: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],

        nodes: new Array(),

        /**
         * 逐帧运行
         */
        runFrame: function () {

            //更新已经产生所有点的坐标
            for (var index in this.nodes) {
                var node = this.nodes[index];
                if (node) {
                    if(node.posY <= 430) {
                        node.moveTo(node.posX, node.posY + 15);
                    }
                    else {
                        var msg = confirm("字母掉落，游戏失败，是否重新开始？");
                        clearInterval( director.timer);
                        clearInterval(director.gameT);
                        if (msg) {
                            window.location.reload();
                        } else {
                            window.close();
                        }
                    }

                }
            }

            //随机产生字母
            var r = Math.floor(Math.random() * this.alphabets.length);
            var w = new Word(new Date().getTime(), this.alphabets[r]);

            w.create();
            this.nodes.push(w);

            var posX = Math.floor(Math.random() * window.innerWidth);
            if (posX < 50) {
                posX = 100;
            }
            if (posX >= window.innerWidth - 100) {
                posX = window.innerWidth - 100;
            }

            w.moveTo(posX, 0);
        },

        /**
         * 开始游戏
         */
        start: function () {

            var _this = this;
            var defen = document.getElementById('score');

            //监听键盘事件
            document.onkeydown = function () {
                var alphabet = String.fromCharCode(event.keyCode); //获取键盘敲中的字母
                for (var i = 0, len = _this.nodes.length; i < len; i++) {
                    if(!_this.nodes[i]) {
                        continue;
                    }
                    if (alphabet === _this.nodes[i].alphabet) {
                        _this.nodes[i].reset();
                        scoreCounter.incScore();
                        _this.nodes[i] = null;
                        break;//只消除一个字母

                    }
                }
                defen .innerHTML = "Scores ：" + scoreCounter.getScore();
            };

            //游戏主循环
            setInterval(function () {
                _this.runFrame();
            }, 500);

            //游戏时间动态改变
            var gameT =null;
            gameT = setInterval(
                function(){
                    var shijian = document.getElementById("gameTimer");
                    gameTimer.decGameTime();
                    shijian.innerHTML = "GameTime : " + gameTimer.getGameTime();
                },
                1000);

        }

    }

    /**
     * 计分器
     */
    var scoreCounter = {
        score: 0,
        incScore: function () {
            this.score++;
        },
        getScore: function () {
            return this.score;
        }
    };

    /**
     * 计时器
     */
    var gameTimer = {
        gameTime:20,
        decGameTime: function(){
            if (this.gameTime>0){
                this.gameTime--;
            }else if(scoreCounter.getScore()>=15){
                var msg = confirm("恭喜你！过关成功！是否重新开始？");
                clearInterval( director.timer);
                clearInterval(director.gameT);
                if(msg){
                    window.location.reload();
                }else{
                    window.close();
                }
            }else if(scoreCounter.getScore()<15){
                var msg = confirm("游戏时间到！此次游戏失败，是否重新开始？");
                clearInterval( director.timer);
                clearInterval(director.gameT);
                if(msg){
                    window.location.reload();
                }else{
                    window.close();
                }


            }

        },

        getGameTime:function(){
            return this.gameTime;
        }

    };


    function startGame() {
        var msg = confirm("游戏规则：按压键盘上相应字母可消除屏幕上的对应字母，20秒内成功消除15个即可过关！");
        //clearInterval( director.timer);
        //clearInterval(director.gameT);
        if(msg){
            //window.location.reload();
            director.start();
            var fenshu = document.getElementById('score');
            fenshu.innerHTML = "Scores ：" + scoreCounter.getScore();
            var startB = document.getElementById("start");
            startB.style.display = 'none';
        }else{
            window.close();
        }

    }
    startGame();
    //director.start();

</script>
</body>
</html>