游戏的玩法山寨自松鼠接果子，被我们微创新出了海豚顶球，而且很多很好的点子由于时间问题没有实现。游戏支持绝大多数浏览器，如PC平台上的Chrome10+、Firefox3.6+、Safari5+、IE9+、Opera10+，移动平台上由于采用的是viewport自适应，IOS平台能自动缩放适配画面，所以ipad、iphone、itouch基本都能玩，Android平台无法自适应可能由于只显示部分画面而无法玩。

在技术方面，游戏采用了CasualJS的尚未发布的迭代版本QuarkJS框架，框架内部实现了Canvas和DOM两种渲染的无缝切换，而应用开发者无需为他们做任何适配工作。 这样使得我们的游戏可以只一套逻辑就能根据不同的平台的性能特性选择最佳的渲染方式。

游戏围观地址：http://www.riaidea.com/html5/dolphin/

功能说明：
* 可通过移动、缩放和旋转等操作设置图片的裁剪区域。
* 可实时多尺寸预览裁剪图片区域。
* 可通过ajax提交裁剪的图片到服务器。（本示例中不能进行此项操作）
* 如果你的浏览器不支持FileReader，此组件将无法正常运行。目前支持的浏览器有Firefox3.6+，Chrome10+等。

源码下载：ImageCropper

游戏地址1：http://www.riaidea.com/html5/ddz/
游戏地址2：http://www.html5idea.com/game/ddz/index.html (因在appengine上可能需要翻墙)
运行平台：支持HTML5 Canvas的浏览器，如Chrome9+，Safari5+，Firefox3.6+等，甚至可以在ipad上玩，推荐用Chrome体验（有音效）。
游戏素材：游戏素材均借自QQ斗地主HD。。。

游戏截图：

解决办法如下：
Firefox：在地址栏输入about:config，然后设置security.fileuri.strict_origin_policy为false。
Chrome：在命令行中运行 /path-to-chrome/chrome.exe –allow-file-access-from-files。

CasualJS Framework是根据ActionScript3.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架。目的是让你无缝的从AS3开发过渡到HTML5 Canvas开发。虽然Canvas提供了强大的绘图功能，但满足不了高级开发的需要。利用CasualJS的显示对象架构及渲染机制，你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象，就如同在用AS3开发一样愉快。

框架特性：
* 类似AS3的显示对象列表结构封装
* 基于帧的显示对象渲染机制
* 基于帧的MovieClip动画片段实现
* 内置简单的事件模型

演示和示例：
* 显示对象DisplayObject
* 影片剪辑MovieClip
* 按钮Button
* 绘制图形Graphics
* 显示对象碰撞检测Collision

* 塔防游戏Runner
* 斗地主

API文档：
* API在线文档：http://www.riaidea.com/html5/casualjs/doc/

下载：
* 完整版本：casualjs v0.1 (包括源码、API文档和示例)
* 源码也可到google svn下载：http://code.google.com/p/casualjs/

项目主页：
* http://code.google.com/p/casualjs/
* www.html5idea.com

这是一个开源框架并且刚刚起步，如果你有兴趣参与，请联系我。

不知道大家对ipad下的经典塔防游戏Field Runner有没有印象，下面就是我用Field Runner的一些素材(版权归原著所有，只是借用而已)以及这个框架做的一个简单的游戏demo，以此检验HTML5 Canvas做游戏的能力，有兴趣的可以到这里来体验一下：http://www.riaidea.com/html5/runner/ (因需加载近2M的图片资源，稍微有点慢），请用支持HTML5的浏览器浏览，如Firefox3.6，Safari5，Chrome等。

游戏功能更新：
* 单一敌人兵种步兵，可4方向行进及自动寻路。
* 单一防御武器格林机枪，可360度旋转瞄准射击。
* 消灭敌人可获得相应的金钱，可用来制造新的防御武器。
* 敌人逃跑会降低生命值，生命值为0则游戏失败。
* 游戏是无限模式，敌兵一波接一波源源不断，不过中途可暂停和继续。
* 简单的敌人升级系统，敌兵每2波增强一次，生命值大幅提升，金钱和积分小幅提升。
* 简单的武器升级系统，武器可升级共10级，升级后攻击力大幅提升，攻击范围和速度小幅提升。武器也可出售，不过金钱减半。
* 地图全范围开放，支持堵路技术，延长敌人行进线路。

Swfit是一个用Java开发的免费工具，它可以帮助你把图片、字体、声音、二进制数据等资源打包成一个swf文件(或swc文件)，你可以在运行时动态加载并访问这些资源，实现运行时共享库，减少主应用程序体积和加速下载。

Swift有两种使用方式，一是xml2lib，顾名思义，它可以根据指定的xml文件内容编译成swf/swc库文件。二是dir2lib，它则可以把指定文件夹中的所有有效资源编译成swf库文件。

xml2lib 使用方法：
java -jar Swift.jar xml2lib lib.xml lib.swf
java -jar Swift.jar xml2lib lib.xml lib.swc

