Base(基本)

基礎です.

1. enchant.js のテンプレートを用意しよう

Entity(エンティティ)

表示物系の基底クラスです. 内部で DOM を持っているので表示はもちろんのこと CSS との連携なんかもできちゃいます.

1. Entity を生成してSceneに追加しよう
2. Entity の幅を変えてみよう
3. Entity の高さを変えてみよう
4. Entity の背景色を変えてみよう(string)
5. Entity の背景色を変えてみよう(hex)
6. Entity の背景色を変えてみよう(rgb)
7. Entity の背景色を変えてみよう(hsl)
8. Entity を透明にしてみよう
9. Entity の位置を変えてみよう(x, y)
10. Entity の位置を変えてみよう(moveTo)(推奨)
11. Entity の位置を変えてみよう(moveBy)(推奨)
12. Entity をランダムな位置に表示してみよう
13. Entity をたくさん表示してみよう
14. カラフルな Entity をランダムな位置に表示してみよう
15. Entity の className を使って CSS と連携してみよう
16. Entity と CSS を連携して円を描画してみよう
17. Entity と CSS を連携して Hover 演出させてみよう
18. Entity と CSS を連携してアニメーションさせてみよう

EventTarget(イベントターゲット)

イベント関連の機能を持ったクラスです. 上で解説した Entity もこのクラスを継承しているのでひと通り機能を使うことができます.

1. 更新イベントリスナを登録しよう(on~ version)
2. 更新イベントリスナを登録しよう(addEventListener version)
3. タッチイベントリスナを登録しよう(on~ version)
4. タッチイベントリスナを登録しよう(addEventListener version)
5. 独自イベントリスナを登録, 発行しよう
6. 登録したイベントリスナを削除しよう
7. 登録したすべてのイベントリスナを削除しよう
8. イベントに登録した無名関数を削除しよう

Sprite(スプライト)

画像を表示する機能を持ったクラスです. 画像をグリッドで区切ってフレームアニメーションなんかも簡単にできる便利なクラスです.

1. Sprite を表示しよう
2. Sprite を移動させてみよう
3. Sprite を回転させてみよう(rotation version)
4. Sprite を回転させてみよう(rotate(deg) version)
5. Sprite を拡縮させてみよう(scaleX, scaleY version)
6. Sprite を拡縮させてみよう(scale(x, y) version)
7. Sprite を透明にしてみよう
8. Sprite をフレームアニメーションさせてみよう
9. Sprite をフレームアニメーションさせながら移動させてみよう
10. Sprite を画面外に出ないように制御しよう
11. Sprite の進行方向に応じて表示する向きを変更しよう

Surface(サーフェス)

canvas 機能をラップしたクラスです. context を持っているのでそのまま Canvas 系の API が使えます. また, Sprite の image に代入すると画像のように使えるので非常に便利です.

1. Surface を使ってCanvas描画してみよう
2. Surface に円を描画しよう
3. Surface に三角形を描画しよう
4. Surface に画像を描画しょう
5. Surface から1ピクセルを取得しよう
6. Surface に1ピクセルを設定しよう
7. Surface に描画した画像をモノクロにしてみよう
8. Surface に描画した内容を画像として出力しよう

Label(ラベル)

ラベルクラスです. テキストなどを画面に表示する際に使用します.

1. Label(文字)を表示しよう
2. Labelの文字色を変えてみよう
3. Labelのフォントを変えてみよう
4. Labelを透明にしてみよう

キー入力/タッチ操作

操作系の tips です.

1. キーボードに応じて Sprite を移動させてみよう
2. 移動する Sprite を画面外に出ないよう制御してみよう
3. ボタンにキーを割り当ててみよう
4. タッチした位置に Sprite を移動させてみよう
5. タッチした位置が Sprite の中心になるよう移動させてみよう
6. タッチしている位置に Sprite を移動させてみよう
7. タッチしている位置に徐々に Sprite を移動させてみよう
8. タッチした Sprite を消してみよう
9. バーチャルパッドを使って Sprite を移動させてみよう

Group(グループ)

複数の Node を子に持つことができるクラス. たくさんの Entity をグループとして管理するときなどに使用します.

1. Group を使って親子関係を付けてみよう
2. Group を使ってスプライトをまとめて動かしてみよう

Sound(サウンド)

音を再生することができるクラスです. 内部で audio 要素をラップしています.

1. 音を再生しよう
2. 音の再生を停止してみよう
3. 音の再生を中断してみよう
4. 音のボリュームを変更しよう(保留)

Class(クラス)

クラスを作成するメソッドオブジェクトです.

1. クラスを生成しよう
2. Sprite クラスを継承して独自のクラスを生成しよう

Entity 中級

1. Entity 同士で衝突判定をしよう(矩形判定)
2. Entity 同士で衝突判定をしよう(円判定)

その他

1. ゲーム画面の背景色を変えてみよう
2. ゲームの fps を変えてみよう
3. ゲームの経過フレーム数を取得しよう
4. ゲームの経過秒数を取得しよう
5. ゲームを停止, 再開させてみよう(保留)
6. ゲームの開始, 終了画面を追加しよう
7. ゲーム画面を拡縮させないようにしてみよう

避けゲー(KUMAvoid)

プレイヤー(クマ)が自動で床を走ります. タッチすると進行方向が反転します. 敵がピョンピョン跳ねながら襲ってくるので避けつづけて下さい.

どれだけ長時間避け続けられるかを競うシンプルなゲームです.

1. 背景を表示しよう
2. プレイヤーを生成, 表示しよう
3. プレイヤーが自動で走るようにしよう
4. プレイヤーが画面からはみ出ないよう制御しよう
5. 画面をタッチするとプレイヤーの進行方向が反転するようにしよう
6. 敵を生成, 表示しよう
7. 敵を移動, ジャンプさせよう
8. 敵が画面からはみ出ないよう制御しよう
9. プレイヤーと敵の衝突判定をしよう
10. プレイ経過時間を表示しよう
11. BGM, SE を追加しよう
12. ゲームの開始画面と終了画面を追加しよう

タッチゲー(クマタッチ)

ランダムに動きまわるクマをタッチしてスコアを稼ごう. 制限時間内にどれだけ多くのスコアを獲得したかを競うゲームです.

1. クマクラスを生成しよう
2. クマがランダムな方向に動くようにしよう
3. クマが画面外に出ないようにしよう
4. クマをフレームアニメーションさせよう
5. クマをタッチで消せるようにしよう
6. クマを特定時間経つと消えるようにしよう
7. クマをタッチした際にスコアを表示するようにしよう
8. スコア, 時間を表示しよう
9. タッチすると減点になるクマ子クラスを生成しよう
10. スケボーに乗って猛スピードで動きまわるクマ也クラスを生成しよう
11. 変わった動きをするクマイケルクラスを生成しよう
12. 最後にタッチした位置に点を表示しよう
13. BGM, SE を追加しよう
14. ゲームの開始画面と終了画面を追加しよう