以技术预研的心态做的一个东东。基于 【双密度松弛算法】

目前来看应用价值不大,更多的是扩展一些思路,扩大前端方向,或者说是js能做的事的范围。大家路过围观一下就好。

源码不多,托管在 github/hongru/fluid上,感兴趣的可以大致看一看。

废话不多说,直接进入正题,这篇文章主要为大家讲解一下一个类似【Z-Type】的html5小游戏的开发思路。

【Z-Type】不知大家是否有玩过,Impactjs 的一个演示demo。一个需要99$的html5游戏框架。咱们暂且先不管他实现的思路,以下我们按自己的思路来一步步实现。

以下实例基于AlloyTeam团队游戏底层库【Laro】 实现.

【演示Demo】 (Firefox3.4+,Chrome10+,safari10+ 测试通过)

你是否遇到过这样的情景:

1、用gif格式的loading菊花会有背景颜色,与页面背景格格不入
2、于是,设计师给你一帧一帧变化的透明png合图,你能想到的就是用JS来控制
3、最终,你会发现用JS控制的loading菊花,对网页性能有一定的影响

        好在现在,这个HTML5到来的时代,如果你不用考虑浏览器兼容问题,你就可以用CSS3轻轻松松实现透明loading菊花的加载效果,下面的Step By Step 会让你茅塞顿开:

TAT.Cson 圈泡泡游戏的几何知识点
In HTML5,HTML5游戏,JavaScript on 2012年04月18日 by view: 3,547
1

当我们进行游戏开发时,很多时候都需要用到一些几何知识,该文主要是抛砖引玉,通过一个HTML5的圈泡泡小游戏介绍下游戏开发中一些几何知识的运用。 游戏demo可以看这里:HTML5圈泡泡小游戏demo 游戏中一个最主要的操作就是通过鼠标的圈选,捕获选区内的小球并得分(或扣分)。我们一步步来分析这个操作。

Step1:画笔的形成。

首先是,怎样通过鼠标画出一个条条曲线?我们知道,HTML5游戏的开发中,我们看到游戏里每个动作的更新,都是通过循环中每一帧对游戏元素属性的更新而形成的。因此我们只需要在每次帧更新的时候根据鼠标上一次更新时的位置与本次帧更新的位置画出一条线段,那么在游戏无数次的循环中,鼠标划过的位置就由N条线段连成一个轨迹,如果我们把线段都绘制出来,画布上就是一条条曲线或一个个圈。 因此我们也可以说,曲线是一条由多条线段首尾相连的线段组成的 。

什么是本地存储

以下内容从网上抄来的

HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。
简单的说本地存储是HTML5的一部分。更为详细准确的说是本地存储过去是HTML5的标准中的一部分,而后来由于有些工作组的人表示HTML5太庞大了,于是就剥离出来作为一个单独的标准。这听起来好像是把一块馅饼分成很多块目的是为了减少总的卡路里……

为什么要用本地存储

其实前面已经提到了,用本地存储有这些好处

  • 本地存储和cookie一样提供了把数据保存到本地的能力,页面刷新或者关掉浏览器后,数据依然存在
  • 大!虽然不同浏览器的标准可能不一样,主流的一般都在5~10M,比cookie的4k强多了
  • 本地存储的数据不会被发到服务器,与cookie相比,节省带宽,加快响应速度

所以,如果需要保存一些数据到用户的浏览器,而这些数据又不需要每个请求都提交给服务器,不妨考虑使用本地存储。

如何使用

首先,得检查浏览器是否支持本地存储
可以通过检测window下面是否有localStorage字段来判断,但是在IE下,本地文件是不能访问localStorage的,此时localStorage字段为空,所以还要加上判断

还有一种情况,假如页面里有id为localStorage的元素,某些浏览器可以通过window.localStorage索引到这个元素-___,-||
为了避免你的代码在遇到如此蛋疼的DOM时跪掉,我建议是使用特征检查


首先说这是一个神奇的播放器,为什么神奇呢,先直接看最终成果:



点击我查看demo

TAT.melody 从Audio标签看webkit内存上涨的问题
In HTML5 on 2012年02月28日 by view: 1,923
0

这段时间做一个关于widget的项目,忙了一两个月了。在临发布的时候突然出现一个问题,一个音乐widget的内存不断上涨,且不会回落,最终导致这个widget只能下架。
因为我在ie9没发现内存上涨的问题,所以我觉得这是webkit内存管理的问题。所以一直没去看他,等待客户端的同事去解决。直到有一天,客户端同事说了一个方法,说防止src频繁切换,建议延迟1s去设置audio标签的src。开始我想这不是web的原因,所以给予断然拒绝,另外也是怕维护麻烦。但是,我还是进行了尝试。没想到效果出奇的明显,内存基本不会上涨了。
从这件事,我意识到了,凡事不能说绝对。因为它包括了太多情况,涵盖了很长的一段时间,而且使你不能有回旋的余地。
下面说说解决的方法。因为我们想要的是src不频繁切换,所以单单做延迟是不会有任何结果的。关键是要使一首歌保持1s以上才会去设置它的src。这句话我说来简简单单,但是要真正理解是需要很深入的思考的。代码我会在最后面给出来,大家可以自己试着写写,然后对照一下。
通过客户端同事的进一步研究发现,发现对Dom对象的某个属性就行频繁操作就会导致上涨。这里还有个比较明显的属性就是buffered,大家可以通过设置一个频率为20ms的定时器去读取这个属性,就可以进行测试了。
以此类推,是否对于img标签也有类似的情况呢。这个有待各位同仁进行验证。
相关代码:

飞行射击类游戏很常用的追踪子弹,或者塔防里面固定炮台打 怪物的时候,为了保证子弹不会打空,追踪是必要的。
然而,这是极其简单的事情。
在每一帧里判断当前子弹和目标位置的距离和方向,不断修正 速度方向即可。

【已知】
canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式,jpeg格式的现代浏览器基本也支持,但是支持的不是很好。

 一、些许前提

最近在制作一个Web应用, 其中用到了HTML5的离线应用功能(offline application), 离线应用的概念就不再阐述, 可以查看这两篇文章:

http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/

http://www.mhtml5.com/2011/02/583.html

这里主要讨论它的更新问题. 首先浏览器是有两部分cache的, browser cache 和app cache, browser cache就是常说的浏览器缓存, app cache是离线应用的缓存.