TAT.岑安 【HTML5 Game】一步步开发一个TypeShot的打字游戏
In 未分类 on 2012年05月17日 by view: 8,479
5

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

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

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

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

【腾讯Web前端工具系列1】Live Reload – Chrome扩展
In 未分类 on 2012年05月03日 by view: 131,205
15

摘要

        Live Reload 是一个旨在提高web前端开发者开发效率的chrome扩展。当你在心爱的编辑器中更新页面资源(html,js,css)的时候,Chrome浏览器会自动获取最新的文件并重新载入,避免开发过程需要频繁按 F5 页面的烦恼。特别适合在双屏环境下进行 web 前端开发,不必在编辑器和浏览器之间不停的切换,大大提升开发体验。

TAT.Cson 圈泡泡游戏的几何知识点
In 未分类 on 2012年04月18日 by view: 3,686
1

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

Step1:画笔的形成。

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

TAT.melody css捕捉器的实现
In 未分类 on 2011年12月09日 by view: 3,519
2

这个工具的实现,是我长久以来的一个愿望,缘于之前看到的蓝色理想上的一个代码捕捉器。当时我下下来用了一下,没仔细研究,只觉得很难用,于是心底就有了一颗种子,希望有一天自己能开发出这样的工具。感谢伟大的谷歌,给了我一种优雅的实现方式——谷歌插件。

下面说说技术部分:

一开始用的是浏览器原生的css rules,可是后来发现谷歌的css rules是经过解析的,而ie的不是。由于对谷歌的偏爱,所以不得不另辟蹊径。凑巧之前又看到了谷歌的另一个插件——Web Developer,可以把页面引用到的css文件内容都显示出来。于是,在控制台把代码复制了下来,考到了我的js里面。它的实现原理是用ajax请求把所有css文件内容给抓下来,这涉及到一个跨域问题。不过不用怕,我们是插件嘛,当然有特殊的权利——跨域ajax请求。