JavaScript 运用ES2015特性的小项目
阅读了《JavaScript Pattern》这本书，里面讲了很多js的本质概念以及项目的设计理念。很值得一看，这是我做的摘要，有兴趣的看官可以点这里。里面讲解mediator pattern的时候用了一个小游戏来讲解。但没有使用到ES6相关特性，我认为此编程模式十分重要，且比较有意思，所以对其根据MVC进行了改写和加工。没有做CSS的处理，只关注逻辑。
玩法：
玩家点击指定按键则增加其分数。
需求：
1 用户可以自定义昵称和按键。
2 可以添加多用户，所有用户的昵称和按键都是唯一的。
3 游戏在3秒内完成，并弹出窗口，显示赢家及其分数。
首先定义Player，也就是MVC中的model，具有三个属性：name，key，score，所有玩家列表静态属性players
function Player(name,key) { this.name = name; this.key = key; this.score = 0; }; Player.players = [];
接下来是view，scoreBoard包含两个方法，一个init初始化，一个update更新列表
const scoreBoard = { init(players){ let elem = document.getElementById('result'); let msg = ''; for (const player of players) { msg += `<tr><td><strong>${player.name}</strong></td> <td>${player.key}</td> <td id=${player.key}>${player.score}</td></tr>`; } elem.innerHTML = msg; }, update(player){ let elem = document.getElementById(player.key);; elem.innerHTML = player.score; } }
最后是control部分，game包含4个方法：1 初始化init 2 添加按钮的回调onAdd 3 开始按钮回调onStart 4 按键监听
const game = { init(){ let nameInput,keyInput,addBtn, startBtn; addBtn = document.getElementById('addBtn'); startBtn = document.getElementById('startBtn'); addBtn.addEventListener('click',this.onAdd); startBtn.addEventListener('click',this.onStart); }, // 添加按钮事件 onAdd(){ nameInput = document.getElementById('name').value; keyInput = parseInt(document.getElementById('key').value); if (nameInput && keyInput) { //检验是否有重名或按键冲突 for ({name,key} of Player.players) { if (name === nameInput) { alert('cannot input same name'); return; } if (key === keyInput) { alert('cannot input same key'); return; } } const player = new Player(nameInput, keyInput); Player.players.push(player); scoreBoard.init(Player.players); document.getElementById('name').value = ''; document.getElementById('key').value = ''; } }, // 开始按钮事件 onStart(){ document.getElementsByTagName('div')[0].style.display = 'none'; setTimeout(()=>{ window.onkeypress = null; const max = Player.players.sort((player1,player2)=>player2.score - player1.score)[0]; alert(`game over, winner is ${max.name},score is ${max.score}`); },3000); window.onkeypress = game.onKeyPress; }, // 按键监听 onKeyPress(e){ for (const player of Player.players){ if (e.which === player.key) { player.score += 1; scoreBoard.update(player); } } } }
最后初始化游戏：
game.init();
以下是HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>按键小游戏</title>
</head>
<body>
<div>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Key</th>
</tr>
</thead>
<tbody>
<td><input id="name" placeholder="name"></td>
<td><input id="key" placeholder="key"></td>
</tbody>
</table>
<button id="addBtn">add player</button>
<button id="startBtn">start</button>
</div>
<div>
<table border="1">
<thead>
<tr>
<th>name</th>
<th>key</th>
<th>value</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
<script src="自行填写" type="text/javascript"></script>
</body>
</html>
游戏虽小，可以让你联系MVC模式编写代码，也熟悉一下ES5的新模式。希望对你有所帮助。如有问题请留言
