以圓桌騎士為例淺嘗HTML5遊戲開發

隨著XHTML的逐漸式微，Chrome，Safari，FireFox，Opera等現代瀏覽器正在積極完善HTML5實現，IE9也加入到標準的行列並將在今年上半年釋出正式版，HTML5時代來臨了。

在各種HTML5特性中，最吸引人的莫過於canvas標籤，其提供的繪圖API將顛覆以往web表現力匱乏的形象。隨著瀏覽器對canvas的普遍支援，利用canvas實現的web應用會出現爆發性的增長。

本人嘗試了使用canvas開發2d卷軸遊戲，與大家分享。

本文將不介紹canvas2d API的用法，如果想了解canvas2d API請訪問：https://developer.mozilla.org/cn/Canvas_tutorial

可行性研究

嘗試製作的遊戲是Knights of the Round 圓桌騎士。

圓桌騎士（knights of the round）是由CAPCOM公司於1991年推出的一款動作遊戲，對應遊戲平臺為街機，遊戲基板為CPS1。遊戲操控性上，圓桌騎士也更為注重一招一式地砍殺感覺，那種刀碰鎧甲的感覺相當曼妙。

現在的問題是，實現一個模擬器還是手工復刻。

用JS製作CPS1模擬器，涉及到ROM解碼，68000彙編等技術，此非能力所及故不可行。有能力的大牛不妨試試，現在已經有JS實現的NES模擬器了。最後選擇了純手工復刻。

下一個問題是幀率，60FPS還是30FPS？顯而易見，60比30更有表現力，視覺感受更流暢。

CPS1的幀頻是60FPS，要提高模擬度，幀頻必須達到60。帶來的問題是對效能的苛刻要求。

工欲善其事必先利其器

動作遊戲的核心在於各種精靈的動作。

需要一種工具，能夠方便的建立，編輯，精靈所需要的幀與動作。

在寫遊戲之前，必須完成基礎設施建設。為此開發了SpriteEditor工具，純JS開發，利用dataURIscheme與圖片另存為功能儲存json格式的精靈配置檔案。