<!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>
js-中介者模式-demo
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.