阅读了《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的新模式。希望对你有所帮助。如有问题请留言

JavaScript 运用ES2015特性的小项目的更多相关文章

  1. web实践小项目<一>:简单日程管理系统（涉及html/css，javascript，python，sql，日期处理）

    暑假自学了些html/css,javascript和python,苦于学完无处练手几乎过目即忘...最后在同学的建议下做了个简单日程管理系统.借第一版完成之际,希望能将实践期间犯过的错误和获得的新知进 ...

  2. IOS－小项目（饿了么 网络部分 简单实现）

    在介绍小项目之前,在此说明一下此代码并非本人所写,我只是随笔的整理者. 在介绍之前先展现一下效果图. 看过效果图大家应该很熟悉了,就是饿了么的一个界面而已,值得注意的是,实现时并没有采用本地连接,而是 ...

  3. 前端学习 第三弹： JavaScript语言的特性与发展

    前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...

  4. 【PHP小项目使用MVC架构】

    小项目名称是雇员管理系统. mvc是一种项目的开发模式,中文名称为模式视图控制器,是强制程序员将数据的输入.处理.输出分开的一种开发模式. 在这个小项目中,控制器使用service作为后缀名. 项目u ...

  5. Web前端开发：SQL Jsp小项目（一）

    Jsp的学习算是告一段落,针对这段时间的学习,写了一个Jsp小项目来巩固学到的知识. 框架示意图 User list process UserAdd process 需要的界面效果: 需要工具:Ecl ...

  6. 《Javascript网页经典特性300例》

    <Javascript网页经典特性300例> 基础篇 第1章:网页特性 刷新.后退.前进.关闭.标题.跳转禁止网页放入框架动态加载js避免浏览器使用缓存加载页面 第2章:DOM操作 根据n ...

  7. 小项目：聊天室 （jQuery，PHP，MySQL）

    这几天写了一个小项目,初衷是自己写一个有前端,有后端的东西练练手,所以,实际意义并不大,只是拿来试试手而已. 我对这个聊天室的构想是这样的:先建两个数据库,一个保存用户名和密码,另一个保存用户名和发送 ...

  8. JavaScript的动态特性(通过eval,call,apply和bind来体现)

    JavaScript的动态特性(通过eval,call,apply和bind来体现) JavaScript是一种基于面向对象的.函数式的.动态的编程语言.现在发展到已经可以用在浏览器和服务器端了. 这 ...

  9. 最近做的一个Spring Boot小项目，欢迎大家访问 http://39.97.115.152/

    最近做的一个Spring Boot小项目,欢迎大家访问 http://39.97.115.152/,帮忙找找bug,网站里有源码地址 网站说明 甲壳虫社区(Beetle Community) 一个开源 ...

随机推荐

  1. Node.js 基础介绍（一）

    Node.js 学习笔记一) 简单介绍--名称 Node.js,平时听到有好几种叫法,node .Node.js.nodejs ,但是比较正式的称呼还是"Node.js",由于它是 ...

  2. levmar ndk 编译

         levmar是一个强大的和高效率的C/C++库,采用Levenberg - 马奎德(LM)优化算法, 主要是为了解决非线性最小二乘问题.官网是:http://users.ics.forth. ...

  3. C/C++语言简介之编程开发

    一.编译器 GCC:GNU组织开发的开源免费的编译器. MinGW:Windows操作系统下的GCC. Clang:开源的BSD协议的基于LLVM的编译器. Visual C++:Microsoft ...

  4. Yii的HTML助手

    Html 帮助类 基础 表单 样式表和脚本 超链接 图片 列表 任何一个 web 应用程序会生成很多 HTMl 超文本标记.如果超文本标记是静态的, 那么将 PHP 和 HTML 混合在一个文件里 这 ...

  5. UVA - 11624 多点bfs [kuangbin带你飞]专题一

    题意:某人身陷火场,总有k个点着火,着火点可向四周扩散,问此人能否逃离. 思路:可能有多个着火点,以这些着火点作为起点进行bfs,得到整个火场的最短距离,然后又以人所在坐标作为起点进行bfs,得到该人 ...

  6. flask中jinjia2模板使用详解2

    接上文 注释的使用 在jinjia2模板中,使用{# #}进行代码注释,如下所示 运行后发现,注释不会被render出来 去掉空行 两种方法可以去掉jinjia2模板中的空白行,一是设置jinjia2 ...

  7. 最简化搭建yum仓库

    在使用rpm安装软件包时,时常会遇到一些软件依赖性问题,如果是简单的一两个依赖性还是可以手动解决.要是出现大量的依赖性问题的话会让增大工作量.yum是一个很好的前端程序,可解决软件包相关依赖性,可在多 ...

  8. C# 枚举特性 FlagAttribute 的应用

    写在前面 枚举Enum 全称(Enumeration),即一种由一组称为枚举数列表的命名常量组成的独特类型.可以看出枚举的出现时为了使我们可以在程序中方便的使用一些特定值的常量,一般的使用大家都比较熟 ...

  9. 八爪鱼采集器︱加载更多、再显示20条图文教程（Xpatth、Ajax）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 由于代码布置采集器比较麻烦,又很早知道八爪鱼采 ...

  10. 关于用wubi安装Ubuntu，总是提示“没有定义根文件系统”的问题

    用diskgenius测试一下分区问题,就发现一些错误,所以怀疑可能就是因为这个分区参数错误导致WUBI安装不成功,费了大力气转移数据后,重新对硬盘分区,这里称赞一下diskgenius,的确不错,当 ...