1. Web講座 第９回

2. 前回のおさらい
enchant.js
次回の講座

3. 前回の講座では、関数とスコープについて説明しました。

4. JavaScriptで関数を定義する場合は
functionを使用する
function 関数名(){}
また、関数を呼び出す場合は
関数名();と記述する

5. スコープは変数の有効範囲を示す
グローバル変数とローカル変数が
同じ変数名であった場合は
最も内側にある関数内の変数が優先される
（スコープチェーン）

6. 簡単にゲームやアプリを開発できる
HTML5+JavaScriptフレームワーク

7. 「 http://enchantjs.com/ja/download-ja/ 」

8. 1. ダウンロードしたenchant.jsのzipファイルを解凍
2. 任意の場所に作業用フォルダを作成
3. 作業用フォルダにjsフォルダとimgフォルダとcssフォルダを
作成
4. Jsフォルダに解凍したzipフォルダ内にある「enchant.js」を
入れる（enchant.js-builts-0.8.1/build/enchant.js）
5. imgフォルダに解凍したzipフォルダ内にある「chara1.png」
を入れる（enchant.js-builts-0.8.1/images/chara1.png）

9. 作業用フォルダ内にindex.html
jsフォルダにmain.js
cssフォルダにui.css
をそれぞれ作成する

10. index.html

11. main.js

12. ui.css

14. enterframe内に左に動けるように書き換えてみよう

16. Spriteは画像を操作するためのもので引数はサイズを表す
変数名.frameとすることで32x32の区分で画像を抽出できる
０ １ ２ ３ ４
５ ６ ７ ８ ９
１０ １１ １２ １３ １４

17. クラスを使うことで複数の物体を
簡単に動かすことができる

21. enchant.jsでは当たり判定を検出する
関数が用意されている
intersect関数とwithin関数である
intersect関数は画像全体を当たり判定を行い
within関数は各画像の中心距離を
指定して当たり判定行なう

22. intersect関数

23. intersect関数

24. within関数
中心距離

25. within関数

26. enchant.js - チュートリアル
http://enchantjs.com/ja/tutorial/lets-start-enchant-js/
enchant.js - API
http://wise9.github.io/enchant.js/doc/plugins/ja/index.html
enchant.js - overview
http://enchantjs.com/ja/resource-ja/overview/
ドットインストール – enchant.js
http://dotinstall.com/lessons/basic_enchant_js_v2

27. ７月１５日
enchant.jsについて