可在 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 工具库的更多相关文章

  1. HTML5游戏开发引擎Pixi.js新手入门讲解

    在线演示 本地下载 ​这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...

  2. Lo-Dash – 替代 Underscore 的优秀 JS 工具库

    前端开发人员大都喜欢 Underscore,它的工具函数很实用,用法简单.这里给大家推荐另外一个功能更全面的 JavaScript 工具——Lo-Dash,帮助你更好的开发网站和 Web 应用程序. ...

  3. 如何手写一个js工具库?同时发布到npm上

    自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法 于是就创建了一个名为learnjts的项目,在空余时间也写 ...

  4. HTML5游戏开发引擎Pixi.js完全入门手册(一)框架简介及框架结构分析,作者思路剖析

    前言: 最近无聊在淘宝弄了个小店,打算做一个兼职.遇到一个客户,要我帮忙拷贝一个html5游戏.. 我这人有一个习惯,拿到自己没见过的东西.都会去研究一番.去网上查了下发现,资料都是英文版.感觉极度不 ...

  5. HTML5游戏中动画帧的概念理解

    最近在弄一个HTML5游戏,在学习过程中,总结出这个帧结构. HTML5游戏最重要也就是对帧的理解. 容器:Canvas 一个画布 sprite:一个canvas上有多个动画,每个动画对象就是一个An ...

  6. web前端之html5开发中常用的开发工具

    正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发 ...

  7. CSV.js – 用于 CSV 解析和编码的 JS 工具库

    逗号分隔值(CSV )文件用于以以纯文本的形式存储表格化数据(数字和文本). CSV 文件包含任意数量的记录,通过某种换行符分隔,每条记录由字段,其他一些字符或字符串分隔,最常用的是文字逗号或制表符. ...

  8. JS工具库之Lodash

    破狼 JavaScript工具库之Lodash 2015-04-11 16:08 by 破狼, 235 阅读, 2 评论, 收藏, 编辑 你还在为JavaScript中的数据转换.匹配.查找等烦恼吗? ...

  9. HTML5游戏开发引擎Pixi.js完全入门手册(二)元素对象属性解析

    下面,我们来解释下PIXI里面对象的各个属性.. 首先我们来看看这个各个元素对象里面到底长啥样.. alpha Number 整个舞台对象的透明度. buttonMode Boolean 渲染是否作为 ...

随机推荐

  1. TransH中的Hinge Loss Function

    Hinge Loss Function Hinge Loss 函数一种目标函数,有时也叫max-margin objective. 在Trans系列中,有一个 \[ \max(0,f(h,r,t) + ...

  2. oracle中的dual表

    dual表是和Oracle数据字典一起创建的.它实际上只包含dummy这一个column,并且只有一条记录,这条记录的值是X. X dual表的owner是SYS,但所有用户都可以访问它.Althou ...

  3. wifi hand

    wpa airmon-ng start wlan0airodump-ng -c 6 -w logs  wlan0monaireplay-ng -0 5 -a ap'mac -c clink'mac w ...

  4. [bzoj2302][HNOI2011]problem c 递推,dp

    [HAOI2011]Problem c Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 949  Solved: 519[Submit][Status] ...

  5. [POJ2417]Discrete Logging(指数级同余方程)

    Discrete Logging Given a prime P, 2 <= P < 2 31, an integer B, 2 <= B < P, and an intege ...

  6. 【CF1025C】Plasticine zebra(模拟)

    题意: n<=1e5 思路:可以证明答案即为极长交替出现的串长度之和 需要注意其实这个串是一个环,复制后再做 #include<cstdio> #include<cstring ...

  7. JSTL <C:if></C:if> 和<C:ForEach></C:ForEach> 入门级~

    一.<C:If>标签:条件判断语句 <c:if test="${objList.nodetype == 1}">上级节点</c:if>   te ...

  8. C++11学习笔记(5) —— override and final (转)

    原文转自 http://blog.csdn.net/fire_lord/article/details/8540592 1.简介 C++为我们提供了继承和虚函数的重写特性. 在派生类中,重写虚函数不强 ...

  9. linux 下高精度时间

    今天在公司代码中看到了使用select函数的超时功能作定时器的用法,便整理了如下几个Linux下的微秒级别的定时器.在我的Ubutu10.10 双核环境中,编译通过. /* * @FileName:  ...

  10. du 查看 資料夾 佔用空間

    查看 目前目錄使用的空間大小 du -h --max-depth=0 -h, --human-readable 查看 目前及下一屠的目錄 使用的空間大小 du -h --max-depth=1