xml资源库文件示例：
<?xml version="1.0" encoding="utf-8"?>
<lib allowDomain="riaidea.com">
<bitmapdata file="image/img1.png" class="PNGBitmapData"/>
<bitmapdata file="image/img2.jpg" class="JPGBitmapData"/>
<bitmap file="image/img3.jpg" quality="80" class="JPGBitmap"/>
<bitmap file="image/img4.png" compression="true" quality="80" class="PNGBitmap"/>
<sprite file="image/img5.png" class="PNGSprite"/>
<sprite file="image/img6.jpg" class="JPGSprite"/>
<flexmovieclip file="image/img7.jpg" class="FlexMC"/>
<flexcontainer file="image/img8.jpg" class="FlexContainer"/>
<font file="Arial.ttf" unicode="u+0020-007e,u+00a0-036f" class="ArialFont" />
<font file="msyh.ttf" char="微软雅黑" charRange="a-z,A-Z" unicode="u+5fae,u+8f6f,u+96c5,u+9ed1,u+4e00-u+4eff" class="MsyhFont" />
<sound file="sound/test.mp3" class="TestSound"/>
<bytearray file="data/test.xml" class="XMLData"/>
</lib>


支持资源类型有：

* bitmapdata – 把指定图片文件编译成flash.display.BitmapData类，支持参数有compression，quality。
* bitmap – 把指定图片文件编译成flash.display.Bitmap类，支持参数有compression，quality。
* sprite – 把指定图片文件编译成flash.display.Sprite类，支持参数有compression，quality。
* flexmovieclip – 把指定图片文件编译成mx.flash.UIMovieClip类，支持参数有compression，quality。
* flexcontainer – 把指定图片文件编译成mx.flash.ContainerMovieClip类，支持参数有compression，quality。
* font – 把指定的字体文件编译成flash.text.Font类，支持参数有unicode。
* sound – 把指定声音文件编译成flash.media.Sound类。
* bytearray – 把指定的任何文件编译成flash.utils.ByteArray类。

注意事项：

* 所有资源都有file和class两个参数。file指定资源文件路径，当使用相对路径的时候，要注意这个路径是相对于执行 Swift.jar命令的路径，而不是相对于xml文件的路径。class参数指定资源编译成swf后的as3类定义名，从而能够通过 ApplicationDomain.getDefinition()来获取资源定义。

* 在图片类型资源中，如果是png格式，当参数compression为true时，图片将被编码成带alpha通道DefineBitsJPEG3，默认压缩比率即quality为80，相比原始图片可以得到更高的压缩比率。这也是Flash CS5中的处理方式。

* 在编译font字体资源时，如果不指定unicode参数，Swift将把字体中的所有有效字型都编译到swf中。一般的字体比较小的如英文字体可以完全编译，而像中文字体这种大型字体建议根据需要指定嵌入字型的unicode范围，如\u4e00-\u9fa5等。

* 声音sound资源目前只支持11hz倍率的音频文件，如何11hz，22hz，44hz等。

* allowDomain参数可指定访问域，与Security.allowDomain()方法作用一致。

dir2lib 使用方法：
java -jar Swift.jar dir2lib d:/myLibDir/ d:/myLibDir/lib.swf
java -jar Swift.jar dir2lib d:/myLibDir/ d:/myLibDir/lib.swc

下载地址：http://swift-tool.googlecode.com/files/Swift-1.0.3.zip
详细介绍：http://code.google.com/p/swift-tool/

欢迎任何Bug和建议，谢谢。

功能演示：

项目首页: http://code.google.com/p/richtextfield
下载地址：http://code.google.com/p/richtextfield/downloads/list
API文档：http://www.riaidea.com/projects/richtextfield/api/

欢迎提交任何bug和建议。

为了方便演示，先看下面一张png图片，这张图片的大小为60k。

然后大家看下面一张jpg图片，它的背景是黑色，上半部分就是我们上面的png图片，而下半部分则是把这个png图片的填充为纯白色的效果，而这张jpg图片因为没有透明图层，因此大小要比上面的png图片小很多，只有30k。（要制作这样的图片很简单：把png导入ps中，修改高度为2倍，增加一个纯黑色的背景层，再选中png图层选区，填充一个纯白色的图层并移动到图片的底部就ok了。）

那么我们怎么把这张jpg图片实现png图片的透明效果呢？这里我们就要用到BitmapData类了。假设我们已经将上面的jpg图片加载到我们的flash中来的BitmapData为jpgBmpData，那么下面的代码就可以实现png透明效果：
var bmp:BitmapData = new BitmapData(jpgBmpData.width, jpgBmpData.height / 2);
//复制图片的真实像素区域
bmp.copyPixels(jpgBmpData, new Rectangle(0, 0, bmp.width, bmp.height), new Point());
//复制图片的下半区域的红色通道到新图的alpha通道里来实现透明
bmp.copyChannel(jpgBmpData, new Rectangle(0, bmp.height, bmp.width, bmp.height), new Point(), BitmapDataChannel.RED, BitmapDataChannel.ALPHA);
//清除原始图片内存
jpgBmpData.dispose();
jpgBmpData = null;
//得到透明图片后就可以任意处理了
var logo:Bitmap = new Bitmap(bmp);
addChild(logo);


至此大功告成了，flash中的效果截图如下：

最后要注意的是，并不是所有png图片都适合这种方式，要在速度和性能之间取得平衡才是最佳方案。

补充说明：一些朋友反映文中的演示png图片如果压缩成png8或者在flash中导出再使用就已经能得到20k左右压缩结果。是的，确实如此。当初看了一些植物大战僵尸的素材就随便选了这张简单的图来做演示，并没有考虑那么多。而事实上，明白的人应该知道，此文旨在演示一种方法，而且这种方法在传统游戏中也有使用。如果认为这种方法对你没有实用价值，那非常抱歉。