Rythem 是什么

Rythem 是一个与 Fiddler 同类的软件，和 Fiddler 一样具有 代理抓包/替换 功能，与 Fiddler 最大的不同是 Rythem 是跨平台&开源的。

下载地址及源码：

• Windows 绿色版： https://github.com/AlloyTeam/Rythem/releases/download/Rythem_for_mac_remote_listen_bug_fix/Rythem-2013-11-15.7z
• MacOS 安装包：https://github.com/AlloyTeam/Rythem/releases/tag/filter
  已知此包在 MacOS 10.6.x(或以下) 下无法运行
  旧版用户如果是安装在/Applications 目录，可下载 updater(425KB) 进行更新，下载解压后运行 update 即可 
• Rythem 以 Qt 为基础框架，你可以到 github 上获取其源代码：https://github.com/AlloyTeam/Rythem

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

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

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

【演示 Demo】 （Firefox3.4+，Chrome10+，safari10+ 测试通过）

摘要

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

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

Step1：画笔的形成。

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

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

下面说说技术部分：

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