1.
enchant.jsでゲームを作る！
くまを追いかけるゲーム

2.
enchant.jsとは
• JavaScriptで書かれたライブラリー！
– いろいろ便利な機能が作られてる
• ９leapというサイトのゲームは全部これ
– h.p://9leap.net

3.
enchantを使うための準備！
• テキストエディタを準備
– SublimとかemacsとかTeraPadとか
• enchant.jsをダウンロード
– ダウンロードしたら解凍してね！
• Google
Chromeをダウンロード

4.
enchantでゲームを作るよ！
• enchant/examples/expert/getbanana/
index.htmlをChromeで開いてみよう！
• enchant/examples/expert/getbanana/main.js
テキストエディタを開いてみよう！

5.
enchantでゲームを作るよ！（準備）
黄色の枠線の部分を消してしまおう！

6.
enchantでゲームを作るよ！（準備）
黄色の枠線の部分を消してしまおう！

7.
enchantでゲームを作るよ！（２）
• main.js
– window.onload
=
funcDon()
の中身全部
– game.rootScene.addEventListener
(‘enterframe’,funcDon()の中身全部
消します！（カッコを消さないように注意！）

8.
JavaScriptの基本のルール
• 文章の最後には ; をつける
• 全部半角！
• //はコメントアウト
• 変数宣言はvarを使う

9.
main.jsの説明（１）
こんな感じになります！

10.
main.jsの説明（１）
• enchant();
– おまじない
• window.onload = function() ;
– window全体の設定
• game = new Game(320, 320);
– 画面サイズ

11.
main.jsの説明（２）
• game.fps
=
24;
– １秒間に何回画面更新するか
• game.preload(['chara1.gif','icon0.gif','bg.png'])
– 画像を使うための工程１
•
game.onload
=
funcDon();
– ゲームの設定をする

12.
main.jsの説明（３）
• game.rootScene.addEventListener('enterfram
e',funcDon()
– 毎フレーム呼び出される
– １秒間に２４回ここを実行する

13.
くまを表示してみよう！

14.
くまを表示してみよう！
• bear = new Sprite(32, 32);
– 画像を32×32にきって表示
• bear.image = game.assets['chara1.gif'];
– 画像を表示するための工程２
• game.rootScene.addChild(bear);
– 画像を表示するための工程３

15.
index.htmlを開いてみよう！
こんな感じで表示されたら成功です(*´ω｀*)

16.
index.htmlを開いてみよう！
表示されないって時はコンソールをみる(｀･ω･´)
これがエラー！
くまがいない！！(；・∀・)
メニュー
>
ツール
>
Java
Scriptコンソール
ここに行数

17.
くまに動いてもらおう！

18.
くまに動いてもらおう！
• bear.x
=
bear.x
+
1;
– bear.xはくまの画像の座標
– x座標を１ずつ増やす

19.
くまに動いてもらおう！
こっち向きに動いたらおｋ！

20.
違うくまがいい！茶色いや！

21.
違うくまがいい！茶色いや！
• bear.frame
=
5;
– ３２ずつで切った画像の５番目
– １こめから０，１，２，・・・となっている

22.
違うくまがいい！茶色いや！
シロクマになりました(‘∀`)
わかりやすいようにとりあえずくまは茶色に戻しておきます。

23.
くまを自由に動かそう！（１）

24.
くまを自由に動かそう！（１）
• if(game.input.right)
– 右矢印が押されたらする動作
• bear.x
=
bear.x
+
1;
– bearのx座標を１つずつ増やす
• Chromeを更新して動きを確認しよう！

25.
くまを自由に動かそう！（２）
• 他の方向もおんなじようにしてみよう！
– if(game.input.le[)
• 左矢印を押した時
– if(game.input.up)
• 上矢印を押した時
– if(game.input.down)
• 下矢印を押した時
• ちなみに、y座標はbear.yでおｋ！

26.
くまを自由に動かそう！（２）

27.
気づいたと思いますが・・・！
x座標増える
y座標増える

28.
くまを拡大してみよう！

29.
くまを拡大してみよう！
• bear.scaleX
=
2;
– くまの横幅を２倍にする
• bear.scaleY
=
2;
– くまの縦幅を２倍にする

30.
くまを拡大してみよう！
画像が荒く、頭飛び出してますが。。。

31.
そういえばこのくま変ですよ
• 左に歩くときは逆を向いてほしい！
– bear.scaleX
=
2; bear.scaleY
=
2;を消す
• 左に歩くときだからどこに書けばいいかな

32.
そういえばこのくま変ですよ

33.
そういえばこのくま変ですよ
• if(game.input.le[)
– 左に動くときだからこの中に書く
• bear.scaleX
=
-­‐1.0;
– 逆向きだから横幅をマイナス倍すればおｋ
• if(game.input.right)
– 右に動くときに
• bear.scaleX
=
1.0;
– 向きを元に戻す

34.
そういえばこのくま変ですよ
ちゃんと左を向くようになった！ヽ(=´▽`=)ﾉ

35.
画面外に出ないようにする！
• 画面の外に出ないようにしたい
– 画面の横幅 game.width
– 画面の縦幅 game.height
– くまの横幅 bear.width
– くまの縦幅 bear.height
• 画面外に出ようとしたらそのままの位置
– if文を使う！

36.
画面外に出ないようにする！

37.
画面外に出ないようにする！
game.width
ここで止まって欲しい
game.width – bear.width
くまの座標は左上のここ！
bear.width

38.
画面外に出ないようにする！
•
if(bear.x
>
game.width
-­‐
bear.width){
– 画面外に出ようとしたら
•
bear.x
=
game.width
-­‐
bear.width
– その場の位置にいるようにする
}
ほかも同じように考えれるよ！

39.
走ってるように見せる！
• 画像の１番目と２番目が交互になるように
– 画像を変えるための変数があると便利

40.
走ってるように見せる！

41.
走ってるように見せる！（１）
• bear.pose
– くまの画像を扱うための変数
• if(game.frame
%
2
==
0)
– 毎フレームではなく、偶数フレームの時だけ
毎フレーム
だと手がちぎ
れんばかりに
動くのでｗ

42.
走ってるように見せる！（２）
• bear.pose
=
bear.pose
+
1;
– 変数を１つ増やす
• bear.pose
=
bear.pose
%
2;
– ２で割ったあまりを入れる（０か１）
• bear.frame
=
bear.pose
+
1;
– １つずらしたくまを表示する

43.
走ってるように見せる！（３）
０，１のままだと前２つが
表示されるので
１をたして１つずつずらす

44.
走ってるように見せる！
手が動いているようにみえたらおｋ！

45.
もう１匹くまを表示してみよう！
• 女の子のくま
• 大きさは今までのくまの１．５倍（縦横両方）
• 座標は（１６０，１６０）の位置に表示

46.
もう１匹くまを表示してみよう！
• 画像を表示するには
– var
bear
=
new
Sprite(32,32);
– bear.image
=
game.assets['chara1.gif'];
– game.rootScene.addChild(bear);

47.
もう１匹くまを表示してみよう！

48.
もう１匹くまを表示してみよう！

49.
もう１匹くまを表示してみよう！
こんな感じで表示されます！
うまく行かなときはコンソールを見てみよう！(・∀・)

50.
当たり判定をつけよう！
距離が一定以下
になったら〇〇する
という条件をつける
距離が２０以下になったら、女の子が泣くようにしてみよう！

51.
当たり判定をつけよう！
• 距離は２点の距離を求める公式
– ルートは Math.sqrt()
– ２乗はないので掛け算

52.
当たり判定をつけよう！

53.
当たり判定をつけよう！
• var
distans
=
Math.sqrt((bear.x
-­‐
target.x)*(bear.x
-­‐
target.x)
+
(bear.y
-­‐
target.y)
*
(bear.y
-­‐
target.y));
– 茶色くまと女の子くまの距離
• if(distans
<
20)
– 距離が２０以下になったとき
• target.frame
=
13;
– 女の子が泣く

54.
当たり判定をつけよう！
• else
– 距離が２０以上になったとき
• target.frame
=
10;
– 泣き止む

55.
当たり判定をつけよう！
近づいて泣いたらおｋ(´；ω；｀)
離れて泣き止んだらおｋ(*´ω｀*)

56.
女の子が逃げる！
• 当たったら女の子がランダムな位置に移動
– Math.random()をつかう。
• x=Math.random()でxに０から１までのランダムな数を
入れてくれる

57.
女の子が逃げる！

58.
女の子が逃げる！
• target.x
=
Math.random(
)
*
300;
– 女の子のｘ座標をランダム
• target.y
=
Math.random()
*
300;
– 女の子のｙ座標をランダム

59.
女の子が逃げる！
当たって女の子が移動したらおｋ！

60.
スコアをつけます！（とりあえず表示）

61.
スコアをつけます！（とりあえず表示）

62.
スコアをつけます！（とりあえず表示）
• var
score
=
new
Label();
– 文字やテキストを表示するオブジェクト
• score.x
=
10;score.y
=
10
– 表示する位置
• score.text
=
"0point!";
– 表示する内容

63.
スコアをつけます！（とりあえず表示）
• var
point
=
0;
– ポイントを増やしていくための変数
•
game.rootScene.addChild(score);
– 画面に表示したいものはすべてこれをかく！

64.
スコアをつけます！（とりあえず表示）
こんなかんじで表示されるはずです。

65.
スコアをつけます！（点数増やすよ）
• くま同士が当たったら point を１００増やす

66.
スコアをつけます！（点数増やすよ）

67.
スコアをつけます！（点数増やすよ）
• if(distans
<
20)
– 当たった時だからこの中にかく
• point
=
point
+
100;
– １回当たったらpointを１００増やす
• score.text
=
point+"point!”
– 表示するないようは増えたポイントの値とpoint!と
いう文字列

68.
スコアをつけます！（点数増やすよ）
女の子の位置が変わってポイントが１００増えればおｋ！！

69.
時間制限をつけよう！
• game.rootScene.addEventListener('enterfram
e',funcDon()
– この中は１秒間に２４回呼び出されるから、２４回
呼ばれたら秒を１増やす。

70.
時間制限をつけよう！

71.
時間制限をつけよう！

72.
時間制限をつけよう！
•
var
Dme
=
new
Label();
•
Dme.x
=
300;
•
Dme.y
=
300;
•
Dme.text
=
"30”
– ３０と表示する
•
var
limt
=
30;
– この数を段々減らして秒数を表す
•
var
count
=
0;
– ふやして２４になったら１秒減らす

73.
時間制限をつけよう！
•
count
=
count
+
1;
– countを１ずつ増やしていく
•
if(count
==
24)
– ２４回カウントしたら
•
limt
=
limt
-­‐
1;
– ３０から１引いて１秒たったとする
•
Dme.text
=
limt;
– １秒減らした数を表示する
•
count
=
0;
– また２４数えるために０にする

74.
時間制限をつけよう！
こんな感じに数が減って行ったらおｋ！

75.
gameoverをつける

76.
gameoverをつける
• if(Dme.text
<
0)
– Dme.textが０より小さくなろうとしたら
•
Dme.text
=
0;
– ０にする
•
game.end(point,“点数は”+point+“点です”);
– 9leapに上げた時にでるメッセージ

77.
gameoverをつける
メッセージは出ないけど、GAMEOVERの画面がでたらおｋ！