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的新模式。希望对你有所帮助。如有问题请留言
JavaScript 运用ES2015特性的小项目的更多相关文章
- web实践小项目<一>:简单日程管理系统（涉及html/css，javascript，python，sql，日期处理）
暑假自学了些html/css,javascript和python,苦于学完无处练手几乎过目即忘...最后在同学的建议下做了个简单日程管理系统.借第一版完成之际,希望能将实践期间犯过的错误和获得的新知进 ...
- IOS－小项目（饿了么 网络部分 简单实现）
在介绍小项目之前,在此说明一下此代码并非本人所写,我只是随笔的整理者. 在介绍之前先展现一下效果图. 看过效果图大家应该很熟悉了,就是饿了么的一个界面而已,值得注意的是,实现时并没有采用本地连接,而是 ...
- 前端学习 第三弹： JavaScript语言的特性与发展
前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...
- 【PHP小项目使用MVC架构】
小项目名称是雇员管理系统. mvc是一种项目的开发模式,中文名称为模式视图控制器,是强制程序员将数据的输入.处理.输出分开的一种开发模式. 在这个小项目中,控制器使用service作为后缀名. 项目u ...
- Web前端开发：SQL Jsp小项目（一）
Jsp的学习算是告一段落,针对这段时间的学习,写了一个Jsp小项目来巩固学到的知识. 框架示意图 User list process UserAdd process 需要的界面效果: 需要工具:Ecl ...
- 《Javascript网页经典特性300例》
<Javascript网页经典特性300例> 基础篇 第1章:网页特性 刷新.后退.前进.关闭.标题.跳转禁止网页放入框架动态加载js避免浏览器使用缓存加载页面 第2章:DOM操作 根据n ...
- 小项目：聊天室 （jQuery，PHP，MySQL）
这几天写了一个小项目,初衷是自己写一个有前端,有后端的东西练练手,所以,实际意义并不大,只是拿来试试手而已. 我对这个聊天室的构想是这样的:先建两个数据库,一个保存用户名和密码,另一个保存用户名和发送 ...
- JavaScript的动态特性(通过eval,call,apply和bind来体现)
JavaScript的动态特性(通过eval,call,apply和bind来体现) JavaScript是一种基于面向对象的.函数式的.动态的编程语言.现在发展到已经可以用在浏览器和服务器端了. 这 ...
- 最近做的一个Spring Boot小项目，欢迎大家访问 http://39.97.115.152/
最近做的一个Spring Boot小项目,欢迎大家访问 http://39.97.115.152/,帮忙找找bug,网站里有源码地址 网站说明 甲壳虫社区(Beetle Community) 一个开源 ...
随机推荐
- CentOS 6安装Oracle报错解决方案
1. Preparing to launch Oracle Universal Installer from /tmp/OraInstall2017-05-23_04-18-48AM. Please ...
- Docker 入门之创建service（一）
在一个分布式应用中,我们把应用的不同层叫做"Services".比如,一个视频共享应用,它包含存储数据到数据库的服务,用户上载后后台进行的视频解码服务,前端服务等等. 然而,一个服 ...
- Angular CurrencyPipe货币管道关于人民币符号￥的问题
做项目(Angular项目)时经常需要处理金额的显示,需要在金额前面加上￥,但又不想用简单在前面加"￥"这么不优雅的方式,于是想到了CurrencyPipe.毕竟,Currency ...
- tox环境安装
ubuntu 下安装tox环境 1.apt-get install pip 2.pip install tox 3.git git clone https://github.com/openstack ...
- 分享一个Appium/selenium测试报告模板
介绍 这个模板改编自 这位外国老哥 效果图 错误截图 录像 失败的case可以点击"view"查看报错信息, 也可以点击screenshot查看截图信息,更可以点击replay查看 ...
- 从零开始学习前端JAVASCRIPT — 14、闭包与继承
一.闭包 1 . 概念:闭包就是能够读取其他函数内部变量的函数.在JS中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解为”定义在一个函数内部的函数”. 2 . 闭包的特点 1)可以读取 ...
- 用开源的 ffmpeg 实现屏幕录像机
在我看来,FFmpeg 绝对是一个很酷的应用.那么,它究竟有什么用呢?简单地讲,FFmpeg 相当于一个屏幕录像机.你可以使用它将屏幕上的操作过程录制下来,然后再将其播放给别人看.我们可以利用它制作教 ...
- Windows下基于ADS+J-Link 的ARM开发环境搭建
在一般ARM编程教学和实验环境里,一般采用 ADS加+并口转Jtag板+H-Jtag的开发环境.但是这种方法最大缺点是需要机器上有一个并口.现在无论PC还是笔记本都很难有并口,因此采用USB接口调试器 ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- .Net Core下 Redis的String Hash List Set和Sorted Set的例子
1.新建一个.Net Core控制台应用程序,用Nuget导入驱动 打开程序包管理控制台, 执行以下代码. PM> Install-Package ServiceStack.Redis 即可添加 ...