今話題のHTML5 + JavaScriptベースのゲーム開発ライブラリ enchant.js にてもぐら叩きゲームを実装。
enchant.jsを使うと、簡易的なゲームはJavaScriptコーディングだけで完結出来ます。
（ちなみに、このゲームはHTMLを1行も書いていません）

アジェンダ

• enchant.jsとは
• このゲームの仕様
• ゲームプレイ！
• 制作のポイント
• まとめ

このゲームの仕様

出現位置

茶色の領域内でランダムにもぐらが出現。

出現速度

ゲーム開始直後は1秒間隔で出現し、以降5体叩く毎に0.1秒短縮（加速）。

クリア条件

SCORE10000以上。

ゲームオーバー条件

もぐら5体以上生存。

ゲームプレイ！

STARTをクリックするとゲームが開始します。
リプレイはStop→Playで出来ます。

enchant.jsでもぐら叩き - jsdo.it - share JavaScript, HTML5 and CSS

制作のポイント

基本的な使い方は公式ドキュメントに譲るとして、ちょっとしたTipsをご紹介。

Sprite（もぐら）のレイヤー前後関係を調整

スタイルは下記コードで設定可能

var mogura = [];

// もぐらを10体作成し、後から作成したものを上に表示 
for ( var i = -1;  ++i < 10; ) {
mogura[i] = new Sprite( 32, 32 );
mogura[i].image = game.assets[ 'http://enchantjs.com/assets/images/chara2.gif' ];

// _element.style.propertyName でスタイル設定可能 
// z-indexを調整 
mogura[i]._element.style.zIndex = i;

game.rootScene.addChild( mogura[i] );
}

Sprite（もぐら）をシーンから削除

もぐらを叩いたら消す

var mogura = new Sprite( 32, 32 );
mogura.image = game.assets[ 'http://enchantjs.com/assets/images/chara2.gif' ];

mogura.addEventListener( 'touchstart', function() {
// 親ノードから this（叩いたもぐら） を削除 
this.parentNode.removeChild( this );
}, false );

まとめ

enchant.jsの良いところ

• クロスプラットフォーム
• オブジェクト志向なので扱いやすい
• 拡張性が高い（プラグイン有り）
• addEventListenerを基本としたイベントドリブンなデザイン