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>

View Code

游戏虽小，可以让你联系MVC模式编写代码，也熟悉一下ES5的新模式。希望对你有所帮助。如有问题请留言