js-中介者模式-demo

来源：互联网发布：剑网3万花捏脸数据编辑：程序博客网时间：2024/06/08 08:07
    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style>            .wrapper {                width:80%;                border: 1px solid #000;                margin: 0 auto;                text-align: center;            }            .wrapper .startSection button{                width: 80px;                height:30px;                background: #333;                color: deeppink;                margin:0 auto;            }            .wrapper .timeSection span{                color: deepskyblue;            }            .wrapper .playerSection p{                width: 60%;                height:30px;                line-height: 30px;                text-align: center;                background: #333;                color: deeppink;                margin: 0 auto 10px;              }        </style>    </head>    <body>        <div class="wrapper">            <div class="startSection">                <button type="" id="btn">开始</button>            </div>            <div class="timeSection">                <span id="time">倒计时3秒</span>            </div>            <div class="playerSection">            </div>        </div>        <script>            //玩家构造函数            function Player() {                this.name = '';                this.key = '';                this.points = 0;            }            Player.prototype.play = function () {                this.points += 1;                mediator.showPoints(this);//调用中介者对象,由中介者调用得分板            }            //中介者对象            var mediator = {                outerTimer : undefined,                innerTimer : undefined,                allPlayers: {//存放所有玩家对象信息                    length: 0,                },                init: function () {//入口函数                    var playerNum = parseInt(window.prompt('请输入玩家个数'));                    this.managePage(playerNum);                    scoreBoard.showPlayers(this.allPlayers);                    this.bindEvent();                },                managePage: function (num) {//根据输入的玩家个数生成玩家对象                    var newPlayer = new Player();                    while(num--){                        this.addPlayer();                    }                    console.log(this.allPlayers);                },                addPlayer: function () {//生成玩家对象                    var newPlayer = new Player();                    newPlayer.name = window.prompt('请输入玩家'+ (this.allPlayers.length + 1) + '姓名');                    var onlyKey = window.prompt('请为玩家'+ (this.allPlayers.length + 1) +'配置按键');                    while(this.allPlayers[onlyKey]) {                        onlyKey = window.prompt('请重新为玩家'+ (this.allPlayers.length + 1) +'配置按键');                    }                    newPlayer.key = onlyKey;                    this.allPlayers[newPlayer.key] = newPlayer;                    this.allPlayers.length++;                },                bindEvent: function () {//绑定事件                    var oBtn = document.getElementById('btn');                    oBtn.onclick = this.startGame.bind(this);                },                startGame: function () {                    if (this.outerTimer !== undefined || this.innerTimer !== undefined) {                        clearInterval(this.outerTimer);                        clearInterval(this.innerTimer);                        window.onkeyup = null;                        for (var dd in this.allPlayers) {                            if (this.allPlayers[dd] !== 'length') {                                this.allPlayers[dd].points = 0;                                var aa = document.getElementById('score'+ this.allPlayers[dd].key);                                if (aa !== null) {                                    aa.innerHTML = 0;                                }                            }                          }                    }                var oSpan = document.getElementById('time'),                    time = 3,                    overTime = 10,                    _this = this;                    oSpan.innerText = '倒计时3秒';                this.outerTimer = setInterval(function () {                    oSpan.innerText = '倒计时' + --time + '秒';                    if(time == 0) {                        clearInterval(_this.outerTimer);                        oSpan.innerText = 'Go!!!!';                        // this                        window.onkeyup = _this.keyPress.bind(_this);                            _this.innerTimer = setInterval(function () {                                oSpan.innerText = --overTime;                                if(overTime == 0) {                                    clearInterval(_this.innerTimer);                                    oSpan.innerText = 'gameOver';                                    window.onkeyup = null;                                }                            }, 1000)                        }                    }, 1000)                },                keyPress: function (e) {//监听键盘事件                    var event = e || window.event,                        // keyStr = String.fromCharCode(event.keyCode + 32);                        keyStr = event.key;                    this.allPlayers[keyStr].play();                },                showPoints: function (player) {//调用得分板更新poins函数                    scoreBoard.upDataPoins(player);                }                }            //得分板            var scoreBoard = {                element: document.getElementsByClassName('playerSection')[0],                showPlayers: function (allPlayers) {//根据存放的玩家对象allPlayers，生成所有dom结构                    var innerHTMLStr = '';                    for(var key in allPlayers) {                        if(key == 'length') continue;                        innerHTMLStr += '<p><span>'+ allPlayers[key].name +':</span><span id=score'+allPlayers[key].key+'>'+ allPlayers[key].points +'</span></p>';                    }                    this.element.innerHTML = innerHTMLStr;                },                upDataPoins: function (player) {//更新points值                    var oSpan = document.getElementById('score'+player.key);                    oSpan.innerText = player.points;                }            }            mediator.init();        </script>    </body>    </html>
阅读全文
0 0