HTML5 Code Jam团队作品：Happy Dolphin

周末参加了HTML5 Code Jam上海站，重温了苏州河边的阳光。经过十几个小时的团队努力，我们的游戏作品Happy Dolphin取得了最佳团队、最佳程序和最佳美工三项大奖，真心感谢团队所有成员，特别是美术郑芳MM和Neil同学。

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

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

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

HTML5版2D扫雷

体验不同感觉的扫雷：http://www.riaidea.com/html5/minesweeper/

HTML5版头像上传组件

头像上传是绝大多数的SNS、微博网站都有的一项功能，不过这个功能大部分都是用flash实现的。这个功能用HTML5的File API和Canvas配合也可以很好的实现：http://www.riaidea.com/html5/cropper/

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

源码下载：ImageCropper

HTML5 Canvas版的斗地主

此游戏是我继塔防游戏Runner后用CasualJS Framework开发的另一款HTML5 Canvas游戏。游戏处于试验性质，并非完整作品。因此有很多功能并未完成，如电脑出牌AI系统，积分系统等等，有时间我会继续完善。

游戏地址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。。。

游戏截图：

Javascript同源策略对context.getImageData的影响

在本机测试HTML5 Canvas程序的时候，如果用context.drawImage()后再用context.getImageData()获取图片像素数据的时候会抛出错：SECURITY_ERR: DOM Exception 18。这是Javascript同源策略（Same origin policy）造成的。目前发现这个问题在Firefox和Chrome中均存在。

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

HTML5 Canvas开发框架：CasualJS Framework

最新更新：
2011-3-6 增加显示对象碰撞检测DisplayObject.hitTestObject及示例。

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

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

HTML5尝鲜：用HTML5 Canvas开发的游戏Demo – Field Runner

一直从事Flash相关开发，但也一直在关注HTML5及相关技术。最近基于HTML5 Canvas并按照AS3的架构开发了一个JS游戏框架CasualJS（此框架正在开发完善中，编程方式也跟用as3开发非常类似，如果有朋友有兴趣的话以后可以考虑开源）。

不知道大家对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级，升级后攻击力大幅提升，攻击范围和速度小幅提升。武器也可出售，不过金钱减半。
* 地图全范围开放，支持堵路技术，延长敌人行进线路。