可在 html5 游戏中使用的 js 工具库
可在 html5 游戏中使用的 js 工具库
使用 cocos2d-js 3.0 开发游戏项目两三个月,积累了几个有意思的工具库,在此做一点小记。
Date/Time
在网络游戏中,不可避免地会使用到一些与日期和时间相关的功能,例如活动倒计时之类的。简单的做法是自己处理时间函数,或者使用 new Date() 来完成计算。但常常会遇到一些坑,导致各种异常。而且处理 strftime 之类的工作也没有想像中的容易。虽然 npm 上有不少现成的库可以使用,但这里要推荐一个超级棒的时间工具:moment.js
Parse, validate, manipulate, and display dates in javascript.
moment.js 拥有你想得到的所有日期/时间功能。此外最重要的是,它提供了 durations 概念,例如要倒计时 10 分钟,可用 moment.duration(10*60*1000)
来创建这样一个时间段。并且可以使用humanize()
输出可读的字串符:
moment.duration("00:10:00").humanize(); // 10 分钟
moment.duration(10*60*1000).humanize(true); // 10 分钟内
moment.duration(-10*60*1000).humanize(true); // 10 分钟前
我曾使用过 new Date(-10*60*1000)
来创建类似的时间段,但在不同的运行环境中的表现不太相同——特别是使用负数时间段的时候,在
cocos2d-x jsb 环境下会出现问题。此外 Date 还会受到不同设备上的时区影响。
此外,还可以用 moment(/*now*/).from("2012-12-20")
来直接获得到某两个时间差的文字描述。
P.S.
moment.js 支持多国语言的时间格式化。使用 moment.locale("zh-CN");
可以使用简体中文输出时间字符串。
Utils
最最实用的工具库,非 underscore.js 莫属了。它提供了大量便携的工具函数用于处理数组(arrays)、对象(objects)和函数(functions)
Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.
尤其重要的一点是,它还能很好的处理集合(collections)——可以是数组或字典结构的对象!这大大方便了程序的组织方式。
P.S.
underscore.js 的 String 扩展: underscore.string
Misc
另外一个不得不提的工具就是 Async.js
Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript.
在游戏中有许多异步工作,例如资源分块加载以及多个网络请求的组合操作。如果只用回调函数(callback)来处理的话,不得不写出一堆由花括号堆砌的晦涩难懂的嵌套函数(怪不得说 javascript 是回调的炼狱)。于是 Async.js 闪亮登场,漂亮地解决了这一难题。
它将多个异步操作用很简单的结构进行组装,在内部完成异步操作的结果处理,并提供了类似 underscore.js 的接口,对一组异步操作进行统一处理,大大简化了开发的工作量。
正是有了这些工具,才使得 javascript 从一款玩具语言变成如些成熟。
标签: javascript
转自:http://blog.mutoo.im/2014/09/javascript-utils-in-html5-game.html
可在 html5 游戏中使用的 js 工具库的更多相关文章
- HTML5游戏开发引擎Pixi.js新手入门讲解
在线演示 本地下载 这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...
- Lo-Dash – 替代 Underscore 的优秀 JS 工具库
前端开发人员大都喜欢 Underscore,它的工具函数很实用,用法简单.这里给大家推荐另外一个功能更全面的 JavaScript 工具——Lo-Dash,帮助你更好的开发网站和 Web 应用程序. ...
- 如何手写一个js工具库?同时发布到npm上
自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法 于是就创建了一个名为learnjts的项目,在空余时间也写 ...
- HTML5游戏开发引擎Pixi.js完全入门手册(一)框架简介及框架结构分析,作者思路剖析
前言: 最近无聊在淘宝弄了个小店,打算做一个兼职.遇到一个客户,要我帮忙拷贝一个html5游戏.. 我这人有一个习惯,拿到自己没见过的东西.都会去研究一番.去网上查了下发现,资料都是英文版.感觉极度不 ...
- HTML5游戏中动画帧的概念理解
最近在弄一个HTML5游戏,在学习过程中,总结出这个帧结构. HTML5游戏最重要也就是对帧的理解. 容器:Canvas 一个画布 sprite:一个canvas上有多个动画,每个动画对象就是一个An ...
- web前端之html5开发中常用的开发工具
正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发 ...
- CSV.js – 用于 CSV 解析和编码的 JS 工具库
逗号分隔值(CSV )文件用于以以纯文本的形式存储表格化数据(数字和文本). CSV 文件包含任意数量的记录,通过某种换行符分隔,每条记录由字段,其他一些字符或字符串分隔,最常用的是文字逗号或制表符. ...
- JS工具库之Lodash
破狼 JavaScript工具库之Lodash 2015-04-11 16:08 by 破狼, 235 阅读, 2 评论, 收藏, 编辑 你还在为JavaScript中的数据转换.匹配.查找等烦恼吗? ...
- HTML5游戏开发引擎Pixi.js完全入门手册(二)元素对象属性解析
下面,我们来解释下PIXI里面对象的各个属性.. 首先我们来看看这个各个元素对象里面到底长啥样.. alpha Number 整个舞台对象的透明度. buttonMode Boolean 渲染是否作为 ...
随机推荐
- TransH中的Hinge Loss Function
Hinge Loss Function Hinge Loss 函数一种目标函数,有时也叫max-margin objective. 在Trans系列中,有一个 \[ \max(0,f(h,r,t) + ...
- oracle中的dual表
dual表是和Oracle数据字典一起创建的.它实际上只包含dummy这一个column,并且只有一条记录,这条记录的值是X. X dual表的owner是SYS,但所有用户都可以访问它.Althou ...
- wifi hand
wpa airmon-ng start wlan0airodump-ng -c 6 -w logs wlan0monaireplay-ng -0 5 -a ap'mac -c clink'mac w ...
- [bzoj2302][HNOI2011]problem c 递推,dp
[HAOI2011]Problem c Time Limit: 30 Sec Memory Limit: 256 MBSubmit: 949 Solved: 519[Submit][Status] ...
- [POJ2417]Discrete Logging(指数级同余方程)
Discrete Logging Given a prime P, 2 <= P < 2 31, an integer B, 2 <= B < P, and an intege ...
- 【CF1025C】Plasticine zebra(模拟)
题意: n<=1e5 思路:可以证明答案即为极长交替出现的串长度之和 需要注意其实这个串是一个环,复制后再做 #include<cstdio> #include<cstring ...
- JSTL <C:if></C:if> 和<C:ForEach></C:ForEach> 入门级~
一.<C:If>标签:条件判断语句 <c:if test="${objList.nodetype == 1}">上级节点</c:if> te ...
- C++11学习笔记(5) —— override and final (转)
原文转自 http://blog.csdn.net/fire_lord/article/details/8540592 1.简介 C++为我们提供了继承和虚函数的重写特性. 在派生类中,重写虚函数不强 ...
- linux 下高精度时间
今天在公司代码中看到了使用select函数的超时功能作定时器的用法,便整理了如下几个Linux下的微秒级别的定时器.在我的Ubutu10.10 双核环境中,编译通过. /* * @FileName: ...
- du 查看 資料夾 佔用空間
查看 目前目錄使用的空間大小 du -h --max-depth=0 -h, --human-readable 查看 目前及下一屠的目錄 使用的空間大小 du -h --max-depth=1