js-中介者模式-demo
阿新 • • 發佈：2019-02-03
<!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>