342
プログラミングで オリジナルゲームをつくろう 北和中学校 2年 坂 優志 1

プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

プログラミングで オリジナルゲームをつくろう

北和中学校

2年 坂 優志

!1

Page 2: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

研究の動機と目的

1. プログラミングについて

 中学生になってから、以前から興味のあったプログラミングをやってみたいと思い、ソフトピアジャパンで開かれている、CODE FRIENDSに所属して、先生の指導の下、仲間と一緒にプログラミングを学んでいる。

2. プログラミングでやっていること

 enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマートフォンで動かせるゲーム作りをとおして、プログラミングを勉強している。

3. 期待できる成果

 プログラミングを学ぶことによって期待できる成果としては、以下のものが挙げられる。 ・JavaScriptの基礎を理解し、2Dゲームを自分なりにアレンジしたり、構想したりして、教材のなかでゲームをつくることができるようになる。

・汎用性のあるJavaScriptをゲームプログラミングを通じて学び、基礎的なプログラミングスキルを身につけているため、その後専門的に他の分野(アプリ開発やWEBプログラミング)を学んでいく場合にも、応用がきく。

・また、CODE FRIENDSでは、プログラミング学習だけでなく、ゲームを企画したり、ドット絵で表現したりする授業をカリキュラムとして用意しているため、考え・発想する力、表現し、形にする力を総合的に鍛えることができる。ゲーム開発を通じて、ゲームで「遊ぶ側」から「ルールや仕組みを生み出す側」のクリエイターとしての体験を得られる。(CODE FRIENDのサイトより引用)

4. 今回の研究の目的

 プログラミングを学び始めてから一年以上がたち、自分なりに考えたり工夫したりして、いくつかの作品をつくることができた。

 最初は、絵を出すことだけしかできなかったが、学んでいくうちに、動かしたり、アニメーションにしたり、いろいろな仕組みを使って、新しいことができるようになっていくことが本当に面白いと感じている。  しかし、コンピュータは、正しく入力しないと思うように動いてはくれない。一文字でも

!2

Page 3: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

間違えればエラーになるし、書く順番や場所が違っても正しく動かない。プログラミングには、数学的な知識や論理的な思考も必要であるということを実感している。

 そこで、今までの作品づくりをとおして学んだ技術を整理して改めて学び直し、今後の学習の糧としたいと思う。

 

!3

Page 4: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

目 次

オリジナルゲーム集

1 タッチしてちょんまげ ・・・7   1-1 背景の色を変える backgroundColor      1-2 画像を出す scene.addChild   1-3 画像を動かす moveBy, moveTo   1-4 タッチしたら動くようにする addEventListener, Event.TOUCH_START   1-5 時間がたったら、画像を元の位置に戻す delay   1-6 アニメーション frame = [ , , ]

2 もぐらたたき ・・・14   2-1 指定した範囲でランダムな数字を選ぶ getRandom( , );

  2-2 繰り返し tl.loop();   2-3 時間制御をクリアにする tl.clear();

3 ストップウォッチ ・・・21   3-1 画像の回転 rotateBy

4 暴走クワガタつかまえろ ・・・27   4-1 消す remove();   4-2 音を鳴らす sound.play(); 

5 花火打ち上げ放題 ・・・31   5-1 ボタンを押すと花火が上がる    5-2 衝突判定 addCollision   5-3 ボタンを押しているような動き Event.TOUCH_END

6 隕石(モックアップ) ・・・38   6-1 ボタンで移動(複合演算子) += -=

  6-2 半透明にする fadeTo

7 銭をゲットだ ・・・44   7-1 グループでの処理 Group

  7-2 条件分岐 if(){};

  7-3 画像の大きさを変える scale, scaleTo

  7-4 二つの処理を同時に実行する and().

  7-5 アニメーションが終わってからイベントをつける         Event.ANIMATION_END

!4

Page 5: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

  7-6 ゲーム終了(すべての動きを停止する) core.stop();

8 なで猫 ・・・53   8-1 ラベル new Label();   8-2 カウンター counter

  8-2 インクリメント ++

9 いきなりボス ・・・59   9-1 スコア表示 ENTER_FRAME

  9-2 自機に向かって飛んで来る輪 moveTo

10 不屈のカニ ・・・69   10-1 画面遷移   10-2 論理演算子 &&

11 エアギターたぬき ・・・81   11-1 イージング enchant.Easing.

  11-2 タグ tag

12 ブロック崩し2000 ・・・90   12-1 繰り返し処理 for   12-2 場合の数 if   12-3 距離を測る getDistance   12-4 速度を一定にする 時間=距離÷速さ

13 文房軍シューティング ・・・116   13-1 タッチムーブで自機を操縦する Event.TOUCH_MOVE

  13-2 弾の自動発射   13-3 三方向弾

14 はしれバネ山さん ・・・130   14-1 早送り skip

  14-2 当たり判定用に透明のスプライトを使う   14-3 追随して動く follow

  14-4 衝突判定の解除 removeCollision

  14-5 秒数でカウントする setTimeBased

  14-5 小数点表示 score.toFixed(1)   14-6 ループの停止 unloop

!5

Page 6: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

15 謎解き脱出ゲーム ・・・142   15-1 ジェスチャーの設定 new GestureDetector Event.TAP、Event.DOUBLETAP、Event.SLIP、Event.FLING、Event.HOLD、Event.DRAG、Event.RELEASE   15-2 ズーム 

~その他ここまでの色々な仕組みを組み合わせて作ったオリジナルゲーム~

16 つかまえられるかな ・・・164 17 打ち合いゲーム ・・・169 18 ドレミ音当て ・・・184 19 最短すごろく ・・・206 20 ドカンをすり抜けろ ・・・243 21 トイレからの脱出 ・・・301 

22 乱れ撃ちシューティング ・・・311

まとめと感想

 ・これまでプログラミングを学んできて ・・・338  ・これからの目標・やってみたいこと

 

先生から

 CodeFriends 尾崎慎一先生 ・・・340

参考にした資料・サイト 

添付作品

 完成した作品を収録したDVDーROM

  ※GoogleChromeかSafariブラウザでのみ再生できます

!6

Page 7: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

1 タッチしてちょんまげ

!7

◉このゲームで使っている仕組み

・背景の色を変える backgroundColor

・画像を出す scene.addChild 

・画像を動かす moveBy, moveTo

・タッチしたら動くようにする addEventListener, Event.TOUCH_START

・時間がたったら、画像を元の位置に戻す delay

・アニメーション frame = [ , , ]

◉ 内容 ・殿のキャラクターを配置して、ちょんまげにタッチすると、ちょんまげが動き、上に乗っている果物が転がり落ちるという愉快な動きを作ってみた。

・落ちてからしばらくすると、果物は元の位置に戻り、何度でも繰り返すことができる。

Page 8: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

1−1 背景の色を変える

背景に緑色を指定するには、backgroundColorで色を指定する。

scene.backgroundColor = “green";

この場合は、green(緑色)を指定している。

1−2 画像を出す

画像は new ExSprite で指定する。次のような内容になる。

var 画像に名前をつける = new ExSprite(画像の幅、画像の高さ); 画像の名前.image = core.assets[“画像を保存してある場所を指定”]; 画像.x = 画像のx座標を指定; 画像.y = 画像のy座標を指定; scene.addChild(画像の名前);

これにしたがって、殿(tono)の画像を出現させるのに、次のようにソースコードを書いた。

var tono = new ExSprite(190,140); tono.image = core.assets["images/bk_body.png"]; tono.x = 71; tono.y = 190; scene.addChild(tono);

!8

Page 9: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

1−3 画像を動かす

画像を動かすには、moveBy か moveTo を使う。

・moveBy と moveTo の違い

moveBy ・・今いる場所からどれだけ動くかをピクセルで指定する。

moveTo ・・移動先を、x座標とy座標で指定する。

mage.tl.moveBy(横方向に動かしたいピクセル数,縦方向に動かしたいピクセル数,かかる時間);

したがって、mageを上方向(y座標)に100ピクセル、30カウントで動かす場合は、

mage.tl.moveBy(0, -100, 30);

となる。

1−4 タッチイベント

イベントを実行するには、イベントリスナを使う。

ここでは、タッチをしたら、画像が動くようにしたいので、touch_startイベントを呼び出すための addEventListener を使うので次のような内容で書くことができる。

イベントの対象(画像や背景). addEventListener(Event.TOUCH_START,function(){ イベントが起こった時の動作

});

したがって、mageをタッチしたとき、mageが上(y座標の方向)に100ピクセル動くようにしたいので、次のように書いた。

mage.addEventListener(Event.TOUCH_START, function(){ mage.tl.moveBy(0, -100, 30); });

1−5 時間がたったら、元に戻す(待機)

動作を待機させるには、delayを使う。

対象.tl.delay(待機するカウント);

!9

Page 10: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

例えば、16カウント待ってから、mageを動かす場合は、次のようになる。

mage.tl.delay(16); mage.tl.moveTo(145, 130, 0);

1−6 アニメーション

果物が転がる画像にするため、画像を切り替えて動いているように見せる。

例えば、りんごを転がす場合、

上のような4枚の画像を作って、それをフレームで指定して、繰り返し順番に表示させることで、回転しているように見せることができる。

左の画像から、0、1、2、3という番号が当てられているので、(0から始まることに注意!)

frame = [0, 1, 2, 3];

と指定すると、1カウントごとに、0、1、2、3、0、1、2、3・・・と繰り返し画像が切り替わる。

1秒が16カウントで動いているので、ゆっくり動かしたいときには、

frame = [0, 0, 1, 1, 2, 2, 3, 3];

等と、カウント数で調整すればよい。

!10

Page 11: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!"); var assets = [ "images/e_tanuki.png", "images/title.png",// CodeFriendsタイトル "sounds/hit.mp3", "sounds/jump.mp3", "images/bk_body.png", "images/bk_mage.png", "images/cf307/apple.png", "images/cf307/applekorokoro.png", "images/cf307/banana.png", "images/cf307/bananakuru.png", "images/cf307/sakuranbo.png", "images/cf307/sakuranbokuru.png", "images/cf307/tatti.png", "images/cf307/honoo.png", "images/cf307/tono1.png", "sounds/boost.mp3" ]; function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume(); //========== // ここから //========== scene.backgroundColor = “green";

//たぬき var tanuki = new ExSprite(32, 32); tanuki.image = core.assets["images/e_tanuki.png"]; scene.addChild(tanuki); tanuki.x = 0; tanuki.y = 0;   //ほのお var honoo = new ExSprite(45,60); honoo.image = core.assets[“images/cf307/honoo.png"]; scene.addChild(honoo); honoo.x = 145; honoo.y = 190; var tono = new ExSprite(190,140); tono.image = core.assets["images/bk_body.png"]; scene.addChild(tono); tono.x = 71; tono.y = 190;

var mage = new ExSprite(45,60); mage.image = core.assets["images/bk_mage.png"];

!11

Page 12: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.addChild(mage); mage.x = 145; mage.y = 130; var applekorokoro = new ExSprite(32,32); applekorokoro.image = core.assets[“images/cf307/applekorokoro.png”]; scene.addChild(applekorokoro); applekorokoro.x = 152; applekorokoro.y = 103; var bananakuru = new ExSprite(32,32); bananakuru.image = core.assets["images/cf307/bananakuru.png"]; scene.addChild(bananakuru); bananakuru.x = 152; bananakuru.y = 71;

var sakuranbokuru = new ExSprite(32,32); sakuranbokuru.image = core.assets["images/cf307/sakuranbokuru.png"]; scene.addChild(sakuranbokuru); sakuranbokuru.x = 152; sakuranbokuru.y = 39;

var tatti = new ExSprite(32, 32); tatti.image = core.assets["images/cf307/tatti.png"]; scene.addChild(tatti); tatti.x = 175; tatti.y = 150;

//まげをタッチすると回転しながら動くように mage.addEventListener(Event.TOUCH_START, function(){ mage.tl.moveBy(0,-100,30); honoo.tl.moveBy(0,-100,30); tono.image = core.assets["images/cf307/tono1.png"]; var sound = core.assets["sounds/boost.mp3"].clone(); sound.play();  applekorokoro.tl.moveBy(0,200,30); //applekorokoro.tl.then(function(){ applekorokoro.image = core.assets[“images/cf307/      

applekorokoro.png"]; applekorokoro.frame = []; applekorokoro.frame = [0, 1, 2, 3,]; bananakuru.tl.moveBy(100,232,30); bananakuru.image = core.assets["images/cf307/bananakuru.png"]; bananakuru.frame = []; bananakuru.frame = [0, 1, 2, 3,]; sakuranbokuru.tl.moveBy(-100,264,30); sakuranbokuru.image = core.assets["images/cf307/sakuranbokuru.png"]; sakuranbokuru.frame = []; sakuranbokuru.frame = [0, 1, 2, 3,];   //元の位置に戻って、回転を止めるようにしたい mage.tl.delay(16); mage.tl.moveTo(145, 130, 0); honoo.tl.delay(16); honoo.tl.moveTo(145, 190, 0); tono.tl.delay(46); tono.tl.then(function(){ tono.image = core.assets[“images/bk_body.png"];

!12

Page 13: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}); applekorokoro.tl.delay(16); applekorokoro.tl.moveTo(152, 103, 0); applekorokoro.tl.then(function(){ applekorokoro.image = core.assets["images/cf307/apple.png"]; }); bananakuru.tl.delay(16); bananakuru.tl.moveTo(152, 71, 0); bananakuru.tl.then(function(){ bananakuru.image = core.assets[“images/cf307/banana.png"]; }); sakuranbokuru.tl.delay(16); sakuranbokuru.tl.moveTo(152, 39, 0); sakuranbokuru.tl.then(function(){ sakuranbokuru.image = core.assets[ “images/cf307 sakuranbo.png"]; }); });

◉ 工夫したところ ・タッチしたら殿の画像を変えて驚くような顔にした。

・果物を回転するようにした。

・一回やったら終わりではなく、落ちてしばらくしたら元の位置に戻るようにして、何度でも繰り返せるようにした。

◉ 難しかったところ

・果物の転がる軌道を3方向にしたので、距離が異なるところを調整したところ。

・果物の位置を戻した後に、画像も制止画像に戻すのが難しかった。 (then(function)を使った)

!13

Page 14: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

2 もぐらたたき

  

   

    

◉ 内容

・四つの穴からもぐらやへびやいかが、ランダムなタイミングで出たり入ったりするのを繰り返す。

・たたくと穴にもぐる。

◉このゲームで使っている仕組み ・指定した範囲でランダムな数字を選ぶ getRandom( , );

・繰り返し tl.loop();

・時間制御をクリアにする tl.clear(); 

!14

Page 15: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

2−1 ランダム  指定した範囲の中で、ランダムに一つの数を選ぶ。

getRandom (範囲の最小値, 範囲の最大値);

例:wait の値を、0から50の範囲でランダムに指定するには、次のようになる。

var wait = getRandom(0, 50);

2−2 繰り返し

命令はタイムライン(tl)で制御されている。

同じタイムラインは、上から順番に実行されていく。

タイムラインを繰り返すには、tl.loop(); を使う。

hole0のタイムラインで、30カウント待って動かすという処理を繰り返す場合は次のように書くことができる。

hole0.tl.delay(30); hole0.tl.then(function() {    繰り返したい処理の内容 }); hole0.tl.loop();

2−3 タイムラインをクリアにする

タイムラインで実行されている処理を、途中で強制的にやめさせたい場合がある。

例えば、mole1.tl.moveBy を実行しているときにmole1をタッチしたら別の動きをさせた

!15

Page 16: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

い場合など、そのままでは先に実行していた tl.moveBy が終わってからでないと動作しな

いのだ。その場合、タッチした時点で、tl.の処理、この場合moveByの処理を途中で破棄させる必要があるので、tl.clear を使う。

例えば、mole1をタッチしたとき、それまでのmole1の処理を破棄して、mole1にmoveTo(150, 200, 0)の処理をさせる場合は次のように書くことができる。処理を割り込ませるようなイメージだ。

mole1.addEventListener(Event.TOUCH_START, function(){ mole1.tl.clear(); mole1.tl.moveTo(150, 200, 0); }); 

!16

Page 17: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ // 背景 'images/mole_sky.png', 'images/mole_grass_bg_1.png', // もぐら 'images/mole_mole.png', // 穴 'images/mole_hole_1_b.png', // CodeFriendsタイトル "images/title.png", "images/cf307/mogura rg.png", "images/cf307/mogu.png", "images/cf307/ikadai1.png", "images/cf307/hebi.png" ];

function gameStart(){// ゲーム画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

// 背景 var background1 = new ExSprite(320, 480); background1.image = core.assets['images/mole_sky.png']; scene.addChild(background1); var background2 = new ExSprite(320, 480); background2.image = core.assets['images/mole_grass_bg_1.png']; scene.addChild(background2); // もぐら var mole0 = new Sprite(82, 65); mole0.image = core.assets["images/cf307/mogura rg.png"]; mole0.x = 10; mole0.y = 200; scene.addChild(mole0);

// もぐら2 var mole1 = new Sprite(82, 65); mole1.image = core.assets["images/cf307/mogu.png"]; mole1.x = 150; mole1.y = 200; scene.addChild(mole1);

//もぐら3 var mole2 = new Sprite(82, 65); mole2.image = core.assets["images/cf307/ikadai1.png"];

!17

Page 18: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

mole2.x = 60; mole2.y = 320; scene.addChild(mole2);

//もぐら4 var mole3 = new Sprite(82, 65); mole3.image =core.assets["images/cf307/hebi.png"]; mole3.x = 200; mole3.y = 320; scene.addChild(mole3);  

// 穴 var hole0 = new Sprite(82, 65); hole0.image = core.assets["images/mole_hole_1_b.png"]; hole0.x = 10; hole0.y = 200; scene.addChild(hole0);

// 穴2 var hole1 = new Sprite(82, 65); hole1.image = core.assets["images/mole_hole_1_b.png"]; hole1.x = 150; hole1.y = 200; scene.addChild(hole1);

//穴3 var hole2 = new Sprite(82, 65); hole2.image = core.assets["images/mole_hole_1_b.png"]; hole2.x = 60; hole2.y = 320; scene.addChild(hole2);  //穴4 var hole3 = new Sprite(82, 65); hole3.image = core.assets["images/mole_hole_1_b.png"]; hole3.x = 200; hole3.y = 320; scene.addChild(hole3);   //繰り返し処理 hole0.tl.delay(30); hole0.tl.then(function() {    // モグラ上下に動く var wait = getRandom(0, 50); mole0.tl.delay(wait); var speed = getRandom (5, 30); mole0.tl.moveBy(0, -50, speed); mole0.tl.moveBy(0, 50, speed); }); hole0.tl.loop();

//モグラをタップしたとき mole0.addEventListener(Event.TOUCH_START, function(){ mole0.tl.clear(); mole0.tl.moveTo(10, 200, 0); });

!18

Page 19: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//繰り返し処理1 hole1.tl.delay(30); hole1.tl.then(function() {    // モグラ上下に動く var wait = getRandom(0, 30); mole1.tl.delay(wait); var speed = getRandom(5, 20); mole1.tl.moveBy(0, -50, speed); mole1.tl.moveBy(0, 50, speed); }); hole1.tl.loop();  

//モグラをタップしたとき1 mole1.addEventListener(Event.TOUCH_START, function(){ mole1.tl.clear(); mole1.tl.moveTo(150, 200, 0); });

//繰り返し処理2 hole2.tl.delay(10); hole2.tl.then(function(){ var wait = getRandom(0, 30); mole2.tl.delay(wait); var speed = getRandom(5, 10); mole2.tl.moveBy(0, -50, speed); mole2.tl.moveBy(0, 50, speed); }); hole2.tl.loop();

//もぐらをタップしたとき2 mole2.addEventListener(Event.TOUCH_START, function(){ mole2.tl.clear(); mole2.tl.moveTo(60, 320, 0); });

//繰り返し処理3 hole3.tl.delay(10); hole3.tl.then(function(){ var wait = getRandom(0, 30); mole3.tl.delay(wait); var speed = getRandom(5, 10); mole3.tl.moveBy(0, -50, speed); mole3.tl.moveBy(0, 50, speed); }); hole3.tl.loop();

//もぐらをタップしたとき2 mole3.addEventListener(Event.TOUCH_START, function(){ mole3.tl.clear(); mole3.tl.moveTo(200, 320, 0); });

//========== // ここまで //==========

!19

Page 20: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== //EnchantJS var gameManager; var core; enchant(); gameManager = new common.GameManager(); window.onload = function() { core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); };

//========== // Manifest '[cf]{"appTitle":"もぐらへびいか","appIcon":"images/cf307/mhi.png"}[/cf]'

◉ 工夫したところ ・もぐらの画像を変えて、4つにしたところ。

・もぐらの出るタイミングをそれぞれ変えて、不規則な動きにした。

・もぐらのでる速さを変えたところ。

!20

Page 21: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

3 ストップウォッチ

   

◉ 内容

・スタートをタップすると、秒針が動く。

・ストップで秒針が止まる。

・クリアをタップすると、0の位置に戻る。

◉ ここで使っている仕組み ・画像の回転 rotateBy

!21

Page 22: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

3−1 画像を回転させる

画像を回転させるには rotateTo か rotateBy を使う。

・rotateTo と rotateBy の違い

rotateTo・・角度を指定して、その角度に動かす。

rotateBy・・今の角度から何度動かすか決める。

byousin.tl.rotateBy(動かす角度、かける時間);

0カウントで360分の60度動かすときは

byousin.tl.rotateBy(60 / 360, 0);

スタートをタッチしたら、秒針を16カウント(1秒)ごとに、360度分の60度動くようにする。そうすれば1周で1分のストップウォッチができる。ストップを押すまでそれを繰り返す。

start.addEventListener(Event.TOUCH_START, function(){ byousin.tl.delay(16); byousin.tl.rotateBy(360 / 60, 0); byousin.tl.loop(); }); stop.addEventListener(Event.TOUCH_START, function(){

!22

Page 23: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

byousin.tl.clear(); })

クリアをタッチしたら、それまでのタイムラインの動きを破棄して、秒針をはじめの位置(角度0度のところ)に戻すようにする。

clear.addEventListener(Event.TOUCH_START, function(){ byousin.tl.clear(); byousin.tl.rotateTo(0,0); });

!23

Page 24: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ "images/e_tanuki.png", "images/title.png",// CodeFriendsタイトル "sounds/hit.mp3", "sounds/jump.mp3", "images/cf307/byousin.png", "images/cf307/byousin1.png", "images/cf307/start.png", "images/cf307/stop.png", "images/cf307/clear.png", "images/cf307/neko.png"

];

function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

scene.backgroundColor = "orange"; var neko = new ExSprite(32, 32); neko.image = core.assets["images/cf307/neko.png"]; neko.x = 320 / 2 - 32 / 2; neko.y = 250 scene.addChild(neko);

var byousin1 = new ExSprite(180, 180); byousin1.image = core.assets["images/cf307/byousin1.png"]; byousin1.x = 320 / 2 - 180 / 2; byousin1.y = 480 /2 -180 / 2; scene.addChild(byousin1);

var byousin = new ExSprite(150, 150); byousin.image = core.assets["images/cf307/byousin.png"]; byousin.x = 320 / 2 - 150 / 2; byousin.y = 480 /2 - 150 / 2; scene.addChild(byousin); var start = new ExSprite(100, 100); start.image = core.assets["images/cf307/start.png"]; start.x = 320 / 2 - 100 / 2; start.y = 60; scene.addChild(start);

var stop = new ExSprite(100, 100); stop.image = core.assets["images/cf307/stop.png"]; stop.x = 320 / 2 - 100 / 2;

!24

Page 25: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

stop.y = 310; scene.addChild(stop);

var clear = new ExSprite(100, 100); clear.image = core.assets["images/cf307/clear.png"]; clear.x = 320-110; clear.y = 480-90; scene.addChild(clear);

start.addEventListener(Event.TOUCH_START, function(){ byousin.tl.delay(16); byousin.tl.rotateBy(360 / 60, 0); byousin.tl.loop(); });

stop.addEventListener(Event.TOUCH_START, function(){ byousin.tl.clear(); });

clear.addEventListener(Event.TOUCH_START, function(){ byousin.tl.clear(); byousin.tl.rotateTo(0,0); });

//========== // ここまで //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== // EnchantJS enchant(); var gameManager; var core; var scene; window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); }

!25

Page 26: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 工夫したところ ・秒針の画像を一秒分の角度(60/360度)回転させて、針が動いているように見せたところ。

・クリアを押したら0秒の位置に戻るようにして、何度も繰り返すことができるようにした。

!26

Page 27: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

4 暴走クワガタつかまえろ

 

◉ 内容 ・クワガタが画面内を激しく動き回る。

・クワガタをタップできたら、音がなってゲームクリア。

◉ ここで使っている仕組み ・消す remove();

・音を鳴らす sound.play(); 

!27

Page 28: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

4−1 画像を消す

画像を消したい場合は以下のように書くので

画像名.remove();

画像bagを消す場合は次のようになる。

bug.remove();

4−2 音を鳴らす

音を鳴らすには、音のファイルを指定して再生する。

var 音の名前 = core.asetts[“音のファイル名”].clone(); 音の名前.play();

音の名前をsoundとして、ファイル名がsounds/damage.mp3の場合は次のように書くことができる。

var sound = core.assets[“sounds/damage.mp3"].clone();

!28

Page 29: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

sound.play();

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ // 背景 "images/bug_desert.png", // 虫 "images/bug_st_01.png", "images/bug_st_02.png", "images/bug_st_03.png", "images/bug_st_04.png", "images/bug_st_05.png", "images/bug_st_06.png", "images/bug_st_07.png", "images/bug_st_08.png", "images/bug_st_09.png", "sounds/damage.mp3", // CodeFriendsタイトル "images/title.png" ];

function gameStart(){// ゲーム画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

// 背景 var background1 = new ExSprite(320, 480); background1.image = core.assets["images/bug_desert.png"]; scene.addChild(background1); // 虫 var bug = new ExSprite(32, 32); bug.image = core.assets["images/bug_st_01.png"]; bug.x = 320/2; bug.y = 480/2; scene.addChild(bug); bug.frame = [0, 0, 1, 1]; bug.tl.then(function(){ var R = getRandom(0, 360); var A = getRandom(-150, 150); var B = getRandom(-150, 150); var C = getRandom(5, 10);     bug.tl.rotateBy(R, 0); bug.tl.moveBy(A, B, C); //bug.tl.moveTo bug.tl.moveTo(320/2, 480/2, 3); });

!29

Page 30: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bug.tl.loop();

// 虫をタップした時 bug.addEventListener(Event.TOUCH_START, function() {    bug.remove();    var sound = core.assets["sounds/damage.mp3"].clone(); sound.play(); });

//========== // ここまで //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== //EnchantJS var gameManager; var core; enchant(); gameManager = new common.GameManager(); window.onload = function() { core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); };

◉ 工夫したところ

・虫を予測できない動きにするために、4つのランダムな数字作って、角度、横、縦、速さが異なるようにしたところ。

・そのままではそのうち画面の外に出て行ってしまうので、その都度画面中央の定位置に戻すことで画面内で動くようにした。

◉ 難しかったところ

・動きをランダムにしながら画面の中で繰り返し速く動かすのは難しかったが、上に書いたようにいろいろ工夫して完成させることができた。

!30

Page 31: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

5 花火打ち上げ放題

◉ 内容 

・ボタンを押すと、花火が上がる。

・花火の上がる位置や大きさはランダムになる。

◉ このゲームで使った仕組み ・ボタンを押すと花火が上がる 

・衝突判定 addCollision(花火の線と花火が衝突したら爆発する)

・ボタンを押しているような動き Event.TOUCH_END

!31

Page 32: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ このゲームを作る手順 ① まず、花火が上がる動きを作る(自動的に上がる)

② ①に、ボタンをつけて、ボタンを押したときに上がるようにする

◉ コードの説明と書き方

5−1  花火(透明)と線を同時に出す

花火が上がっていき、あるところまで上がったら爆発して花火になるようにするために、まず、花火の線と花火を同じy軸座標上に出現させる。(x,y座標はともに適当な範囲でランダ

ムにする。花火はまだ爆発しないので、0フレーム目の透明なものにしておく)

 //花火の火花  var hanabi = new ExSprite(100, 100);  hanabi.image = core.assets["images/cf307/hanabi.png"];  var x = getRandom(0, 320 - 6);// この範囲でランダムに出す  hanabi.x = x - 48;// 花火と花火の線の中央を揃えるために48を引く  var y = getRandom(0, 160)// 花火なので、0~160の上の方に出現させる

!32

Page 33: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

 hanabi.y = y;  scene.addChild(hanabi); var s = getRandom(1, 1.5); hanabi.tl.scaleTo(s, s, 0); //花火の線 var beam = new ExSprite(6, 32); beam.image = core.assets["images/beam.png"]; beam.x = x;// 花火の火花と同じxにする beam.y = 480; scene.addChild(beam); beam.tl.moveBy(0, -480, 100);// 線が上がっていく動き

花火の火花はそのままで、花火の線(beam)を、上に移動させた。(上の枠線の最後の行)

5−2 衝突判定

当たり判定の設定を行うには、addCollisionを使って

(判定させたいもの)addCollision(ぶつかる相手);

と書くことができるから、「(花火)に(ビーム)が衝突したら」という場合には、以下のように書くことができる。

hanabi.addCollision(beam);

さらに、イベントリスナで衝突イベントを呼び出して、衝突した場合のイベントを実行する。例えば、花火に対象として指定したものが衝突した場合は次のように書くことができる。

hanabi.addEventListener(Event.COLLISION, function(e){ イベントが起こった(衝突した)時の動作 });

花火の線(beam)が上がっていき、同じx軸上にある花火の火花(hanabi)と衝突したら、花火を爆発させるというように作った。(花火のアニメーションを動かす)

hanabi.addCollision(beam);  hanabi.addEventListener(Event.COLLISION, function(e) {   var sound = core.assets["sounds/bomb.mp3"].clone(); sound.play(); // hanabi(アニメーション)

!33

Page 34: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

hanabi.image = core.assets["images/cf307/hanabi.png"]; hanabi.frame = [0,1,2,3,4,5,6,7,8,9,10,null]; beam.remove(); // 花火と衝突したら線は消す });

5−3 ボタンのタッチイベントとアニメーション

ボタンを押したら、ボタンが凹んだ画像に変え、押し終わったら、元の画像に戻す。

それと、花火の一連の動きを合わせる。

// ボタンタップ開始 button.addEventListener(Event.TOUCH_START, function(){ button.frame = 1; // ボタンを押した時の画像に変える (ここに3−2の花火が上がる一連の動きを入れる) }); // ボタンタップ終了 button.addEventListener(Event.TOUCH_END, function(){ button.frame = 0; // ボタンを最初の画像に戻す });

!34

Page 35: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ "images/e_tanuki.png", "images/title.png",// CodeFriendsタイトル "sounds/hit.mp3", “sounds/jump.mp3”, "images/space.png", "images/beam.png", "images/cf307/hanabi.png",  "sounds/bomb.mp3", "images/b_red.png" ];

function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

// 背景 var space = new ExSprite(320, 480); space.image = core.assets["images/space.png"]; space.x = 0; space.y = 0; scene.addChild(space);

// 発射ボタン var button = new ExSprite(62, 55); button.image = core.assets["images/b_red.png"]; button.x = 320/2 - 62/2; button.y = 480 - 55; scene.addChild(button); // 左ボタンタップ開始 button.addEventListener(Event.TOUCH_START, function(){ button.frame = 1; // 花火 //var wait = getRandom(20, 30); //scene.tl.delay(wait); scene.tl.then(function() { //花火の火花 var hanabi = new ExSprite(100, 100); hanabi.image = core.assets["images/cf307/hanabi.png"]; var x = getRandom(0, 320 - 6); hanabi.x = x - 48; var y = getRandom(0, 160) hanabi.y = y; scene.addChild(hanabi); var s = getRandom(1, 1.5);

!35

Page 36: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

hanabi.tl.scaleTo(s, s, 0); //花火の線 var beam = new ExSprite(6, 32); beam.image = core.assets["images/beam.png"]; beam.x = x; beam.y = 480; scene.addChild(beam); beam.tl.moveBy(0, -480, 100); beam.tl.then(function() { beam.remove(); });    //衝突したら、音と爆発アニメ hanabi.addCollision(beam);  hanabi.addEventListener(Event.COLLISION, function(e) {   var sound = core.assets["sounds/bomb.mp3"].clone(); sound.play(); // hanabi(アニメーション) hanabi.image = core.assets["images/cf307/hanabi.png"]; hanabi.frame = []; hanabi.frame = [0,1,2,3,4,5,6,7,8,9,10,null]; beam.remove(); }); }); }); // ボタンタップ終了 button.addEventListener(Event.TOUCH_END, function(){ button.frame = 0; }); //scene.tl.loop();

//========== // ここまで //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){ var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== // EnchantJS enchant(); var gameManager; var core; var scene; window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start();

!36

Page 37: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}

◉ 工夫したところ

・透明な花火をランダムな位置に配置して、同じy軸上に線を出す様にして、衝突させることで、時間差をつけて花火を爆発させるように考えた。

◉ 苦労したところ ・ランダムを使ってあらかじめ花火を配置して、衝突させて花火が爆発させるため、花火っぽい適度なタイミングにするところが難しかった。

!37

Page 38: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

6 隕石から逃げろ(モックアップ) ※モックアップとは、試作品のこと

◉ 内容

・画面の上から猫と隕石が降ってくる。

・隕石に当たると音がなり、自機の色が薄くなる。

・実際は猫に当たった時も、何かしらの反応をさせる予定だったが、断念した。

◉ このゲームで使った仕組み ・代入演算子(ボタンの画像を用意し、タッチしたら、自機を決まった数だけ、x座標を増やしたり、減らしたりして、左右に動くようにする。) += -=

・半透明にする fadeTo

!38

Page 39: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

6−1 ボタンで移動(複合演算子)

左ボタンをタッチしたら、自機のx座標を動かしたい分だけ左に(ー)ずらすのには、タッチイベントで、減算代入(ー=)を使う。左に10ピクセル動かしたいので、10の減算代入を使う。

//左に動け button_left.addEventListener(Event.TOUCH_START,function(){ button_left.frame = 1; soldier.x -= 10;// 自機のx座標を左に10ピクセル移動 });  同じように、右ボタンにタッチしたら、自機のX座標を右に(+)ずらすので、今度は10の加算代入(+=)とすればよい。

button_right.addEventListener(Event.TOUCH_START,function(){ button_right.frame = 1; soldier.x += 10;// 自機のx座標を右に10ピクセル移動 });

6−2 半透明にする

画像を半透明にするには、fadeToを使う。透明でない通常の画像が1なので、0から1の範囲で透明度を指定する。

画像.tl.fadeTo(透明度, 半透明にするのにかかる時間);

半透明にした画像を透明でない画像に戻すには、つぎのようにすればよい。

!39

Page 40: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

画像.tl.fadeTo(1, 戻すのにかかる時間);

上に従って、「自機が衝突したら、0カウントで半透明にないり、10カウント後に元に戻るという動きは、以下のように書くことができる。

soldier.addEventListener(Event.COLLISION, function(e) { soldier.tl.fadeTo(0.5, 0); soldier.tl.delay(10); soldier.tl.fadeTo(1, 0); var sound1 = core.assets["sounds/bomb_s.mp3"].clone(); sound1.play(); });

!40

Page 41: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード var assets = [ // 隕石 'images/asteroid_1.png', // 戦闘機 'images/soldier.png', 'images/b_left.png', 'images/b_right.png', 'sounds/bomb_s.mp3', 'images/back_space.png', 'images/cf307/neko.png', ‘sounds/cat.mp3’, // CodeFriendsタイトル "images/title.png" ];

function gameStart(){// ゲーム画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

//背景 var sp = new ExSprite(320, 480); sp.image = core.assets["images/back_space.png"]; scene.addChild(sp);

// 戦闘機 var soldier = new ExSprite(32, 32); soldier.image = core.assets["images/soldier.png"]; soldier.x = 144; soldier.y = 360; scene.addChild(soldier);

// 隕石 var Y = getRandom(15, 25); scene.tl.delay(Y); scene.tl.then(function() { var asteroid = new ExSprite(32, 32); asteroid.image = core.assets["images/asteroid_1.png"]; asteroid.x = getRandom(0, 320-32); asteroid.y = 0; scene.addChild(asteroid); var S = getRandom(1, 12/10); asteroid.tl.scaleTo(S, S, 0); asteroid.tl.moveBy(0, 480, 100); asteroid.tl.then(function() { asteroid.remove(); }); soldier.addCollision(asteroid); });

!41

Page 42: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.tl.loop(); //猫 scene.tl.delay(30); scene.tl.then(function() { var neko = new ExSprite(32, 32); neko.image = core.assets["images/cf307/neko.png"]; neko.x = getRandom(0, 320-32); neko.y = 0; scene.addChild(neko); neko.tl.moveBy(0, 480, 100); neko.tl.then(function() { neko.remove(); }); neko.addCollision(soldier); }); scene.tl.loop();

soldier.addEventListener(Event.COLLISION, function(e) { soldier.tl.fadeTo(0.5, 0); soldier.tl.delay(10); soldier.tl.fadeTo(1, 0); var sound1 = core.assets["sounds/bomb_s.mp3"].clone(); sound1.play(); }); var button_left = new ExSprite(62, 110/2); button_left.image = core.assets["images/b_left.png"]; button_left.x = 50; button_left.y = 480-62; scene.addChild(button_left);

//左に動け button_left.addEventListener(Event.TOUCH_START,function(){ button_left.frame = 1; soldier.x += -10; });

button_left.addEventListener(Event.TOUCH_END,function(){ button_left.frame = 0; });

   var button_right = new ExSprite(62, 110/2); button_right.image = core.assets["images/b_right.png"]; button_right.x = 320-50-50; button_right.y = 480-62; scene.addChild(button_right);    button_right.addEventListener(Event.TOUCH_START,function(){ button_right.frame = 1; soldier.x += 10; });

button_right.addEventListener(Event.TOUCH_END,function(){ button_right.frame = 0; }); //==========

!42

Page 43: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// ここまで //========== }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== // EnchantJS var gameManager; var core; enchant(); gameManager = new common.GameManager(); window.onload = function() { core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); };

◉ 工夫したところ

・隕石のほかに、猫も出してみた。

・隕石の大きさをランダムにした。

◉ 難しかったところ

・猫に当たったときも、別の音がするようにしたかったが、できなかったので断念した。(後から、tagを使えばできるということがわかったので、後述の別のゲームで実装することができた。)

!43

Page 44: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

7 銭をゲットだ    

◉ 内容

・ボタンをタップすると、人がジャンプしながら上っていく。

・降ってくるいがぐりに当たったら落ちてしまいゲームオーバー。

・木の上の寛永通宝まで到達してゲットしたら、ゲームクリア。

◉ このゲームで使った仕組み ・グループに入れてまとめて処理をする Group

・条件分岐 if(){};

・画像の大きさを変える scale, scaleTo

・二つの処理を同時に実行する and().

・アニメーションが終わってからイベントをつける Event.ANIMATION_END

・ゲーム終了(すべての動きを停止する) core.stop();

!44

Page 45: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

7−1 グループを作って画像をグループに加える

Groupを作って、複数個の画像をGroupに入れることによって、複数個の画像をまとめて処

理することができる。まず、グループを作る。

var グループの名前 = new Group(); scene.addChild(グループの名前); 次に、作った画像をグループに加える。

グループの名前.addChild(グループに加えたい画像);

asteroidGroupというグループをつくり、そこにasteroidを加える場合は以下のようにな書くことができる。

var asteroidGroup = new Group(); scene.addChild(asteroidGroup); ~~ asteroidGroup.addChild(asteroid);

!45

Page 46: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

7−2 条件分岐

if文を使って、ある条件のときだけ処理を実行させることができる。(条件分岐)

if(条件){実行させたい処理}

のように書く。

例えば、ボタンを押してhitoを左右に移動させるときに画面からはみ出さないように、hitoが画面の左からはみ出したとき(x座標が-25より小さくなったら)、画面の右から出てくるように(瞬時にx座標295に移動)、また画面の上からはみ出したら(y座標が32より小さくなったら)画面の下から出てくるように(瞬時にy座標448に移動する)する場合、次のようになる。

if(hito.x < -25){ hito.x = 295; } if(hito.y < 32){ hito.y = 448; }

7−3 画像の大きさを変える

画像の大きさを変えるには、scaleを使う。タイムラインで大きくする場合。

hitoを10カウントでx方向、y方向共に0.8倍の大きさにする場合、

hito.tl.scaleTo(0.8, 0.8, 0);

となる。タイムラインではなく、即時に拡大、縮小する場合は、tlを挟まずに、

gameclear.scale(0.5, 0.5);

と指定すればよい。(但し、変化としてはToではなく、Byの変化になる)

7−4 二つの処理を同時に行う

タイムラインで二つの処理を同時に行うには

and().

を使う。

例えば、coinを動かしながら、5カウントでx方向に-3倍、y方向に3倍拡大する場合は

coin.tl.moveTo(320/2 - 32, 480/2 - 32, 5).and().scaleTo(-3, 3, 5);

と書くことができる。(コインが移動しながら1回転するような動きになる)

!46

Page 47: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

7−5 アニメーションが終わってからイベントをつける

画像をアニメーションにして、それが終わってからイベントをつけるには、

addEventListener(Event.ANIMATION_END, functionを使う。

kuruという画像をアニメーションにして、それが終わってからゲームオーバーの画像を出

すには、次のように書けばよい。

// 爆発のアニメーションを設定する kuru.frame = [0, 0, 1, 1, 2, 2, 3, 3, 0, 1, 2, 3, null]; kuru.tl.moveTo(160 - 32, 380, 10).and().scaleTo(0.5, 0.5, 10); // アニメーション終了後ゲーム終了 kuru.addEventListener(Event.ANIMATION_END, function(){ // ゲームオーバーを表示 var gameover = new ExSprite(147, 48); (以下略)

7−6 ゲーム終了

ゲームを終了させてすべての動きを止めたい場合は、core.stop();を使う。

kuruのアニメーションが終わってからゲームオーバーを表示させ、ゲームオーバーを拡大した後にゲーム終了にしたいので、以下のように書いた。

// アニメーション終了後ゲーム終了 kuru.addEventListener(Event.ANIMATION_END, function(){ // ゲームオーバーを表示 var gameover = new ExSprite(147, 48); gameover.image = core.assets['images/title_gameover.png']; gameover.x = 320 / 2 - gameover.width/2; gameover.y = 480 / 2 - gameover.height/2; scene.addChild(gameover); // 大きく gameover.scale(0.5, 0.5); gameover.tl.scaleTo(2.3, 2.3, 10); gameover.tl.then(function() { core.stop(); }); });

!47

Page 48: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ "images/cf307/ki.png", "images/title.png",// タイトル "images/cf307/zyoni.png", "images/cf307/kann eituho.png", "images/b_left.png", "sounds/cf307/jump03.mp3", "images/b_right.png", "images/title_gameclear.png", "images/cf307/zyonikurukuru.png", "images/cf307/igaguri.png", "images/joe_gass.png", "sounds/gass.mp3", "images/bomb.png", "images/title_gameover.png", "sounds/gass.mp3", "sounds/fall.mp3", "sounds/cf307/coin05.mp3",  ];

function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

scene.backgroundColor = "darkgray"; // 空 var sky = new ExSprite(320, 480); sky.image = core.assets["images/cf307/ki.png"]; scene.addChild(sky); //お金 var coin = new ExSprite(64, 64); coin.image = core.assets["images/cf307/kann eituho.png"]; coin.x = 320/2 - 64; coin.y = 0; scene.addChild(coin);

   // 左へ移動するボタン var button_left = new ExSprite(62, 55); button_left.image = core.assets["images/b_left.png"]; button_left.x = 320/2 - 62 - 31; button_left.y = 480 - 55; scene.addChild(button_left); // 左ボタンタップ開始 button_left.addEventListener(Event.TOUCH_START, function(){

!48

Page 49: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

button_left.frame = 1; hito.tl.scaleTo(0.8, 0.8, 0); hito.tl.moveBy(-10, -40, 5); hito.tl.moveBy(-10, 20, 3); if(hito.x < -25){ hito.x = 295; } if(hito.y < 32){ hito.y = 448; } var sound = core.assets["sounds/cf307/jump03.mp3"].clone(); sound.play(); }); // 左ボタンタップ終了 button_left.addEventListener(Event.TOUCH_END, function(){ button_left.frame = 0; }); // 右へ移動するボタン var button_right = new ExSprite(62, 55); button_right.image = core.assets["images/b_right.png"]; button_right.x = 320/2 + 31; button_right.y = 480 - 55; scene.addChild(button_right); // 右ボタンタップ開始 button_right.addEventListener(Event.TOUCH_START, function(){ button_right.frame = 1; hito.tl.scaleTo(-0.8, 0.8, 0); hito.tl.moveBy(10, -40, 5); hito.tl.moveBy(10, 20, 3); if(295 < hito.x){ hito.x = -25; } if(hito.y < 32){ hito.y = 448; } var sound = core.assets["sounds/cf307/jump03.mp3"].clone(); sound.play(); }); // 右ボタンタップ終了 button_right.addEventListener(Event.TOUCH_END, function(){ button_right.frame = 0; }); // 人 var hito = new ExSprite(64, 64); hito.image = core.assets["images/cf307/zyoni.png"]; hito.x = 320/2 - 32; hito.y = 380; scene.addChild(hito); hito.tl.scaleTo(0.8, 0.8, 0); 

// 落下物グループ var asteroidGroup = new Group(); scene.addChild(asteroidGroup);

!49

Page 50: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 落下物(いがぐり) scene.tl.delay(50); scene.tl.then(function() { var asteroid = new ExSprite(32, 32); asteroid.image = core.assets["images/cf307/igaguri.png"]; asteroid.x = getRandom(0, 320 - 32); asteroid.y = 0; asteroidGroup.addChild(asteroid); asteroid.tl.moveBy(0, 480, 150); asteroid.tl.then(function() { asteroid.remove(); }); }); scene.tl.loop(); 

// コインに到達 coin.addCollision(hito); coin.addEventListener(Event.COLLISION,function(e){ coin.tl.moveTo(320/2 - 32, 480/2 - 32, 5).and().scaleTo(-3, 3, 5); coin.tl.scaleTo(3, 3, 5); // ゲームクリア var gameclear = new ExSprite(147, 48); gameclear.image = core.assets['images/title_gameclear.png']; gameclear.x = 320 / 2 - gameclear.width/2; gameclear.y = 480 / 2 - gameclear.height/2; scene.addChild(gameclear); // 大きく gameclear.scale(0.5, 0.5); gameclear.tl.scaleTo(2, 2, 10); gameclear.tl.then(function() { core.stop(); }); asteroidGroup.remove(); hito.moveTo(320/2 - 25, 330, 20); var sound = core.assets['sounds/cf307/coin05.mp3'].clone(); sound.play(); });

hito.addCollision(asteroidGroup); hito.addEventListener(Event.COLLISION, function(e) { var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/joe_gass.png"]; bomb.x = hito.x; bomb.y = hito.y + 32; scene.addChild(bomb); bomb.frame = [0, 1, 2, 3, 4, null]; var sound = core.assets["sounds/gass.mp3"].clone(); sound.play(); var kuru = new ExSprite(64, 64); kuru.image = core.assets["images/cf307/zyonikurukuru.png"]; kuru.x = hito.x; kuru.y = hito.y; scene.addChild(kuru); // 爆発のアニメーションを設定する kuru.frame = [0, 0, 1, 1, 2, 2, 3, 3, 0, 1, 2, 3, null]; kuru.tl.moveTo(160 - 32, 380, 10).and().scaleTo(0.5, 0.5, 10);

!50

Page 51: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// アニメーション終了後ゲーム終了 kuru.addEventListener(Event.ANIMATION_END, function(){ // ゲームオーバーを表示 var gameover = new ExSprite(147, 48); gameover.image = core.assets['images/title_gameover.png']; gameover.x = 320 / 2 - gameover.width/2; gameover.y = 480 / 2 - gameover.height/2; scene.addChild(gameover); // 大きく gameover.scale(0.5, 0.5); gameover.tl.scaleTo(2.3, 2.3, 10); gameover.tl.then(function() { core.stop(); }); }); hito.remove(); var sound = core.assets['sounds/fall.mp3'].clone(); sound.play(); }); //========== // ここまで //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== // EnchantJS enchant(); var gameManager; var core; var scene; window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); }

◉ 工夫したところ ・ジャンプのときに左右にも動くようにして、飛んでいる感じを出した。

!51

Page 52: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

・画面からはみ出さないように、はみ出したときはifを使って反対側に移動するようにした。

・コインに到達したらゲームクリアにしたところ。

◉ 難しかったところ ・簡単すぎでも難しすぎにもならないように、ジャンプの高さや移動の大きさを調整した。

・ゲームクリアのところで、コインを大きくしながら移動させて回転させるような動きにしたところが難しかった。

!52

Page 53: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

8 なで猫

◉ 内容 ・猫をなでるとなでた回数が表示され、猫の様子が変わっていく。最後は、寝る。

◉ このゲームで使っている仕組み ・ラベル new Label();

・カウンター counter

・インクリメント ++

!53

Page 54: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

8−1 ラベル

画面上に文字を出すには、new Label();を使う。内容は次のとおり。

var ラベルの名前 = new Label("x"); label.x = x座標の位置; label.y = y座標の位置; label.color = “色"; label.font = “文字の大きさ(ピクセル) 字体"; label.text = counter; scene.addChild(label);

これに従って、猫をなでると1ずつ増えていく数字のラベルを以下のように書いた。

// ラベル var label = new Label("x"); label.x = 160 - 16; label.y = 380 - 90; label.color = "white"; label.font = "32px Arial";

!54

Page 55: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.text = counter; scene.addChild(label);

8−2 カウンター(インクリメント)

条件によって、数が増えたり減ったりするカウンターをつくる。

まず、最初の数字が0からはじまるので初期値を0にする。

// カウンター var counter = 0;

次に、猫を一回なでると1増えるというラベルにするために、タッチに対するイベントリスナを使う。タッチを1回したら、カウンターを1増やし(インクリメント)、それに応じてラベルの表示も1増えるようにしたいので、次のようになる。

// ねこをなでると hand.addEventListener(Event.TOUCH_START, function(){ counter++; label.text = counter; });

!55

Page 56: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ "images/back_mountain.png", "images/kikori_land.png", "images/cf005/cat_run.png", "images/kikori_kame_1.png", "images/title.png",// タイトル "sounds/hit.mp3", "sounds/jump.mp3", "images/kikori_kame_1.png", "images/kati_rock.png", "images/cf307/zabton.png", "images/cf307/nadenade.png", "images/cf307/nekoosuwari.png", "images/cf307/nekohako.png", "images/cf307/nekonemuri.png", ];

function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

scene.backgroundColor = "orange"; // 座布団 var zabuton = new ExSprite(70, 70); zabuton.image = core.assets["images/cf307/zabton.png"]; scene.addChild(zabuton); zabuton.x = 320 / 2 - 70 / 2; zabuton.y = 480 / 2 - 70 / 2; zabuton.scale(2, 2);

// カウンター var counter = 0;

// ラベル var label = new Label("x"); label.x = 160 - 16; label.y = 380 - 90; label.color = "white"; label.font = "32px Arial"; label.text = counter; scene.addChild(label); // ねこちゃん var neko = new ExSprite(64, 64); neko.image = core.assets["images/cf005/cat_run.png"];

!56

Page 57: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.addChild(neko); neko.x = 320 / 2 - 32; neko.y = 480 / 2 - 52; neko.frame = [0, 0, 1, 1, 2, 2, 3, 3]; 

// 手 var hand = new ExSprite(42, 32); hand.image = core.assets["images/cf307/nadenade.png"]; scene.addChild(hand); hand.x = neko.x + 27; hand.y = neko.y; // ねこちゃんをなでると hand.addEventListener(Event.TOUCH_START, function(){ hand.frame = 1; neko.tl.moveBy(0, -5, 2); neko.tl.moveBy(0, 5, 2); counter++; console.log("なでっ!!"); console.log(counter); label.text = counter; // 33以上でおすわり if(counter >= 33){ console.log("おすわりニャン!!"); neko.image = core.assets["images/cf307/nekoosuwari.png"]; neko.tl.clear(); } // 66以上で箱すわり if(counter >= 66){ console.log("箱すわりニャン!!"); neko.image = core.assets["images/cf307/nekohako.png"]; hand.tl.moveTo(hand.x, neko.y + 10, 0); }      // 100以上でおやすみ if(counter >= 100){ console.log("極楽ニャン!!"); neko.image = core.assets["images/cf307/nekonemuri.png"]; hand.remove(); } });

// なで終わり hand.addEventListener(Event.TOUCH_END, function(){ hand.frame = 0; });

//========== // ここまで //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

!57

Page 58: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== // EnchantJS enchant(); var gameManager; var core; var scene; window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); }

◉ 工夫したところ

・手を出してクリックすると手が動くようなアニメーションにしてなでているような感じを出した。

・猫の画像を変えていき、なでていたらどうなっていくのか期待をもたせるようにしたところ。

!58

Page 59: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

9 いきなりボス

◉ 内容

・いきなりボス(強いキャラ)と戦うゲーム。

・戦闘機はボタンで動かす。

・敵が輪っかを戦闘機に目掛けて投げて来るので避けなければいけない。

◉ このゲームで使っている仕組み ・スコア表示(ENTER_FRAME)

・自機に向かって飛んで来る輪(moveTo)

!59

Page 60: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

9−1 スコア

ボスにビームが当たったら、スコアを減らす。まず、スコアのためのラベルを表示する。

var score = 500; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'white'; scoreLabel.font = "24px ‘PixelMplus10'";

これだけでは、スコアは表示されない。どんどんラベルの中身を更新する必要があるのだ。

ENTER_FRAMEとは この場合は、16分の一秒ごとに判定して処理してくれる引数である

(何分の一秒かは、設定によって異なる)

scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'ボス : ' + score; })

9−2戦闘機への攻撃

ボスに戦闘機を狙って攻撃させる。そのためにはmoveToを使う。

soldier.tl.delay(170);

!60

Page 61: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

soldier.tl.then(function(){ soldier.tl.delay(30); soldier.tl.then(function(){ var wa = new ExSprite(38, 38); wa.image = core.assets["images/washi_o.png"]; wa.x = boss.x + boss.width / 2 - wa.width / 2; wa.y = boss.y + 128 / 4 - 19; bossGroup.addChild(wa); wa.tl.moveTo(soldier.x, 420, 20);//ここで戦闘機へ動かしている。 wa.tl.then(function(){ wa.remove(); }); }); soldier.tl.loop();

ボスの攻撃なのに、soldier(戦闘機)のtl(タイムライン)を使っているのは、

ボスを動かす所

boss.tl.moveBy(0, 150, 20); boss.tl.scaleTo(0.5, 0.5, 0); boss.tl.scaleTo(2, 2 , 20); boss.tl.then(function() { boss.tl.moveBy(100, 0, 20); boss.tl.moveBy(-100, 0, 20); boss.tl.moveBy(-100, 0, 20); boss.tl.moveBy(100, 0, 20); boss.tl.loop(); });  でボスのタイムラインを使ってしまっているからである。

そして、当たってしまうと、ゲームオーバになる。

soundb.stop(); var gameover= new ExSprite(189, 97); gameover.image = core.assets["images/cf307/gameoverg.png"]; gameover.x = 320 / 2 - gameover.width / 2; gameover.y = 480 / 2 - gameover.height / 2; scene.addChild(gameover); gameover.scale(0.5, 0.5); gameover.tl.scaleTo(1.5, 1.5, 20); var sound = core.assets["sounds/cf307/ME042-.mp3"]; sound.play(); gameover.tl.then(function() { core.stop();

!61

Page 62: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

})

!62

Page 63: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ "images/title.png",// CodeFriendsタイトル //”sounds/hit.mp3", //“sounds/jump.mp3", "images/back_space.png",    //“images/cf307/xevious green 2.png", "images/b_red.png", "images/beam.png", "sounds/beam.mp3", "images/cf307/dehedehe.png", "images/cf307/xevious green 32.png", "images/b_right.png", "images/b_left.png", "images/bomb.png", "images/ky_land.png", "images/washi_o.png", "sounds/bgm_boss.mp3", "sounds/bomb_l.mp3", "sounds/bomb_m.mp3", "images/cf307/gameoverg.png", "images/clear.png", "sounds/cf307/maou07.mp3", "sounds/cf307/ME019.mp3", "sounds/cf307/ME042-.mp3", ]; function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

//宇宙1 var space = new ExSprite(320, 480); space.image =core.assets["images/back_space.png"]; scene.addChild(space); space.tl.moveTo(0, -480, 0); space.tl.moveBy(0, 960, 200); space.tl.loop(); space.tl.skip(100);

//宇宙2 var space2 = new ExSprite(320, 480); space2.image =core.assets["images/back_space.png"]; scene.addChild(space2); space2.tl.moveTo(0, -480, 0); space2.tl.moveBy(0, 960, 200); space2.tl.loop(); space2.tl.skip(0);

!63

Page 64: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

   //ビームグループ var beamGroup = new Group(); scene.addChild(beamGroup);

//BGM var soundb = core.assets['sounds/bgm_boss.mp3'].clone(); soundb.play(); // 戦闘機 var soldier = new ExSprite(32, 32); soldier.image = core.assets["images/cf307/xevious green 32.png"]; soldier.x = 320 / 2 - 16; soldier.y = 350; scene.addChild(soldier); soldier.addCollision(bossGroup);

//ビームボタン    var bred = new ExSprite(62, 110 / 2); bred.image = core.assets["images/b_red.png"]; bred.x = 320 / 2 - 31; bred.y = 420; scene.addChild(bred); bred.addEventListener(Event.TOUCH_START, function(){ bred.frame = 1; var beam = new ExSprite(6, 32); beam.image = core.assets["images/beam.png"]; beam.x = soldier.x + soldier.width / 2 - beam.width /2; beam.y = 300; beamGroup.addChild(beam); beam.tl.moveBy(0, -480, 40) beam.tl.then(function(){ beam.remove }); var sound = core.assets['sounds/beam.mp3'].clone(); sound.play(); }); bred.addEventListener(Event.TOUCH_END, function(){ bred.frame = 0; });

///ビームグループ var beamGroup = new Group(); scene.addChild(beamGroup);

//ボスアタックグループ var bossGroup = new Group(); scene.addChild(bossGroup);    //ボスの攻撃!! scene.tl.delay(150); scene.tl.then(function(){ var bossbe = new ExSprite(25, 110); bossbe.image = core.assets["images/ky_land.png"]; bossbe.x = boss.x + boss.width / 2 - 25 / 2; bossbe.y = boss.y + 50;

!64

Page 65: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bossGroup.addChild(bossbe); bossbe.tl.moveBy(0, 400, 50); bossbe.tl.then(function(){ bossbe.remove(); }); }); scene.tl.loop(); soldier.tl.delay(170); soldier.tl.then(function(){ soldier.tl.delay(30); soldier.tl.then(function(){ var wa = new ExSprite(38, 38); wa.image = core.assets["images/washi_o.png"]; wa.x = boss.x + boss.width / 2 - wa.width / 2; wa.y = boss.y + 128 / 4 - 19; bossGroup.addChild(wa); wa.tl.moveTo(soldier.x, 420, 20); wa.tl.then(function(){ wa.remove(); }); }); soldier.tl.loop(); });

soldier.addCollision(bossGroup);

//ボス var boss = new ExSprite(64, 128 / 2); boss.image = core.assets["images/cf307/dehedehe.png"]; boss.x = 320 / 2 - 128 / 4; boss.y = -128 / 2 ; scene.addChild(boss); boss.frame = [0 , 0 , 0, 1, 1 , 1]; boss.tl.delay(30); boss.tl.moveBy(0, 150, 20); boss.tl.scaleTo(0.5, 0.5, 0); boss.tl.scaleTo(2, 2 , 20); boss.tl.then(function() { boss.tl.moveBy(100, 0, 20); boss.tl.moveBy(-100, 0, 20); boss.tl.moveBy(-100, 0, 20); boss.tl.moveBy(100, 0, 20); boss.tl.loop(); }); boss.addCollision(beamGroup);

//ぶつかったらー10 boss.addEventListener(Event.COLLISION, function(e) { var sound = core.assets['sounds/cf307/maou07.mp3'].clone(); sound.play(); score -= 10; if(score < 1){ boss.remove(); var bomb = new ExSprite(160 /5, 32); bomb.image = core.assets["images/bomb.png"]; bomb.x = boss.x + boss.width / 2 - bomb.width / 2;

!65

Page 66: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bomb.y = boss.y + 64 / 2 - 32 / 2 ; scene.addChild(bomb);      var sound = core.assets['sounds/bomb_l.mp3'].clone(); sound.play(); bomb.frame = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, null]; bomb.tl.scaleTo(10, 10, 0); bossGroup.remove(); soundb.stop(); bomb.tl.delay(30); bomb.tl.then(function(){ var clear = new ExSprite(260, 70); clear.image = core.assets["images/clear.png"]; clear.x = 320 / 2 - clear.width / 2; clear.y = 216; scene.addChild(clear); var sound = core.assets["sounds/cf307/ME019.mp3"]; sound.play(); }); } }); //ボタン右 var bright = new ExSprite(62, 110 / 2); bright.image = core.assets["images/b_right.png"]; bright.x = 120 + 70; bright.y = 420; scene.addChild(bright);

bright.addEventListener(Event.TOUCH_START, function(){ bright.frame = 1; soldier.x += 10 });

bright.addEventListener(Event.TOUCH_END, function(){ bright.frame = 0; });

//ボタン左 var bleft = new ExSprite(62, 55); bleft.image = core.assets["images/b_left.png"]; bleft.x = bred.x - 62; bleft.y = 420; scene.addChild(bleft);

   bleft.addEventListener(Event.TOUCH_START, function(){ bleft.frame = 1; soldier.x -= 10 });

bleft.addEventListener(Event.TOUCH_END, function(){ bleft.frame = 0; });    // スコア表示 var score = 500; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel);

!66

Page 67: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'white'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'ボス : ' + score; });

//戦闘機当たる soldier.addEventListener(Event.COLLISION, function(e) { var bomb2 = new ExSprite(160 /5, 32); bomb2.image = core.assets["images/bomb.png"]; bomb2.x = soldier.x + soldier.width / 2 - bomb2.width / 2; bomb2.y = soldier.y + 32 / 2 - 32 / 2; scene.addChild(bomb2); var sound = core.assets['sounds/bomb_m.mp3'].clone(); sound.play(); bomb2.frame = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, null];     soldier.remove(); bomb2.addEventListener(Event.ANIMATION_END, function(){ soundb.stop(); var gameover= new ExSprite(189, 97); gameover.image = core.assets["images/cf307/gameoverg.png"]; gameover.x = 320 / 2 - gameover.width / 2; gameover.y = 480 / 2 - gameover.height / 2; scene.addChild(gameover); gameover.scale(0.5, 0.5); gameover.tl.scaleTo(1.5, 1.5, 20); var sound = core.assets["sounds/cf307/ME042-.mp3"]; sound.play(); gameover.tl.then(function() { core.stop(); }); }); }); //========== // ここまで //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== // EnchantJS enchant(); var gameManager; var core; var scene;

!67

Page 68: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); }

//========== // Manifest ‘[cf]{“appTitle”:””,"appIcon":"../images/icon.png"}[/cf

◉ 工夫したところ ・ボスが戦闘機を狙ってくるようにしたこと。

◉ 難しかったところ ・スコアを表示させるところ。ただラベルをだすだけではいけないのが難しかった。

・一度にいくつものものを動かすところ。ボス、戦闘機、輪、など、たくさん動かすので、

全部ちゃんと動かすのがたいへんだった。

!68

Page 69: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

10 不屈のカニ

◉ 内容 ・カニをタップするゲーム。

・ランダムで出てくるカニをタップして当たると得点が入り、カニが引っ込む。

・時間がきたらゲーム終了となり、得点によって異なる結果画面が出る。

◉ このゲームで使っている仕組み ・画面遷移

・論理演算子 &&

!69

Page 70: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

10−1 画面遷移

画面(シーン)は、

function gameStart(){// ゲーム画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

  (画面の中身のソースコード)

//========== // ここまで //========== }

というように、

function gameStart(){  ではじまり、

}

までのひとかたまりから成っている。上の例では、シーンの中身がわかりやすいように、//

!70

Page 71: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

ここから //ここまで という目印を付けて、その間にシーンの画面の中身となる画像やゲーム(イベント)を書き込むようになっている。

ここでは、シーンの名前を

gameStart()

としているが、この名前を変えていくつもの画面を作成して遷移させることができるという仕組みだ。

今回のゲームでは、ゲーム終了後に、得点によって遷移する画面を変え、異なる結果がでるようにした。

10−2 論理演算子

論理演算子とは、2つの値についての論理値を求めるものであり、条件分岐などに用いられる。その中で今回使用した「&&」は、論理積といわれ、2つの値がともにtrueの場合にtrueを返すものである。日本語でいうところの、「AかつB」の「かつ」に当たる。

例えば、今回のゲームでは得点が0点以上かつ40点未満の場合に、

resultStart1();

と名付けた結果画面に遷移させたいので、ifの中の条件をこの論理演算子を使って、

if(0 <= score && score < 40){

と書く。

結果画面の一つ目である resultStart1 は、次のように作成した。

function resultStart1(){// ゲーム終了画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここからresultStart1 //==========

scene.backgroundColor = "black"; var sound = core.assets ["sounds/cf307/madamada.mp3"].clone(); sound.play(); //1つ目

!71

Page 72: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.tl.delay(16).then(function() { var label = new Label("まだまだだね"); label.color = 'white'; label.font = "20px 'PixelMplus10'"; label.textAlign = "center"; label.y = 100; scene.addChild(label); label.tl.rotateBy(50, 20); }); scene.tl.delay(25).then(function() { var label = new Label("continue?"); label.color = 'white'; label.font = "20px 'PixelMplus10'"; label.textAlign = "center"; label.y = 200; scene.addChild(label); }); scene.addEventListener(Event.TOUCH_END, function(){ gameStart(); }); //========== // ここまで //========== }

結果画面2、結果画面3についても同様に作成した。

以上を組み合わせて、終了時の得点によって、結果の画面をそれぞれ、

・0点以上40点未満の場合→ resultStart1

・40点以上70点以下の場合→ resultStart2

・80点以上の場合→ resultStart3

として、次のように画面遷移を設定した。

// 結果へ scene.tl.delay(520).then(function() { if(0 <= score && score < 40){ sound.stop(); resultStart1(); console.log("0<30"); } if(40 <= score && score <= 70){

!72

Page 73: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

sound.stop(); resultStart2(); } if(score >= 80){ sound.stop(); resultStart3(); console.log("60超え"); } });

!73

Page 74: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード var assets = [ // 背景 "images/kani_land.png", // カニ、かめ "images/kani_sawa.png", // 土管 "images/kani_tun_l.png", // CodeFriendsタイトル "images/title.png", //BGM "sounds/cf307/BGM-komichi-wav.mp3", "sounds/cf307/madamada.mp3", "sounds/cf307/trumpet1.mp3", "sounds/cf307/recollection1.mp3", //カニがタッチされた "sounds/cf307/boyon1.mp3", ];

function gameStart(){// ゲーム画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========       // 背景 var background = new ExSprite(320, 480); background.image = core.assets["images/kani_land.png"]; scene.addChild(background); // カニ var crab = new ExSprite(32, 32); crab.image = core.assets["images/kani_sawa.png"]; crab.x = 320 - 150 + 8; crab.y = 480 / 2 - 32 / 2 + 8; crab.originX = 0; crab.originY = 0; crab.scale(1.5, 1.5); scene.addChild(crab);

// 土管 var dokan = new ExSprite(32, 32); dokan.image = core.assets["images/kani_tun_l.png"]; dokan.x = 320 - 150; dokan.y = 480 / 2 - 32 / 2; dokan.originX = 0; dokan.originY = 0; dokan.scale(2, 2); scene.addChild(dokan); // ラベル

!74

Page 75: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var score = 0; scoreLabel = new Label('0'); scene.addChild(scoreLabel); scoreLabel.x = 110; scoreLabel.y = 40; scoreLabel.width = 100; scoreLabel.textAlign = "center"; scoreLabel.color = 'white'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = ' ' + score; });

// BGM var sound = core.assets["sounds/cf307/BGM-komichi-wav.mp3"].clone(); sound.play();

dokan.tl.delay(50).then(function(){ var hensu = getRandom(1,4); if(hensu == 1){ crab.tl.moveTo(320 - 150, 480 / 2 - 32 / 2 + 5, 0); crab.tl.moveBy(64, 0, 10); crab.tl.moveBy(-64, 0, 10); //crab.tl.delay(50); crab.tl.then(function(){ console.log("もういっちょ!!"); crab.frame = 0; }); }    if(hensu ==2){ crab.tl.moveTo(dokan2.x-60, dokan2.y, 0); crab.tl.moveBy(0, 96, 10); crab.tl.moveBy(0, -96, 10); crab.tl.then(function(){ console.log("もういっちょ!!"); crab.frame = 0; }); } if(hensu == 3){ crab.tl.moveTo(dokan.x - 52, dokan.y + 5,0); crab.tl.moveBy(-64, 0, 10); crab.tl.moveBy(64, 0, 10); //crab.tl.delay(50); crab.tl.then(function(){ console.log("もういっちょ!!"); crab.frame = 0; }); } if(hensu == 4){ crab.tl.moveTo(dokan4.x + 5, dokan4.y - 50, 0); crab.tl.moveBy(0, -96, 10); crab.tl.moveBy(0, 96, 10); crab.tl.then(function(){ console.log("4です"); crab.frame = 0; }); }

!75

Page 76: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}); dokan.tl.loop();   // タップされたカニ!! crab.addEventListener(Event.TOUCH_START,function(){ console.log("無念カニ。"); var sound = core.assets["sounds/cf307/boyon1.mp3"].clone(); sound.play(); crab.frame = 1; score += 10; }); // ドカン2 var dokan2 = new ExSprite(32, 32); dokan2.image = core.assets["images/kani_tun_l.png"]; dokan2.x = dokan.x + 32; dokan2.y = dokan.y + 32 * 2; dokan2.originX = 0; dokan2.originY = 0; dokan2.scale(2, 2); scene.addChild(dokan2); dokan2.tl.rotateBy(90, 0);

// ドカン3 var dokan3 = new ExSprite(32, 32); dokan3.image = core.assets["images/kani_tun_l.png"]; dokan3.x = dokan.x - 3; dokan3.y = dokan.y + 32 * 2; dokan3.originX = 0; dokan3.originY = 0; dokan3.scale(2, 2); scene.addChild(dokan3); dokan3.tl.rotateBy(180, 0);

   // ドカン4 var dokan4 = new ExSprite(32, 32); dokan4.image = core.assets["images/kani_tun_l.png"]; dokan4.x = dokan.x - 32; dokan4.y = dokan.y; dokan4.originX = 0; dokan4.originY = 0; dokan4.scale(2, 2); scene.addChild(dokan4); dokan4.tl.rotateBy(270, 0); // 結果へ scene.tl.delay(520).then(function() { if(0 <= score && score < 40){ sound.stop(); resultStart1(); console.log("0<30"); } if(40 <= score && score <= 70){ sound.stop(); resultStart2(); }

!76

Page 77: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

if(score >= 80){ sound.stop(); resultStart3(); console.log("60超え"); } }); //========== // ここまで //========== }

function resultStart1(){// ゲーム終了画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここからresultStart1 //==========

scene.backgroundColor = "black"; var sound = core.assets ["sounds/cf307/madamada.mp3"].clone(); sound.play(); //1つ目 scene.tl.delay(16).then(function() { var label = new Label("まだまだだね"); label.color = 'white'; label.font = "20px 'PixelMplus10'"; label.textAlign = "center"; label.y = 100; scene.addChild(label); label.tl.rotateBy(50, 20); }); scene.tl.delay(25).then(function() { var label = new Label("continue?"); label.color = 'white'; label.font = "20px 'PixelMplus10'"; label.textAlign = "center"; label.y = 200; scene.addChild(label); }); scene.addEventListener(Event.TOUCH_END, function(){ gameStart(); }); //========== // ここまで //========== }

function resultStart2(){// ゲーム終了画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

!77

Page 78: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//========== // ここからresultStart2 //==========

scene.backgroundColor = "green"; var sound = core.assets["sounds/cf307/recollection1.mp3"].clone(); sound.play();

//2つ目 scene.tl.delay(16).then(function() { var label = new Label("なかなかだね"); label.color = 'white'; label.font = "20px 'PixelMplus10'"; label.textAlign = "center"; label.y = -100; scene.addChild(label); label.tl.moveBy(0, 300,20, enchant.Easing.ELASTIC_EASEOUT); }); scene.tl.delay(16).then(function() { var label = new Label("こんてぃにゅー?"); label.color = 'white'; label.font = "20px 'PixelMplus10'"; label.textAlign = "center"; label.y = 300; scene.addChild(label); });

scene.addEventListener(Event.TOUCH_END, function(){ gameStart(); }); //========== // ここまで //========== }  function resultStart3(){// ゲーム終了画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();         //========== // ここからresultStart3 //========== scene.backgroundColor = "gold";

var sound = core.assets["sounds/cf307/trumpet1.mp3"].clone(); sound.play(); scene.tl.delay(16).then(function() { var label = new Label("すばらしい"); label.color = 'white'; label.font = "20px 'PixelMplus10'"; label.textAlign = "center"; label.y = 100; scene.addChild(label);

!78

Page 79: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.tl.scaleBy(2,2,10); });

scene.tl.delay(16).then(function() { var label = new Label("まいったカニ"); label.color = 'white'; label.font = "20px 'PixelMplus10'"; label.textAlign = "center"; label.y = 200; scene.addChild(label); });

var crab = new ExSprite(32, 32); crab.image = core.assets["images/kani_sawa.png"]; crab.x = 320 - 150 + 8; crab.y = 250; crab.originX = 0; crab.originY = 0; crab.scale(1.5, 1.5); scene.addChild(crab); crab.frame = 1;

scene.addEventListener(Event.TOUCH_END, function(){ gameStart(); }); //========== // ここまで //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== //EnchantJS var gameManager; var core; enchant(); gameManager = new common.GameManager(); window.onload = function() { core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); };

!79

Page 80: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 工夫したところ ・土管の配置を工夫して、一匹のカニがどこから出てくるかわからないというゲームにした。

・得点によって違った結果画面が出るようにしたところ。

◉ 難しかったところ ・変数を使ってカニがランダムに出てくるようにするのに苦労した。

・結果画面を点数によってかえるところがむずかしかった。

!80

Page 81: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

11 エアギターたぬき

◉ 内容

・たぬきがジャンプしながらコインを取っていくゲーム。

・コインの下にいる虫に当たるとゲームオーバー。

・進むにつれてスピードがアップしていくが、20点でゲームクリアとなる。

◉ このゲームで使っている仕組み ・イージング enchant.Easing.

・タグ tag

!81

Page 82: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

11−1 イージング

イージングとは、動きをよりリアルに見せるためのものである。例えば、物を動かすときには最初から最後まで一定の速さではなく、最初は遅くて後から勢いがついて速さを増していくような動きをしたりする。そういったリアルな動きを表現する為に、いろいろなイージングが用意されている。

 

例えば、今回のゲームで使った QUAD_EASEOUT は、

右の図のように、勢い良く速度を上げていって止まるような、ちょうど物体を上に放り投げて上で止まるまでのような動きを表現するのに適している。今回はジャンプの動きなので、上がるときにQUAD_EASEOUTを使い、落ちるときにQUAD_EASEINを使った。

通常の、moveBy, moveToに加えて、次のように書く。

tanuki.tl.moveBy(0, -100, 10, enchant.Easing.QUAD_EASEOUT); tanuki.tl.moveBy(0, 100, 10, enchant.Easing.QUAD_EASEIN);

!82

Page 83: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

11−2 タグ

衝突判定を使う場合、例えば「コイン」に衝突した場合と「虫」に衝突した場合では別のアクションを起こしたい場合がある。しかし、 衝突のイベントリスナ

 .addEventListener(Event.COLLISION,function(e){

は、相手による判別までは含まれないので、これに加えて、対象に「タグ」という目印をつけることで衝突の相手によって反応を変えることができるのだ。

bugに「むし」というタグをつけるには、

bug.tag = “むし”

とする。

functionの中の「衝突した相手」は

e.collision.target

なので、さらに「衝突したもののタグ」を指すには、

e.collision.target.tag

と書く。さらに「衝突した相手のタグがむしである」を示すのは、

e.collision.target.tag == "むし"

となる。

これを使って、「むしというタグをつけたものと衝突したとき」「アイテムというタグのついたものと衝突したとき」というように場合をわけて処理をすれば、衝突の相手によってアクションを変えることができるという訳である。

これらを使ってタグとifの条件分岐を使って「むし」と「アイテム」の衝突イベントを設定するには、次のように書くことができる。

tanuki.addEventListener(Event.COLLISION, function(e){ //虫と衝突したとき if (e.collision.target.tag == "むし") { (むしと衝突したときにさせたい処理を書く) } //アイテムと衝突したとき if (e.collision.target.tag == "アイテム") { (アイテムと衝突したときにさせたい処理を書く) } });

!83

Page 84: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード var assets = [ // 背景 "images/back_mountain.png", "images/kati_land.png", // コイン "images/coin.png", // 虫 "images/bug.png", // たぬき "images/tanu.png", // CodeFriendsタイトル "images/title_gameclear.png", "images/title_gameover.png", "images/title.png", "sounds/cf307/bass11.mp3", "images/title_gameclear.png", "images/cf307/guttanuki.png", "images/cf307/umehaku.png", ];

function gameStart(){// ゲーム画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

var sound = core.assets['sounds/cf307/bass11.mp3'].clone(); sound.play();

//グループ var stageGroup = new Group(); scene.addChild(stageGroup); scene.tl.then(function(){ if(score < 3){ console.log("<3"); stageGroup.tl.moveBy(-320, 0, 50); } stageGroup.tl.moveTo(0, 0, 0); stageGroup.tl.then(function(){ var sound = core.assets['sounds/cf307/bass11.mp3'].clone(); sound.play(); stageGroup.addChild(item1); item1.x = 200; item1.y = 300; }); }); // 背景 var background = new ExSprite(640, 480); background.image = core.assets["images/back_mountain.png"];

!84

Page 85: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

background.x = 0; background.y = 0; stageGroup.addChild(background); var land = new ExSprite(640, 60); land.image = core.assets["images/kati_land.png"]; land.x = 0; land.y = 420; stageGroup.addChild(land);

// スコア var score = 0; var scoreLabel = new Label(); scoreLabel.text = 'SCORE : 0'; scoreLabel.color = 'white'; scoreLabel.font = "24px 'PixelMplus10'"; scene.addChild(scoreLabel);

//むし1 var bug1 = new ExSprite(32, 32); bug1.image = core.assets["images/bug.png"]; bug1.x = 200; bug1.y = 390; bug1.tag = "むし"; stageGroup.addChild(bug1); //むし2 var bug2 = new ExSprite(32, 32); bug2.image = core.assets["images/bug.png"]; bug2.x = 520; bug2.y = 390; bug2.tag = "むし"; stageGroup.addChild(bug2);

//アイテム1 var item1 = new ExSprite(16, 20); item1.image = core.assets["images/coin.png"]; item1.x = 200; item1.y = 300; item1.tag = "アイテム"; stageGroup.addChild(item1); //アイテム2 var item2 = new ExSprite(16, 20); item2.image = core.assets["images/coin.png"]; item2.x = 520; item2.y = 300; item2.tag = "アイテム"; stageGroup.addChild(item2);

//たぬき var tanuki = new ExSprite(32, 32); tanuki.image = core.assets["images/tanu.png"]; tanuki.x = 30; tanuki.y = 390; tanuki.frame = [0, 1, 2]; scene.addChild(tanuki); scene.addEventListener(Event.TOUCH_START, function(){

!85

Page 86: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

tanuki.frame = [3]; tanuki.tl.moveBy(0, -100, 10, enchant.Easing.QUAD_EASEOUT); tanuki.tl.moveBy(0, 100, 10, enchant.Easing.QUAD_EASEIN); tanuki.tl.then(function() { tanuki.frame = [0,1,2]; }); }); tanuki.addCollision(bug1); tanuki.addCollision(bug2); tanuki.addCollision(item1); tanuki.addCollision(item2); tanuki.addEventListener(Event.COLLISION, function(e){ //虫と衝突したとき if (e.collision.target.tag == "むし") { //core.stop(); // スクロールを停止 stageGroup.tl.clear(); // タヌキのフレームを変更 tanuki.frame = [4]; //ゲームオーバー var gameover = new ExSprite(147, 48); gameover.image = core.assets['images/title_gameover.png']; gameover.x = 320 / 2 - 147 / 2;        gameover.y = 480 / 2 - 48 / 2; gameover.scale(0,0); scene.addChild(gameover); gameover.tl.scaleTo(1,1,5).then(function() { var label = new Label(" TAP TO RESTART"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220 + 80; scene.addChild(label); scene.addEventListener(Event.TOUCH_START, function() { gameStart(); }); }); } //アイテムと衝突したとき if (e.collision.target.tag == "アイテム") { score++; scoreLabel.text = 'SCORE : ' + score; e.collision.target.tl.moveBy(10, -64, 10); e.collision.target.tl.then(function() { e.collision.target.remove(); }); //} アイテムと衝突したときに全部含めないとむしに当たったときにバグる if(score > 0 && score < 3){ console.log("0<3"); stageGroup.tl.moveBy(-320, 0, 50); stageGroup.tl.moveTo(0, 0, 0); stageGroup.tl.then(function(){ var sound = core.assets[‘sounds/cf307/

bass11.mp3'].clone(); sound.play(); stageGroup.addChild(item1);

!86

Page 87: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

item1.x = 200; item1.y = 300; }); } if(score >= 3 && score < 6){ console.log("3<=7"); stageGroup.tl.moveBy(-320, 0, 35); stageGroup.tl.moveTo(0, 0, 0); stageGroup.tl.then(function(){ var sound = core.assets['sounds/cf307/bass11.mp3'].clone(); sound.play(); stageGroup.addChild(item1); item1.x = 200; item1.y = 300; }); } if(score >= 6 && score < 12){ console.log("7<=12"); stageGroup.tl.moveBy(-320, 0, 30); stageGroup.tl.moveTo(0, 0, 0); stageGroup.tl.then(function(){ var sound = core.assets['sounds/cf307/bass11.mp3'].clone(); sound.play(); stageGroup.addChild(item1); item1.x = 200; item1.y = 300; }); } if(score >= 12 && score < 16){ console.log("12<18"); stageGroup.tl.moveBy(-320, 0, 25); stageGroup.tl.moveTo(0, 0, 0); stageGroup.tl.then(function(){ var sound = core.assets['sounds/cf307/bass11.mp3'].clone(); sound.play(); stageGroup.addChild(item1); item1.x = 200; item1.y = 300; }); } if(score >= 16 && score < 20){ console.log("18<20"); stageGroup.tl.moveBy(-320, 0, 20); stageGroup.tl.moveTo(0, 0, 0); stageGroup.tl.then(function(){ var sound = core.assets['sounds/cf307/bass11.mp3'].clone(); sound.play(); stageGroup.addChild(item1); item1.x = 200; item1.y = 300; }); } // クリア if(score >= 20){ bug1.remove(); bug2.remove(); item1.remove(); item2.remove();

!87

Page 88: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var clear = new ExSprite(147, 48); clear.image = core.assets['images/title_gameclear.png']; clear.x = 320 / 2 - 147 / 2; clear.y = 240 / 2 - 48 / 2; clear.scale(0,0); scene.addChild(clear); var tanuki1 = new ExSprite(32, 32); tanuki1.image = core.assets['images/cf307/guttanuki.png']; tanuki1.x = tanuki.x; tanuki1.y = tanuki.y; scene.addChild(tanuki1); tanuki1.frame = [0, 0, 1, 1]; tanuki1.tl.moveTo(320 / 2 - 16, 420 - 64 + 16, 10).and().

scaleTo(2, 2, 10); tanuki.remove(); bug1.remove(); clear.tl.scaleTo(1,1,10).then(function() { stageGroup.tl.clear(); var ume = new ExSprite(108, 66); ume.image = core.assets['images/cf307/umehaku.png'] ume.x = 320 / 2 - 54; ume.y = 480 / 2- 33; scene.addChild(ume); ume.frame = [0, 0, 1, 1]; ume.tl.delay(15).then(function(){ var label = new Label(" TAP TO RESTART"); label.color = 'White'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220 + 80; scene.addChild(label); scene.addEventListener(Event.TOUCH_START, function() { gameStart(); }); }); }); } } });

//========== // ここまで //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== //EnchantJS

!88

Page 89: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var gameManager; var core; enchant(); gameManager = new common.GameManager(); window.onload = function() { core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); };

◉ 工夫したところ ・たぬきの動きが、エアギターを弾いているように見えたので、ギターのBGMをつけた。

・コインを取ったタイミングで背景も動かして、スクロールしているように見せた。

・コインを取っていくと、だんだん速くなって難しくなっていくようにした。

◉ 難しかったところ

・はじめは、背景とコインを一緒にしてループさせる方法でやろうとしたが、そのやり方だとコインを一度取ってしまうと消えてしまって出てこなくなる。そこでやり方を変えて、コインを取る度に背景を動かしてコインを出す方法に変えて成功した。

・進むにつれてスクロールを早くしていくところが難しかった。

!89

Page 90: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

12 ブロック崩し2000

◉ 内容

・バーを動かして玉を打ち返し、ブロックを消していくゲーム。

・バーはタッチで動かすことができる。

・打ち返すことができず落としたらゲームオーバー。

・2000個すべて消したらゲームクリアとなる。

◉ このゲームで使っている仕組み

・繰り返し処理 for

・場合の数 if

・距離を測る getDistance

・速度を一定にする 時間=距離÷速さ

!90

Page 91: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

12−1 繰り返し処理

このゲームでは、たくさんのブロックを配置する必要があるが、今までのように一つの画像に対してそれぞれ配置するためのソースコードを書いていては大変である。そこで、繰り返し処理を使って、一度にブロックを配置することにした。

まず、たくさんのブロックを blooks という名前で、Array(配列)として定義する。

var blocks = new Array();

次に、forを使って繰り返し処理をする。繰り返し処理には、変数を用いる。変数は何でもよいが、今回は「 i 」を使う。例えば、5回繰り返したい場合なら、

for(var i=0; i<5; i++){ (繰り返したい処理を書く) } とすれば、i が0から始まって5未満まで、すなわち0、1、2、3、4と5回{ }内の処理を繰り返すということになる。

!91

Page 92: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

今回は2000個のブロックを置きたいので、次のように書いた。

for(var i=0; i< 2000; i++){ // ブロック var block = new ExSprite(8, 8); block.image = core.assets["images/cf307/block8p.png"]; block.x = 0 + ((i % 40) * 8); block.y = 0 + (Math.floor(i / 40) * 8); blockGroup.addChild(block); block.tag = "b";// タグをつけます blocks.push(block); }

12−2 場合の数

今回のゲームでは、球を打ち返すことでブロックを消していくのだが、ただまっすぐに上の壁に当たるだけでは横の壁際のブロックには当たらない。実際の球の動きを考えれば、そのまま正面に当たる場合もあれば、横の壁に当たってから正面の壁に当たる場合もあるだろう。そこで、球の動きについて、何通りのパターンがあるか場合の数で考え、それをランダムに出すことにした。

まず、向こうの正面の壁に当たるまでのパターンとして、

 ①そのまままっすぐ正面に当たる

 ②左の壁に当たってから正面に当たる

 ③右の壁に当たってから正面にあたる

の3パターンがある。

同様に、向こうの正面に当たってからこちらのバーに戻って

くる動きについても、

 ①’そのまままっすぐ戻ってくる

 ②’左の壁に当たってから戻ってくる

 ③’右の壁に当たってから戻ってくる

の3パターンに分けることができる。

これを組み合わせると全部で9通りのパターンになるので、

それぞれが均等な確率になるようにランダムを使った。

 まず、向こうの正面にあたるまでの動き①~③について、

1から3までの範囲で乱数を作って、これをP1とすると、

!92

Page 93: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

P1=1ならば①、P1=2ならば②、P1=3ならば③とする。

向こうの正面に当たった時点で、また乱数を取り、今度はこちらに戻ってくる球の動きについてP2とし、P2=1ならば①’、P2=2ならば②’、P2=3ならば③’とすると、

1→1、1→2、1→3、2→1、2→2、2→3、3→1、3→2、3→3

の9パターンとなり、それぞれ1/9の確率になる。次のように書いた。(・・・は略)

// 玉の動きのパターン var p1 = getRandom(1, 3); // (1)最初に正面に当たる if(p1 == 1){ // 正面に当たった後 var p2 = getRandom(1, 3); // (1)-1そのまま戻る if(p2 == 1){ ・・・ } // (1)-2左の壁に当たってから戻る      if(p2 == 2){ ・・・ } // (1)-3右の壁に当たってから戻る if(p2 == 3){ ・・・ } } // (2)最初に左の壁に当たる if(p1 == 2){ // 左→正面に当たった後 var p2 = getRandom(1, 3); // (2)-1そのまま戻る if(p2 == 1){ ・・・ } // (2)-2左の壁に当たってから戻る      if(p2 == 2){ ・・・ } // (2)-3右の壁に当たってから戻る if(p2 == 3){

!93

Page 94: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

・・・ } } // (3)最初に右の壁に当たる if(p1 == 3){ // 正面に当たった後 var p2 = getRandom(1, 3); // (3)-1そのまま戻る if(p2 == 1){ ・・・ } // (3)-2左の壁に当たってから戻る      if(p2 == 2){ ・・・ } // (3)-3右の壁に当たってから戻る if(p2 == 3){ ・・・ } }

12−3 距離を測る

球の動きについて、壁までの距離は打ち返したバーの位置によって違ってくるので、moveBy,moveToで動く時間を一定にしていると、短い距離では動きが遅くなり、長い距離では速くなってしまい、動きが一定にならない。

そこで、その都度出発地点から到達時点までの距離を測り、「時間=距離➗ 速さ」から時

間を割り出してその時間で動かすようにすることで、速度を一定にすることができる。

距離を出すには、次のように入力する。

var distance = getDistance(x座標の出発点, y座標の出発点, x座標の到達点, y座標の到達点);

よって、(tama.x,tama.y)という位置から、(x1, -9)という位置まで動かす場合の距離

distanceは、

var distance = getDistance(tama.x, tama.y, x1, -9);

!94

Page 95: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

となる。

12−4 速さを一定にする

まず、速さを決める。speedとして、15に設定する。

var speed = 15;

あとは、動かしたい距離を出し、「時間=距離÷速さ」なので、 この「速さ」に「speed」

を入れて時間を出す。

var distance = getDistance(tama.x, tama.y, x1, -9); var time = distance / speed;

求めた時間(time)を使って動かせば、速さを一定にすることができる。

tama.tl.moveTo(x1, -9, time);

以降、このゲームの中で動かす距離が異なっても、常に

speed = 15

を使って、「距離」から「時間」を割り出して「その時間」で動かせば、速さを一定にすることができる。

!95

Page 96: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ "images/back_space.png", "images/title.png",// タイトル "images/cf307/baayoko64.png", "images/xe_bullet_r.png", "images/gameover.png", "images/cf307/blueground.png", "sounds/cf307/decision1.mp3", "sounds/cf307/decision3.mp3", "sounds/cf307/rabohyuuu.mp3", "images/gameclear.png", "images/cf307/block8p.png",  "sounds/cf307/ME014-090610-loss02-wav.mp3", "sounds/cf307/hit04.mp3",    "images/bomb.png", "images/b_blue.png",  ];

function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

scene.backgroundColor = "darkgray"; // 背景 var sky = new ExSprite(320, 480); sky.image = core.assets["images/back_space.png"]; scene.addChild(sky);

// 地面 var ground = new ExSprite(320, 55); ground.image = core.assets["images/cf307/blueground.png"]; ground.x = 0; ground.y = 480; scene.addChild(ground);

// バー var bar = new ExSprite(64, 6); bar.image = core.assets["images/cf307/baayoko64.png"]; scene.addChild(bar); bar.x = 320 / 2 - 32; bar.y = 480 - 32; bar.tag = "bar"; //bar.scale(10, 1);// テスト用

// 玉グループ

!96

Page 97: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

   var tamaGroup = new Group(); scene.addChild(tamaGroup);     

// 玉 var tama = new ExSprite(9, 9); tama.image = core.assets["images/xe_bullet_r.png"]; //scene.addChild(tama); tama.x = bar.x + bar.width / 2 - tama.width / 2; tama.y = bar.y - tama.height; tamaGroup.addChild(tama); tama.originX = 0; tama.originY = 0; tama.scale(2, 2);  

// 最初の音 var sound0 = core.assets["sounds/cf307/decision3.mp3"].clone(); sound0.play();    // 玉の動き var x1 = getRandom(0, 320 - 5); //var x1 = getRandom(-320, 0);// テスト用 var speed = 15; var distance = getDistance(tama.x, tama.y, x1, -9); var time = distance / speed; console.log(time); tama.tl.moveTo(x1, -9, time, enchant.Easing.SINE_EASEOUT); // 最初に跳ね返る音 tama.tl.then(function(){ var sound1 = core.assets["sounds/cf307/decision1.mp3"].clone(); sound1.play(); }); var x2 = getRandom(0, 320 - 5); //var speed = 20; var distance = getDistance(x1, -9, x2, 480); var time = distance / speed; console.log(time); tama.tl.moveTo(x2, 480, distance / speed, enchant.Easing.SINE_EASEOUT);

// ブロックグループ var blockGroup = new Group(); scene.addChild(blockGroup);

// スコア表示 var score = 0; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'white'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });      // ブロック(繰り返し処理) var blocks = new Array(); for(var i=0; i< 2000; i++){

!97

Page 98: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// ブロック var block = new ExSprite(8, 8); block.image = core.assets["images/cf307/block8p.png"]; block.x = 0 + ((i % 40) * 8); block.y = 0 + (Math.floor(i / 40) * 8); blockGroup.addChild(block); block.tag = "b";// タグをつけます blocks.push(block); } // 当たり判定をつけます for(var i=0; i<blocks.length; i++){ tama.addCollision(blocks[i]); }

// 当たり判定 tama.addCollision(bar); tama.addEventListener(Event.COLLISION, function(e) { // クリア if(2000 <= score){ tama.remove(); var label6 = new Label("?! アンビリーバボー!!!!"); label6.x = 60; label6.y = 480 / 2 - 32 / 2 + 48; label6.color = "white"; label6.font = "24px 'PixelMplus10'"; scene.addChild(label6); var sound100 = core.assets["sounds/cf307/rabohyuuu.mp3"].clone(); sound100.play(); var clear = new ExSprite(230, 32); clear.image = core.assets["images/gameclear.png"]; scene.addChild(clear); clear.x = 320 / 2 - clear.width / 2; clear.y = 480 / 2 - clear.height; clear.scale(0.5, 0.5); clear.tl.scaleTo(1.4, 1.4, 4); clear.tl.scaleTo(1.2, 1.2, 4);    // 秘密のボタン clear.tl.then(function(){ var retry = new ExSprite(62, 55); retry.image = core.assets["images/b_blue.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 300 ; retry.tl.moveBy(0, 50, 20); // ボタンをタッチ retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; console.log("タッチしました"); }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart1(); }); var label = new Label("!?"); label.color = 'red';

!98

Page 99: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.font = "25px 'PixelMplus10'"; //label.textAlign = "center"; label.x = 135; label.y = 360 + 55; scene.addChild(label);     }); } // ブロックに当たったら if(e.collision.target.tag == "b"){ // クリア if(1999 <= score){ tama.remove(); var label6 = new Label("?! アンビリーバボー!!!!"); label6.x = 60; label6.y = 480 / 2 - 32 / 2 + 48; label6.color = "white"; label6.font = "24px 'PixelMplus10'"; scene.addChild(label6); var sound100 = core.assets["sounds/cf307/rabohyuuu.mp3"].clone(); sound100.play(); var clear = new ExSprite(230, 32); clear.image = core.assets["images/gameclear.png"]; scene.addChild(clear); clear.x = 320 / 2 - clear.width / 2; clear.y = 480 / 2 - clear.height; clear.scale(0.5, 0.5); clear.tl.scaleTo(1.4, 1.4, 4); clear.tl.scaleTo(1.2, 1.2, 4);    // 秘密のボタン clear.tl.then(function(){ var retry = new ExSprite(62, 55); retry.image = core.assets["images/b_blue.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 300 ; retry.tl.moveBy(0, 50, 20); // ボタンをタッチ   retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; console.log("タッチしました"); }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart1(); }); var label = new Label("!?"); label.color = 'red'; label.font = "25px 'PixelMplus10'"; //label.textAlign = "center"; label.x = 135; label.y = 360 + 55; scene.addChild(label);     }); } e.collision.target.tl.then(function() {

!99

Page 100: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

e.collision.target.remove();// 消します var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/bomb.png"]; bomb.x = e.collision.target.x; bomb.y = e.collision.target.y; scene.addChild(bomb); bomb.scale(0.5, 0.5); bomb.frame = [0, 1, 2, 3, 4, null]; //score += 2;// テスト用 score += 1; var sound = core.assets["sounds/cf307/hit04.mp3"].clone(); sound.play(); }); } // バーに当たったら if(e.collision.target.tag == "bar"){ tama.tl.clear(); // 玉の動きのパターン var p1 = getRandom(1, 3); // (1)最初に正面に当たる if(p1 == 1){ console.log("最初正面"); var x1 = getRandom(0, 320 - 9); var speed = 15; var distance = getDistance(tama.x, tama.y, x1, -9); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x1, -9, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); }); // 正面に当たった後 var p2 = getRandom(1, 3); // (1)-1そのまま戻る if(p2 == 1){ console.log("1−1"); var x2 = getRandom(0, 320 - 5); var distance = getDistance(x1, -9, x2, 480 - 5); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x2, 480 - 5, time, enchant.Easing.SINE_EASEOUT); } // (1)-2左の壁に当たってから戻る           if(p2 == 2){ console.log("1−2"); var y1 = getRandom(0, 200); var distance = getDistance(x1, -9, 0, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(0, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){

!100

Page 101: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(0, y1, x2, 480 - 5); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x2, 480 - 5, time, enchant.Easing.SINE_EASEOUT); } // (1)-3右の壁に当たってから戻る if(p2 == 3){ console.log("1−3"); var y1 = getRandom(0, 200); var distance = getDistance(x1, -9, 320 - 5, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(320 - 5, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(320 - 5, y1, x2, 480 - 5); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x2, 480 - 5, time, enchant.Easing.SINE_EASEOUT); } } // (2)最初に左の壁に当たる if(p1 == 2){ console.log("最初左の壁"); var y1 = getRandom(200, 400); var speed = 15; // ここで指定しないとバグ var distance = getDistance(tama.x, tama.y, 0, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(0, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); }); var x1 = getRandom(0, 320 - 9); var distance = getDistance(0, y1, x1, -9); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x1, -9, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); });

!101

Page 102: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 左→正面に当たった後 var p2 = getRandom(1, 3); // (2)-1そのまま戻る if(p2 == 1){ console.log("2−1"); var x2 = getRandom(0, 320 - 5); var distance = getDistance(tama.x, tama.y, x2, -9); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x2, 480 - 5, time, enchant.Easing.SINE_EASEOUT); } // (2)-2左の壁に当たってから戻る           if(p2 == 2){ console.log("2−2"); var y1 = getRandom(0, 200); var distance = getDistance(x1, -9, 0, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(0, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets[“sounds/cf307/ decision1.mp3"].clone(); sound.play(); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(0, y1, x2, 480 - 5); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x2, 480 - 5, time, enchant.Easing.SINE_EASEOUT); } // (2)-3右の壁に当たってから戻る if(p2 == 3){ console.log("2−3"); var y1 = getRandom(0, 200); var distance = getDistance(x1, -9, 320 - 5, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(320 - 5, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets[“sounds/cf307/decision1.mp3"]. clone(); sound.play(); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(320 - 5, y1, x2, 480 - 5); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x2, 480 - 5, time, enchant.Easing.SINE_EASEOUT); } }

!102

Page 103: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// (3)最初に右の壁に当たる if(p1 == 3){ console.log("最初に右の壁"); var y1 = getRandom(200, 400); var speed = 15; // ここで指定しないとバグ var distance = getDistance(tama.x, tama.y, 320 - 5, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(320 - 5, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); }); var x1 = getRandom(0, 320 - 5); var distance = getDistance(320 - 5, y1, x1, -9); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x1, -9, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); }); // 正面に当たった後 var p2 = getRandom(1, 3); // (3)-1そのまま戻る if(p2 == 1){ console.log("3−1"); var x2 = getRandom(0, 320 - 5); var distance = getDistance(x1, -9, x2, 480 - 5);             var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x2, 480 - 5, time, enchant.Easing.SINE_EASEOUT); } // (3)-2左の壁に当たってから戻る           if(p2 == 2){ console.log("3−2"); var y1 = getRandom(0, 200); var distance = getDistance(x1, -9, 0, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(0, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets[“sounds/cf307/decision1.mp3"]. clone(); sound.play(); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(0, y1, x2, 480 - 5); var time = distance / speed; console.log(distance / time);

!103

Page 104: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

tama.tl.moveTo(x2, 480 - 5, time, enchant.Easing.SINE_EASEOUT); } // (3)-3右の壁に当たってから戻る if(p2 == 3){ console.log("3−3"); var y1 = getRandom(0, 200); var distance = getDistance(x1, -9, 320 - 5, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(320 - 5, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets[“sounds/cf307/decision1.mp3"]. clone(); sound.play(); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(320 - 5, y1, x2, 480 - 5); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x2, 480 - 5, time, enchant.Easing.SINE_EASEOUT); } } // 音 var sound2 = core.assets[“sounds/cf307/decision3.mp3"]. clone(); sound2.play();       //tama.tl.moveTo(160, 471, 16); //テスト用 //score += 2000; //テスト用 } }); // 画面をドラッグしてバーを動かす scene.addEventListener(Event.TOUCH_START, function(e){ console.log("タッチ"); console.log(e.x); X = bar.x - e.x; // サイコロとタッチした場所の座標の差分 }); scene.addEventListener(Event.TOUCH_MOVE,function(e){ bar.x = e.x + X; });

// ゲームオーバー ground.addCollision(tama); ground.addEventListener(Event.COLLISION, function(e) { tama.remove(); var over = new ExSprite(230, 32); over.image = core.assets["images/gameover.png"]; scene.addChild(over); over.x = 320 / 2 - over.width / 2; over.y = 480 / 2 - over.height + 16; over.scale(0.5, 0.5);

!104

Page 105: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

over.tl.scaleTo(1, 1, 8); var sound = core.assets[“sounds/cf307/ME014-090610-loss02-wav.mp3”]. clone(); sound.play(); over.tl.then(function() { var label = new Label(" TAP TO RETRY");   label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220 + 100; scene.addChild(label); scene.addEventListener(Event.TOUCH_START, function() { gameStart(); }); }); });               

//========== // ここまで //========== }

function gameStart1(){// サービスゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

scene.backgroundColor = "darkgray"; // 背景 var sky = new ExSprite(320, 480); sky.image = core.assets["images/back_space.png"]; scene.addChild(sky);

// 地面 var ground = new ExSprite(320, 55); ground.image = core.assets["images/cf307/blueground.png"]; ground.x = 0; ground.y = 480; scene.addChild(ground);

// バー var bar = new ExSprite(64, 6); bar.image = core.assets["images/cf307/baayoko64.png"]; scene.addChild(bar); bar.x = 320 / 2 - 32; bar.y = 480 - 32; bar.tag = "bar"; //bar.scale(10, 1);// テスト用

// 玉グループ    var tamaGroup = new Group();

!105

Page 106: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.addChild(tamaGroup);     

// 玉 var tama = new ExSprite(9, 9); tama.image = core.assets["images/xe_bullet_r.png"]; //scene.addChild(tama); tama.x = bar.x + bar.width / 2 - tama.width / 2; tama.y = bar.y - tama.height; tamaGroup.addChild(tama); tama.originX = 0; tama.originY = 0; tama.scale(2, 2);  

// 最初の音 var sound0 = core.assets["sounds/cf307/decision3.mp3"].clone(); sound0.play();    // 玉の動き var x1 = getRandom(0, 320 - 5); //var x1 = getRandom(-320, 0);// テスト用 var speed = 15; var distance = getDistance(tama.x, tama.y, x1, -9); var time = distance / speed; console.log(time); tama.tl.moveTo(x1, -9, time, enchant.Easing.SINE_EASEOUT); // 最初に跳ね返る音 tama.tl.then(function(){ var sound1 = core.assets["sounds/cf307/decision1.mp3"].clone(); sound1.play(); // 最初のバーの動き bar.tl.moveTo(x2 - bar.width /2, 480 - 32, time1); }); var x2 = getRandom(0, 320 - 5); //var speed = 20; var distance = getDistance(x1, -9, x2, 480); var time1 = distance / speed; console.log(time); tama.tl.moveTo(x2, 480, time1, enchant.Easing.SINE_EASEOUT); // ブロックグループ var blockGroup = new Group(); scene.addChild(blockGroup);

// スコア表示 var score = 0; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'white'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });      // ブロック(繰り返し処理) var blocks = new Array();

!106

Page 107: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

for(var i=0; i< 2000; i++){ // ブロック var block = new ExSprite(8, 8); block.image = core.assets["images/cf307/block8p.png"]; block.x = 0 + ((i % 40) * 8); block.y = 0 + (Math.floor(i / 40) * 8); blockGroup.addChild(block); block.tag = "b";// タグをつけます blocks.push(block); //見よう見真似 } // 当たり判定をつけます for(var i=0; i<blocks.length; i++){ tama.addCollision(blocks[i]); }

// 当たり判定 tama.addCollision(bar); //tama.addCollision(kabe); //tama.addCollision(kabem); tama.addEventListener(Event.COLLISION, function(e) { // クリア if(2000 <= score){ tama.remove(); var label6 = new Label("?! アンビリーバボー!!!!"); label6.x = 60; label6.y = 480 / 2 - 32 / 2 + 48; label6.color = "white"; label6.font = "24px 'PixelMplus10'"; scene.addChild(label6); var sound100 = core.assets[“sounds/cf307/rabohyuuu.mp3"]. clone(); sound100.play(); var clear = new ExSprite(230, 32); clear.image = core.assets["images/gameclear.png"]; scene.addChild(clear); clear.x = 320 / 2 - clear.width / 2; clear.y = 480 / 2 - clear.height; clear.scale(0.5, 0.5); clear.tl.scaleTo(1.4, 1.4, 4); clear.tl.scaleTo(1.2, 1.2, 4);    // 秘密のボタン clear.tl.then(function(){ var retry = new ExSprite(62, 55); retry.image = core.assets["images/b_blue.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 300 ; retry.tl.moveBy(0, 50, 20); // ボタンをタッチ retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; console.log("タッチしました"); }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0;

!107

Page 108: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

gameStart1(); }); var label = new Label("!?"); label.color = 'red'; label.font = "25px 'PixelMplus10'"; //label.textAlign = "center"; label.x = 135; label.y = 360 + 55; scene.addChild(label);     }); } // ブロックに当たったら if(e.collision.target.tag == "b"){ // クリア if(1999 <= score){ tama.remove(); var label6 = new Label("?! アンビリーバボー!!!!"); label6.x = 60; label6.y = 480 / 2 - 32 / 2 + 48; label6.color = "white"; label6.font = "24px 'PixelMplus10'"; scene.addChild(label6); var sound100 = core.assets["sounds/cf307/rabohyuuu.mp3"].clone(); sound100.play(); var clear = new ExSprite(230, 32); clear.image = core.assets["images/gameclear.png"]; scene.addChild(clear); clear.x = 320 / 2 - clear.width / 2; clear.y = 480 / 2 - clear.height; clear.scale(0.5, 0.5); clear.tl.scaleTo(1.4, 1.4, 4); clear.tl.scaleTo(1.2, 1.2, 4);    // 秘密のボタン clear.tl.then(function(){ var retry = new ExSprite(62, 55); retry.image = core.assets["images/b_blue.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 300 ; retry.tl.moveBy(0, 50, 20); // ボタンをタッチ   retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; console.log("タッチしました"); }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart1(); }); var label = new Label("!?"); label.color = 'red'; label.font = "25px 'PixelMplus10'"; //label.textAlign = "center"; label.x = 135; label.y = 360 + 55;

!108

Page 109: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.addChild(label);     }); } e.collision.target.tl.then(function() { e.collision.target.remove();// 消します var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/bomb.png"]; bomb.x = e.collision.target.x; bomb.y = e.collision.target.y; scene.addChild(bomb); bomb.scale(0.5, 0.5); bomb.frame = [0, 1, 2, 3, 4, null]; //score += 2;// テスト用 score += 1; var sound = core.assets["sounds/cf307/hit04.mp3"].clone(); sound.play(); }); } // バーに当たったら if(e.collision.target.tag == "bar"){ tama.tl.clear(); // 玉の動きのパターン var p1 = getRandom(1, 3); // (1)最初に正面に当たる if(p1 == 1){ console.log("最初正面"); var x1 = getRandom(0, 320 - 9); var speed = 15; var distance = getDistance(tama.x, tama.y, x1, -9); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x1, -9, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets[“sounds/cf307/decision1.mp3"].clone(); sound.play(); }); // 正面に当たった後 var p2 = getRandom(1, 3); // (1)-1そのまま戻る if(p2 == 1){ console.log("1−1"); var x2 = getRandom(0, 320 - 5); var distance = getDistance(x1, -9, x2, 480 - 5); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x2, 480 - 5, time, enchant.Easing.SINE_EASEOUT); // バーの動き bar.tl.moveTo(x2 - bar.width /2, 480 - 32, time); } // (1)-2左の壁に当たってから戻る           if(p2 == 2){ console.log("1−2");

!109

Page 110: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var y1 = getRandom(0, 200); var distance = getDistance(x1, -9, 0, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(0, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets[“sounds/cf307/decision1.mp3"]. clone(); sound.play(); // バーの動き bar.tl.moveTo(x2 - bar.width / 2, 480 - 32, time1 -3); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(0, y1, x2, 480 - 5); var time1 = distance / speed; console.log(distance / time1); tama.tl.moveTo(x2, 480 - 5, time1, enchant.Easing.SINE_EASEOUT); } // (1)-3右の壁に当たってから戻る if(p2 == 3){ console.log("1−3"); var y1 = getRandom(0, 200); var distance = getDistance(x1, -9, 320 - 5, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(320 - 5, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets[“sounds/cf307/decision1.mp3"]. clone(); sound.play(); // バーの動き bar.tl.moveTo(x2 - 16, 480 - 32, time1 - 3); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(320 - 5, y1, x2, 480 - 5); var time1 = distance / speed; console.log(distance / time1); tama.tl.moveTo(x2, 480 - 5, time1, enchant.Easing.SINE_EASEOUT); } } // (2)最初に左の壁に当たる if(p1 == 2){ console.log("最初左の壁"); var y1 = getRandom(200, 400); var speed = 15; // ここで指定しないとバグ var distance = getDistance(tama.x, tama.y, 0, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(0, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){

!110

Page 111: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); }); var x1 = getRandom(0, 320 - 9); var distance = getDistance(0, y1, x1, -9); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x1, -9, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); }); // 左→正面に当たった後 var p2 = getRandom(1, 3); // (2)-1そのまま戻る if(p2 == 1){ console.log("2−1"); var x2 = getRandom(0, 320 - 5); var distance = getDistance(tama.x, tama.y, x2, -9); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x2, 480 - 5, time, enchant.Easing.SINE_EASEOUT); // バーの動き bar.tl.moveTo(x2 - bar.width /2, 480 - 32, time); } // (2)-2左の壁に当たってから戻る           if(p2 == 2){ console.log("2−2"); var y1 = getRandom(0, 200); var distance = getDistance(x1, -9, 0, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(0, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets[“sounds/cf307/decision1.mp3"]. clone(); sound.play(); // バーの動き bar.tl.moveTo(x2 - bar.width /2, 480 - 32, time1 - 5); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(0, y1, x2, 480 - 5); var time1 = distance / speed; console.log(distance / time1); tama.tl.moveTo(x2, 480 - 5, time1, enchant.Easing.SINE_EASEOUT); } // (2)-3右の壁に当たってから戻る if(p2 == 3){ console.log("2−3"); var y1 = getRandom(0, 200);

!111

Page 112: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var distance = getDistance(x1, -9, 320 - 5, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(320 - 5, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets[“sounds/cf307/decision1.mp3"]. clone(); sound.play(); // バーの動き bar.tl.moveTo(x2, 480 - 32, time1 - 5); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(320 - 5, y1, x2, 480 - 5); var time1 = distance / speed; console.log(distance / time1); tama.tl.moveTo(x2, 480 - 5, time1, enchant.Easing.SINE_EASEOUT); } } // (3)最初に右の壁に当たる if(p1 == 3){ console.log("最初に右の壁"); var y1 = getRandom(200, 400); var speed = 15; // ここで指定しないとバグ var distance = getDistance(tama.x, tama.y, 320 - 5, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(320 - 5, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); }); var x1 = getRandom(0, 320 - 5); var distance = getDistance(320 - 5, y1, x1, -9); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x1, -9, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); }); // 正面に当たった後 var p2 = getRandom(1, 3); // (3)-1そのまま戻る if(p2 == 1){ console.log("3−1"); var x2 = getRandom(0, 320 - 5); var distance = getDistance(x1, -9, x2, 480 - 5);             var time = distance / speed; console.log(distance / time); tama.tl.moveTo(x2, 480 - 5, time,

!112

Page 113: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

enchant.Easing.SINE_EASEOUT); // バーの動き bar.tl.moveTo(x2 - bar.width /2, 480 - 32, time); } // (3)-2左の壁に当たってから戻る           if(p2 == 2){ console.log("3−2"); var y1 = getRandom(0, 200); var distance = getDistance(x1, -9, 0, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(0, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets[“sounds/cf307/decision1.mp3"]. clone(); sound.play(); // バーの動き bar.tl.moveTo(x2 - bar.width /2, 480 - 32, time1 - 5); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(0, y1, x2, 480 - 5); var time1 = distance / speed; console.log(distance / time1); tama.tl.moveTo(x2, 480 - 5, time1, enchant.Easing.SINE_EASEOUT); } // (3)-3右の壁に当たってから戻る if(p2 == 3){ console.log("3−3"); var y1 = getRandom(0, 200); var distance = getDistance(x1, -9, 320 - 5, y1); var time = distance / speed; console.log(distance / time); tama.tl.moveTo(320 - 5, y1, time, enchant.Easing.SINE_EASEOUT); tama.tl.then(function(){ var sound = core.assets[“sounds/cf307/decision1.mp3"]. clone(); sound.play(); // バーの動き bar.tl.moveTo(x2, 480 - 32, time1 - 5); }); var x2 = getRandom(0, 320 - 5); var distance = getDistance(320 - 5, y1, x2, 480 - 5); var time1 = distance / speed; console.log(distance / time1); tama.tl.moveTo(x2, 480 - 5, time1, enchant.Easing.SINE_EASEOUT); } } // 音 var sound2 = core.assets[“sounds/cf307/decision3.mp3"]. clone();

!113

Page 114: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

sound2.play();       //tama.tl.moveTo(160, 471, 16); //テスト用 //score += 2000; //テスト用 } }); // ゲームオーバー ground.addCollision(tama); ground.addEventListener(Event.COLLISION, function(e) { tama.remove(); var over = new ExSprite(230, 32); over.image = core.assets["images/gameover.png"]; scene.addChild(over); over.x = 320 / 2 - over.width / 2; over.y = 480 / 2 - over.height + 16; over.scale(0.5, 0.5); over.tl.scaleTo(1, 1, 8); var sound = core.assets[“sounds/cf307/ME014-090610-loss02-wav.mp3"]. clone(); sound.play(); over.tl.then(function() { var label = new Label(" TAP TO RETRY");   label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220 + 100; scene.addChild(label); scene.addEventListener(Event.TOUCH_START, function() { gameStart(); }); }); });       

//========== // ここまで //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); //scene.on(enchant.Event.TOUCH_START, function(){gameStart1();}); // テスト用 }

//========== // EnchantJS enchant(); var gameManager; var core; var scene;

!114

Page 115: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); }

◉ 工夫したところ

・9通りの球の動きをランダムに出すことでまんべんなく画面の中を球が動くようにしたところ。

・球の速さを一定になるようにしたところ。

◉ 難しかったところ ・9通りの動きについて、同じコードになる部分が多くコピー&ペーストが使えるものの、内容や場所を間違えるとおかしくなってしまうので、慎重な作業が必要だった。

・速度が一定になるようにするには、その都度の動きの距離が正しく測定されるようにしなければならないので、注意が必要だった。

!115

Page 116: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

13 文房軍シューティング

◉ 内容

・縦スクロールのシューティングゲーム。

・自機から弾が自動発射されるので敵を撃ちながら進んでいく。

◉ このゲームで使っている仕組み

・タッチムーブで自機を操縦する Event.TOUCH_MOVE ・弾の自動発射

・三方向弾

!116

Page 117: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

13−1 タッチムーブで自機を操縦する

タッチムーブとは、設置されたボタンで操縦するのではなく、画面のどこかをタッチして動かすことで自機を操縦することである。動かした分だけ、動かした方向に操縦することができる。

まず、二つの変数

!117

Page 118: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

positionX, positionY

を用意する。

そして、positionX は、タッチしたときのその場所と自機(この場合はmono)の x座標の距

離、同様に positionY は y座標の距離とする。

// mono号の操縦 var posionX;←書き間違い本来はpositionX var posionY;←書き間違い本来はpositionY scene.addEventListener(Event.TOUCH_START, function(e){ posionX = mono.x - e.x; console.log(posionX); posionY = mono.y - e.y; console.log(posionY); });

そして、TOUCH_MOVEとしてイベントリスナを設定する。

e.x は、タッチしている箇所だから、タッチの動きと同じように動かすには、常にタッチ

の位置と自機の位置の距離が一定であればよい。すなわち、自機の x,y座標がそれぞれ

positionX + e.x と positionY + e.y であればよいので、次のようにすればタッチで操縦することができる。

scene.addEventListener(Event.TOUCH_MOVE, function(e) { mono.x = posionX + e.x; mono.y = posionY + e.y; });

13−2 自動発射

弾を自動発射させるには、まず弾を出し、それをmoveByで動かして発射し、その後消すという一連の動きをfunctionでひとくくりにし、それを一定のカウントで待機(delay)してか

ら繰り返せばよい。

//自動発射 mono.tl.then(function(){ var pencil = new ExSprite(64,64); pencil.image = core.assets["images/cf307/enpitu.png"]; pencil.x = mono.x + mono.width / 2 - pencil.width / 2; pencil.y = mono.y - pencil.height;

!118

Page 119: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

pencilGroup.addChild(pencil); pencil.scale(0.8,0.8); pencil.tl.moveBy(0, -300, 15); pencil.tl.then(function(){ pencil.remove(); }); }); mono.tl.delay(10); mono.tl.loop();

13−3 三方向弾

同時に三方向に弾を発射させるには、forの繰り返し

処理を使う。

弾の進む方向がポイントになる。

変数をcとしたとき、ko の動きを

ko.tl.moveBy(c * 200, scene.height, 100);

として、cを-1、0、1とすれば、それぞれ代入して、

ko.tl.moveBy(-200, scene.height, 100);

ko.tl.moveBy(0, scene.height, 100);

ko.tl.moveBy(200, scene.height, 100);

となるので、右上図のように放射状に3方向の弾が同時に発射されることになる。

よって、次のような繰り返し処理を使えばよいことになる。

for (var c=-1; c<=1; c++) { var ko = new ExSprite(32,32); ko.image = core.assets["images/cf307/ko2.png"]; ko.x = com.x + com.width / 2 - ko.width / 2; ko.y = com.y + com.height; koGroup.addChild(ko); ko.scale(0.5,0.5); ko.tl.moveBy(c * 200, scene.height, 100); ko.tl.then(function() { ko.remove(); }); }

!119

Page 120: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

同じようにして、5方向やいくつもの方向弾を出すことが可能である。

!120

Page 121: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード var assets = [ // 背景 "images/cf307/houganbg1.png", "images/cf307/uni.png", "images/cf307/mono.png", "images/cf307/x.png", "images/cf307/go.png", "images/cf307/dai.png", "images/cf307/go2.png", "images/cf307/hikari.png", "images/cf307/konpasu.jrspin.png", "images/cf307/ko2.png", "images/cf307/penciear.png", // 弾 "images/cf307/enpitu.png", // 爆発 "images/bomb.png", "images/cf307/pencilgame.png", // 音 "sounds/shot.mp3", "sounds/bomb_m.mp3", "sounds/bomb_l.mp3", "sounds/shot.mp3", "sounds/cf307/neo833.mp3", "sounds/cf307/moufire2.mp3", "sounds/cf307/ME008-090401-loss01-wav 1.mp3", "sounds/cf307/terere.mp3", "sounds/cf307/decision14.mp3", "sounds/cf307/get04.mp3", // CodeFriendsタイトル "images/title.png" ];

function gameStart(){// ゲーム画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //========== // 背景 var background = new ExSprite(320, 2400); background.image = core.assets["images/cf307/houganbg1.png"]; background.x = 0; background.y = -2400 + 480; scene.addChild(background); background.tl.moveBy(0, 2400 - 480, 1200); //グループ var enemyGroup = new Group(); scene.addChild(enemyGroup);

!121

Page 122: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//鉛筆グループ var pencilGroup = new Group(); scene.addChild(pencilGroup);

//弧 var koGroup = new Group(); scene.addChild(koGroup);

//もどるな!! var moGroup = new Group(); scene.addChild(moGroup); //BGM var bgm = core.assets['sounds/cf307/moufire2.mp3'].clone(); bgm.play();

//ボス音楽   var boss = core.assets["sounds/cf307/neo833.mp3"].clone(); //mono号 var mono = new ExSprite(100,64); mono.image = core.assets["images/cf307/mono.png"]; mono.x = 320 / 2 - mono.width / 2; mono.y = 480 - 64; scene.addChild(mono); mono.scale(0.7,0.7); var countermo = 2; // mono号の操縦 var posionX; var posionY; scene.addEventListener(Event.TOUCH_START, function(e){ posionX = mono.x - e.x; console.log(posionX); posionY = mono.y - e.y; console.log(posionY); }); scene.addEventListener(Event.TOUCH_MOVE, function(e) { mono.x = posionX + e.x; mono.y = posionY + e.y; }); //自動発射 mono.tl.then(function(){ var pencil = new ExSprite(64,64); pencil.image = core.assets["images/cf307/enpitu.png"]; pencil.x = mono.x + mono.width / 2 - pencil.width / 2; pencil.y = mono.y - pencil.height; pencilGroup.addChild(pencil); pencil.scale(0.8,0.8); pencil.tl.moveBy(0, -300, 15); pencil.tl.then(function(){ pencil.remove(); }); }); mono.tl.delay(10);

!122

Page 123: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

mono.tl.loop();

//X for (l=0; l<=1200 / 160; l++) { scene.tl.then(function(){ for (i=0; i<5; i++) { scene.tl.then(function(){ var x = new ExSprite(32,32); x.image = core.assets["images/cf307/x.png"]; x.x = getRandom(0, scene.width - x.width); x.y = getRandom(-100,-32); enemyGroup.addChild(x);             x.tag = "敵"; x.tl.moveBy(getRandom(-100, 100), 600, 200); x.addCollision(pencilGroup); x.addEventListener(Event.COLLISION, function(e) { var bomb2 = new ExSprite(160 / 5, 32); bomb2.image = core.assets["images/bomb.png"]; bomb2.x = this.x + x.width / 2 - bomb2.width / 2; bomb2.y = this.y + 64 / 2 - 32 / 2; scene.addChild(bomb2); console.log("衝突"); bomb2.frame = [0, 1, 2, 3, 4, null]; this.remove(); var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); }); }); } //後醍醐 for (i=0; i<5; i++) { // 後醍醐 scene.tl.then(function(){ //scene.tl.delay(); var gox = getRandom(0,320); var goy = getRandom(-100, -200); var go = new ExSprite(32,32); go.image = core.assets["images/cf307/go.png"]; go.x = gox; go.y = goy; enemyGroup.addChild(go); go.tag = "敵"; // 衝突判定 go.addCollision(pencilGroup); go.addEventListener(Event.COLLISION, function(e) { var bomb2 = new ExSprite(160 / 5, 32); bomb2.image = core.assets["images/bomb.png"]; bomb2.x = this.x + go.width / 2 - bomb2.width / 2; bomb2.y = this.y + 64 / 2 - 32 / 2; scene.addChild(bomb2); console.log("衝突"); bomb2.frame = [0, 1, 2, 3, 4, null]; this.remove(); var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); });

!123

Page 124: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

        // 醍 var dai = new ExSprite(32,32); dai.image = core.assets["images/cf307/dai.png"]; dai.x = gox; dai.y = goy - 32; enemyGroup.addChild(dai); dai.tag = "敵"; //dai.tl.moveBy(0, 700, 200); // 衝突判定 dai.addCollision(pencilGroup); dai.addEventListener(Event.COLLISION, function(e) { var bomb3 = new ExSprite(160 / 5, 32); bomb3.image = core.assets["images/bomb.png"]; bomb3.x = this.x + go.width / 2 - bomb3.width / 2; bomb3.y = this.y + 64 / 2 - 32 / 2; scene.addChild(bomb3); console.log("衝突"); bomb3.frame = [0, 1, 2, 3, 4, null]; this.remove(); var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); }); // 醐 var go2 = new ExSprite(32,32); go2.image = core.assets["images/cf307/go2.png"]; go2.x = gox; go2.y = goy - 64; enemyGroup.addChild(go2); go2.tag = "敵"; //go2.tl.moveBy(0,700,200); // 衝突判定 go2.addCollision(pencilGroup); go2.addEventListener(Event.COLLISION, function(e) { var bomb4 = new ExSprite(160 / 5, 32); bomb4.image = core.assets["images/bomb.png"]; bomb4.x = this.x + go.width / 2 - bomb4.width / 2; bomb4.y = this.y + 64 / 2 - 32 / 2; scene.addChild(bomb4); console.log("衝突"); bomb4.frame = [0, 1, 2, 3, 4, null]; this.remove(); var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); }); // 後醍醐の動き          for (var j=0; j<=10; j++) { go.tl.moveBy(0, 50, 20); go.tl.and(); go.tl.moveBy(-100, 0, 20, enchant.Easing.QUAD_EASEINOUT); go.tl.moveBy(0, 50, 20); go.tl.and(); go.tl.moveBy(100, 0, 20, enchant.Easing.QUAD_EASEINOUT); dai.tl.delay(1);             dai.tl.moveBy(0, 50, 20); dai.tl.and(); dai.tl.moveBy(-100, 0, 20, enchant.Easing.QUAD_EASEINOUT);

!124

Page 125: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

dai.tl.moveBy(0, 50, 20); dai.tl.and(); dai.tl.moveBy(100, 0, 20, enchant.Easing.QUAD_EASEINOUT); go2.tl.delay(2); go2.tl.moveBy(0, 50, 20); go2.tl.and(); go2.tl.moveBy(-100, 0, 20, enchant.Easing.QUAD_EASEINOUT); go2.tl.moveBy(0, 50, 20); go2.tl.and(); go2.tl.moveBy(100, 0, 20, enchant.Easing.QUAD_EASEINOUT); } }); } for (var h=0; h<=5; h++) { scene.tl.delay(20); scene.tl.then(function() { //光の矢(改良版) var ya = new ExSprite(32,32); ya.image = core.assets["images/cf307/hikari.png"]; ya.x = getRandom(0,320); ya.y = 0; enemyGroup.addChild(ya); ya.addCollision(pencilGroup);             ya.tag = "敵"; //角度を変える if(mono.x + mono.width / 2 - ya.width / 2 <= 320 / 4){ ya.rotate(30); if(ya.x <= 320 / 4){ ya.tl.rotateTo(0,0); } } if(mono.x + mono.width / 2 - ya.width / 2 > 320 / 4 && mono.x + mono.width / 2 - ya.width / 2 <= 320 / 2){ ya.rotate(15); if(ya.x > 320 / 4 && ya.x < 320 / 2){ ya.tl.rotateTo(0,0); } } if(mono.x + mono.width / 2 - ya.width / 2 >= 320 / 2 && mono.x + mono.width / 2 - ya.width / 2 <= 320 / 4 * 3){ ya.rotate(-15); if(ya.x > 320 / 2 && 320 / 3 * 2){ ya.tl.rotateTo(0,0); } } if(mono.x + mono.width / 2 - ya.width / 2 >= 320 / 4 * 3){ ya.rotate(-30); if(ya.x > 320 / 4 * 3){ ya.tl.rotateTo(0,0); } } ya.tl.moveTo(mono.x + mono.width / 2 - ya.width / 2, mono.y + 100,15); ya.tl.then(function() { ya.remove(); }); ya.addEventListener(Event.COLLISION, function(e) {

!125

Page 126: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var bomb3 = new ExSprite(160 / 5, 32); bomb3.image = core.assets["images/bomb.png"]; bomb3.x = this.x + ya.width / 2 - bomb3.width / 2; bomb3.y = this.y + 64 / 2 - 32 / 2; scene.addChild(bomb3); console.log("衝突"); bomb3.frame = [0, 1, 2, 3, 4, null]; this.remove(); var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); }); }); } }); scene.tl.delay(1200 / 280); }    // mono号の衝突判定 mono.addCollision(enemyGroup); mono.addCollision(koGroup); mono.addEventListener(Event.COLLISION, function(e) { if(e.collision.target.tag == "敵"){   e.collision.target.remove(); console.log(e.collision.target.tag); } countermo--; console.log(countermo); var bomb = new ExSprite(160 / 5, 32); bomb.image = core.assets["images/bomb.png"]; bomb.x = mono.x + mono.width / 2 - bomb.width / 2; bomb.y = mono.y + 64 / 2 - 32 / 2; scene.addChild(bomb); console.log("衝突"); bomb.frame = [0, 1, 2, 3, 4, null]; //mono.remove(); var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); positionX = null; positionY = null; mono.opacity = 0; mono.removeCollision(enemyGroup); moGroup.tl.delay(20); moGroup.tl.then(function() { moGroup.tl.clear(); mono.opacity = 1; if(countermo == 1){ var soundf = core.assets["sounds/cf307/decision14.mp3"].clone(); soundf.play(); } mono.x = 320 / 2 - mono.width / 2; mono.y = 480 - 64; mono.addCollision(enemyGroup); mono.addCollision(koGroup); }); if(countermo <= 0){ var bomb = new ExSprite(160 / 5, 32);

!126

Page 127: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bomb.image = core.assets["images/bomb.png"]; bomb.x = mono.x + mono.width / 2 - bomb.width / 2; bomb.y = mono.y + 64 / 2 - 32 / 2; scene.addChild(bomb); console.log("衝突"); bomb.frame = [0, 1, 2, 3, 4, null]; mono.remove(); var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); bgm.stop(); bomb.addEventListener(Event.ANIMATION_END, function(){ if(background.y == 0){ boss.stop(); } var gameover= new ExSprite(230, 32); gameover.image = core.assets["images/cf307/pencilgame.png"]; gameover.x = 320 / 2 - gameover.width / 2; gameover.y = 480 / 2 - gameover.height / 2; scene.addChild(gameover); gameover.scale(0.5, 0.5); gameover.tl.scaleTo(1.3, 1.3, 20); var sound = core.assets["sounds/cf307/terere.mp3"]; sound.play(); gameover.tl.then(function() { core.stop(); }); }); } });     // ボス background.tl.then(function(){ bgm.stop(); boss.play(); var com = new ExSprite(100, 560 / 4); com.image = core.assets["images/cf307/konpasu.jrspin.png"]; com.x = 320 / 2 - com.width / 2; com.y = -560 / 4; enemyGroup.addChild(com); com.addCollision(pencilGroup); var counter = 50; //ボスの衝突 com.addEventListener(Event.COLLISION, function(e) { counter--; console.log(counter);        e.collision.target.remove(); var soundc = core.assets["sounds/shot.mp3"].clone(); soundc.play(); if(counter <= 0) { com.remove(); var bomb = new ExSprite(160 /5, 32); bomb.image = core.assets["images/bomb.png"]; bomb.x = com.x + com.width / 2 - bomb.width / 2; bomb.y = com.y + 64 / 2 - 32 / 2 ; scene.addChild(bomb); bomb.frame = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, null];

!127

Page 128: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

    var sound = core.assets['sounds/bomb_l.mp3'].clone(); sound.play(); bomb.addEventListener(Event.ANIMATION_END, function(){ var clear = new ExSprite(230, 32); clear.image = core.assets["images/cf307/penciear.png"]; clear.x = 320 / 2 - clear.width / 2; clear.y = 480 / 2 - 16; scene.addChild(clear); boss.stop(); clear.scale(0.5, 0.5); clear.tl.scaleTo(1.3, 1.3, 20); clear.tl.then(function(){ var clearsound = core.assets["sounds/cf307/get04.mp3"]; clearsound.play(); core.stop(); }); }); } }); com.frame = [0,0,1,1,2,2,3,3]; com.tl.moveBy(0,560 /4 + 20,50); com.tl.then(function() { com.tl.moveBy(100,0,32 / 2); com.tl.moveBy(-100,0,32 / 2); //4月19にち追加        com.tl.moveTo(mono.x,mono.y,32 / 2); com.tl.moveTo(320 / 2 - com.width / 2,0,32 / 2); com.tl.moveBy(-100,0,32 / 2); com.tl.moveBy(100,0,32 / 2); com.tl.then(function(){ for (var c=-1; c<=1; c++) { var ko = new ExSprite(32,32); ko.image = core.assets["images/cf307/ko2.png"]; ko.x = com.x + com.width / 2 - ko.width / 2; ko.y = com.y + com.height; koGroup.addChild(ko); ko.scale(0.5,0.5); ko.tl.moveBy(c * 200, scene.height, 100); ko.tl.then(function() { ko.remove(); }); } }); com.tl.loop(); }); }); //========== // ここまで //========== }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();});

!128

Page 129: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}

//========== //EnchantJS var gameManager; var core; enchant(); gameManager = new common.GameManager(); window.onload = function() { core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); };

◉ 工夫したところ

・勉強をテーマにしたかったので、普段使っている文房具をモチーフにした。

・矢の動きによって、矢の向きを変えた。

・ボスのコンパスは、簡単に避けられないように、時々こちらに向かってくる動きにした。

◉ 難しかったところ ・後醍醐という文字を、蛇行にするところ。

・矢の方向によって向きを変えるところは、矢の出る位置によって条件分岐を使ったが、なかなかうまくできずに苦労をした。

・コンパスが回転している動きにしたかったので、そのような画像を描くのに実際にコンパスを回して観察しながら描いた。

・forをつかうと、とても複雑になり、バグが出ないようにするのが苦労した。

!129

Page 130: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

14 はしれバネ山さん

◉ 内容 ・遠近法を使った擬似3Dゲーム。

・穴を避けながら走っていき、ゴールするとゲームクリアとなる。

・屋台に触れると無敵か得点アップとなる。

◉ このゲームで使っている仕組み ・早送り skip

・当たり判定用に透明のスプライトを使う

・追随して動く follow

・衝突判定の解除 removeCollision

・秒数でカウントする setTimeBased

・小数点表示 score.toFixed(1)

・ループの停止 unloop

!130

Page 131: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

14−1 早送り

障害物の動きで、空の背景部分は見えないので、その部分の動きについては早送りをする。

早送りには skip を使い、早送りしたいカウント数を指定する。

hurdle.tl.skip(160);

14−2 当たり判定用に透明のスプライトを使う

自機のスプライトは、穴と衝突するので、そのままでは頭が穴とぶつかった時に判定されてしまい、不自然なことになる。そこで、衝突判定用のスプライトを作りを透明にして見えなくする。

例えば、red という衝突判定用のスプライトをつくるには、まず red を自機(tanuki)の衝突判定をさせたい位置に置く。

var red = new ExSprite(32, 8); red.x = tanuki.x; red.y = tanuki.y + 24; scene.addChild(red);

わかりやすいように、仮に色をつけておく。

red.backgroundColor = “red";

実際に動かしてみて、よければ透明にする。

!131

Page 132: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

透明にするには、この一行を無効化して色や画像を指定しなければ透明のスプライトとなる。

14−3 追随して動く

さらに、red はtanuki と追随して動かす必要があるので、forrowを使って次のようにする。

red.follow(tanuki);

14−4 衝突判定の解除

衝突判定の解除には、

removeCollision

を使う。

穴をジャンプして避けるので、その際に穴との衝突判定が解除される必要があるので、以下のようにしてジャンプしている間の衝突判定を解除する。

button_jump.addEventListener(Event.TOUCH_START, function(){ tanuki.tl.then(function() { button_left.touchEnabled = false; button_right.touchEnabled = false; button_jump.touchEnabled = false; red.removeCollision(hurdleGroup); blue.removeCollision(itemGroup); });

ジャンプが終わったら、衝突判定の設定を戻す。

tanuki.tl.moveBy(0, -30, 10, enchant.Easing.QUAD_EASEOUT); var boyon = core.assets["sounds/cf307/boyon1.mp3"].clone(); boyon.play(); tanuki.tl.moveBy(0, 30, 10, enchant.Easing.QUAD_EASEIN); tanuki.tl.then(function() { button_left.touchEnabled = true; button_right.touchEnabled = true; button_jump.touchEnabled = true; red.addCollision(hurdleGroup); blue.addCollision(itemGroup); });

!132

Page 133: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

14−5 秒数でカウントする

これまでは、1秒あたり16のカウントで数えてきたが、これを秒数でカウントするには、

scoreLabel.tl.setTimeBased();

を使う。

1秒が1000の単位なので、ここでは、0.1秒の単位までで表示させたいので、これに続けて、

scoreLabel.tl.delay(100);

とすればよい。

14−6 小数点表示

さらに、小数点第一位までの表示にするために、スコアラベルの表示を

scoreLabel.text = score.toFixed(1);

と指定する。

14−7 ループの停止

ゴールの白線が移動を開始したら、障害物とアイテムを出てこないようにする。障害物とアイテムは loop を使って出現させているので、ループを停止する。

line.tl.delay(16 * 30); line.tl.then(function() { hurdleGroup.tl.unloop(); itemGroup.tl.unloop(); console.log("ゴール真近"); });

!133

Page 134: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード var assets = [ // 背景 "images/nk_sky.png", "images/nk_road.png", // たぬき "images/cf307/baneyamasann.png", "images/cf307/yataif.png", "images/cf307/yatait.png", // コイン "images/cf307/tokkuriandothoko.png", // 穴 "images/nk_hole.png", // 左ボタン 'images/b_left.png', // 右ボタン 'images/b_right.png', // ジャンプボタン 'images/b_red.png', // ゲームオーバー 'images/title_gameover.png', // クリアー 'images/title_gameclear.png', // ガス // サウンド "sounds/coin.mp3", "sounds/cf307/boyon1.mp3", "sounds/cf307/drink1eng2.mp3", "sounds/cf307/bgm_29.mp3", "sounds/cf307/stupid3.mp3", "sounds/cf307/decision24.mp3", "sounds/cf307/bokoboko.mp3", "images/title.png",// CodeFriendsタイトル ];

function gameStart1(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここからばね山さん //========== var bgm = core.assets["sounds/cf307/bgm_29.mp3"].clone(); bgm.play(); //bgm.src.loop = true;

//むてきカウンター var counter = 0;

//無敵の音楽

!134

Page 135: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var muteki = core.assets["sounds/cf307/bokoboko.mp3"].clone();

var road = new Sprite(320, 480); road.image = core.assets["images/nk_road.png"]; scene.addChild(road);

var hurdleGroup = new Group(); scene.addChild(hurdleGroup);

var itemGroup = new Group(); scene.addChild(itemGroup);

var yataifGroup = new Group(); scene.addChild(yataifGroup);

var yataitGroup = new Group(); scene.addChild(yataitGroup);

var lineGroup = new Group(); scene.addChild(lineGroup);

var sky = new Sprite(320, 50); sky.image = core.assets["images/nk_sky.png"]; scene.addChild(sky);

// あな hurdleGroup.tl.then(function() { var hurdle = new ExSprite(60, 24); hurdle.image= core.assets["images/nk_hole.png"]; hurdle.x = scene.width / 2 - hurdle.width / 2; hurdle.y = 0; hurdle.scale(0, 0); hurdleGroup.addChild(hurdle); var destX = getRandom(0, scene.width - hurdle.width); hurdle.tl.moveTo(destX, 480, 300, enchant.Easing.QUART_EASEIN); hurdle.tl.and(); hurdle.tl.scaleTo(1, 1, 300, enchant.Easing.QUART_EASEIN); hurdle.tl.then(function() { this.remove(); }); hurdle.tl.skip(160); }); hurdleGroup.tl.delay(25); hurdleGroup.tl.loop();

// アイテム itemGroup.tl.delay(25); itemGroup.tl.then(function() { var item = new ExSprite(32, 32); item.image= core.assets["images/cf307/tokkuriandothoko.png"]; item.x = scene.width / 2 - item.width / 2; item.y = 0; item.scale(0, 0); itemGroup.addChild(item); var destX = getRandom(0, scene.width - item.width); item.tl.moveTo(destX, 480, 300, enchant.Easing.QUART_EASEIN); item.tl.and();

!135

Page 136: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

item.tl.scaleTo(1, 1, 300, enchant.Easing.QUART_EASEIN); item.tl.then(function() { this.remove(); }); item.tl.skip(160); }); itemGroup.tl.loop(); itemGroup.tl.skip(25); var tanuki = new ExSprite(32, 32); tanuki.image = core.assets["images/cf307/baneyamasann.png"]; tanuki.x = scene.width / 2 - tanuki.width / 2; tanuki.y = 350; tanuki.frame = [2, 2, 3, 3]; scene.addChild(tanuki); var red = new ExSprite(32, 8); red.x = tanuki.x; red.y = tanuki.y + 24; scene.addChild(red); red.follow(tanuki);

var blue = new ExSprite(32, 8); blue.x = tanuki.x; blue.y = tanuki.y + 16; scene.addChild(blue); blue.follow(tanuki); red.addCollision(hurdleGroup); red.addEventListener(Event.COLLISION, function(e) { //core.stop(); score -= 10; var koke = core.assets["sounds/cf307/stupid3.mp3"].clone(); koke.play(); });

blue.addCollision(itemGroup); blue.addEventListener(Event.COLLISION, function(e) { e.collision.target.remove(); score += 10; var gokkun = core.assets["sounds/cf307/drink1eng2.mp3"].clone(); gokkun.play(); });

// 左へ移動するボタン var button_left = new ExSprite(62, 55); button_left.image = core.assets['images/b_left.png']; button_left.x = 40; button_left.y = 400; scene.addChild(button_left); // 左ボタンタップ開始 button_left.addEventListener(Event.TOUCH_START, function(){ tanuki.x -= 10; });

// 右へ移動するボタン var button_right = new ExSprite(62, 55);

!136

Page 137: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

button_right.image = core.assets['images/b_right.png']; button_right.x = 218; button_right.y = 400; scene.addChild(button_right); // 右ボタンタップ開始 button_right.addEventListener(Event.TOUCH_START, function(){ tanuki.x += 10; });

// ジャンプボタン var button_jump = new ExSprite(62, 55); button_jump.image = core.assets['images/b_red.png']; button_jump.x = 135; button_jump.y = 400; scene.addChild(button_jump ); button_jump.addEventListener(Event.TOUCH_START, function(){ tanuki.tl.then(function() { button_left.touchEnabled = false; button_right.touchEnabled = false; button_jump.touchEnabled = false; red.removeCollision(hurdleGroup); blue.removeCollision(itemGroup); }); tanuki.tl.moveBy(0, -30, 10, enchant.Easing.QUAD_EASEOUT); var boyon = core.assets["sounds/cf307/boyon1.mp3"].clone(); boyon.play(); tanuki.tl.moveBy(0, 30, 10, enchant.Easing.QUAD_EASEIN); tanuki.tl.then(function() { button_left.touchEnabled = true; button_right.touchEnabled = true; button_jump.touchEnabled = true; red.addCollision(hurdleGroup); blue.addCollision(itemGroup); }); });

// スコア var score = 30; var scoreLabel = new Label(score); scoreLabel.color = 'white'; scoreLabel.font = "32px 'PixelMplus10'"; scoreLabel.y = 10; scoreLabel.width = 320; scoreLabel.textAlign = "center"; scene.addChild(scoreLabel); scoreLabel.tl.setTimeBased(); scoreLabel.tl.delay(100); scoreLabel.tl.then(function() { scoreLabel.text = score.toFixed(1); score -= 0.1; if(score <= 0){ scoreLabel.tl.pause(); scene.tl.unloop(); hurdleGroup.tl.unloop();; //ゲームオーバー if(counter == -1){

!137

Page 138: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

muteki.stop(); } bgm.stop(); tanuki.removeCollision(yataitGroup); tanuki.removeCollision(yataifGroup); var gameover = new ExSprite(147,48); gameover.image = core.assets["images/title_gameover.png"]; gameover.x = 320 / 2 - 147 / 2; gameover.y = 480 / 2 - 48 / 2; scene.addChild(gameover); gameover.tl.scaleTo(2, 2, 16); gameover.tl.rotateBy(45, 16); gameover.tl.then(function(){ core.stop(); }); } //はみ出てるとめっちゃ減る if(tanuki.x <= 20){ score -= 3.0; } if(tanuki.x >= 270){ score -= 3.0; } }); scoreLabel.tl.loop();

//ゴール var line = new ExSprite(320,5); line.backgroundColor = "white"; line.scale(0,0); lineGroup.addChild(line);

line.tl.delay(16 * 30); line.tl.then(function() { hurdleGroup.tl.unloop(); itemGroup.tl.unloop(); console.log("ゴール真近"); }); line.tl.moveTo(0, 480, 300,enchant.Easing.QUART_EASEIN); line.tl.and(); line.tl.scaleTo(1, 1, 300, enchant.Easing.QUART_EASEIN); var goal = new ExSprite(320, 5); goal.backgroundColor = ""; goal.x = 0; goal.y = 350 + 32; scene.addChild(goal);

goal.addCollision(line); goal.addEventListener(Event.COLLISION, function(e){ bgm.volume = 0; muteki.volume = 0; var gameclear = new Sprite(147,48); gameclear.image = core.assets['images/title_gameclear.png']; gameclear.x = 320 / 2 - gameclear.width / 2; gameclear.y = 480 / 2 - gameclear.height / 2;

!138

Page 139: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.addChild(gameclear); core.stop(); }); //屋台(フランクフルト) scene.tl.delay(16 * 2); scene.tl.then(function(){    var yataikaunto = getRandom(1,4); console.log(yataikaunto); if(yataikaunto == 1){ var yataif = new ExSprite(200, 200); yataif.image= core.assets["images/cf307/yataif.png"]; yataif.x = 10; yataif.y = -200; yataif.scale(0, 0); yataifGroup.addChild(yataif);        yataif.tag = "フランクフルト"; yataif.tl.moveTo(290, 480, 350, enchant.Easing.QUART_EASEIN); yataif.tl.and(); yataif.tl.scaleTo(1, 1, 350, enchant.Easing.QUART_EASEIN); yataif.tl.then(function() { this.remove(); }); yataif.tl.skip(160); } if(yataikaunto == 2){ //屋台(たこ焼き) var yatait = new ExSprite(200, 200); yatait.image= core.assets["images/cf307/yatait.png"]; yatait.x = 50; yatait.y = -200; yatait.scale(0, 0); yataitGroup.addChild(yatait); yatait.tag = "たこやき"; yatait.tl.moveTo(30 - 150, 480, 350, enchant.Easing.QUART_EASEIN); yatait.tl.and(); yatait.tl.scaleTo(1, 1, 350, enchant.Easing.QUART_EASEIN); yatait.tl.then(function() { this.remove(); }); yatait.tl.skip(160); } });    scene.tl.loop();    //フランクフルトをもらう tanuki.addCollision(yataitGroup); tanuki.addCollision(yataifGroup); tanuki.addEventListener(Event.COLLISION, function(e) { if(e.collision.target.tag == "フランクフルト"){ console.log("うまい"); e.collision.target.remove(); score += 20; var soundf = core.assets["sounds/cf307/decision24.mp3"].clone(); soundf.play(); }

!139

Page 140: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

if(e.collision.target.tag == "たこやき"){ console.log("効いていてくれ"); bgm.volume = 0; muteki.play(); // 再度たこやきにぶつかったら tanuki.addEventListener(Event.COLLISION, function(e) { muteki.stop(); }); counter -= 1; yataitGroup.tl.then(function(){               red.removeCollision(hurdleGroup); console.log("無敵!!!!!"); }); yataitGroup.tl.delay(16 * 5); yataitGroup.tl.then(function(){ console.log(counter); red.addCollision(hurdleGroup); bgm.volume = 1; counter += 1; muteki.stop(); });      } }); //========== // ここまでばね山さん //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart1();}); }

//========== // EnchantJS enchant(); var gameManager; var core; var scene; window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); }

//========== // Manifest ‘[cf]{"appTitle":"","appIcon":"../images/icon.png"}[/cf]'

!140

Page 141: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 工夫したところ ・無敵になった時に、音楽がなるようにしたところ。

◉ 難しかったところ

・屋台の絵に立体感をもたせるところ。

・音楽が重ならないようにするのに大変苦労した。

!141

Page 142: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

15 謎解き脱出ゲーム

◉ 内容 ・アイテムをクリックするとヒントが現れる。

・ヒントを元になぞを解いていき、答えを入力すると脱出できる。

◉ このゲームで使った仕組み ・ジェスチャーの設定 new GestureDetector

Event.TAP、Event.DOUBLETAP、Event.SLIP、Event.FLING、Event.HOLD、Event.DRAG、Event.RELEASE

・ズーム 

!142

Page 143: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 使った画像

◉ コードの説明と書き方

15−1 ジェスチャーの設定

タップ, ダブルタップ, ホールド, ドラッグ, フリックなど複雑なタッチイベントを検出して処理したいときは、ジェスチャーを設定する。

es_daruma に g_daruma という名前でジェスチャーを設定するには

var g_daruma = new GestureDetector(es_daruma);

とする。

その上で、タップ, ダブルタップ, ホールド, ドラッグ, フリックなどに対して、イベントリスナのメソッドを使えばよい。

!143

Page 144: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

タッチイベントに対する第一引数はそれぞれ、以下のようになる。

タップ:Event.TAP ダブルタップ:Event.DOUBLETAP スリップ:Event.SLIP スワイプ:Event.FLING ホールド:Event.HOLD ドラッグ:Event.DRAG リリース:Event.RELEASE

15−2 ズーム

何かをタップしたときに、拡大する動き。周りのものも同時に拡大することで、近くなったように見える。

g_darumaをダブルクリックしたときに、ズームするように設定する。

まず、ジェスチャーとダブルタップのイベントを設定する。

// ももジェスチャーディテクター var g_daruma = new GestureDetector(es_daruma); // ももをダブルクリックすると es_daruma.addEventListener(Event.DOUBLETAP, function(e){

そして、ズームがされていないときは拡大し、ズームされているときは元に戻す(ズームアウト)動きにするために、if で場合を分ける。

 ・ズームイン:if(room1.scaleX == 1)

 ・ズームアウト:}else{

ズームインで2倍に拡大し、画面内にある他の物に対しては、一旦消したりして不自然にならないように処理した。

//ズームイン if(room1.scaleX == 1){ room1.originX = e.x; room1.originY = e.y; room1.tl.scaleTo(2, 2, 8); es_daruma.originX = e.x - es_daruma.x; es_daruma.originY = e.y - es_daruma.y; es_daruma.tl.scaleTo(2, 2, 8); // ファイルも拡大はうまくいなかいので一旦消去、紙も同様 file.remove();

!144

Page 145: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

paper.remove(); // 吹き出し scene.addChild(blace); blace.y = es_daruma.y + 50;// ももと重ならないように // 文字 scene.addChild(label1); label1.y = blace.y + 20; //ズームアウト }else{ room1.tl.scaleTo(1, 1, 0); // ファイル、紙を元に戻す scene.addChild(file); scene.addChild(paper); file.tl.rotateTo(60, 0); file.tl.scaleTo(0.5, 0.5, 0); blace.remove(); label1.remove(); blace.remove(); es_daruma.tl.scaleTo(1, 1, 0); } });

!145

Page 146: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード var assets = [ // 背景 "images/cf307/room_ue1.png", "images/cf307/room_sita.png", "images/cf307/momochan.png", "images/cf307/momo_kake.png", // CodeFriendsタイトル "images/title.png", //椅子   "images/cf307/isu_aka.png", // ファイル "images/cf307/file_open5.png", // 扉 "images/cf307/elevator_left.png", "images/cf307/elevator_right.png", // ボタン "images/cf307/botanzyouge.png", // 背景 "images/cf307/hukei_4.png", // なぞ "images/cf307/nazonazo.png", // 紙 "images/cf307/kusyakami_64_2.png", "images/cf307/yazirusiblue.png", ];

function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

var fileopen = 0;

//ルーム1 var room1 = new Group(); scene.addChild(room1); // 背景 var es_backue = new ExSprite(320, 240); es_backue.image = core.assets["images/cf307/room_ue1.png"]; room1.addChild(es_backue); //es_backue.frame = [1]; //文字が出た状態 var es_backsita = new ExSprite(320, 240); es_backsita.image = core.assets["images/cf307/room_sita.png"]; es_backsita.y = 240; room1.addChild(es_backsita);

!146

Page 147: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//es_backsita.frame = [1]; //パソコンが開いた状態

// 椅子 var chair = new ExSprite(57,43); chair.image = core.assets["images/cf307/isu_aka.png"]; chair.x = 115; chair.y = 232 + 10; room1.addChild(chair);

// テキストラベル1 var label1 = new Label(" ?・・尻?・・もも?"); label1.y = 300 + 20; label1.color = "black"; label1.font = "20px PixelMplus10"; label1.textAlign = "center";

// テキストラベル2 var label2 = new Label(" ? 何か書いてある・・"); label2.y = 300 + 20; label2.color = "black"; label2.font = "20px PixelMplus10"; label2.textAlign = "center";

// テキストラベル3 var label3 = new Label("本日の講師"); label3.x = 180; label3.y = 180; label3.color = "black"; label3.font = "20px PixelMplus10"; // テキストラベル4 var label4 = new Label("ももちゃん"); label4.x = 180; label4.y = 280; label4.color = "black"; label4.font = "20px PixelMplus10";

// テキストラベル5 var label5 = new Label("黄色い太陽...?"); label5.y = 300 + 20; label5.color = "black"; label5.font = "20px PixelMplus10"; label5.textAlign = "center"; // テキストラベル6 var label6 = new Label(""); label6.y = 300 + 20; label6.color = "black"; label6.font = "20px PixelMplus10"; label6.textAlign = "center";

// テキストラベル7 var label7 = new Label(""); label7.y = 300 + 20;

!147

Page 148: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label7.color = "black"; label7.font = "20px PixelMplus10"; label7.textAlign = "center"; // 吹き出し var blace = new Sprite(220, 57); blace.backgroundColor = "white"; blace.x = 160 - 110; blace.y = 300; // もも var es_daruma = new ExSprite(32, 32); es_daruma.image = core.assets["images/cf307/momo_kake.png"]; es_daruma.x = 280; es_daruma.y = 340; // ももジェスチャーディテクター var g_daruma = new GestureDetector(es_daruma); // ももをダブルクリックすると es_daruma.addEventListener(Event.DOUBLETAP, function(e){ console.log("たっp"); console.log(e.y); console.log(e.x); //ズームイン if(room1.scaleX == 1){ room1.originX = e.x; room1.originY = e.y; room1.tl.scaleTo(2, 2, 8); es_daruma.originX = e.x - es_daruma.x; es_daruma.originY = e.y - es_daruma.y; es_daruma.tl.scaleTo(2, 2, 8); // ファイルも拡大はうまくいなかいので一旦消去、紙も同様 file.remove(); paper.remove(); // 吹き出し scene.addChild(blace); blace.y = es_daruma.y + 50;// ももと重ならないように // 文字 scene.addChild(label1); label1.y = blace.y + 20; //ズームアウト }else{ room1.tl.scaleTo(1, 1, 0); // ファイル、紙を元に戻す scene.addChild(file); scene.addChild(paper); file.tl.rotateTo(60, 0); file.tl.scaleTo(0.5, 0.5, 0); blace.remove(); label1.remove(); blace.remove(); es_daruma.tl.scaleTo(1, 1, 0); } }); // ももドラッグ es_daruma.addEventListener(Event.DRAG, function(e){

!148

Page 149: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

es_daruma.image = core.assets["images/cf307/momochan.png"]; es_daruma.x = e.x - 16; es_daruma.y = e.y - 16; }); //ももリリース es_daruma.addEventListener(Event.RELEASE,function(e){ if(es_daruma.intersect(chair)){ es_backue.frame = 1; es_backsita.frame = 1; console.log("いでよヒント"); // 矢印 var yazirusi = new ExSprite(32,32); yazirusi.image = core.assets["images/cf307/yazirusiblue.png"]; yazirusi.x = 320 - 32; yazirusi.y = 240 + 5; scene.addChild(yazirusi); yazirusi.rotate(90); yazirusi.addEventListener(Event.TOUCH_START,function(e){ gameStart1(); }); }else{ es_backue.frame = 0; es_backsita.frame = 0; } }); //紙 var paper = new ExSprite(64, 64); paper.image = core.assets["images/cf307/kusyakami_64_2.png"]; paper.x = 105; paper.y = 295; scene.addChild(paper); //paper.scale(0.7, 0.7); var g_paper = new GestureDetector(paper); //ダブルタップ紙 paper.addEventListener(Event.DOUBLETAP, function(e){ if(room1.scaleX == 1){ paper.tl.scaleTo(2, 2, 8); paper.tl.and(); paper.tl.moveTo(160 - 32, 240 - 64, 8); paper.tl.delay(6).then(function(){ paper.frame = 1; console.log("紙開く"); }); paper.tl.delay(11); blace.y = 300 + 20 - 15; paper.tl.then(function(){ scene.addChild(label5); }); room1.originX = e.x; room1.originY = e.y; room1.tl.scaleTo(2, 2, 8); // ももも拡大 if(fileopen == 1){ es_daruma.originX = e.x - es_daruma.x; es_daruma.originY = e.y - es_daruma.y;

!149

Page 150: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

es_daruma.tl.scaleTo(2, 2, 8); } file.remove(); scene.addChild(blace); }else{ paper.tl.clear(); room1.tl.scaleTo(1, 1, 0); paper.frame = 0; paper.tl.scaleTo(1, 1, 0); label5.remove(); blace.remove(); paper.x = 105; paper.y = 295; scene.addChild(file); if(fileopen == 1){ //scene.addChild(es_daruma); es_daruma.tl.scaleTo(1, 1, 0); } } });

// ファイル var file = new ExSprite(140, 86); file.image = core.assets["images/cf307/file_open5.png"]; file.x = 30; file.y = 380; scene.addChild(file); file.rotate(60); file.scale(0.5, 0.5); file.frame = [1]; // ファイルのジェスチャー var g_file = new GestureDetector(file); // ファイルをクリックすると file.addEventListener(Event.DOUBLETAP, function(e){ // ズームイン if(room1.scaleX == 1){ file.frame = [0]; file.rotate(-60); file.tl.scaleTo(2, 2, 8); file.tl.and(); file.tl.moveTo(160 - 70, 240 - 43, 8); file.tl.then(function(e){ labelGroup.addChild(label3); labelGroup.addChild(label4); console.log("8delay"); }); room1.originX = e.x; room1.originY = e.y; room1.tl.scaleTo(2, 2, 8); // 2回目以降ももが出てる時、ももと紙も拡大(紙は面倒なので消す処理で) if(fileopen == 1){ es_daruma.originX = e.x - es_daruma.x; es_daruma.originY = e.y - es_daruma.y; es_daruma.tl.scaleTo(2, 2, 8); } paper.remove(); // 吹き出し

!150

Page 151: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.addChild(blace); blace.y = 400;// 重ならないように // 文字 「何か書いてある」 scene.addChild(label2); label2.y = blace.y + 20; scene.addChild(labelGroup); //2回目以降に必要(ズームアウトでremoveしているか

ら) //labelGroup.tl.scaleTo(0.1, 0.1, 0); //ズ ームアウト }else{ // ファイルを開けたかどうかのカウンター(紙オープンでのももの動きの為) fileopen = 1; scene.addChild(es_daruma); scene.addChild(file); //拡大したときに前に出るようにする為 room1.tl.scaleTo(1, 1, 0); file.frame = [1]; file.rotate(60); file.tl.scaleTo(0.5, 0.5, 0); file.x = 30; file.y = 380; blace.remove(); label2.remove(); //labelGroup.remove();// なぜかこれではopenの時の動きがうまくいかないので以下の

2行に変更 label3.remove(); label4.remove(); if(fileopen == 1){ es_daruma.tl.scaleTo(1, 1, 0); } scene.addChild(paper); } });

// ラベルグループ var labelGroup = new Group(); scene.addChild(labelGroup);

//========== // ここまで //========== }

function gameStart1(){// 扉の前 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから扉の前 //==========

//変数置き場 var yellow = 0; var blue = 0;

!151

Page 152: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var red = 0; // 背景 var soto = new ExSprite(320, 480); soto.image = core.assets["images/cf307/hukei_4.png"]; scene.addChild(soto);

//おめでとう var labelc = new Label("Congratulations!!"); //labelc.x = 320; labelc.y = 130; labelc.color = "red"; labelc.font = "30px PixelMplus10"; labelc.textAlign = "center"; scene.addChild(labelc); //ルーム2 var room2 = new Group(); scene.addChild(room2);

// ボタングループ var bGroup = new Group(); scene.addChild(bGroup); // ドア左 var es_backleft = new ExSprite(59, 480); es_backleft.image = core.assets["images/cf307/elevator_left.png"]; room2.addChild(es_backleft); // ドア右 var es_backright = new ExSprite(261, 480); es_backright.image = core.assets["images/cf307/elevator_right.png"]; es_backright.x = 59; room2.addChild(es_backright);

// 矢印 var yazirusi = new ExSprite(32,32); yazirusi.image = core.assets["images/cf307/yazirusiblue.png"]; yazirusi.x = 0; yazirusi.y = 240; scene.addChild(yazirusi); yazirusi.rotate(-90); yazirusi.addEventListener(Event.TOUCH_START,function(e){ gameStart2(); });

// なぞなぞの貼り紙 var nazo = new ExSprite(46, 64); nazo.image = core.assets["images/cf307/nazonazo.png"]; nazo.x = 127; nazo.y = 100; room2.addChild(nazo); nazo.scale(0.7, 0.7); var g_nazo = new GestureDetector(nazo); nazo.addEventListener(Event.DOUBLETAP, function(e){ if(room2.scaleX == 1){

!152

Page 153: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

nazo.tl.scaleTo(2,2,8); room2.originX = e.x; room2.originY = e.y; yazirusi.originX = e.x; yazirusi.originY = e.y; room2.tl.scaleTo(2,2,8); bGroup.tl.scaleTo(2,2,8); yazirusi.tl.scaleTo(2,2,8); label1.remove(); label2.remove(); label3.remove(); }else{ room2.tl.scaleTo(1,1,0); nazo.tl.scaleTo(1,1,0); bGroup.tl.scaleTo(1,1,0); yazirusi.tl.scaleTo(1,1,0); scene.addChild(label1); scene.addChild(label2); scene.addChild(label3); } });

// ボタン黄色上(byup) var byup = new ExSprite(12, 12); byup.image = core.assets["images/cf307/botanzyouge.png"]; byup.x = 253; byup.y = 145; bGroup.addChild(byup); byup.scale(1.5, 1.5); byup.addEventListener(Event.TOUCH_START, function(e){ if(yellow == 9){ yellow = -1; } yellow += 1; if(yellow == 3 && blue == 0 && red == 7){ console.log("脱出"); label1.remove(); label2.remove(); label3.remove(); room2.tl.scaleTo(2, 2, 32); bGroup.tl.scaleTo(2, 2, 32); bGroup.tl.then(function(){ bGroup.tl.moveBy(200, 0, 32); es_backleft.tl.moveBy(-200, 0, 32); es_backright.tl.moveBy(200, 0, 32); nazo.tl.moveBy(200, 0, 32); yazirusi.tl.moveBy(-200, 0, 32); }); } }); // ボタン黄色下(byd) var byd = new ExSprite(12, 12); byd.image = core.assets["images/cf307/botanzyouge.png"]; byd.x = 253; byd.y = 145 + 20; bGroup.addChild(byd)

!153

Page 154: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

byd.scale(1.5, 1.5); byd.frame = [1]; byd.addEventListener(Event.TOUCH_START, function(e){ if(yellow == 0){ yellow = 10; } yellow -= 1; if(yellow == 3 && blue == 0 && red == 7){ console.log("脱出"); label1.remove(); label2.remove(); label3.remove(); room2.tl.scaleTo(2, 2, 32); bGroup.tl.scaleTo(2, 2, 32); bGroup.tl.then(function(){ bGroup.tl.moveBy(200, 0, 32); es_backleft.tl.moveBy(-200, 0, 32); es_backright.tl.moveBy(200, 0, 32); nazo.tl.moveBy(200, 0, 32); yazirusi.tl.moveBy(-200, 0, 32); }); } });

// ボタン青色上(bbup) var bbup = new ExSprite(12, 12); bbup.image = core.assets["images/cf307/botanzyouge.png"]; bbup.x = 253 + 22; bbup.y = 145; bGroup.addChild(bbup); bbup.scale(1.5, 1.5); bbup.frame = [2]; bbup.addEventListener(Event.TOUCH_START, function(e){ if(blue == 9){ blue = -1; } blue += 1; if(yellow == 3 && blue == 0 && red == 7){ console.log("脱出"); label1.remove(); label2.remove(); label3.remove(); room2.tl.scaleTo(2, 2, 32); bGroup.tl.scaleTo(2, 2, 32); bGroup.tl.then(function(){ bGroup.tl.moveBy(200, 0, 32); es_backleft.tl.moveBy(-200, 0, 32); es_backright.tl.moveBy(200, 0, 32); nazo.tl.moveBy(200, 0, 32); yazirusi.tl.moveBy(-200, 0, 32); }); } }); // ボタン青色下(bbd) var bbd = new ExSprite(12, 12); bbd.image = core.assets["images/cf307/botanzyouge.png"];

!154

Page 155: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bbd.x = 253 + 22; bbd.y = 145 + 20; bGroup.addChild(bbd); bbd.scale(1.5, 1.5); bbd.frame = [3];

bbd.addEventListener(Event.TOUCH_START, function(e){ if(blue == 0){ blue = 10; } blue -= 1; if(yellow == 3 && blue == 0 && red == 7){ console.log("脱出"); label1.remove(); label2.remove(); label3.remove(); room2.tl.scaleTo(2, 2, 32); bGroup.tl.scaleTo(2, 2, 32); bGroup.tl.then(function(){ bGroup.tl.moveBy(200, 0, 32); es_backleft.tl.moveBy(-200, 0, 32); es_backright.tl.moveBy(200, 0, 32); nazo.tl.moveBy(200, 0, 32); yazirusi.tl.moveBy(-200, 0, 32); }); } });

// ボタン赤色上(brup) var brup = new ExSprite(12, 12); brup.image = core.assets["images/cf307/botanzyouge.png"]; brup.x = 253 + 22 + 22; brup.y = 145; bGroup.addChild(brup); brup.scale(1.5, 1.5); brup.frame = [4]; brup.addEventListener(Event.TOUCH_START, function(e){ if(red == 9){ red = -1; } red += 1; if(yellow == 3 && blue == 0 && red == 7){ console.log("脱出"); label1.remove(); label2.remove(); label3.remove(); room2.tl.scaleTo(2, 2, 32); bGroup.tl.scaleTo(2, 2, 32); bGroup.tl.then(function(){ bGroup.tl.moveBy(200, 0, 32); es_backleft.tl.moveBy(-200, 0, 32); es_backright.tl.moveBy(200, 0, 32); nazo.tl.moveBy(200, 0, 32); yazirusi.tl.moveBy(-200, 0, 32); }); } });

!155

Page 156: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// ボタン赤色下(brd) var brd = new ExSprite(12, 12); brd.image = core.assets["images/cf307/botanzyouge.png"]; brd.x = 253 + 22 + 22; brd.y = 145 + 20; bGroup.addChild(brd); brd.scale(1.5, 1.5); brd.frame = [5]; brd.addEventListener(Event.TOUCH_START, function(e){ if(red == 0){ red = 10; } red -= 1; if(yellow == 3 && blue == 0 && red == 7){ console.log("脱出"); label1.remove(); label2.remove(); label3.remove(); room2.tl.scaleTo(2, 2, 32); bGroup.tl.scaleTo(2, 2, 32); bGroup.tl.then(function(){ bGroup.tl.moveBy(200, 0, 32); es_backleft.tl.moveBy(-200, 0, 32); es_backright.tl.moveBy(200, 0, 32); nazo.tl.moveBy(200, 0, 32); yazirusi.tl.moveBy(-200, 0, 32); }); } });

//左黄色 var label1 = new Label("0"); label1.x = 245; label1.y = 86; label1.color = "yellow"; label1.font = "20px PixelMplus10"; //label1.textAlign = "center"; scene.addChild(label1); label1.addEventListener(Event.ENTER_FRAME, function() { label1.text = ' ' + yellow; }); //中青 var label2 = new Label("0"); label2.x = 266; label2.y = 86; label2.color = "blue"; label2.font = "20px PixelMplus10"; //label2.textAlign = "center"; scene.addChild(label2); label2.addEventListener(Event.ENTER_FRAME, function() { label2.text = ' ' + blue; });

//右赤 var label3 = new Label("0");

!156

Page 157: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label3.x = 289; label3.y = 86; label3.color = "red"; label3.font = "20px PixelMplus10"; //label3.textAlign = "center"; scene.addChild(label3); label2.addEventListener(Event.ENTER_FRAME, function() { label3.text = ' ' + red; });

//========== // ここまで扉の前 //========== }

function gameStart2(){// 二度目の(戻った)部屋 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから二度目の(戻った)部屋 //==========

//var fileopen = 0; //2回目なのでいらない

//ルーム1 var room1 = new Group(); scene.addChild(room1); // 背景 var es_backue = new ExSprite(320, 240); es_backue.image = core.assets["images/cf307/room_ue1.png"]; room1.addChild(es_backue); es_backue.frame = [1]; //文字が出た状態 var es_backsita = new ExSprite(320, 240); es_backsita.image = core.assets["images/cf307/room_sita.png"]; es_backsita.y = 240; room1.addChild(es_backsita); es_backsita.frame = [1]; //パソコンが開いた状態

// 椅子 var chair = new ExSprite(57,43); chair.image = core.assets["images/cf307/isu_aka.png"]; chair.x = 115; chair.y = 232 + 10; room1.addChild(chair);

// テキストラベル1 var label1 = new Label(" ?・・尻?・・もも?"); label1.y = 300 + 20; label1.color = "black"; label1.font = "20px PixelMplus10"; label1.textAlign = "center";

!157

Page 158: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// テキストラベル2 var label2 = new Label(" ? 何か書いてある・・"); label2.y = 300 + 20; label2.color = "black"; label2.font = "20px PixelMplus10"; label2.textAlign = "center"; // テキストラベル3 var label3 = new Label("本日の講師"); label3.x = 180; label3.y = 180; label3.color = "black"; label3.font = "20px PixelMplus10";

// テキストラベル4 var label4 = new Label("ももちゃん"); label4.x = 180; label4.y = 280; label4.color = "black"; label4.font = "20px PixelMplus10"; // テキストラベル5 var label5 = new Label("黄色い太陽...?"); label5.y = 300 + 20; label5.color = "black"; label5.font = "20px PixelMplus10"; label5.textAlign = "center"; // テキストラベル6 var label6 = new Label(""); label6.y = 300 + 20; label6.color = "black"; label6.font = "20px PixelMplus10"; label6.textAlign = "center";

// 吹き出し var blace = new Sprite(220, 57); blace.backgroundColor = "white"; blace.x = 160 - 110; blace.y = 300;

// もも    var es_daruma = new ExSprite(32, 32); es_daruma.image = core.assets["images/cf307/momochan.png"]; es_daruma.x = chair.x + chair.width / 2 - 16; es_daruma.y = chair.y + 5; scene.addChild(es_daruma); // ももジェスチャーディテクター var g_daruma = new GestureDetector(es_daruma); // ももをクリックすると es_daruma.addEventListener(Event.DOUBLETAP, function(e){ console.log("たっp"); console.log(e.y); console.log(e.x);

!158

Page 159: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//ズームイン if(room1.scaleX == 1){ room1.originX = e.x; room1.originY = e.y; room1.tl.scaleTo(2, 2, 8); es_daruma.originX = e.x - es_daruma.x; es_daruma.originY = e.y - es_daruma.y; es_daruma.tl.scaleTo(2, 2, 8); // ファイルも拡大はうまくいなかいので一旦消去 file.remove(); // 吹き出し scene.addChild(blace); blace.y = es_daruma.y + 50;// ももと重ならないように // 文字 scene.addChild(label1); label1.y = blace.y + 20; //ズームアウト }else{ room1.tl.scaleTo(1, 1, 0); // ファイルを元に戻す scene.addChild(file); file.tl.rotateTo(60, 0); file.tl.scaleTo(0.5, 0.5, 0); blace.remove(); label1.remove(); blace.remove(); es_daruma.tl.scaleTo(1, 1, 0); //es_daruma.tl.and(); //es_daruma.moveTo(e.x, e.y, 0); } }); // ももドラッグ es_daruma.addEventListener(Event.DRAG, function(e){ //es_daruma.image = core.assets["images/cf307/momochan.png"]; es_daruma.x = e.x - 16; es_daruma.y = e.y - 16; }); //ももリリース es_daruma.addEventListener(Event.RELEASE,function(e){ if(es_daruma.intersect(chair)){ es_backue.frame = 1; es_backsita.frame = 1; console.log("いでよヒント"); // 矢印 var yazirusi = new ExSprite(32,32); yazirusi.image = core.assets["images/cf307/yazirusiblue.png"]; yazirusi.x = 320 - 32; yazirusi.y = 240 + 5; scene.addChild(yazirusi); yazirusi.rotate(90); yazirusi.addEventListener(Event.TOUCH_START,function(e){ gameStart1(); }); }else{ es_backue.frame = 0;

!159

Page 160: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

es_backsita.frame = 0; } });

//紙 拡大したときにももが後ろになるようにももの後に変更 var paper = new ExSprite(64, 64); paper.image = core.assets["images/cf307/kusyakami_64_2.png"]; paper.x = 105; paper.y = 295; scene.addChild(paper); //paper.scale(0.7, 0.7); var g_paper = new GestureDetector(paper); //ダブルタップ紙 paper.addEventListener(Event.DOUBLETAP, function(e){ if(room1.scaleX == 1){ paper.tl.scaleTo(2, 2, 8); paper.tl.and(); paper.tl.moveTo(160 - 32, 240 - 64, 8); paper.tl.delay(6).then(function(){ paper.frame = 1; console.log("紙開く"); }); paper.tl.delay(11); paper.tl.then(function(){ blace.y = 300 + 20 - 15; scene.addChild(label5); }); room1.originX = e.x; room1.originY = e.y; room1.tl.scaleTo(2, 2, 8); // もも拡大 es_daruma.originX = e.x - es_daruma.x; es_daruma.originY = e.y - es_daruma.y; es_daruma.tl.scaleTo(2, 2, 8); file.remove(); scene.addChild(blace); }else{ paper.tl.clear(); room1.tl.scaleTo(1,1,0); paper.frame = 0; paper.tl.scaleTo(1,1,0);        label5.remove(); blace.remove(); paper.x = 105; paper.y = 295; scene.addChild(file); es_daruma.tl.scaleTo(1, 1, 0); } }); // ファイル var file = new ExSprite(140, 86); file.image = core.assets["images/cf307/file_open5.png"]; file.x = 30; file.y = 380; scene.addChild(file); file.rotate(60);

!160

Page 161: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

file.scale(0.5, 0.5); file.frame = [1]; // ファイルのジェスチャー var g_file = new GestureDetector(file); // ファイルをクリックすると file.addEventListener(Event.DOUBLETAP, function(e){ // ズームイン if(room1.scaleX == 1){ file.frame = [0]; file.rotate(-60); file.tl.scaleTo(2, 2, 8); file.tl.and(); file.tl.moveTo(160 - 70, 240 - 43, 8); file.tl.then(function(e){ labelGroup.addChild(label3); labelGroup.addChild(label4); console.log("8delay"); }); room1.originX = e.x; room1.originY = e.y; room1.tl.scaleTo(2, 2, 8); // 2回目以降ももが出てる時、ももと紙も拡大(紙は面倒なので消す処理で) if(fileopen == 1){ es_daruma.originX = e.x - es_daruma.x; es_daruma.originY = e.y - es_daruma.y; es_daruma.tl.scaleTo(2, 2, 8); } paper.remove(); // 吹き出し scene.addChild(blace); blace.y = 400;// 重ならないように // 文字 「何か書いてある」 scene.addChild(label2); label2.y = blace.y + 20; scene.addChild(labelGroup); //2回目以降に必要(ズームアウトでremoveしているか

ら) //labelGroup.tl.scaleTo(0.1, 0.1, 0); //ズ ームアウト }else{ // ファイルを開けたかどうかのカウンター(紙オープンでのももの動きの為) fileopen = 1; scene.addChild(es_daruma); scene.addChild(file); //拡大したときに前に出るようにする為 room1.tl.scaleTo(1, 1, 0); file.frame = [1]; file.rotate(60); file.tl.scaleTo(0.5, 0.5, 0); file.x = 30; file.y = 380; blace.remove(); label2.remove(); //labelGroup.remove();// なぜかこれではopenの時の動きがうまくいかないので以下の

2行に変更

!161

Page 162: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label3.remove(); label4.remove(); if(fileopen == 1){ es_daruma.tl.scaleTo(1, 1, 0); } scene.addChild(paper); } }); var yazirusi = new ExSprite(32,32); yazirusi.image = core.assets["images/cf307/yazirusiblue.png"]; yazirusi.x = 320 - 32; yazirusi.y = 240 + 5; scene.addChild(yazirusi); yazirusi.rotate(90); yazirusi.addEventListener(Event.TOUCH_START,function(e){ gameStart1(); });

// ラベルグループ var labelGroup = new Group(); scene.addChild(labelGroup); //========== // ここまで二度目の(戻った)部屋 //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); //scene.on(enchant.Event.TOUCH_START, function(){gameStart1();}); //テスト用 }

//========== // EnchantJS enchant(); var gameManager; var core; var scene; window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); }

//========== // Manifest ‘[cf]{“appTitle”:”","appIcon":"../images/icon.png"}[/cf]'

!162

Page 163: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 工夫したところ ・ファイルを開いたり紙を開いたりすることでヒントが現れるようにした。

・矢印を出して、場面を転換できるようにした。

・ボタンで数字を入力できるようにした。

・最後の扉が開くような動き。

◉ 難しかったところ ・ズームした時に他のものの大きさや位置が不自然にならないようにするのが難しかった。

・ボタンで数字を入力してドアが開くようにするところ。

・2回目に最初の部屋に戻ったときは、初期状態と違う状態にしなければならないので、そこが難しかった。

!163

Page 164: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

16 つかまえられるかな

◉ 内容 ・画面上を動き回るキャラクターをタッチしてつかまえるゲーム。

・得点があがると、キャラクターが小さくなり速くなって難易度が上がる。

・200点に到達するとゲームクリア。

◉ 使った画像

!164

Page 165: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ "images/back_mountain.png", "images/kati_land.png", //“images/kati_tanuki.png", "images/title.png",// タイトル //“sounds/coin.mp3", //“sounds/jump.mp3", "images/cf307/berobatu.png", "images/cf307/retrybotan.png", "sounds/yes.mp3", "sounds/bgm_ch1.mp3", "sounds/cf307/ME014-090610-loss02-wav.mp3", "sounds/fall.mp3", "sounds/cf307/jump07.mp3", ];

function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

//scene.backgroundColor = "darkgray";

var sound = core.assets["sounds/bgm_ch1.mp3"].clone(); sound.play(); // 空 var sky = new ExSprite(320, 480); sky.image = core.assets["images/back_mountain.png"]; scene.addChild(sky);

// 地上 var land = new ExSprite(320, 60); land.image = core.assets["images/kati_land.png"]; scene.addChild(land); land.x = 0; land.y = 420;

var score = 0; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'white'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score;

!165

Page 166: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}); // ベロ var bero = new ExSprite(160, 160); bero.image = core.assets["images/cf307/berobatu.png"]; bero.x = 320 / 2 - 160 / 2; bero.y = 480 / 2 - 160 / 2; scene.addChild(bero); bero.scale(0.6, 0.6); bero.tl.moveTo(0, 200, 10); bero.tl.moveTo(100, 0, 10); bero.tl.moveTo(114, 149, 10); bero.tl.moveTo(30, 230, 10); bero.tl.moveTo(200, 20, 10); bero.tl.moveTo(100, -160,10); bero.tl.moveTo(100, 300, 10); bero.tl.loop();

// ベロがタップされたら bero.addEventListener(Event.TOUCH_START, function(e){ score += 10; var sound5 = core.assets["sounds/cf307/jump07.mp3"].clone(); sound5.play(); // 100で一旦動きをクリアにする if(score == 100){ bero.tl.clear(); } // もしもタップしたとき100以上ならば if(score >= 100 && score < 200){ console.log("そうですねえ!!");        bero.tl.scaleTo(0.5, 0.5, 0.5); bero.tl.moveTo(120, 0, 4); bero.tl.moveTo(100, -50, 2); bero.tl.moveTo(50, 260, 10); var x1 = getRandom(0, 320); var x2 = getRandom(0, 480); var x3 = getRandom(0, 240); bero.tl.moveTo(x1, x2, 2); bero.tl.moveTo(x1, x2, 2); bero.tl.moveTo(320 / 2, 480 / 2, 2); bero.tl.moveTo(x1, x3, 3); } if(score == 200){ bero.tl.clear(); bero.tl.moveTo(320 / 2 - 75, 480 / 2 - 75, 0); // 音 var sound4 = core.assets["sounds/fall.mp3"].clone(); sound4.play(); // ベロぐるぐる bero.tl.rotateBy(360 * 5, 20); sound.stop(); bero.tl.then(function(){ resultStart(); }); } });

!166

Page 167: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//========== // ここまで //========== }

function resultStart(){// ゲーム終了画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //========== scene.backgroundColor = "black";

var sound2 = core.assets["sounds/cf307/ME014-090610-loss02-wav.mp3"].clone(); sound2.play();

var label = new Label("や~ら~れ~た~"); label.color = 'white'; label.font = "20px 'PixelMplus10'"; label.textAlign = "center"; label.x = 320 / 2 - 20 * 7; label.y = 100; scene.addChild(label); label.tl.rotateBy(360, 30);

//やられたベロ var bero = new ExSprite(160, 160); bero.image = core.assets[“images/cf307/berobatu.png"]; bero.x = 320 / 2 - 160 / 2; bero.y = 480 / 2 - 160 / 2; scene.addChild(bero); bero.frame = [0, 1, null];

var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 300; retry.tl.moveBy(0, 50, 10); retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = [1]; var sound3 = core.assets["sounds/yes.mp3"].clone(); sound3.play(); gameStart(); }); //========== // ここまで //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1));

!167

Page 168: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== // EnchantJS enchant(); var gameManager; var core; var scene; window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); }

◉ 工夫したところ

・途中から、敵が小さくなり、動きも速くなるようにして難易度をあげたところ。

・予測できないランダムな動きにした。

・200点でゲームクリアにしたところ。

◉ 難しかったところ

・ランダムな動きをさせるところ。

・やられたときのキャラクターの動き。

!168

Page 169: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

17 打ち合いゲーム

◉ 内容 ・跳ね返ってくる球を手前のバーで打ち返すゲーム。

・この時はまだタッチムーブを習っていなかったので、クリックでバーを操作するようにした。

!169

Page 170: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ "images/back_space.png", "images/title.png",// タイトル "images/cf307/baayoko64.png", "images/xe_bullet_r.png", "images/gameover.png", "images/cf307/blueground.png", "sounds/cf307/decision1.mp3", "sounds/cf307/decision3.mp3", "sounds/cf307/rabohyuuu.mp3", "images/gameclear.png", "sounds/cf307/trumpet-dub1.mp3", "sounds/cf307/gameover07.mp3", "sounds/cf307/trumpet1.mp3", "sounds/cf307/dondonpafupafu1.mp3", "images/cf307/retrybotan.png", "images/cf307/backume.png", "images/b_red.png", "images/cf307/taitorubotan.png", "sounds/cf307/ME011-fanfare02.mp3", ]; function gameStart(){// タイトル画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

scene.backgroundColor = "blue"; // 背景 var sky = new ExSprite(320, 480); sky.image = core.assets["images/back_space.png"]; scene.addChild(sky); // タイトル var label1 = new Label("打ち合い"); label1.color = 'white'; label1.font = "45px 'PixelMplus10'"; label1.textAlign = "center"; label1.y = 100; scene.addChild(label1); // ラベル2 var label2 = new Label("きみはこのたんちょうさに      

たえられるか?"); label2.color = 'red'; label2.font = "23px 'PixelMplus10'"; //label2.textAlign = "center"; label2.x = 25; label2.y = 200;

!170

Page 171: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.addChild(label2); // ラベル3 var label3 = new Label(" ※注:「ブロックは?」とか言わない!"); label3.color = 'yellow'; label3.font = "17px 'PixelMplus10'"; label3.textAlign = "center"; label3.y = 330; //scene.addChild(label3); // プレイボタン var botan = new ExSprite(62, 55); botan.image = core.assets["images/b_red.png"]; scene.addChild(botan); botan.x = 320 / 2 - botan.width / 2; botan.y = 400; // ボタンをタッチ botan.addEventListener(Event.TOUCH_START, function(){ botan.frame = 1; console.log("タッチしました"); }); botan.addEventListener(Event.TOUCH_END, function(){ botan.frame = 0; gameStart1(); }); // 音 var sound = core.assets["sounds/cf307/ME011-fanfare02.mp3"].clone(); sound.play(); //========== // ここまで //========== }

function gameStart1(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

scene.backgroundColor = "darkgray"; // 背景 var sky = new ExSprite(320, 480); sky.image = core.assets["images/back_space.png"]; scene.addChild(sky);

// 地面 var ground = new ExSprite(320, 55); ground.image = core.assets["images/cf307/blueground.png"]; ground.x = 0; ground.y = 480 - 1; scene.addChild(ground);

!171

Page 172: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// スコア表示 var score = 0; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'white'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });

// バー var bar = new ExSprite(64, 6); bar.image = core.assets["images/cf307/baayoko64.png"]; scene.addChild(bar); bar.x = 320 / 2 - 32; bar.y = 480 - 32;     

// 玉 var tama = new ExSprite(9, 9); tama.image = core.assets["images/xe_bullet_r.png"]; scene.addChild(tama); tama.x = bar.x + bar.width / 2 - tama.width / 2; tama.y = bar.y - tama.height; // 最初の音 var sound0 = core.assets["sounds/cf307/decision3.mp3"].clone(); sound0.play();    // 玉の動き var x1 = getRandom(0, 320 - tama.width); tama.tl.moveTo(x1, 6, 32); // 最初に跳ね返る音 tama.tl.then(function(){ var sound1 = core.assets["sounds/cf307/decision1.mp3"].clone(); sound1.play(); }); var x2 = getRandom(0, 320 - tama.width); tama.tl.moveTo(x2, 480 - tama.height, 32);

// 向こうのバー var bar1 = new ExSprite(64, 6); bar1.image = core.assets["images/cf307/baayoko64.png"]; scene.addChild(bar1); bar1.x = x1 - bar1.width /2; bar1.y = 0;     // バーで打つ bar.addCollision(tama); bar.addEventListener(Event.COLLISION, function(e) { tama.tl.clear(); var x1 = getRandom(0, 320 - tama.width); tama.tl.moveTo(x1, 6, 32); var x2 = getRandom(0, 320 - tama.width); tama.tl.moveTo(x2, 480 - tama.height, 32); // 音 var sound2 = core.assets["sounds/cf307/decision3.mp3"].clone();

!172

Page 173: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

sound2.play();       //tama.tl.moveTo(160, 471, 16); //テスト用 score += 1; // 向こうのバー bar1.tl.moveTo(x1 - bar.width /2, 0, 32); bar1.tl.then(function(){ score += 1; var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); }); // 球が速くなる if(30 <= score && score < 50){ tama.tl.clear(); var x1 = getRandom(0, 320 - tama.width); tama.tl.moveTo(x1, 6, 30); var x2 = getRandom(0, 320 - tama.width); tama.tl.moveTo(x2, 480 - tama.height, 30); bar1.tl.clear(); bar1.tl.moveTo(x1 - bar.width /2, 0, 30); bar1.tl.then(function(){ score += 1; var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); });      } if(50 <= score && score < 80){ tama.tl.clear(); var x1 = getRandom(0, 320 - tama.width); tama.tl.moveTo(x1, 6, 27); var x2 = getRandom(0, 320 - tama.width); tama.tl.moveTo(x2, 480, 27);// ここyが他と同じだとなぜか動かない bar1.tl.clear(); bar1.tl.moveTo(x1 - bar.width /2, 0, 27); bar1.tl.then(function(){ score += 1; var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); });      } if(80 <= score ){ tama.tl.clear(); var x1 = getRandom(0, 320 - tama.width); tama.tl.moveTo(x1, 6, 24); var x2 = getRandom(0, 320 - tama.width); tama.tl.moveTo(x2, 480 - tama.height, 24); bar1.tl.clear(); bar1.tl.moveTo(x1 - bar.width /2, 0, 24); bar1.tl.then(function(){ score += 1; var sound = core.assets["sounds/cf307/decision1.mp3"].clone(); sound.play(); });      } });

// 画面をタップしてバーを動かす scene.addEventListener(Event.TOUCH_START, function(e){

!173

Page 174: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

console.log("タッチ"); console.log(e.x); if(e.x < bar.x){ console.log("左"); bar.x -= 50; } if(bar.x + bar.width < e.x){ console.log("右だよ");        bar.x += 50; } });

// ゲームオーバー tama.addCollision(ground); tama.addEventListener(Event.COLLISION, function(e) { // 0点以上30点未満‥結果1 if(0 <= score && score < 30){ resultStart1(); } // 30点以上50点未満‥結果2 if(30 <= score && score < 50){ resultStart2(); console.log("30以上50未満"); } // 50点以上80点未満‥結果3 if(50 <= score && score < 80){ resultStart3(); console.log("50以上80未満"); } // 80点以上100点未満‥結果4 if(80 <= score && score < 100){ resultStart4(); console.log("80以上100未満"); } // 100点以上‥結果5 if(100 <= score){ resultStart5(); console.log("100以上"); } });

//========== // ここまで //========== }

function resultStart1(){// ゲーム終了画面 console.log("結果"); var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

!174

Page 175: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 背景         var background = new ExSprite(320, 480); background.image = core.assets["images/cf307/backume.png"]; scene.addChild(background); // へたくそトランペット var sound = core.assets["sounds/cf307/trumpet-dub1.mp3"].clone(); sound.play();  // ゲームオーバーロゴ  var over = new ExSprite(230, 32); over.image = core.assets["images/gameover.png"]; scene.addChild(over); over.x = 320 / 2 - over.width / 2; over.y = 140; over.scale(0.5, 0.5); over.tl.scaleTo(1.2, 1.2, 16).and().rotateTo(360, 16); // 得点結果 scene.tl.delay(10).then(function() { var label = new Label(" 結果:0点以上30点未満!"); label.color = 'yellow'; label.font = "23px 'PixelMplus10'"; //label.textAlign = "center"; label.y = 150; scene.addChild(label); label.tl.moveBy(0, 50, 10); }); scene.tl.delay(10).then(function() { var label = new Label("いいよ~        最初はみんなこんなもん

だ!"); label.x = 55; label.y = 480 / 2 - over.height / 2 + 48; label.color = "white"; label.font = "18px 'PixelMplus10'"; scene.addChild(label); label.scale(0.1, 0.1); label.tl.scaleTo(1, 1, 20); }); // リプレイボタン scene.tl.delay(20).then(function() { // 結果表示 var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 300; retry.tl.moveBy(0, 50, 10); // ボタンをタッチ    retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; console.log("タッチしました"); }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart1(); });

!175

Page 176: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// タイトルボタン var botan = new ExSprite(62, 55); botan.image = core.assets["images/cf307/taitorubotan.png"]; scene.addChild(botan); botan.x = 320 / 2 - botan.width / 2; botan.y = 530 - botan.height; botan.tl.moveBy(0, -50, 10); // ボタンをタッチ botan.addEventListener(Event.TOUCH_START, function(){ botan.frame = 1; console.log("タッチしました"); }); botan.addEventListener(Event.TOUCH_END, function(){ botan.frame = 0; gameStart(); }); });

//========== // ここまで //========== }

function resultStart2(){// ゲーム終了画面2 console.log("結果"); var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

// 背景 var background = new ExSprite(320, 480); background.image = core.assets["images/cf307/backume.png"]; scene.addChild(background); // 音ビヨヨーン var sound = core.assets["sounds/cf307/gameover07.mp3"].clone(); sound.play(); // ゲームオーバーロゴ  var over = new ExSprite(230, 32); over.image = core.assets["images/gameover.png"]; scene.addChild(over); over.x = 320 / 2 - over.width / 2; over.y = 140; over.scale(0.5, 0.5); over.tl.scaleTo(1.2, 1.2, 16).and().rotateTo(360, 16); // 得点結果 scene.tl.delay(10).then(function() { var label = new Label(" 結果:30点以上50点未満!"); label.color = 'yellow'; label.font = "23px 'PixelMplus10'"; label.textAlign = "center"; label.y = 150; scene.addChild(label);

!176

Page 177: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.tl.moveBy(0, 50, 10); }); scene.tl.delay(10).then(function() { var label = new Label("きみのじつりょくは       こんなもんじゃないだろ?"); label.x = 60; label.y = 480 / 2 - over.height / 2 + 48; label.color = "white"; label.font = "18px 'PixelMplus10'"; scene.addChild(label); label.scale(0.1, 0.1); label.tl.scaleTo(1, 1, 20);   }); // リプレイボタン scene.tl.delay(20).then(function() { // 結果表示 var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 300; retry.tl.moveBy(0, 50, 10); // ボタンをタッチ retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; console.log("タッチしました"); }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart1(); }); // タイトルボタン var botan = new ExSprite(62, 55); botan.image = core.assets["images/cf307/taitorubotan.png"]; scene.addChild(botan); botan.x = 320 / 2 - botan.width / 2; botan.y = 530 - botan.height; botan.tl.moveBy(0, -50, 10); // ボタンをタッチ botan.addEventListener(Event.TOUCH_START, function(){ botan.frame = 1; console.log("タッチしました"); }); botan.addEventListener(Event.TOUCH_END, function(){ botan.frame = 0; gameStart(); }); });

//========== // ここまで //========== }

function resultStart3(){// ゲーム終了画面3 console.log("結果3");

!177

Page 178: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

  //========== // ここから //==========   // 背景 var background = new ExSprite(320, 480); background.image = core.assets["images/cf307/backume.png"]; scene.addChild(background); // 音 var sound = core.assets["sounds/cf307/trumpet1.mp3"].clone(); sound.play(); // ゲームオーバーロゴ  var over = new ExSprite(230, 32); over.image = core.assets["images/gameover.png"]; scene.addChild(over); over.x = 320 / 2 - over.width / 2; over.y = 140; over.scale(0.5, 0.5); over.tl.scaleTo(1.2, 1.2, 16).and().rotateTo(360, 16); // 得点結果 scene.tl.delay(10).then(function() { var label = new Label(" 結果:50点以上80点未満!"); label.color = 'yellow'; label.font = "23px 'PixelMplus10'"; label.textAlign = "center"; label.y = 150; scene.addChild(label); label.tl.moveBy(0, 50, 10); }); scene.tl.delay(10).then(function() { var label = new Label("よしよし、           だいぶうまくなったじゃないか。

"); label.x = 40; label.y = 480 / 2 - over.height / 2 + 48; label.color = "white"; label.font = "18px 'PixelMplus10'"; scene.addChild(label); label.scale(0.1, 0.1); label.tl.scaleTo(1, 1, 20); }); // リプレイボタン scene.tl.delay(20).then(function() { // 結果表示 var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 300; retry.tl.moveBy(0, 50, 10); // ボタンをタッチ retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1;

!178

Page 179: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

console.log("タッチしました"); }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart1(); }); // タイトルボタン var botan = new ExSprite(62, 55); botan.image = core.assets["images/cf307/taitorubotan.png"]; scene.addChild(botan); botan.x = 320 / 2 - botan.width / 2; botan.y = 530 - botan.height; botan.tl.moveBy(0, -50, 10); // ボタンをタッチ botan.addEventListener(Event.TOUCH_START, function(){ botan.frame = 1; console.log("タッチしました"); }); botan.addEventListener(Event.TOUCH_END, function(){ botan.frame = 0; gameStart(); }); });

//========== // ここまで //========== }

function resultStart4(){// ゲーム終了画面4 console.log("結果4"); var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

// 背景 var background = new ExSprite(320, 480); background.image = core.assets["images/cf307/backume.png"]; scene.addChild(background); // 音 var sound = core.assets["sounds/cf307/dondonpafupafu1.mp3"].clone(); sound.play(); // ゲームオーバーロゴ  var over = new ExSprite(230, 32); over.image = core.assets["images/gameover.png"]; scene.addChild(over); over.x = 320 / 2 - over.width / 2; over.y = 140; over.scale(0.5, 0.5); over.tl.scaleTo(1.2, 1.2, 16).and().rotateTo(360, 16); // 得点結果 scene.tl.delay(10).then(function() {

!179

Page 180: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var label = new Label(" 結果:80点以上100点未満!"); label.color = 'yellow'; label.font = "23px 'PixelMplus10'"; label.textAlign = "center"; label.y = 150; scene.addChild(label); label.tl.moveBy(0, 50, 10); }); scene.tl.delay(10).then(function() { var label = new Label("おしい!            あとすこし!"); label.x = 110; label.y = 480 / 2 - over.height / 2 + 48; label.color = "white"; label.font = "18px 'PixelMplus10'"; scene.addChild(label); label.scale(0.1, 0.1); label.tl.scaleTo(1, 1, 20); }); // リプレイボタン scene.tl.delay(20).then(function() { // 結果表示 var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 300; retry.tl.moveBy(0, 50, 10); // ボタンをタッチ retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; console.log("タッチしました"); }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart1(); }); // タイトルボタン var botan = new ExSprite(62, 55); botan.image = core.assets["images/cf307/taitorubotan.png"]; scene.addChild(botan); botan.x = 320 / 2 - botan.width / 2; botan.y = 530 - botan.height; botan.tl.moveBy(0, -50, 10); // ボタンをタッチ botan.addEventListener(Event.TOUCH_START, function(){ botan.frame = 1; console.log("タッチしました"); }); botan.addEventListener(Event.TOUCH_END, function(){ botan.frame = 0; gameStart(); }); });

//========== // ここまで

!180

Page 181: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//========== }

function resultStart5(){// ゲーム終了画面5 console.log("結果5"); var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

// 背景 var background = new ExSprite(320, 480); background.image = core.assets["images/cf307/backume.png"]; scene.addChild(background); // 音 var sound100 = core.assets["sounds/cf307/rabohyuuu.mp3"].clone(); sound100.play(); // ゲームクリアロゴ var clear = new ExSprite(230, 32); clear.image = core.assets["images/gameclear.png"]; scene.addChild(clear); clear.x = 320 / 2 - clear.width / 2; clear.y = 140; clear.scale(0.5, 0.5); clear.tl.scaleTo(1.4, 1.4, 8); clear.tl.scaleTo(1.2, 1.2, 8); // 得点結果 scene.tl.delay(10).then(function() { var label = new Label(" 結果:100点以上!!"); label.color = 'yellow'; label.font = "23px 'PixelMplus10'"; label.textAlign = "center"; label.y = 150; scene.addChild(label); label.tl.moveBy(0, 50, 10); }); scene.tl.delay(10).then(function() { var label = new Label("すごい!天才!神!"); label.x = 60; label.y = 480 / 2 - clear.height / 2 + 48; label.color = "white"; label.font = "24px 'PixelMplus10'"; scene.addChild(label); label.scale(0.1, 0.1); label.tl.scaleTo(1, 1, 20); }); // リプレイボタン scene.tl.delay(20).then(function() { // 結果表示 var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2;

!181

Page 182: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

retry.y = 300; retry.tl.moveBy(0, 50, 10); // ボタンをタッチ retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; console.log("タッチしました"); }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart1(); }); // タイトルボタン var botan = new ExSprite(62, 55); botan.image = core.assets["images/cf307/taitorubotan.png"]; scene.addChild(botan); botan.x = 320 / 2 - botan.width / 2; botan.y = 530 - botan.height; botan.tl.moveBy(0, -50, 10); // ボタンをタッチ botan.addEventListener(Event.TOUCH_START, function(){ botan.frame = 1; console.log("タッチしました"); }); botan.addEventListener(Event.TOUCH_END, function(){ botan.frame = 0; gameStart(); }); });         

//========== // ここまで //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== // EnchantJS enchant(); var gameManager; var core; var scene; window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();};

!182

Page 183: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

core.start(); }

◉ 工夫したところ ・得点によって結果画面を5とおりにして遷移するようにした。

・向こう側にもバーを置いて、壁ではなく相手がいるような感じを出した。

◉ 難しかったところ ・球をだんだん速くしようとしたが、衝突判定をしない場合があってうまくいかず断念した

・球の動きと音を合わせるところ。

!183

Page 184: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

18 ドレミ音当て

◉ 内容 ・ランダムに音がなるので、打鍵して音を当てるゲーム。

・100点でゲームクリア、0点未満になるとゲームオーバー。

◉ 使った画像

!184

Page 185: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

!185

Page 186: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ "images/title.png",// タイトル "images/cf307/kennbanmigi.png", "images/cf307/kennbanhidari.png", "sounds/piano1_1do.mp3", "images/cf307/kennbannaka.png", "sounds/piano1_2re.mp3", "images/cf307/backonpu1.png", "images/cf307/kennbanhidari.png", "sounds/piano1_3mi.mp3", "sounds/piano1_4fa.mp3", "sounds/piano1_5so.mp3", "sounds/piano1_6ra.mp3", "sounds/piano1_7si.mp3", "sounds/piano1_8do.mp3", "images/bk_body.png", "images/cf307/holekumo(1).png", "images/cf307/tono1.png", "images/cf307/mogura rg.png", "images/cf307/mogura rg1.png", "images/cf307/nekonemuri.png", "images/cf307/nekohako.png", "images/cf307/zyonipyon (1).png", "images/cf307/zyoni.png", "images/cf307/momochanzannen.png", "images/cf307/momochan.png", "images/cf307/perapera.png", "images/cf307/hebipiro.png", "images/cf307/takochanugoku.png", "images/bk_mage.png", "sounds/cf307/kotsudumi1.mp3", // "images/cf307/clearkeyboard.png", "sounds/cf307/maou_chime11.mp3", "sounds/cf307/incorrect1.mp3", "images/gameclear.png", "images/cf307/retrybotan.png", "images/gameover.png", "sounds/cf307/se_maoudamashii_jingle06.mp3", "sounds/cf307/ME030-110124-loss05.mp3", "sounds/cf307/rabohyuuu.mp3", ];

function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

!186

Page 187: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.backgroundColor = "#00ffff"; // 背景 var background1 = new ExSprite(320, 480); background1.image = core.assets['images/cf307/backonpu1.png']; scene.addChild(background1); background1.x = 0; background1.y = -480; var background2 = new ExSprite(320, 480); background2.image = core.assets['images/cf307/backonpu1.png']; scene.addChild(background2); // スコア表示 var score = 0; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = '♪音感度 : ' + score; }); // モグ(レ) var mogu = new Sprite(82, 65); mogu.image = core.assets["images/cf307/mogura rg1.png"]; mogu.x = 40; mogu.y = 70; scene.addChild(mogu); // モグの穴 var hole1 = new Sprite(82, 65); hole1.image = core.assets["images/cf307/holekumo(1).png"]; hole1.x = 40; hole1.y = 70; scene.addChild(hole1); // まげ var mage = new Sprite(45, 60); mage.image = core.assets["images/bk_mage.png"]; scene.addChild(mage); mage.x = -43; mage.y = 150; mage.scale(82 / 190, 82 / 190); // 殿ド var tono = new Sprite(190, 120); tono.image = core.assets["images/cf307/tono1.png"]; tono.x = 10 - 53; tono.y = 150; scene.addChild(tono); tono.scale(82 / 190, 82 / 190);     // 殿の穴 var hole0 = new Sprite(82, 65); hole0.image = core.assets["images/cf307/holekumo(1).png"]; hole0.x = 10;

!187

Page 188: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

hole0.y = 180; scene.addChild(hole0); // ねこ(上のド) var neko = new Sprite(64, 64); neko.image = core.assets["images/cf307/nekonemuri.png"]; neko.x = 320 - 82 + 41 - neko.width / 2; neko.y = 100; scene.addChild(neko); //neko.scale(82 / 190, 82 / 190); // ねこの穴 var hole2 = new Sprite(82, 65); hole2.image = core.assets["images/cf307/holekumo(1).png"]; hole2.x = 320 - 82; hole2.y = 100; scene.addChild(hole2); // ぺらぺら小僧(ファ) var pera = new Sprite(64, 64); pera.image = core.assets["images/cf307/perapera.png"]; pera.x = 40 * 3 + 41 - pera.width / 2; pera.y = 135; scene.addChild(pera); pera.scale(0.8, 0.8); // ぺらの穴 var holefa = new Sprite(82, 65); holefa.image = core.assets["images/cf307/holekumo(1).png"]; holefa.x = 40 * 3; holefa.y = 135; scene.addChild(holefa); // ももちゃん(ラ) var momo = new Sprite(32, 32); momo.image = core.assets["images/cf307/momochanzannen.png"]; momo.x = 40 * 5 + 41 - momo.width / 2; momo.y = 183; scene.addChild(momo); momo.scale(1.2, 1.2); // ももちゃんの穴 var holera = new Sprite(82, 65); holera.image = core.assets["images/cf307/holekumo(1).png"]; holera.x = 40 * 5; holera.y = 175; scene.addChild(holera); // ぬへ小僧(ソ) var kozou = new Sprite(64, 64); kozou.image = core.assets["images/cf307/zyonipyon (1).png"]; kozou.x = 40 * 4 + 41 - kozou.width / 2; kozou.y = 240; scene.addChild(kozou); // その穴 var holeso = new Sprite(82, 65); holeso.image = core.assets["images/cf307/holekumo(1).png"]; holeso.x = 40 * 4; holeso.y = 240;

!188

Page 189: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.addChild(holeso); // へび(ミ) var hebi = new Sprite(82, 65); hebi.image = core.assets["images/cf307/hebipiro.png"]; hebi.x = 40 * 2; hebi.y = 290; scene.addChild(hebi); hebi.scale(0.8, 0.8); // へびの穴 var holemi = new Sprite(82, 65); holemi.image = core.assets["images/cf307/holekumo(1).png"]; holemi.x = 40 * 2; holemi.y = 290; scene.addChild(holemi); // たこちゃん(シ) var tako = new Sprite(32, 32); tako.image = core.assets["images/cf307/takochanugoku.png"]; tako.x = 40 * 6 + 41 - tako.width / 2; tako.y = 330; scene.addChild(tako); tako.scale(1.2, 1.2); // たこちゃんの穴 var holesi = new Sprite(82, 65); holesi.image = core.assets["images/cf307/holekumo(1).png"]; holesi.x = 40 * 6; holesi.y = 320; scene.addChild(holesi); // ド var kennbanmigi = new ExSprite(40, 104); kennbanmigi.image = core.assets["images/cf307/kennbanmigi.png"]; scene.addChild(kennbanmigi); kennbanmigi.x = 0; kennbanmigi.y = 480 - 104; // タップ kennbanmigi.addEventListener(Event.TOUCH_START, function(){ kennbanmigi.frame = 1; var sound = core.assets['sounds/piano1_1do.mp3'].clone(); sound.play(); var label = new Label(" MISS!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); label.tl.delay(16).then(function(){ label.remove(); }); kennbanmigi.tl.delay(8).then(function(){ var sound = core.assets['sounds/cf307/incorrect1.mp3'].clone(); sound.play(); }); score -= 10; });

!189

Page 190: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// タップ終了 kennbanmigi.addEventListener(Event.TOUCH_END, function(){ kennbanmigi.frame = 0; });

// レ  var kennbannaka = new ExSprite(40, 104); kennbannaka.image = core.assets["images/cf307/kennbannaka.png"]; scene.addChild(kennbannaka); kennbannaka.x = 40; kennbannaka.y = 480 - 104; // タップ kennbannaka.addEventListener(Event.TOUCH_START, function(){ kennbannaka.frame = 1; var sound = core.assets['sounds/piano1_2re.mp3'].clone(); sound.play(); var label = new Label(" MISS!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); label.tl.delay(16).then(function(){ label.remove(); }); kennbanmigi.tl.delay(8).then(function(){ var sound = core.assets['sounds/cf307/incorrect1.mp3'].clone(); sound.play(); }); score -= 10; }); // タップ終了 kennbannaka.addEventListener(Event.TOUCH_END, function(){ kennbannaka.frame = 0; });

// ミ  var kennbanhidari = new ExSprite(40, 104); kennbanhidari.image = core.assets["images/cf307/kennbanhidari.png"]; scene.addChild(kennbanhidari); kennbanhidari.x = 40 + 40; kennbanhidari.y = 480 - 104; // タップ kennbanhidari.addEventListener(Event.TOUCH_START, function(){ kennbanhidari.frame = 1; var sound = core.assets['sounds/piano1_3mi.mp3'].clone(); sound.play(); var label = new Label(" MISS!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); label.tl.delay(16).then(function(){ label.remove(); });

!190

Page 191: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

kennbanmigi.tl.delay(8).then(function(){ var sound = core.assets['sounds/cf307/incorrect1.mp3'].clone(); sound.play(); }); score -= 10; }); // タップ終了 kennbanhidari.addEventListener(Event.TOUCH_END, function(){ kennbanhidari.frame = 0; });

// ファ  var fa = new ExSprite(40, 104); fa.image = core.assets["images/cf307/kennbanmigi.png"]; scene.addChild(fa); fa.x = 40 + 40 + 40; fa.y = 480 - 104; // タップ fa.addEventListener(Event.TOUCH_START, function(){ fa.frame = 1; var sound = core.assets['sounds/piano1_4fa.mp3'].clone(); sound.play(); var label = new Label(" MISS!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); label.tl.delay(16).then(function(){ label.remove(); }); kennbanmigi.tl.delay(8).then(function(){ var sound = core.assets['sounds/cf307/incorrect1.mp3'].clone(); sound.play(); }); score -= 10; }); // タップ終了 fa.addEventListener(Event.TOUCH_END, function(){ fa.frame = 0; });

// ソ  var so = new ExSprite(40, 104); so.image = core.assets["images/cf307/kennbannaka.png"]; scene.addChild(so); so.x = 40 + 40 + 40 + 40; so.y = 480 - 104; // タップ so.addEventListener(Event.TOUCH_START, function(){ so.frame = 1; var sound = core.assets['sounds/piano1_5so.mp3'].clone(); sound.play(); var label = new Label(" MISS!"); label.y = 200; label.color = "red";

!191

Page 192: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); label.tl.delay(16).then(function(){ label.remove(); }); kennbanmigi.tl.delay(8).then(function(){ var sound = core.assets['sounds/cf307/incorrect1.mp3'].clone(); sound.play(); }); score -= 10; }); // タップ終了 so.addEventListener(Event.TOUCH_END, function(){ so.frame = 0; });

// ラ  var ra = new ExSprite(40, 104); ra.image = core.assets["images/cf307/kennbannaka.png"]; scene.addChild(ra); ra.x = 40 + 40 + 40 + 40 + 40; ra.y = 480 - 104; // タップ ra.addEventListener(Event.TOUCH_START, function(){ ra.frame = 1; var sound = core.assets['sounds/piano1_6ra.mp3'].clone(); sound.play(); var label = new Label(" MISS!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); label.tl.delay(16).then(function(){ label.remove(); }); kennbanmigi.tl.delay(8).then(function(){ var sound = core.assets['sounds/cf307/incorrect1.mp3'].clone(); sound.play(); }); score -= 10; }); // タップ終了 ra.addEventListener(Event.TOUCH_END, function(){ ra.frame = 0; });

// シ  var si = new ExSprite(40, 104); si.image = core.assets["images/cf307/kennbanhidari.png"]; scene.addChild(si); si.x = 40 + 40 + 40 + 40 + 40 + 40; si.y = 480 - 104; // タップ si.addEventListener(Event.TOUCH_START, function(){

!192

Page 193: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

si.frame = 1; var sound = core.assets['sounds/piano1_7si.mp3'].clone(); sound.play(); var label = new Label(" MISS!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); label.tl.delay(16).then(function(){ label.remove(); }); kennbanmigi.tl.delay(8).then(function(){ var sound = core.assets['sounds/cf307/incorrect1.mp3'].clone(); sound.play(); }); score -= 10; }); // タップ終了 si.addEventListener(Event.TOUCH_END, function(){ si.frame = 0; });

// ド  var do8 = new ExSprite(40, 104); do8.image = core.assets["images/cf307/kennbanmigi.png"]; scene.addChild(do8); do8.x = 280; do8.y = 480 - 104; // タップ do8.addEventListener(Event.TOUCH_START, function(){ do8.frame = 1; var sound = core.assets['sounds/piano1_8do.mp3'].clone(); sound.play(); var label = new Label(" MISS!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); label.tl.delay(16).then(function(){ label.remove(); }); kennbanmigi.tl.delay(8).then(function(){ var sound = core.assets['sounds/cf307/incorrect1.mp3'].clone(); sound.play(); }); score -= 10; }); // タップ終了 do8.addEventListener(Event.TOUCH_END, function(){ do8.frame = 0; });

// 画面がタップされたら scene.addEventListener(Event.TOUCH_START, function(){ // PRESSの文字を消す

!193

Page 194: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

labelGroup.remove(); // 音符を動かす background1.tl.clear(); background2.tl.clear(); console.log("音符よ動け!!"); background1.tl.moveBy(0, 480 * 24 / 150, 24); background2.tl.moveBy(0, 480 * 24 / 150, 24); // 背景スクロール if(background2.y >= 480){ console.log("スクロールして!!");       background2.y = background1.y - 480; }   if(background1.y >= 480){ background1.y = background2.y - 480; } });

// 鍵盤グループ var kenbanGroup = new Group(); scene.addChild(kenbanGroup);

// ラベルグループ var labelGroup = new Group(); scene.addChild(labelGroup);

// 最初のラベル var label = new Label("START"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); label.tl.delay(16 * 4).then(function(){ label.remove(); }); // 音 var sound = core.assets['sounds/cf307/se_maoudamashii_jingle06.mp3'].clone(); sound.play(); // 繰り返し scene.tl.delay(16 * 4); scene.tl.then(function() { //label.remove(); // テキストラベル var label1 = new Label(" READY"); label1.y = 200; label1.color = "blue"; label1.font = "40px 'PixelMplus10'"; label1.textAlign = "center"; scene.addChild(label1); // 落ちてくる隠れ鍵盤 var kenban = new ExSprite(40, 100); kenban.image = core.assets['images/cf307/clearkeyboard.png']; kenban.frame = 1; // 透明 // 鍵盤をドからドまででランダムに落とす var x = getRandom(0, 7);

!194

Page 195: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//var x = getRandom(0, 1); // テスト用 if(x == 0){  kenban.x = 0; } if(x == 1){  kenban.x = 40; } if(x == 2){  kenban.x = 40 * 2; } if(x == 3){  kenban.x = 40 * 3; } if(x == 4){  kenban.x = 40 * 4; } if(x == 5){  kenban.x = 40 * 5; } if(x == 6){  kenban.x = 40 * 6; } if(x == 7){  kenban.x = 40 * 7; } kenban.y = 0; kenbanGroup.addChild(kenban); kenban.tl.moveBy(0, 380 - 4, 24); // PRESSの文字を出す kenban.tl.then(function(){ scene.addChild(labelGroup); //鍵盤を押したときにPRESSの文字を消すために

labelGroupとして消しているので、またここで復活させないとPRESSが出ない label1.remove(); var label2 = new Label(" PRESS"); label2.y = 200; label2.color = "bluck"; label2.font = "40px 'PixelMplus10'"; label2.textAlign = "center"; labelGroup.addChild(label2); label2.tl.delay(32).then(function(){ label2.remove(); }); // ドに落ちた場合 if(kenban.x == 0){ console.log("鍵盤がドの下まで"); var sound = core.assets['sounds/piano1_1do.mp3'].clone(); sound.play(); // ドの音を当てる kenban.addEventListener(Event.TOUCH_START, function(){ // PRESSの文字を消す labelGroup.remove(); console.log("ド当たり"); kennbanmigi.frame = 1; var sound = core.assets['sounds/cf307/

maou_chime11.mp3'].clone(); sound.play();

!195

Page 196: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

score += 10; //score += 100; // テスト用  // GOODの文字 var label = new Label(" GOOD!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); // 殿が出てくる tono.tl.clear(); mage.tl.clear();     tono.image = core.assets["images/cf307/tono1.png"]; tono.tl.moveBy(0, -55, 12); mage.tl.moveTo(tono.x + tono.width / 2 - mage.width / 2, tono.y

- 10, 0); mage.tl.moveBy(0, -55, 12); tono.tl.then(function(){ tono.image = core.assets["images/bk_body.png"]; tono.tl.moveTo(-43, 150, 12); mage.tl.moveTo(tono.x + tono.width / 2 - mage.width / 2,

150, 12); mage.tl.moveTo(-43, 150, 0); // GOODの文字を消す label.remove(); }); }); // タップ終了 kenbanGroup.addEventListener(Event.TOUCH_END, function(){ kennbanmigi.frame = 0; }); } // レに落ちた場合 if(kenban.x == 40){ console.log("鍵盤がレの下まで"); var sound = core.assets['sounds/piano1_2re.mp3'].clone(); sound.play(); // レの音を当てる kenban.addEventListener(Event.TOUCH_START, function(){ // PRESSの文字を消す labelGroup.remove(); console.log("re当たり"); kennbannaka.frame = 1; var sound = core.assets['sounds/cf307/

maou_chime11.mp3'].clone(); sound.play(); score += 10; // GOODの文字 var label = new Label(" GOOD!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); // moguが出てくる

!196

Page 197: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

mogu.tl.clear();     mogu.image = core.assets["images/cf307/mogura rg1.png"]; mogu.tl.moveBy(0, -50, 12); mogu.tl.then(function(){ mogu.image = core.assets["images/cf307/mogura rg.png"]; mogu.tl.moveTo(40, 70, 12); // GOODの文字を消す label.remove(); }); }); // タップ終了 kenbanGroup.addEventListener(Event.TOUCH_END, function(){ kennbannaka.frame = 0; }); } // ミに落ちた場合 if(kenban.x == 40 * 2){ console.log("鍵盤がミの下まで"); var sound = core.assets['sounds/piano1_3mi.mp3'].clone(); sound.play(); // レの音を当てる kenban.addEventListener(Event.TOUCH_START, function(){ // PRESSの文字を消す labelGroup.remove(); console.log("ミ当たり"); kennbanhidari.frame = 1; var sound = core.assets['sounds/cf307/

maou_chime11.mp3'].clone(); sound.play(); score += 10; // GOODの文字 var label = new Label(" GOOD!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); // へびが出てくる hebi.tl.clear();     hebi.image = core.assets["images/cf307/hebipiro.png"]; hebi.frame = [0, 1, 2]; hebi.tl.moveBy(0, -60, 12); hebi.frame = [0, 0, 1, 1, 2, 2]; hebi.tl.then(function(){ hebi.frame = [0]; hebi.tl.moveTo(40 * 2, 290, 12); // GOODの文字を消す label.remove(); }); }); // タップ終了 kenbanGroup.addEventListener(Event.TOUCH_END, function(){ kennbanhidari.frame = 0; }); }

!197

Page 198: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// ファに落ちた場合 if(kenban.x == 40 * 3){ console.log("鍵盤がファの下まで"); var sound = core.assets['sounds/piano1_4fa.mp3'].clone(); sound.play(); // ファの音を当てる kenban.addEventListener(Event.TOUCH_START, function(){ // PRESSの文字を消す labelGroup.remove(); console.log("ファ当たり"); fa.frame = 1; var sound = core.assets['sounds/cf307/

maou_chime11.mp3'].clone(); sound.play(); score += 10; // GOODの文字 var label = new Label(" GOOD!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); // ぺらが出てくる pera.tl.clear();     pera.image = core.assets["images/cf307/perapera.png"]; pera.frame = [0, 1, 2]; pera.tl.moveBy(0, -50, 12); pera.tl.then(function(){ pera.frame = [2]; pera.tl.moveTo(40 * 3 + 41 - pera.width / 2, 135, 12); // GOODの文字を消す label.remove(); }); }); // タップ終了 kenbanGroup.addEventListener(Event.TOUCH_END, function(){ fa.frame = 0; }); } // ソに落ちた場合 if(kenban.x == 40 * 4){ console.log("鍵盤がソの下まで"); var sound = core.assets['sounds/piano1_5so.mp3'].clone(); sound.play(); // ソの音を当てる kenban.addEventListener(Event.TOUCH_START, function(){ // PRESSの文字を消す labelGroup.remove(); console.log("ソ当たり"); so.frame = 1; var sound = core.assets['sounds/cf307/

maou_chime11.mp3'].clone(); sound.play(); score += 10;

!198

Page 199: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// GOODの文字 var label = new Label(" GOOD!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); // ぬへ小僧が出てくる kozou.tl.clear();     kozou.image = core.assets["images/cf307/zyonipyon (1).png"]; kozou.frame = [0, 0, 1, 1]; kozou.tl.moveBy(0, -60, 12); kozou.tl.then(function(){ kozou.image = core.assets["images/cf307/zyoni.png"]; kozou.tl.moveTo(40 * 4 + 41 - kozou.width / 2, 240, 12); // GOODの文字を消す label.remove(); }); }); // タップ終了 kenbanGroup.addEventListener(Event.TOUCH_END, function(){ so.frame = 0; }); } // ラに落ちた場合 if(kenban.x == 40 * 5){ console.log("鍵盤がソの下まで"); var sound = core.assets['sounds/piano1_6ra.mp3'].clone(); sound.play(); // ラの音を当てる kenban.addEventListener(Event.TOUCH_START, function(){ // PRESSの文字を消す labelGroup.remove(); console.log("ラ当たり"); ra.frame = 1; var sound = core.assets['sounds/cf307/

maou_chime11.mp3'].clone(); sound.play(); score += 10; // GOODの文字 var label = new Label(" GOOD!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); // ももちゃんが出てくる momo.tl.clear();     momo.image = core.assets["images/cf307/momochanzannen.png"]; momo.tl.moveBy(0, -45, 12); momo.tl.then(function(){ momo.image = core.assets["images/cf307/momochan.png"]; momo.tl.moveTo(40 * 5 + 41 - momo.width / 2, 183, 12); // GOODの文字を消す label.remove();

!199

Page 200: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}); }); // タップ終了 kenbanGroup.addEventListener(Event.TOUCH_END, function(){ ra.frame = 0; }); } // シに落ちた場合 if(kenban.x == 40 * 6){ console.log("鍵盤がシの下まで"); var sound = core.assets['sounds/piano1_7si.mp3'].clone(); sound.play(); // ラの音を当てる kenban.addEventListener(Event.TOUCH_START, function(){ // PRESSの文字を消す labelGroup.remove(); console.log("シ当たり"); si.frame = 1; var sound = core.assets['sounds/cf307/

maou_chime11.mp3'].clone(); sound.play(); score += 10; // GOODの文字 var label = new Label(" GOOD!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); // たこちゃんが出てくる tako.tl.clear();     tako.image = core.assets["images/cf307/takochanugoku.png"]; tako.tl.moveBy(0, -50, 12); tako.frame = [0, 0, 1, 1]; tako.tl.then(function(){ tako.frame = [0]; tako.tl.moveTo(40 * 6 + 41 - tako.width / 2, 330, 12); // GOODの文字を消す label.remove(); }); }); // タップ終了 kenbanGroup.addEventListener(Event.TOUCH_END, function(){ si.frame = 0; }); } // 上のドに落ちた場合 if(kenban.x == 40 * 7){ console.log("鍵盤が上のドの下まで"); var sound = core.assets['sounds/piano1_8do.mp3'].clone(); sound.play(); // 上のドの音を当てる kenban.addEventListener(Event.TOUCH_START, function(){ // PRESSの文字を消す

!200

Page 201: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

labelGroup.remove(); console.log("上のド当たり"); do8.frame = 1; var sound = core.assets['sounds/cf307/

maou_chime11.mp3'].clone(); sound.play(); score += 10; // GOODの文字 var label = new Label(" GOOD!"); label.y = 200; label.color = "red"; label.font = "40px 'PixelMplus10'"; label.textAlign = "center"; scene.addChild(label); // 猫が出てくる neko.tl.clear();     neko.image = core.assets["images/cf307/nekonemuri.png"]; neko.tl.moveBy(0, -64, 12); neko.frame = [0, 0, 1, 1]; neko.tl.then(function(){ neko.image = core.assets["images/cf307/nekohako.png"]; neko.tl.moveTo(320 - 82 + 41 - neko.width / 2, 100, 12); // GOODの文字を消す label.remove(); }); }); // タップ終了 kenbanGroup.addEventListener(Event.TOUCH_END, function(){ do8.frame = 0; }); } }); console.log("kenbanを消す前"); kenban.tl.delay(32).then(function(){ kenban.remove(); }); // 0未満でゲームオーバー if(score < 0){ console.log("0点未満!"); kenbanGroup.remove(); label1.remove(); // 音 var sound = core.assets['sounds/cf307/ME030-110124-

loss05.mp3'].clone(); sound.play(); // オーバー      var over = new ExSprite(230, 32); over.image = core.assets["images/gameover.png"]; scene.addChild(over); over.x = 160 - 230 / 2; over.y = 200 + 8; over.scale(0.5, 0.5); over.tl.scaleTo(1, 1, 12); // リトライボタン

!201

Page 202: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 300 - 35; retry.tl.moveBy(0, 50, 10); // ボタンをタッチ retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; console.log("タッチしました"); }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart(); }); } // 100でクリア if(score >= 100){ console.log("100点!"); kenbanGroup.remove(); label1.remove(); // 音(歓声) var sound = core.assets['sounds/cf307/rabohyuuu.mp3'].clone(); sound.play(); // クリア var clear = new ExSprite(230, 32); clear.image = core.assets["images/gameclear.png"]; scene.addChild(clear); clear.x = 160 - 230 / 2; clear.y = 200 + 8; clear.scale(0.5, 0.5); clear.tl.scaleTo(1, 1, 12); // リトライボタン var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 300 - 35; retry.tl.moveBy(0, 50, 10); // ボタンをタッチ retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; console.log("タッチしました"); }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart(); }); // キャラが出たり入ったり kennbanmigi.tl.then(function(){ // 殿 //tono.tl.clear(); tono.tl.delay(0).then(function(){ var sound = core.assets['sounds/piano1_1do.mp3'].clone(); sound.play();

!202

Page 203: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}); tono.image = core.assets["images/cf307/tono1.png"]; tono.tl.moveBy(0, -55, 12); mage.tl.moveTo(tono.x + tono.width / 2 - mage.width / 2, tono.y -

10, 0); mage.tl.moveBy(0, -55, 12); tono.tl.then(function(){ tono.image = core.assets["images/bk_body.png"]; tono.tl.moveTo(-43, 150, 12); mage.tl.moveTo(tono.x + tono.width / 2 - mage.width / 2, 150,

12); mage.tl.moveTo(-43, 150, 0); }); // もぐ //mogu.tl.clear();  mogu.tl.delay(6).then(function(){ var sound = core.assets['sounds/piano1_2re.mp3'].clone(); sound.play(); });    mogu.image = core.assets["images/cf307/mogura rg1.png"]; mogu.tl.moveBy(0, -50, 12); mogu.tl.then(function(){ mogu.image = core.assets["images/cf307/mogura rg.png"]; mogu.tl.moveTo(40, 70, 12); }); // へび //hebi.tl.clear(); hebi.tl.delay(6 * 2).then(function(){ var sound = core.assets['sounds/piano1_3mi.mp3'].clone(); sound.play(); });       hebi.image = core.assets["images/cf307/hebipiro.png"]; hebi.frame = [0, 1, 2]; hebi.tl.moveBy(0, -60, 12); hebi.frame = [0, 0, 1, 1, 2, 2]; hebi.tl.then(function(){ hebi.frame = [0]; hebi.tl.moveTo(40 * 2, 290, 12); }); // ぺらぺら //pera.tl.clear(); pera.tl.delay(6 * 3).then(function(){ var sound = core.assets['sounds/piano1_4fa.mp3'].clone(); sound.play(); });       pera.image = core.assets["images/cf307/perapera.png"]; pera.frame = [0, 1, 2]; pera.tl.moveBy(0, -50, 12); pera.tl.then(function(){ pera.frame = [2]; pera.tl.moveTo(40 * 3 + 41 - pera.width / 2, 135, 12); }); // ぬへ小僧 //kozou.tl.clear(); kozou.tl.delay(6 * 4).then(function(){ console.log("ソの音"); var sound = core.assets['sounds/piano1_5so.mp3'].clone();

!203

Page 204: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

sound.play(); });         kozou.image = core.assets["images/cf307/zyonipyon (1).png"]; kozou.frame = [0, 0, 1, 1]; kozou.tl.moveBy(0, -60, 12); kozou.tl.then(function(){ kozou.image = core.assets["images/cf307/zyoni.png"]; kozou.tl.moveTo(40 * 4 + 41 - kozou.width / 2, 240, 12); }); // ももちゃん //momo.tl.clear();  momo.tl.delay(6 * 5).then(function(){ var sound = core.assets['sounds/piano1_6ra.mp3'].clone(); sound.play(); });           momo.image = core.assets["images/cf307/momochanzannen.png"]; momo.tl.moveBy(0, -45, 12); momo.tl.then(function(){ momo.image = core.assets["images/cf307/momochan.png"]; momo.tl.moveTo(40 * 5 + 41 - momo.width / 2, 183, 12); }); // たこちゃん //tako.tl.clear();  tako.tl.delay(6 * 6).then(function(){ var sound = core.assets['sounds/piano1_7si.mp3'].clone(); sound.play(); });    tako.image = core.assets["images/cf307/takochanugoku.png"]; tako.tl.moveBy(0, -50, 12); tako.frame = [0, 0, 1, 1]; tako.tl.then(function(){ tako.frame = [0]; tako.tl.moveTo(40 * 6 + 41 - tako.width / 2, 330, 12); console.log("たこ戻る"); }); // 猫 //neko.tl.clear();  neko.tl.delay(6 * 7).then(function(){ var sound = core.assets['sounds/piano1_8do.mp3'].clone(); sound.play();  });      neko.image = core.assets["images/cf307/nekonemuri.png"]; neko.tl.moveBy(0, -64, 12); neko.frame = [0, 0, 1, 1]; neko.tl.then(function(){ neko.image = core.assets["images/cf307/nekohako.png"]; neko.tl.moveTo(320 - 82 + 41 - neko.width / 2, 100, 10); }); }); } }); scene.tl.loop();

//========== // ここまで //==========

!204

Page 205: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== // EnchantJS enchant(); var gameManager; var core; var scene; window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); }

◉ 工夫したところや難しかったところ

・透明の鍵盤をランダムに落として、ピアノに衝突させることで、音を鳴らすようにした。

・落ちた透明の鍵盤にタッチすれば正解、それ以外は不正解ということで判定した。

!205

Page 206: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

19 最短すごろく

◉ 内容

・6マスのすごろく。運がよければ一発でゴールできる。

・左上のサイコロの画像をクリックするとサイコロが振られる。

・4がでるとスタートに戻る。

・サイコロが振られる毎にターン数が表示され、ゴールしたターン数によって結果画面が5とおり出る。

◉ 使った画像

!206

Page 207: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

!207

Page 208: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ //“images/e_tanuki.png", "images/title.png",// タイトル //“sounds/hit.mp3", //“sounds/jump.mp3", //“images/xe_bullet_r.png", "images/cf307/masu1.png", "images/cf307/momo.png", "images/cf307/nekosai128abc.png", "images/cf307/oimo (3).png", "sounds/cf307/drum-roll1.mp3", "sounds/cf307/roll-finish1.mp3", "sounds/cf307/cat-cry1.mp3", "sounds/cf307/jump02.mp3", "sounds/fall.mp3", "images/cf307/f22_100_60a.png", "images/cf307/retrybotan.png", "sounds/cf307/shakin1.mp3", "sounds/cf307/correct1.mp3", "images/cf307/sinkansen.png", "sounds/cf307/flee1.mp3", "images/cf307/skylinegt.png", "sounds/cf307/car-horn.mp3", "sounds/cf307/chainsaw1.mp3", "images/cf307/momo_cycle1.png", "sounds/cf307/bicycle.mp3", "images/cf307/momochanrotate.png", "sounds/cf307/jump-cute1.mp3", ];

function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

scene.backgroundColor = "#FADCE9";

// マスを作る関数1 function makeMasu(newX, newY){ var masu = new ExSprite(60, 70); masu.image = core.assets["images/cf307/masu1.png"]; scene.addChild(masu); masu.x = newX; masu.y = newY; scene.addChild(masu); }

!208

Page 209: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// マスを作る関数2 function makeMasu2(newX, newY){ var masu = new ExSprite(60, 70); masu.image = core.assets["images/cf307/masu1.png"]; scene.addChild(masu); masu.x = newX; masu.y = newY; scene.addChild(masu); masu.scale(1, -1); }

// マスを呼ぶ makeMasu(320 / 2 - 60 / 2, 70 * 6 - 10); makeMasu(320 / 2 - 60 / 2, 70 * 5 - 10); makeMasu(320 / 2 - 60 / 2, 70 * 4 - 10); makeMasu(320 / 2 - 60 / 2, 70 * 3 - 10); makeMasu(320 / 2 - 60 / 2, 70 * 2 - 10); makeMasu(320 / 2 - 60 / 2, 70 * 1 - 10); makeMasu2(320 / 2 - 60 / 2, 70 * 0);

// スコア(ターン) var score = 0; scoreLabel = new Label('SCORE:0'); scoreLabel.x = 20; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scene.addChild(scoreLabel); scoreLabel.addEventListener(Event.ENTER_FRAME,function(){ scoreLabel.text = 'TURN: ' +score; }); // ラベル var label = new Label("START"); label.x = 200; label.y = 435; label.color = "blue"; label.font = "20px 'PixelMplus10'"; scene.addChild(label); // 1 var label = new Label("1"); label.x = 160 - 5; label.y = 438 - 70 + 1; label.color = "black"; label.font = "20px 'PixelMplus10'"; scene.addChild(label); // 2 var label = new Label("2"); label.x = 160 - 5; label.y = 438 - 70 * 2 + 1; label.color = "black"; label.font = "20px 'PixelMplus10'"; scene.addChild(label); // 3 var label = new Label("3"); label.x = 160 - 5;

!209

Page 210: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.y = 438 - 70 * 3 + 1; label.color = "black"; label.font = "20px 'PixelMplus10'"; scene.addChild(label); // 4 var label = new Label("4"); label.x = 160 - 5; label.y = 438 - 70 * 4 + 1; label.color = "black"; label.font = "20px 'PixelMplus10'"; scene.addChild(label); // 一マス戻る・・・残念! var label = new Label("・・Ouch!"); label.x = 200; label.y = 435 - 70 * 4; label.color = "black"; label.font = "20px 'PixelMplus10'"; scene.addChild(label); // 5 var label = new Label("5"); label.x = 160 - 5; label.y = 438 - 70 * 5 + 1; label.color = "black"; label.font = "20px 'PixelMplus10'"; scene.addChild(label); // おいも var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/cf307/oimo (3).png"]; oimo.x = 160 - 16; oimo.y = 438 - 70 * 6 - 5; scene.addChild(oimo); oimo.scale(1.2, 1.2); // 6 var label = new Label("6"); label.x = 160 - 5; label.y = 438 - 70 * 6 + 1; label.color = "yellow"; label.font = "20px 'PixelMplus10'"; scene.addChild(label); // ゴール var label = new Label("GOAL!!"); label.x = 200; label.y = 435 - 70 * 6; label.color = "red"; label.font = "20px 'PixelMplus10'"; scene.addChild(label); // もも var momo = new ExSprite(32, 32); momo.image = core.assets["images/cf307/momo.png"]; momo.x = 320 / 2 - 16; momo.y = 480 - 32 - 14; scene.addChild(momo); momo.frame = [0, 0, 1, 1, 2, 2];

// サイコロ

!210

Page 211: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var sai = new ExSprite(128, 128); sai.image = core.assets["images/cf307/nekosai128abc.png"]; sai.x = 160 / 2 - 64 - 16; sai.y = 35; scene.addChild(sai); sai.scale(0.5, 0.5);

// タッチするとサイコロを振る scene.addEventListener(Event.TOUCH_START,function(){ var sound1 = core.assets["sounds/cf307/drum-roll1.mp3"].clone(); sound1.play(); scene.tl.delay(32).then(function(){ sound1.stop(); }); // サイコロが上にあるとき(回っているとき) if(sai.y == 10){ console.log("回っているとき"); sai.tl.moveTo(160 / 2 - 64 - 16, 35, 5, enchant.Easing.BOUNCE_EASEOUT); sai.tl.scaleTo(1, 1, 0); sound1.stop(); var sound = core.assets["sounds/cf307/roll-finish1.mp3"].clone(); sound.play(); sai.tl.delay(5).then(function(){ var sound2 = core.assets["sounds/cf307/cat-cry1.mp3"].clone(); sound2.play(); }); // サイコロの1から6 var s0 = getRandom(1, 6); // 0のマスにいるとき if(momo.y == 434){ if(s0 == 1){ console.log("1"); sai.frame = [0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6,

0, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 音 var sound = core.assets["sounds/cf307/jump02.mp3"].clone(); sound.play(); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 2){ console.log("2"); sai.frame = [12, 12, 12, 12, 12, 12, 12, 12, 7, 7, 7, 7, 7, 7,

7, 7, 7, 12, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 音 var sound = core.assets["sounds/cf307/jump02.mp3"].clone(); sound.play(); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1, 5);

!211

Page 212: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 3){ console.log("3"); sai.frame = [13, 13, 13, 13, 13, 13, 13, 13, 8, 8, 8, 8, 8, 8,

8, 8, 8, 13, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 音 var sound = core.assets["sounds/cf307/jump02.mp3"].clone(); sound.play(); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1, 5); momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 4){ console.log("0から4"); sai.frame = [3, 3, 3, 3, 3, 3, 3, 3, 9, 9, 9, 9, 9, 9, 9, 9, 9,

3, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 音 var sound = core.assets["sounds/cf307/jump02.mp3"].clone(); sound.play(); console.log("0から4アニメ終わり"); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1.5, 5);

!212

Page 213: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1, 5); momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4からスタートに戻る momo.tl.then(function(){ // 音 var sound = core.assets["sounds/fall.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434, 32).and().rotateBy(720,

32); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 5){ console.log("5"); sai.frame = [14, 14, 14, 14, 14, 14, 14, 14, 10, 10, 10, 10,

10, 10, 10, 10, 10, 14, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 音 var sound = core.assets["sounds/cf307/jump02.mp3"].clone(); sound.play(); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1, 5); momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); });

!213

Page 214: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 6){ console.log("6"); sai.frame = [15, 15, 15, 15, 15, 15, 15, 15, 11, 11, 11, 11,

11, 11, 11, 11, 11, 15, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 0→1 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1, 5); // 1→2 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); // 2→3

!214

Page 215: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→4 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→6 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); momo.tl.then(function(){ // ●結果 if(score == 1){ resultStart1(); } if(score >= 2 && score <= 3){ resultStart2(); } if(score >= 4 && score <= 6){ resultStart3(); } if(score >= 7 && score <= 14){ resultStart4(); } if(score >= 15){ resultStart5(); } }); }); } }

!215

Page 216: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 1のマスにいる時 if(momo.y == 434 - 70 * 1){ if(s0 == 1){ console.log("1で1"); sai.frame = [0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6,

0, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 1→2 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); momo.tl.then(function(){ momo.tl.clear();//これがないと更に動いてしまう sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 2){ console.log("1で2"); sai.frame = [12, 12, 12, 12, 12, 12, 12, 12, 7, 7, 7, 7, 7, 7,

7, 7, 7, 12, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 1→2 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); // 2→3 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); }  if(s0 == 3){ console.log("1で3");   sai.frame = [13, 13, 13, 13, 13, 13, 13, 13, 8, 8, 8, 8, 8, 8,

8, 8, 8, 13, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 1→2 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); // 2→3 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5);

!216

Page 217: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→4 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4からスタートに戻る momo.tl.then(function(){ // 音 var sound = core.assets["sounds/fall.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434, 32).and().rotateBy(720,

32); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 4){ console.log("1で4"); sai.frame = [3, 3, 3, 3, 3, 3, 3, 3, 9, 9, 9, 9, 9, 9, 9, 9, 9,

3, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 1→2 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); // 2→3 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→4 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

!217

Page 218: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); });    } if(s0 == 5){ console.log("1で5");   sai.frame = [14, 14, 14, 14, 14, 14, 14, 14, 10, 10, 10, 10,

10, 10, 10, 10, 10, 14, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 1→2 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); // 2→3 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→6 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); momo.tl.then(function(){ // ●結果 if(score == 1){ resultStart1(); }

!218

Page 219: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

if(score >= 2 && score <= 3){ resultStart2(); } if(score >= 4 && score <= 6){ resultStart3(); } if(score >= 7 && score <= 14){ resultStart4(); } if(score >= 15){ resultStart5(); } }); }); }   if(s0 == 6){ console.log("1で6");  sai.frame = [15, 15, 15, 15, 15, 15, 15, 15, 11, 11, 11, 11,

11, 11, 11, 11, 11, 15, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 1→2 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); // 2→3 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→6 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); // 6→5

!219

Page 220: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); });   }                } // 2のマスにいる時 if(momo.y == 434 - 70 * 2){ if(s0 == 1){ console.log("2で1"); sai.frame = [0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6,

0, null];             sai.addEventListener(Event.ANIMATION_END,function(){ // 2→3 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 2){ console.log("2で2"); sai.frame = [12, 12, 12, 12, 12, 12, 12, 12, 7, 7, 7, 7, 7, 7,

7, 7, 7, 12, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 2→3 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→4 momo.tl.then(function(){ // 音 var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4からスタートに戻る momo.tl.then(function(){ // 音 var sound = core.assets["sounds/fall.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434, 32).and().rotateBy(720,

32);

!220

Page 221: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 3){ console.log("2で3");   sai.frame = [13, 13, 13, 13, 13, 13, 13, 13, 8, 8, 8, 8, 8, 8,

8, 8, 8, 13, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 2→3 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 4){ console.log("2で4"); sai.frame = [3, 3, 3, 3, 3, 3, 3, 3, 9, 9, 9, 9, 9, 9, 9, 9, 9,

3, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 2→3 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone();

!221

Page 222: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→6 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); momo.tl.then(function(){ // ●結果 if(score == 1){ resultStart1(); } if(score >= 2 && score <= 3){ resultStart2(); } if(score >= 4 && score <= 6){ resultStart3(); } if(score >= 7 && score <= 14){ resultStart4(); } if(score >= 15){ resultStart5(); } }); });    } if(s0 == 5){ console.log("2で5");   sai.frame = [14, 14, 14, 14, 14, 14, 14, 14, 10, 10, 10, 10,

10, 10, 10, 10, 10, 14, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 2→3 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5);

!222

Page 223: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 5→6 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); // 6→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); });   }   if(s0 == 6){ console.log("2で6");  sai.frame = [15, 15, 15, 15, 15, 15, 15, 15, 11, 11, 11, 11,

11, 11, 11, 11, 11, 15, null];  sai.addEventListener(Event.ANIMATION_END,function(){ // 2→3 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→6 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); // 6→5 momo.tl.then(function(){

!223

Page 224: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var sound = core.assets["sounds/cf307/jump02.mp3"].clone();

sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4からスタートに戻る momo.tl.then(function(){ // 音 var sound = core.assets["sounds/fall.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434, 32).and().rotateBy(720,

32); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); });   }                } // 3のマスにいる時 if(momo.y == 434 - 70 * 3){ if(s0 == 1){ console.log("3で1"); sai.frame = [0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6,

0, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 3→4 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4からスタートに戻る momo.tl.then(function(){ // 音 var sound = core.assets["sounds/fall.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434, 32).and().rotateBy(720,

32); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 2){

!224

Page 225: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

console.log("3で2"); sai.frame = [12, 12, 12, 12, 12, 12, 12, 12, 7, 7, 7, 7, 7, 7,

7, 7, 7, 12, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 3→4 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); });   } if(s0 == 3){ console.log("3で3");   sai.frame = [13, 13, 13, 13, 13, 13, 13, 13, 8, 8, 8, 8, 8, 8,

8, 8, 8, 13, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 3→4 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→6 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); momo.tl.then(function(){ // ●結果 if(score == 1){ resultStart1(); } if(score >= 2 && score <= 3){ resultStart2(); } if(score >= 4 && score <= 6){ resultStart3(); }

!225

Page 226: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

if(score >= 7 && score <= 14){ resultStart4(); } if(score >= 15){ resultStart5(); } }); });   } if(s0 == 4){ console.log("3で4"); sai.frame = [3, 3, 3, 3, 3, 3, 3, 3, 9, 9, 9, 9, 9, 9, 9, 9, 9,

3, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 3→4 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→6 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); // 6→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); });      } if(s0 == 5){ console.log("3で5");   sai.frame = [14, 14, 14, 14, 14, 14, 14, 14, 10, 10, 10, 10,

10, 10, 10, 10, 10, 14, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 3→4 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5

!226

Page 227: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→6 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); // 6→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4からスタートに戻る momo.tl.then(function(){ // 音 var sound = core.assets["sounds/fall.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434, 32).and().rotateBy(720,

32); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); });   }   if(s0 == 6){ console.log("3で6");  sai.frame = [15, 15, 15, 15, 15, 15, 15, 15, 11, 11, 11, 11,

11, 11, 11, 11, 11, 15, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 3→4 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→5 momo.tl.then(function(){

!227

Page 228: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var sound = core.assets["sounds/cf307/jump02.mp3"].clone();

sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→6 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); // 6→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→3 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); });     } 

} /* // 4のマスにいる時(戻るのでなし) if(momo.y == 434 - 70 * 4){ if(s0 == 1){ console.log("2で1"); sai.frame = [0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6,

0, null]; } if(s0 == 2){ console.log("4で2"); sai.frame = [12, 12, 12, 12, 12, 12, 12, 12, 7, 7, 7, 7, 7, 7,

!228

Page 229: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

7, 7, 7, 12, null]; } if(s0 == 3){ console.log("4で3");   sai.frame = [13, 13, 13, 13, 13, 13, 13, 13, 8, 8, 8, 8, 8, 8,

8, 8, 8, 13, null]; } if(s0 == 4){ console.log("4で4"); sai.frame = [3, 3, 3, 3, 3, 3, 3, 3, 9, 9, 9, 9, 9, 9, 9, 9, 9,

3, null];    } if(s0 == 5){ console.log("4で5");   sai.frame = [14, 14, 14, 14, 14, 14, 14, 14, 10, 10, 10, 10,

10, 10, 10, 10, 10, 14, null]; }   if(s0 == 6){ console.log("4で6");  sai.frame = [15, 15, 15, 15, 15, 15, 15, 15, 11, 11, 11, 11,

11, 11, 11, 11, 11, 15, null];  } } */ // 5のマスにいる時 if(momo.y == 434 - 70 * 5){ if(s0 == 1){ console.log("5で1"); sai.frame = [0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6,

0, null];             sai.addEventListener(Event.ANIMATION_END,function(){ // 5→6 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); momo.tl.then(function(){ // ●結果 if(score == 1){ resultStart1(); } if(score >= 2 && score <= 3){ resultStart2(); } if(score >= 4 && score <= 6){ resultStart3(); } if(score >= 7 && score <= 14){ resultStart4(); } if(score >= 15){ resultStart5(); } }); }); } if(s0 == 2){ console.log("5で2");

!229

Page 230: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

sai.frame = [12, 12, 12, 12, 12, 12, 12, 12, 7, 7, 7, 7, 7, 7, 7, 7, 7, 12, null];

sai.addEventListener(Event.ANIMATION_END,function(){ // 5→6 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); // 6→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); } if(s0 == 3){ console.log("5で3");   sai.frame = [13, 13, 13, 13, 13, 13, 13, 13, 8, 8, 8, 8, 8, 8,

8, 8, 8, 13, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 5→6 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); // 6→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4からスタートに戻る momo.tl.then(function(){ // 音 var sound = core.assets["sounds/fall.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434, 32).and().rotateBy(720,

32); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5);

!230

Page 231: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}); }); } if(s0 == 4){ console.log("5で4"); sai.frame = [3, 3, 3, 3, 3, 3, 3, 3, 9, 9, 9, 9, 9, 9, 9, 9, 9,

3, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 5→6 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); // 6→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→3 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); });      } if(s0 == 5){ console.log("5で5");   sai.frame = [14, 14, 14, 14, 14, 14, 14, 14, 10, 10, 10, 10,

10, 10, 10, 10, 10, 14, null]; sai.addEventListener(Event.ANIMATION_END,function(){ // 5→6 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); // 6→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5);

!231

Page 232: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→3 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→2 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); });   }   if(s0 == 6){ console.log("5で6");  sai.frame = [15, 15, 15, 15, 15, 15, 15, 15, 11, 11, 11, 11,

11, 11, 11, 11, 11, 15, null];  sai.addEventListener(Event.ANIMATION_END,function(){ // 5→6 momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6, 5); // 6→5 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 6.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5, 5); // 5→4 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 5.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4, 5); // 4→3

!232

Page 233: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 4.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3, 5); // 3→2 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 3.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2, 5); // 2→1 momo.tl.then(function(){ var sound = core.assets["sounds/cf307/

jump02.mp3"].clone(); sound.play(); }); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 2.5, 5); momo.tl.moveTo(320 / 2 - 16, 434 - 70 * 1, 5); momo.tl.then(function(){ momo.tl.clear(); sai.tl.scaleTo(0.5, 0.5, 5); }); }); }   } }else{ // さいころを振ったところでターン+1 score += 1; sai.tl.moveTo(160 / 2 - 60 - 16, 10, 0); sai.scale(0.8, 0.8); sai.frame = [0, 1, 2, 3, 4, 5];        console.log("回ってないとき"); } }); //========== // ここまで //========== }

function resultStart(){// 結果画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //========== scene.backgroundColor = "red";

//==========

!233

Page 234: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// ここまで //========== }

function resultStart1(){// 結果画面1 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから結果画面1 //========== scene.backgroundColor = "#FADCE9";

var sound = core.assets["sounds/cf307/correct1.mp3"].clone(); sound.play();

// ジェット機級の文字 var label = new Label("ジェット機級"); label.x = 320 / 2 - 30 * 6 / 2; label.y = 75; label.color = "black"; label.font = "30px 'PixelMplus10'"; scene.addChild(label); label.tl.moveTo(320 / 2 - 30 * 6 / 2, -75, 0); label.tl.moveTo(320 / 2 - 30 * 6 / 2, 75, 15, enchant.Easing.BOUNCE_EASEOUT);

// ジェット var f22 = new ExSprite(100, 60); f22.image = core.assets["images/cf307/f22_100_60a.png"]; f22.x = scene.width / 2 - f22.width / 2; f22.y = scene.height / 2 - f22.height / 2 - 50; scene.addChild(f22); f22.scale(1.5, 1.5); // 動き scene.tl.delay(20).then(function(){ f22.tl.moveBy(-250, -30, 5, enchant.Easing.BACK_EASEIN); var soundf22 = core.assets["sounds/cf307/shakin1.mp3"].clone(); soundf22.play(); }); scene.tl.delay(15).then(function(){ f22.moveTo(scene.width / 2 - f22.width / 2, scene.height / 2 - f22.height / 2 - 50); }); scene.tl.loop();

// バビューン var label = new Label("バビューン!!"); label.x = 320 / 2 - 35 * 6 / 2; label.y = f22.y + 100; label.color = "red"; label.font = "35px 'PixelMplus10'"; scene.addChild(label); label.scale(0.1, 0.1); label.tl.scaleTo(1, 1, 20);

!234

Page 235: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 絶好調 var label = new Label("絶好調!!はやすぎ?!"); label.x = 320 / 2 - 25 * 10 / 2; label.y = f22.y + 100 + 75; label.color = "blue"; label.font = "25px 'PixelMplus10'"; scene.addChild(label); label.tl.moveBy(0, -30, 10, enchant.Easing.QUAD_EASEOUT); label.tl.moveBy(0, 30, 10, enchant.Easing.QUAD_EASEIN);

// リトライボタン var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 350 ; retry.tl.moveBy(0, 50, 20); // ボタンをタッチ   retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart(); });

//========== // ここまで結果画面1 //========== }

function resultStart2(){// 結果画面2 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから結果画面2 //========== scene.backgroundColor = "#FADCE9";

var sound = core.assets["sounds/cf307/correct1.mp3"].clone(); sound.play();

// 新幹線級の文字 var label = new Label("新幹線級"); label.x = 320 / 2 - 30 * 4 / 2; label.y = 75; label.color = "black"; label.font = "30px 'PixelMplus10'"; scene.addChild(label); label.tl.moveTo(320 / 2 - 30 * 4 / 2, -75, 0); label.tl.moveTo(320 / 2 - 30 * 4 / 2, 75, 15, enchant.Easing.BOUNCE_EASEOUT);

// 新幹線

!235

Page 236: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var sin = new ExSprite(120, 60); sin.image = core.assets["images/cf307/sinkansen.png"]; sin.x = scene.width / 2 - sin.width / 2; sin.y = scene.height / 2 - sin.height / 2 - 50; scene.addChild(sin); sin.scale(1.5, 1.5); // 動き scene.tl.delay(20).then(function(){ sin.tl.moveBy(-250, 0, 10, enchant.Easing.BACK_EASEIN); var soundf22 = core.assets["sounds/cf307/flee1.mp3"].clone(); soundf22.play(); }); scene.tl.delay(15 + 10).then(function(){ sin.moveTo(scene.width / 2 - sin.width / 2, scene.height / 2 - sin.height / 2 - 50); }); scene.tl.loop();

// ビューン var label = new Label("ビューン!!"); label.x = 320 / 2 - 35 * 6 / 2; label.y = sin.y + 100; label.color = "red"; label.font = "35px 'PixelMplus10'"; scene.addChild(label); label.scale(0.1, 0.1); label.tl.scaleTo(1, 1, 20);

// 今日も快調だ var label = new Label("今日も快調だ!"); label.x = 320 / 2 - 25 * 7 / 2; label.y = sin.y + 100 + 75; label.color = "blue"; label.font = "25px 'PixelMplus10'"; scene.addChild(label); label.tl.moveBy(0, -30, 10, enchant.Easing.QUAD_EASEOUT); label.tl.moveBy(0, 30, 10, enchant.Easing.QUAD_EASEIN);

// リトライボタン var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 350 ; retry.tl.moveBy(0, 50, 20); // ボタンをタッチ   retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart(); });

//==========

!236

Page 237: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// ここまで結果画面2 //========== }

function resultStart3(){// 結果画面3 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから結果画面3 //========== scene.backgroundColor = "#FADCE9";

var sound = core.assets["sounds/cf307/correct1.mp3"].clone(); sound.play();

// 自動車級の文字 var label = new Label("自動車級"); label.x = 320 / 2 - 30 * 4 / 2; label.y = 75; label.color = "black"; label.font = "30px 'PixelMplus10'"; scene.addChild(label); label.tl.moveTo(320 / 2 - 30 * 4 / 2, -75, 0); label.tl.moveTo(320 / 2 - 30 * 4 / 2, 75, 15, enchant.Easing.BOUNCE_EASEOUT);

// 自動車 var vehicle = new ExSprite(120, 60); vehicle.image = core.assets["images/cf307/skylinegt.png"]; vehicle.x = scene.width / 2 - vehicle.width / 2; vehicle.y = scene.height / 2 - vehicle.height / 2 - 50; scene.addChild(vehicle); vehicle.scale(1.5, 1.5); // 動き scene.tl.delay(20).then(function(){ vehicle.tl.moveBy(-250, 0, 20, enchant.Easing.BACK_EASEIN); var sound = core.assets["sounds/cf307/car-horn.mp3"].clone(); sound.play(); }); scene.tl.delay(10).then(function(){ var sound1 = core.assets["sounds/cf307/chainsaw1.mp3"].clone(); sound1.play(); }); scene.tl.delay(15 + 20).then(function(){ vehicle.moveTo(scene.width / 2 - vehicle.width / 2, scene.height / 2 - vehicle.height / 2 - 50); }); scene.tl.loop();

// ブォーッ var label = new Label("ブォーッ!!"); label.x = 320 / 2 - 35 * 6 / 2; label.y = vehicle.y + 100; label.color = "red"; label.font = "35px 'PixelMplus10'";

!237

Page 238: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.addChild(label); label.scale(0.1, 0.1); label.tl.scaleTo(1, 1, 20);

// 結構はやいよ var label = new Label("結構はやいよ!"); label.x = 320 / 2 - 25 * 7 / 2; label.y = vehicle.y + 100 + 75; label.color = "blue"; label.font = "25px 'PixelMplus10'"; scene.addChild(label); label.tl.moveBy(0, -30, 10, enchant.Easing.QUAD_EASEOUT); label.tl.moveBy(0, 30, 10, enchant.Easing.QUAD_EASEIN);

// リトライボタン var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 350 ; retry.tl.moveBy(0, 50, 20); // ボタンをタッチ   retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart(); });

//========== // ここまで結果画面3 //========== }

function resultStart4(){// 結果画面4 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから結果画面4 //========== scene.backgroundColor = "#FADCE9"; var sound = core.assets["sounds/cf307/correct1.mp3"].clone(); sound.play();

// 自転車級の文字 var label = new Label("自転車級"); label.x = 320 / 2 - 30 * 4 / 2; label.y = 75; label.color = "black"; label.font = "30px 'PixelMplus10'"; scene.addChild(label);

!238

Page 239: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.tl.moveTo(320 / 2 - 30 * 4 / 2, -75, 0); label.tl.moveTo(320 / 2 - 30 * 4 / 2, 75, 15, enchant.Easing.BOUNCE_EASEOUT);

// 自転車 var vehicle = new ExSprite(120, 70); vehicle.image = core.assets["images/cf307/momo_cycle1.png"]; vehicle.x = scene.width / 2 - vehicle.width / 2; vehicle.y = scene.height / 2 - vehicle.height / 2 - 50; scene.addChild(vehicle); vehicle.scale(1.5, 1.5); // 動き scene.tl.delay(20).then(function(){ vehicle.frame = [0, 0, 1, 1]; vehicle.tl.moveBy(-250, 0, 50); var sound = core.assets["sounds/cf307/bicycle.mp3"].clone(); sound.play(); }); scene.tl.delay(50).then(function(){ vehicle.frame = [0]; vehicle.moveTo(scene.width / 2 - vehicle.width / 2, scene.height / 2 - vehicle.height / 2 - 50); }); scene.tl.loop();

// キーコキーコ var label = new Label("キーコキーコ"); label.x = 320 / 2 - 35 * 6 / 2; label.y = vehicle.y + 100; label.color = "red"; label.font = "35px 'PixelMplus10'"; scene.addChild(label); label.scale(0.1, 0.1); label.tl.scaleTo(1, 1, 20);

// ゆっくりいこう var label = new Label("ゆっくりいこう"); label.x = 320 / 2 - 25 * 7 / 2; label.y = vehicle.y + 100 + 75; label.color = "blue"; label.font = "25px 'PixelMplus10'"; scene.addChild(label); label.tl.moveBy(0, -30, 10, enchant.Easing.QUAD_EASEOUT); label.tl.moveBy(0, 30, 10, enchant.Easing.QUAD_EASEIN);

// リトライボタン var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 350 ; retry.tl.moveBy(0, 50, 20); // ボタンをタッチ   retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; });

!239

Page 240: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart(); });

//========== // ここまで結果画面4 //========== }

function resultStart5(){// 結果画面5 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから結果画面5 //========== scene.backgroundColor = "#FADCE9";

var sound = core.assets["sounds/cf307/correct1.mp3"].clone(); sound.play();

// 徒歩級の文字 var label = new Label("徒歩級"); label.x = 320 / 2 - 30 * 3 / 2;; label.y = 75; label.color = "black"; label.font = "32px 'PixelMplus10'"; scene.addChild(label); label.tl.moveTo(320 / 2 - 30 * 3 / 2, -75, 0); label.tl.moveTo(320 / 2 - 30 * 3 / 2, 75, 15, enchant.Easing.BOUNCE_EASEOUT);

// ローリングももちゃん? var vehicle = new ExSprite(32, 32); vehicle.image = core.assets["images/cf307/momochanrotate.png"]; vehicle.x = scene.width / 2 - vehicle.width / 2; vehicle.y = scene.height / 2 - vehicle.height / 2 - 50; scene.addChild(vehicle); vehicle.scale(1.5, 1.5); // 動き scene.tl.delay(20).then(function(){ vehicle.frame = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 0, 0]; vehicle.tl.moveBy(-250, 0, 50); var sound = core.assets["sounds/cf307/jump-cute1.mp3"].clone(); sound.play(); }); scene.tl.delay(50).then(function(){ vehicle.moveTo(scene.width / 2 - vehicle.width / 2, scene.height / 2 - vehicle.height / 2 - 50); vehicle.frame = [0]; }); scene.tl.loop();

// てくてく・・? var label = new Label("てくてく・・?");

!240

Page 241: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.x = 320 / 2 - 35 * 7 / 2; label.y = vehicle.y + 100; label.color = "red"; label.font = "35px 'PixelMplus10'"; scene.addChild(label); label.scale(0.1, 0.1); label.tl.scaleTo(1, 1, 20);

// マイペースでいこう var label = new Label("マイペースでいこう"); label.x = 320 / 2 - 25 * 9 / 2; label.y = vehicle.y + 100 + 75; label.color = "blue"; label.font = "25px 'PixelMplus10'"; scene.addChild(label); label.tl.moveBy(0, -30, 10, enchant.Easing.QUAD_EASEOUT); label.tl.moveBy(0, 30, 10, enchant.Easing.QUAD_EASEIN);

// リトライボタン var retry = new ExSprite(62, 55); retry.image = core.assets["images/cf307/retrybotan.png"]; scene.addChild(retry); retry.x = 320 / 2 - retry.width / 2; retry.y = 350 ; retry.tl.moveBy(0, 50, 20); // ボタンをタッチ   retry.addEventListener(Event.TOUCH_START, function(){ retry.frame = 1; }); retry.addEventListener(Event.TOUCH_END, function(){ retry.frame = 0; gameStart(); });

//========== // ここまで結果画面5 //========== } function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); //scene.on(enchant.Event.TOUCH_START, function(){resultStart4();});// テスト用 }

//========== // EnchantJS enchant(); var gameManager; var core; var scene;

!241

Page 242: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); }

◉ 工夫したところや難しかったところ ・0~5のマスそれぞれについて、1~6が出た時という場合分けをした。ところどころ設定を変えてのコピー&ペーストだったので、間違えないようにするのが難しかった。

・4が出たらスタートに戻るという変化をつけた。

・ゴールしたターンの数によって結果画面を変えた。

!242

Page 243: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

20 ドカンをすりぬけろ

◉ 内容 ・横スクロールゲーム。

・上下に出ている土管をジャンプでくぐり抜けながら進んでいく。

・土管の間にはアイテム(コイン)があり、それを取ると得点。

・ステージは全部で5つある。

◉ 使った画像

!243

Page 244: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

!244

Page 245: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード // Main console.log("Hello EnchantJS!!");

var assets = [ // 背景 "images/back_mountain.png", "images/kati_land.png", "images/ft_tunnel.png", "images/coin_base.png", "images/title.png",// CodeFriendsタイトル 'images/title_gameover.png', "sounds/hit.mp3", "sounds/jump.mp3", "images/cf307/momo.png", "sounds/cf307/jump12.mp3", "images/cf307/momochanzannen.png", "sounds/cf307/pyu15.mp3", "sounds/cf307/se_maou_retro.mp3", "images/e_gass.png", "sounds/gass.mp3", "images/cf307/oimohokahoka1.png", "sounds/cf307/suck1.mp3", "images/title_gameover.png", "images/cf307/momochanrotate.png", “sounds/cf307/decision21.mp3", "images/cf307/fire32_25.png", "images/cf307/momohp.png", "sounds/cf307/startup2.mp3", "sounds/cf307/footstep2.mp3", "sounds/cf307/ofunede487.mp3", "images/title_gameclear.png", "images/coin_base.png", "sounds/coin.mp3", ];

function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

// 背景 var background = new ExSprite(320 * 2, 480); background.image = core.assets["images/back_mountain.png"]; background.x = 0; background.y = 0; scene.addChild(background); background.tl.moveBy(-320, 0, 50); background.tl.moveTo(0, 0, 1); background.tl.loop();

!245

Page 246: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// ドカングループ var dokanGroup = new Group(); scene.addChild(dokanGroup);

// STAGE1の文字 var label = new Label(" STAGE1"); label.color = 'blue'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.delay(32).then(function(){ label.remove(); })

scene.tl.delay(32).then(function(){ // 上の土管 var y1 = getRandom(100, 200); var dokan1 = new ExSprite(45, 480); dokan1.image = core.assets["images/ft_tunnel.png"]; dokan1.x = 320; dokan1.y = y1; dokan1.originY = 0; dokan1.scale(1, -1); dokanGroup.addChild(dokan1); dokan1.tag = "土管"; dokan1.tl.moveBy(-320 - 45, 0, 50); dokan1.tl.then(function(){ console.log("土管1消える"); this.remove(); }); // 下の土管 var y2 = getRandom(110, 200); //var y2 = 300; // テスト用 var dokan2 = new ExSprite(45, 480); dokan2.image = core.assets["images/ft_tunnel.png"]; dokan2.x = 320; dokan2.y = y1 + y2; dokanGroup.addChild(dokan2); dokan2.tag = "土管"; dokan2.tl.moveBy(-320 - 45, 0, 50); dokan2.tl.then(function(){ console.log("土管2消える"); this.remove(); }); // アイテム var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/coin_base.png"]; oimo.x = dokan1.x + 45 / 2 - 16;  oimo.y = y1 + y2 / 2 - 16; oimoGroup.addChild(oimo); oimo.tag = ""; oimo.frame = [0, 1, 2, 3, 4] //oimo.scale(1.2, 1.2); oimo.tl.moveBy(-320 - 45, 0, 50);

!246

Page 247: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

oimo.tl.then(function() { oimo.remove(); }); // ドカングループ衝突判定 bird.addCollision(land); bird.addCollision(dokanGroup); bird.addCollision(oimoGroup); bird.addEventListener(Event.COLLISION, function(e){ // 土管と衝突したとき if (e.collision.target.tag == "土管" || e.collision.target.tag == "地面") { console.log("いたっ!!"); var sound = core.assets['sounds/cf307/pyu15.mp3'].clone(); sound.play();  background.tl.clear(); scene.tl.clear(); land.tl.clear(); dokan1.tl.clear();//これを効かせるためにシーンの中に入れる dokan2.tl.clear(); oimo.tl.clear(); bird.tl.clear(); bird.remove(); var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = bird.x; momoz.y = bird.y; scene.addChild(momoz); momoz.tl.delay(5).then(function(){ momoz.tl.moveBy(0, -48, 5, enchant.Easing.QUAD_EASEOUT); momoz.tl.moveBy(0, 480, 10, enchant.Easing.QUAD_EASEIN);        var sound = core.assets['sounds/cf307/se_maou_retro.mp3'].clone(); sound.play(); momoz.tl.then(function(){ var gass = new ExSprite(160 / 5, 32); gass.image = core.assets["images/e_gass.png"]; gass.x = bird.x; gass.y = bird.y + 32; scene.addChild(gass); gass.frame = [0, 1, 2, 3, 4, null]; var sound = core.assets['sounds/gass.mp3'].clone(); sound.play(); }); momoz.tl.delay(16).then(function(){ var gameover = new ExSprite(147, 48); gameover.image = core.assets['images/title_gameover.png']; gameover.x = 320 / 2 - 147 / 2;        gameover.y = 480 / 2 - 48 / 2; gameover.scale(0, 0); scene.addChild(gameover); gameover.tl.scaleTo(1.5, 1.5, 5).then(function() { var label = new Label(" TAP TO RESTART"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center";

!247

Page 248: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.y = 220 + 100; scene.addChild(label); scene.addEventListener (Event.TOUCH_START,function() { gameStart(); }); }); }); });        } // アイテムゲット if (e.collision.target.tag == "") { // が消えて e.collision.target.tl.clear(); e.collision.target.tl.moveTo(bird.x, bird.y, 3). and().scaleTo(0.2, 0.2, 3); // 当たったが小さくなった後に e.collision.target.tl.then(function(){ // 当たったが消えて e.collision.target.remove();             // でスコアアップ score += 1; //これを入れる場所を間違えて苦労した //score += 3;// テスト用 // 音が出て var sound = core.assets["sounds/coin.mp3"].clone(); sound.play(); // ももちゃんブッ  var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/e_gass.png"]; bomb.x = bird.x; bomb.y = bird.y + 32; scene.addChild(bomb);        bomb.frame = [0, 1, 2, 3, 4, null];             }); // 10点でステージ2へ  if(score >= 9){ dokanGroup.remove(); //dokan1.remove(); //dokan2.remove(); bird.tl.clear(); bird.image = core.assets["images/cf307/momochanrotate.png"]; bird.frame = [0, 1, 2, 3, 4, 5, 6, 7]; bird.tl.moveBy(0, -100, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 100, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop(); scene.tl.clear(); land.remove(); //oimo.remove(); var label = new Label(" STAGE1 CLEAR!"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.scaleTo(1.5, 1.5, 10);

!248

Page 249: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.tl.then(function(){ var sound1 = core.assets["sounds/cf307/

decision21.mp3"].clone(); sound1.play(); }); label.tl.delay(32).then(function(){ gameStart2(); }); } }   }); }); scene.tl.loop();

// 陸 var land = new ExSprite(320 * 2, 60); land.image = core.assets["images/kati_land.png"]; land.x = 0; land.y = 420; scene.addChild(land);// 衝突判定のために土管グループに入れる land.tag = "地面"; land.tl.moveBy(-320, 0, 50); land.tl.moveTo(0, 420, 1); land.tl.loop();

// momo var bird = new ExSprite(32, 32); bird.image = core.assets["images/cf307/momo.png"]; bird.x = 80; bird.y = 30; bird.frame = [0, 0, 1, 1, 2, 2]; scene.addChild(bird); bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN);

// スコア表示 var score = 0; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });       

// グループ var oimoGroup = new Group(); scene.addChild(oimoGroup);

// タッチでジャンプ scene.addEventListener(Event.TOUCH_START, function() { if(bird.y > 100 && score <= 9){ console.log("おほほ"); bird.tl.clear(); bird.tl.moveBy(0, -50, 5, enchant.Easing.QUAD_EASEOUT);

!249

Page 250: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); var sound = core.assets["sounds/cf307/jump12.mp3"].clone(); sound.play();  }  if(score >= 10){ console.log("クリアでタッチ"); bird.tl.clear(); bird.tl.moveBy(0, -100, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 100, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop();   }   }); //========== // ここまで //========== }

function gameStart2(){// ステージ2 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここからステージ2 //==========

// 背景2 var background = new ExSprite(320 * 2, 480); background.image = core.assets["images/back_mountain.png"]; background.x = 0; background.y = 0; scene.addChild(background); background.tl.moveBy(-320, 0, 50); background.tl.moveTo(0, 0, 1); background.tl.loop();

// グループ var oimoGroup = new Group(); scene.addChild(oimoGroup);

// ドカングループ2 var dokanGroup = new Group(); scene.addChild(dokanGroup);

// STAGE2の文字 var label = new Label(" STAGE2"); label.color = 'blue'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.delay(32).then(function(){ label.remove(); })

// ステージ2

!250

Page 251: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.tl.delay(24).then(function(){ // 上の土管 var y1 = getRandom(100, 200); var dokan1 = new ExSprite(45, 480); dokan1.image = core.assets["images/ft_tunnel.png"]; dokan1.x = 320; dokan1.y = y1; dokan1.originY = 0; dokan1.scale(1, -1); dokanGroup.addChild(dokan1); dokan1.tag = "土管"; dokan1.tl.moveBy(-320 - 45, 0, 50); dokan1.tl.then(function(){ console.log("土管1消える"); this.remove(); }); // 下の土管 var y2 = getRandom(110, 200); //var y2 = 300; // テスト用 var dokan2 = new ExSprite(45, 480); dokan2.image = core.assets["images/ft_tunnel.png"]; dokan2.x = 320; dokan2.y = y1 + y2; dokanGroup.addChild(dokan2); dokan2.tag = "土管"; dokan2.tl.moveBy(-320 - 45, 0, 50); dokan2.tl.then(function(){ console.log("土管2消える"); this.remove(); }); // var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/coin_base.png"]; oimo.x = dokan1.x + 45 / 2 - 16;  oimo.y = y1 -32; oimoGroup.addChild(oimo); oimo.tag = ""; oimo.frame = [0, 1, 2, 3, 4] //oimo.scale(1.2, 1.2); oimo.tl.moveBy(-320 - 45, y2, 50); oimo.tl.then(function() { oimo.remove(); }); // ドカングループ衝突判定 bird.addCollision(land); bird.addCollision(dokanGroup); bird.addCollision(oimoGroup); bird.addEventListener(Event.COLLISION, function(e){ // 土管と衝突したとき if (e.collision.target.tag == "土管" || e.collision.target.tag == "地

面") { console.log("いたっ!!"); var sound = core.assets['sounds/cf307/pyu15.mp3'].clone(); sound.play();  background.tl.clear();

!251

Page 252: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.tl.clear(); land.tl.clear(); dokan1.tl.clear();//これを効かせるためにシーンの中に入れる dokan2.tl.clear(); oimo.tl.clear(); bird.tl.clear(); bird.remove(); var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = bird.x; momoz.y = bird.y; scene.addChild(momoz); momoz.tl.delay(5).then(function(){ momoz.tl.moveBy(0, -48, 5, enchant.Easing.QUAD_EASEOUT); momoz.tl.moveBy(0, 480, 10, enchant.Easing.QUAD_EASEIN);        var sound = core.assets['sounds/cf307/

se_maou_retro.mp3'].clone(); sound.play(); momoz.tl.then(function(){ var gass = new ExSprite(160 / 5, 32); gass.image = core.assets["images/e_gass.png"]; gass.x = bird.x; gass.y = bird.y + 32; scene.addChild(gass); gass.frame = [0, 1, 2, 3, 4, null]; var sound = core.assets['sounds/gass.mp3'].clone(); sound.play(); }); momoz.tl.delay(16).then(function(){ var gameover = new ExSprite(147, 48); gameover.image = core.assets['images/title_gameover.png']; gameover.x = 320 / 2 - 147 / 2;        gameover.y = 480 / 2 - 48 / 2; gameover.scale(0, 0); scene.addChild(gameover); gameover.tl.scaleTo(1.5, 1.5, 5).then(function() { var label = new Label(" TAP TO RESTART"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220 + 100; scene.addChild(label); scene.addEventListener(Event.TOUCH_START, function() { gameStart(); }); }); }); });        } // ゲット if (e.collision.target.tag == "") { // が消えて e.collision.target.tl.clear(); e.collision.target.tl.moveTo(bird.x, bird.y, 3).and().scaleTo(0.2,

0.2, 3) // 当たったが小さくなった後に e.collision.target.tl.then(function(){

!252

Page 253: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 当たったが消えて e.collision.target.remove();             // でスコアアップ score += 1; //これを入れる場所を間違えて苦労した //score += 3;// テスト用 // 音が出て var sound = core.assets["sounds/coin.mp3"].clone(); sound.play(); // ももちゃんブッ  var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/e_gass.png"]; bomb.x = bird.x; bomb.y = bird.y + 32; scene.addChild(bomb);        bomb.frame = [0, 1, 2, 3, 4, null];             }); // 30点でステージ2へ  if(score >= 29){ //if(score >= 27){ // テスト用 dokanGroup.remove(); //dokan1.remove(); //dokan2.remove(); bird.tl.clear(); bird.image = core.assets["images/cf307/momochanrotate.png"]; bird.frame = [0, 1, 2, 3, 4, 5, 6, 7]; bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop(); scene.tl.clear(); land.remove(); //oimo.remove(); var label = new Label(" STAGE2 CLEAR!"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.scaleTo(1.5, 1.5, 10); label.tl.then(function(){ var sound1 = core.assets["sounds/cf307/

decision21.mp3"].clone(); sound1.play(); }); label.tl.delay(32).then(function(){ gameStart3(); }); } }   }); }); scene.tl.loop();

// 陸 var land = new ExSprite(320 * 2, 60); land.image = core.assets["images/kati_land.png"]; land.x = 0;

!253

Page 254: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

land.y = 420; scene.addChild(land);// 衝突判定のために土管グループに入れる land.tag = "地面"; land.tl.moveBy(-320, 0, 50); land.tl.moveTo(0, 420, 1); land.tl.loop();

// momo var bird = new ExSprite(32, 32); bird.image = core.assets["images/cf307/momo.png"]; bird.x = 80; bird.y = 30; bird.frame = [0, 0, 1, 1, 2, 2]; scene.addChild(bird); bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN);

// スコア表示 var score = 10; // 初期値10 scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });       

// タッチでジャンプ scene.addEventListener(Event.TOUCH_START, function() { if(bird.y > 100 && score <= 29){ console.log("おほほ"); bird.tl.clear(); bird.tl.moveBy(0, -40, 5, enchant.Easing.QUAD_EASEOUT);// 50から40に bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); var sound = core.assets["sounds/cf307/jump12.mp3"].clone(); sound.play();  }  if(score >= 30){ console.log("クリアでタッチ"); bird.tl.clear(); bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop();   }   }); //========== // ここまでステージ2 //========== }

function gameStart3(){// ステージ3 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

!254

Page 255: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//========== // ここからステージ3 //==========

// 背景3 var background = new ExSprite(320 * 2, 480); background.image = core.assets["images/back_mountain.png"]; background.x = 0; background.y = 0; scene.addChild(background); background.tl.moveBy(-320, 0, 50); background.tl.moveTo(0, 0, 1); background.tl.loop();

// グループ3 var oimoGroup = new Group(); scene.addChild(oimoGroup);

// ドカングループ3 var dokanGroup = new Group(); scene.addChild(dokanGroup);

// STAGE3の文字 var label = new Label(" STAGE3"); label.color = 'blue'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.delay(32).then(function(){ label.remove(); })

// ステージ3 scene.tl.delay(24).then(function(){ // 上の土管 var y1 = getRandom(100, 200); var dokan1 = new ExSprite(45, 480); dokan1.image = core.assets["images/ft_tunnel.png"]; dokan1.x = 320; dokan1.y = y1; dokan1.originY = 0; dokan1.scale(1, -1); dokanGroup.addChild(dokan1); var sound = core.assets['sounds/cf307/startup2.mp3'].clone(); sound.play(); dokan1.tag = "土管"; dokan1.tl.moveBy(-320 - 45, 60, 50); dokan1.tl.then(function(){ console.log("土管1消える"); this.remove(); }); // 下の土管 var y2 = getRandom(110, 200);

!255

Page 256: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//var y2 = 300; // テスト用 var dokan2 = new ExSprite(45, 480); dokan2.image = core.assets["images/ft_tunnel.png"]; dokan2.x = 320; dokan2.y = y1 + y2; dokanGroup.addChild(dokan2); dokan2.tag = "土管"; dokan2.tl.moveBy(-320 - 45, 60, 50); dokan2.tl.then(function(){ console.log("土管2消える"); this.remove(); }); // var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/coin_base.png"]; oimo.x = dokan1.x + 45 / 2 - 16;  oimo.y = y1 -32; oimoGroup.addChild(oimo); oimo.tag = ""; oimo.frame = [0, 1, 2, 3, 4] //oimo.scale(1.2, 1.2); oimo.tl.moveBy(-320 - 45, y2, 50); oimo.tl.then(function() { oimo.remove(); }); // ドカングループ衝突判定 bird.addCollision(land); bird.addCollision(dokanGroup); bird.addCollision(oimoGroup); bird.addEventListener(Event.COLLISION, function(e){ // 土管と衝突したとき if (e.collision.target.tag == "土管" || e.collision.target.tag == "地

面") { console.log("いたっ!!"); var sound = core.assets['sounds/cf307/pyu15.mp3'].clone(); sound.play();  background.tl.clear(); scene.tl.clear(); land.tl.clear(); dokan1.tl.clear();//これを効かせるためにシーンの中に入れる dokan2.tl.clear(); oimo.tl.clear(); bird.tl.clear(); bird.remove(); var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = bird.x; momoz.y = bird.y; scene.addChild(momoz); momoz.tl.delay(5).then(function(){ momoz.tl.moveBy(0, -48, 5, enchant.Easing.QUAD_EASEOUT); momoz.tl.moveBy(0, 480, 10, enchant.Easing.QUAD_EASEIN);        var sound = core.assets['sounds/cf307/

se_maou_retro.mp3'].clone(); sound.play(); momoz.tl.then(function(){

!256

Page 257: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var gass = new ExSprite(160 / 5, 32); gass.image = core.assets["images/e_gass.png"]; gass.x = bird.x; gass.y = bird.y + 32; scene.addChild(gass); gass.frame = [0, 1, 2, 3, 4, null]; var sound = core.assets['sounds/gass.mp3'].clone(); sound.play(); }); momoz.tl.delay(16).then(function(){ var gameover = new ExSprite(147, 48); gameover.image = core.assets['images/title_gameover.png']; gameover.x = 320 / 2 - 147 / 2;        gameover.y = 480 / 2 - 48 / 2; gameover.scale(0, 0); scene.addChild(gameover); gameover.tl.scaleTo(1.5, 1.5, 5).then(function() { var label = new Label(" TAP TO RESTART"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220 + 100; scene.addChild(label); scene.addEventListener(Event.TOUCH_START, function() { gameStart(); }); }); }); });        } // ゲット if (e.collision.target.tag == "") { // が消えて e.collision.target.tl.clear(); e.collision.target.tl.moveTo(bird.x, bird.y, 3).and().scaleTo(0.2,

0.2, 3); // 当たったが小さくなった後に e.collision.target.tl.then(function(){ // 当たったが消えて e.collision.target.remove();             // でスコアアップ score += 1; //これを入れる場所を間違えて苦労した //score += 3;// テスト用 // 音が出て var sound1 = core.assets["sounds/coin.mp3"].clone(); sound1.play(); // ももちゃんブッ  var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/e_gass.png"]; bomb.x = bird.x; bomb.y = bird.y + 32; scene.addChild(bomb);        bomb.frame = [0, 1, 2, 3, 4, null];             }); // 30+30=60点でステージ4へ 

!257

Page 258: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

if(score >= 59){ //if(score >= 57){ // テスト用 dokanGroup.remove(); //dokan1.remove(); //dokan2.remove(); bird.tl.clear(); bird.image = core.assets["images/cf307/momochanrotate.png"]; bird.frame = [0, 1, 2, 3, 4, 5, 6, 7]; bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop(); scene.tl.clear(); land.remove(); //oimo.remove(); var label = new Label(" STAGE3 CLEAR!"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.scaleTo(1.5, 1.5, 10); label.tl.then(function(){ var sound1 = core.assets["sounds/cf307/

decision21.mp3"].clone(); sound1.play(); }); label.tl.delay(32).then(function(){ gameStart4(); }); } }   }); }); scene.tl.loop();

// 陸 var land = new ExSprite(320 * 2, 60); land.image = core.assets["images/kati_land.png"]; land.x = 0; land.y = 420; scene.addChild(land);// 衝突判定のために土管グループに入れる land.tag = "地面"; land.tl.moveBy(-320, 0, 50); land.tl.moveTo(0, 420, 1); land.tl.loop();

// momo var bird = new ExSprite(32, 32); bird.image = core.assets["images/cf307/momo.png"]; bird.x = 80; bird.y = 30; bird.frame = [0, 0, 1, 1, 2, 2]; scene.addChild(bird); bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN);

// スコア表示 var score = 30;

!258

Page 259: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });       

// タッチでジャンプ scene.addEventListener(Event.TOUCH_START, function() { if(bird.y > 100 && score <= 59){ console.log("おほほ"); bird.tl.clear(); bird.tl.moveBy(0, -40, 5, enchant.Easing.QUAD_EASEOUT);// 50から40に bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); var sound = core.assets["sounds/cf307/jump12.mp3"].clone(); sound.play();  }  if(score >= 60){ console.log("クリアでタッチ"); bird.tl.clear(); bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop();   }   });

//========== // ここまでステージ3 //========== }

function gameStart4(){// ステージ4 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume(); //========== // ここからステージ4 //==========

// 背景4 var background = new ExSprite(320 * 2, 480); background.image = core.assets["images/back_mountain.png"]; background.x = 0; background.y = 0; scene.addChild(background); background.tl.moveBy(-320, 0, 50); background.tl.moveTo(0, 0, 1); background.tl.loop();

// グループ4 var oimoGroup = new Group(); scene.addChild(oimoGroup);

!259

Page 260: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 火グループ var fireGroup = new Group(); scene.addChild(fireGroup);

// ドカングループ4 var dokanGroup = new Group(); scene.addChild(dokanGroup);

// ももカウンター var hp = new ExSprite(96, 32); hp.image = core.assets["images/cf307/momohp.png"]; hp.x = 320 - 96; hp.y = 10; scene.addChild(hp); hp.frame = [0];

// STAGE4の文字 var label = new Label(" STAGE4"); label.color = 'blue'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.delay(32).then(function(){ label.remove(); })

// ステージ4 scene.tl.delay(24).then(function(){ // 上の土管 var y1 = getRandom(100, 200); var dokan1 = new ExSprite(45, 480); dokan1.image = core.assets["images/ft_tunnel.png"]; dokan1.x = 320; dokan1.y = y1; dokan1.originY = 0; dokan1.scale(1, -1); dokanGroup.addChild(dokan1); var sound = core.assets['sounds/cf307/startup2.mp3'].clone(); sound.play(); dokan1.tag = "土管"; dokan1.tl.moveBy(-320 - 45, 60, 50); dokan1.tl.then(function(){ console.log("土管1消える"); this.remove(); }); // 下の土管4 var y2 = getRandom(130, 200); // 110から130に //var y2 = 300; // テスト用      //var y2 = 130; // テスト用 var dokan2 = new ExSprite(45, 480); dokan2.image = core.assets["images/ft_tunnel.png"]; dokan2.x = 320; dokan2.y = y1 + y2; dokanGroup.addChild(dokan2);

!260

Page 261: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

dokan2.tag = "土管"; dokan2.tl.moveBy(-320 - 45, 60, 50); dokan2.tl.then(function(){ console.log("土管2消える"); this.remove(); }); // 4 var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/coin_base.png"]; oimo.x = dokan1.x + 45 / 2 - 16;  oimo.y = y1 -32; oimoGroup.addChild(oimo); oimo.tag = ""; oimo.frame = [0, 1, 2, 3, 4] //oimo.scale(1.2, 1.2); oimo.tl.moveBy(-320 - 45, y2, 50); oimo.tl.then(function() { oimo.remove(); }); // 火4 var fire = new ExSprite(32, 25); fire.image = core.assets["images/cf307/fire32_25.png"]; fire.x = dokan1.x + 45 / 2 - 16;  fire.y = y1 + y2 - 25 + 3; fireGroup.addChild(fire); fire.scale(1.2, 1.2); fire.tag = "火"; fire.frame = [0, 0, 1, 1] //oimo.scale(1.2, 1.2); fire.tl.moveBy(-320 - 45, 60, 50); fire.tl.then(function() { fire.remove(); }); // 衝突判定4 bird.addCollision(land); bird.addCollision(dokanGroup); bird.addCollision(oimoGroup); bird.addCollision(fireGroup); bird.addEventListener(Event.COLLISION, function(e){ // 土管、地面、火と衝突したとき if (e.collision.target.tag == "土管" || e.collision.target.tag == "地面"

|| e.collision.target.tag == "火") { console.log("いたっ!!"); console.log(e.collision.target.tag); // 残念ももちゃんに変える bird.tl.clear(); bird.tl.then(function(){ bird.remove(); hp.frame = [1];// こうやって入れないと−2にされる(なぜか衝突二回と判定

されるから) }); // 衝突した時の音 var sound = core.assets['sounds/cf307/pyu15.mp3'].clone(); sound.play();

!261

Page 262: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// すべての動きを止める  background.tl.clear(); scene.tl.clear(); land.tl.clear(); dokan1.tl.clear();//これを効かせるためにシーンの中に入れる dokan2.tl.clear(); oimo.tl.clear(); fire.tl.clear(); var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = bird.x; momoz.y = bird.y; scene.addChild(momoz); // 残念ももちゃんが落ちていく momoz.tl.delay(5).then(function(){ momoz.tl.moveBy(0, -48, 5, enchant.Easing.QUAD_EASEOUT); momoz.tl.moveBy(0, 480, 10, enchant.Easing.QUAD_EASEIN);        var sound =               core.assets['sounds/cf307/se_maou_retro.mp3'].clone(); sound.play(); momoz.tl.then(function(){ var gass = new ExSprite(160 / 5, 32); gass.image = core.assets["images/e_gass.png"]; gass.x = bird.x; gass.y = bird.y + 32; scene.addChild(gass); gass.frame = [0, 1, 2, 3, 4, null]; var sound = core.assets['sounds/gass.mp3'].clone(); sound.play(); }); // コンティニュー momoz.tl.delay(16).then(function(){ if(hp.frame == 1){ console.log("2でコンティニュー"); // タップトゥーコンティニュー var label = new Label(" TAP TO CCONTINUE"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.scale(0.5, 0.5); label.tl.scaleTo(1, 1, 5); scene.addEventListener(Event.TOUCH_START, function() { gameStart4_1(); }); } }); });        } // ゲット4 if (e.collision.target.tag == "") { // が消えて e.collision.target.tl.clear(); e.collision.target.tl.moveTo(bird.x, bird.y, 3).and().scaleTo(0.2,

0.2, 3);

!262

Page 263: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 当たったが小さくなった後に e.collision.target.tl.then(function(){ // 当たったが消えて e.collision.target.remove();             // でスコアアップ score += 1; //これを入れる場所を間違えて苦労した //score += 3;// テスト用 // 音が出て var sound1 = core.assets["sounds/coin.mp3"].clone(); sound1.play(); // ももちゃんブッ  var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/e_gass.png"]; bomb.x = bird.x; bomb.y = bird.y + 32; scene.addChild(bomb);        bomb.frame = [0, 1, 2, 3, 4, null];             }); // 60+20=80点でステージ5へ  if(score >= 79){ //if(score >= 57){ // テスト用 dokanGroup.remove(); fireGroup.remove(); //dokan1.remove(); //dokan2.remove(); bird.tl.clear(); bird.image = core.assets["images/cf307/momochanrotate.png"]; bird.frame = [0, 1, 2, 3, 4, 5, 6, 7]; bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop(); scene.tl.clear(); land.remove(); //oimo.remove(); var label = new Label(" STAGE4 CLEAR!"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.scaleTo(1.5, 1.5, 10); label.tl.then(function(){ var sound1 = core.assets["sounds/cf307/

decision21.mp3"].clone(); sound1.play(); }); label.tl.delay(32).then(function(){ gameStart5(); }); } }   }); }); scene.tl.loop();

// 陸4

!263

Page 264: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var land = new ExSprite(320 * 2, 60); land.image = core.assets["images/kati_land.png"]; land.x = 0; land.y = 420; scene.addChild(land);// 衝突判定のために土管グループに入れる land.tag = "地面"; land.tl.moveBy(-320, 0, 50); land.tl.moveTo(0, 420, 1); land.tl.loop();

// momo var bird = new ExSprite(32, 32); bird.image = core.assets["images/cf307/momo.png"]; bird.x = 80; bird.y = 30; bird.frame = [0, 0, 1, 1, 2, 2]; scene.addChild(bird); bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN);

// スコア表示4 var score = 60; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });       

// タッチでジャンプ4 scene.addEventListener(Event.TOUCH_START, function() { if(bird.y > 100 && score <= 79){ console.log("おほほ"); bird.tl.clear(); bird.tl.moveBy(0, -35, 5, enchant.Easing.QUAD_EASEOUT);// 40から35に bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); var sound = core.assets["sounds/cf307/jump12.mp3"].clone(); sound.play();  }  if(score >= 80){ console.log("クリアでタッチ"); bird.tl.clear(); bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop();   }   });

//========== // ここまでステージ4 //========== }

function gameStart4_1(){// ステージ4−1

!264

Page 265: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume(); //========== // ここからステージ4−1 //==========

// 背景4−1 var background = new ExSprite(320 * 2, 480); background.image = core.assets["images/back_mountain.png"]; background.x = 0; background.y = 0; scene.addChild(background); background.tl.moveBy(-320, 0, 50); background.tl.moveTo(0, 0, 1); background.tl.loop();

// グループ4−1 var oimoGroup = new Group(); scene.addChild(oimoGroup);

// 火グループ4−1 var fireGroup = new Group(); scene.addChild(fireGroup);

// ドカングループ4−1 var dokanGroup = new Group(); scene.addChild(dokanGroup);

// ももカウンター4−1 var hp = new ExSprite(96, 32); hp.image = core.assets["images/cf307/momohp.png"]; hp.x = 320 - 96; hp.y = 10; scene.addChild(hp); hp.frame = [1];

// STAGE4の文字 var label = new Label(" STAGE4"); label.color = 'blue'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.delay(32).then(function(){ label.remove(); })

// ステージ4−1 scene.tl.delay(24).then(function(){ // 上の土管 var y1 = getRandom(100, 200); var dokan1 = new ExSprite(45, 480); dokan1.image = core.assets["images/ft_tunnel.png"]; dokan1.x = 320; dokan1.y = y1;

!265

Page 266: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

dokan1.originY = 0; dokan1.scale(1, -1); dokanGroup.addChild(dokan1); var sound = core.assets['sounds/cf307/startup2.mp3'].clone(); sound.play(); dokan1.tag = "土管"; dokan1.tl.moveBy(-320 - 45, 60, 50); dokan1.tl.then(function(){ console.log("土管1消える"); this.remove(); }); // 下の土管4−1 var y2 = getRandom(130, 200); // 110から130に //var y2 = 300; // テスト用      //var y2 = 130; // テスト用 var dokan2 = new ExSprite(45, 480); dokan2.image = core.assets["images/ft_tunnel.png"]; dokan2.x = 320; dokan2.y = y1 + y2; dokanGroup.addChild(dokan2); dokan2.tag = "土管"; dokan2.tl.moveBy(-320 - 45, 60, 50); dokan2.tl.then(function(){ console.log("土管2消える"); this.remove(); }); // 4−1 var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/coin_base.png"]; oimo.x = dokan1.x + 45 / 2 - 16;  oimo.y = y1 -32; oimoGroup.addChild(oimo); oimo.tag = ""; oimo.frame = [0, 1, 2, 3, 4] //oimo.scale(1.2, 1.2); oimo.tl.moveBy(-320 - 45, y2, 50); oimo.tl.then(function() { oimo.remove(); }); // 火4−1 var fire = new ExSprite(32, 25); fire.image = core.assets["images/cf307/fire32_25.png"]; fire.x = dokan1.x + 45 / 2 - 16;  fire.y = y1 + y2 - 25 + 3; fireGroup.addChild(fire); fire.scale(1.2, 1.2); fire.tag = "火"; fire.frame = [0, 0, 1, 1] //oimo.scale(1.2, 1.2); fire.tl.moveBy(-320 - 45, 60, 50); fire.tl.then(function() { fire.remove(); }); // 衝突判定4−1 bird.addCollision(land);

!266

Page 267: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bird.addCollision(dokanGroup); bird.addCollision(oimoGroup); bird.addCollision(fireGroup); bird.addEventListener(Event.COLLISION, function(e){ // 土管、地面、火と衝突したとき if (e.collision.target.tag == "土管" || e.collision.target.tag == "地面"

|| e.collision.target.tag == "火") { console.log("いたっ!!"); console.log(e.collision.target.tag); // 残念ももちゃんに変える bird.tl.clear(); bird.tl.then(function(){ bird.remove(); hp.frame = [2];// こうやって入れないと−2にされる(なぜか衝突二回と判定

されるから) }); // 衝突した時の音 var sound = core.assets['sounds/cf307/pyu15.mp3'].clone(); sound.play(); // すべての動きを止める  background.tl.clear(); scene.tl.clear(); land.tl.clear(); dokan1.tl.clear();//これを効かせるためにシーンの中に入れる dokan2.tl.clear(); oimo.tl.clear(); fire.tl.clear(); var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = bird.x; momoz.y = bird.y; scene.addChild(momoz); // 残念ももちゃんが落ちていく momoz.tl.delay(5).then(function(){ momoz.tl.moveBy(0, -48, 5, enchant.Easing.QUAD_EASEOUT); momoz.tl.moveBy(0, 480, 10, enchant.Easing.QUAD_EASEIN);        var sound =               core.assets['sounds/cf307/se_maou_retro.mp3'].clone(); sound.play(); momoz.tl.then(function(){ var gass = new ExSprite(160 / 5, 32); gass.image = core.assets["images/e_gass.png"]; gass.x = bird.x; gass.y = bird.y + 32; scene.addChild(gass); gass.frame = [0, 1, 2, 3, 4, null]; var sound = core.assets['sounds/gass.mp3'].clone(); sound.play(); }); // コンティニュー momoz.tl.delay(16).then(function(){ if(hp.frame == 2){ console.log("1でコンティニュー"); // タップトゥーコンティニュー

!267

Page 268: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var label = new Label(" TAP TO CCONTINUE"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.scale(0.5, 0.5); label.tl.scaleTo(1, 1, 5); scene.addEventListener(Event.TOUCH_START, function() { gameStart4_2(); }); } }); });        } // ゲット4−1 if (e.collision.target.tag == "") { // が消えて e.collision.target.tl.clear(); e.collision.target.tl.moveTo(bird.x, bird.y, 3).and().scaleTo(0.2,

0.2, 3); // 当たったが小さくなった後に e.collision.target.tl.then(function(){ // 当たったが消えて e.collision.target.remove();             // でスコアアップ score += 1; //これを入れる場所を間違えて苦労した //score += 3;// テスト用 // 音が出て var sound1 = core.assets["sounds/coin.mp3"].clone(); sound1.play(); // ももちゃんブッ  var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/e_gass.png"]; bomb.x = bird.x; bomb.y = bird.y + 32; scene.addChild(bomb);        bomb.frame = [0, 1, 2, 3, 4, null];             }); // 60+20=80点でステージ5へ  if(score >= 79){ //if(score >= 57){ // テスト用 dokanGroup.remove(); fireGroup.remove(); //dokan1.remove(); //dokan2.remove(); bird.tl.clear(); bird.image = core.assets["images/cf307/momochanrotate.png"]; bird.frame = [0, 1, 2, 3, 4, 5, 6, 7]; bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop(); scene.tl.clear(); land.remove(); //oimo.remove();

!268

Page 269: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var label = new Label(" STAGE4 CLEAR!"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.scaleTo(1.5, 1.5, 10); label.tl.then(function(){ var sound1 = core.assets["sounds/cf307/

decision21.mp3"].clone(); sound1.play(); }); label.tl.delay(32).then(function(){ gameStart5(); }); } }   }); }); scene.tl.loop();

// 陸4−1 var land = new ExSprite(320 * 2, 60); land.image = core.assets["images/kati_land.png"]; land.x = 0; land.y = 420; scene.addChild(land);// 衝突判定のために土管グループに入れる land.tag = "地面"; land.tl.moveBy(-320, 0, 50); land.tl.moveTo(0, 420, 1); land.tl.loop();

// momo4−1 var bird = new ExSprite(32, 32); bird.image = core.assets["images/cf307/momo.png"]; bird.x = 80; bird.y = 30; bird.frame = [0, 0, 1, 1, 2, 2]; scene.addChild(bird); bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN);

// スコア表示4 var score = 60; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });       

// タッチでジャンプ4−1 scene.addEventListener(Event.TOUCH_START, function() { if(bird.y > 100 && score <= 79){

!269

Page 270: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

console.log("おほほ"); bird.tl.clear(); bird.tl.moveBy(0, -35, 5, enchant.Easing.QUAD_EASEOUT);// 40から35に bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); var sound = core.assets["sounds/cf307/jump12.mp3"].clone(); sound.play();  }  if(score >= 80){ console.log("クリアでタッチ"); bird.tl.clear(); bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop();   }   }); //========== // ここまでステージ4−1 //==========

}

function gameStart4_2(){// ステージ4−2 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume(); //========== // ここからステージ4−2 //==========

// 背景4−2 var background = new ExSprite(320 * 2, 480); background.image = core.assets["images/back_mountain.png"]; background.x = 0; background.y = 0; scene.addChild(background); background.tl.moveBy(-320, 0, 50); background.tl.moveTo(0, 0, 1); background.tl.loop();

// グループ4−2 var oimoGroup = new Group(); scene.addChild(oimoGroup);

// 火グループ4−2 var fireGroup = new Group(); scene.addChild(fireGroup);

// ドカングループ4−2 var dokanGroup = new Group(); scene.addChild(dokanGroup);

// ももカウンター4−2 var hp = new ExSprite(96, 32); hp.image = core.assets["images/cf307/momohp.png"];

!270

Page 271: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

hp.x = 320 - 96; hp.y = 10; scene.addChild(hp); hp.frame = [2];

// STAGE4の文字 var label = new Label(" STAGE4"); label.color = 'blue'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.delay(32).then(function(){ label.remove(); })

// ステージ4−2 scene.tl.delay(24).then(function(){ // 上の土管 var y1 = getRandom(100, 200); var dokan1 = new ExSprite(45, 480); dokan1.image = core.assets["images/ft_tunnel.png"]; dokan1.x = 320; dokan1.y = y1; dokan1.originY = 0; dokan1.scale(1, -1); dokanGroup.addChild(dokan1); var sound = core.assets['sounds/cf307/startup2.mp3'].clone(); sound.play(); dokan1.tag = "土管"; dokan1.tl.moveBy(-320 - 45, 60, 50); dokan1.tl.then(function(){ console.log("土管1消える"); this.remove(); }); // 下の土管4−2 var y2 = getRandom(130, 200); // 110から130に //var y2 = 300; // テスト用      //var y2 = 130; // テスト用 var dokan2 = new ExSprite(45, 480); dokan2.image = core.assets["images/ft_tunnel.png"]; dokan2.x = 320; dokan2.y = y1 + y2; dokanGroup.addChild(dokan2); dokan2.tag = "土管"; dokan2.tl.moveBy(-320 - 45, 60, 50); dokan2.tl.then(function(){ console.log("土管2消える"); this.remove(); }); // 4−2 var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/coin_base.png"]; oimo.x = dokan1.x + 45 / 2 - 16;  oimo.y = y1 -32;

!271

Page 272: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

oimoGroup.addChild(oimo); oimo.tag = ""; oimo.frame = [0, 1, 2, 3, 4] //oimo.scale(1.2, 1.2); oimo.tl.moveBy(-320 - 45, y2, 50); oimo.tl.then(function() { oimo.remove(); }); // 火4−2 var fire = new ExSprite(32, 25); fire.image = core.assets["images/cf307/fire32_25.png"]; fire.x = dokan1.x + 45 / 2 - 16;  fire.y = y1 + y2 - 25 + 3; fireGroup.addChild(fire); fire.scale(1.2, 1.2); fire.tag = "火"; fire.frame = [0, 0, 1, 1] //oimo.scale(1.2, 1.2); fire.tl.moveBy(-320 - 45, 60, 50); fire.tl.then(function() { fire.remove(); }); // 衝突判定4−2 bird.addCollision(land); bird.addCollision(dokanGroup); bird.addCollision(oimoGroup); bird.addCollision(fireGroup); bird.addEventListener(Event.COLLISION, function(e){ // 土管、地面、火と衝突したとき if (e.collision.target.tag == "土管" || e.collision.target.tag == "地面"

|| e.collision.target.tag == "火") { console.log("いたっ!!"); console.log(e.collision.target.tag); // 残念ももちゃんに変える bird.tl.clear(); bird.tl.then(function(){ bird.remove(); hp.frame = [3];// こうやって入れないと−2にされる(なぜか衝突二回と判定

されるから) }); // 衝突した時の音 var sound = core.assets['sounds/cf307/pyu15.mp3'].clone(); sound.play(); // すべての動きを止める  background.tl.clear(); scene.tl.clear(); land.tl.clear(); dokan1.tl.clear();//これを効かせるためにシーンの中に入れる dokan2.tl.clear(); oimo.tl.clear(); fire.tl.clear(); var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = bird.x; momoz.y = bird.y;

!272

Page 273: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.addChild(momoz); // 残念ももちゃんが落ちていく momoz.tl.delay(5).then(function(){ momoz.tl.moveBy(0, -48, 5, enchant.Easing.QUAD_EASEOUT); momoz.tl.moveBy(0, 480, 10, enchant.Easing.QUAD_EASEIN);        var sound =               core.assets['sounds/cf307/se_maou_retro.mp3'].clone(); sound.play(); momoz.tl.then(function(){ var gass = new ExSprite(160 / 5, 32); gass.image = core.assets["images/e_gass.png"]; gass.x = bird.x; gass.y = bird.y + 32; scene.addChild(gass); gass.frame = [0, 1, 2, 3, 4, null]; var sound = core.assets['sounds/gass.mp3'].clone(); sound.play(); });             // ゲームオーバー momoz.tl.delay(16).then(function(){ var gameover = new ExSprite(147, 48); gameover.image = core.assets['images/title_gameover.png']; gameover.x = 320 / 2 - 147 / 2;        gameover.y = 480 / 2 - 48 / 2; gameover.scale(0, 0); scene.addChild(gameover); // タップトゥーリスタート gameover.tl.scaleTo(1.5, 1.5, 5).then(function() { var label = new Label(" TAP TO RESTART"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220 + 100; scene.addChild(label); scene.addEventListener(Event.TOUCH_START, function() { gameStart(); }); }); }); });        } // ゲット4−2 if (e.collision.target.tag == "") { // が消えて e.collision.target.tl.clear(); e.collision.target.tl.moveTo(bird.x, bird.y, 3).and().scaleTo(0.2,

0.2, 3); // 当たったが小さくなった後に e.collision.target.tl.then(function(){ // 当たったが消えて e.collision.target.remove();             // でスコアアップ score += 1; //これを入れる場所を間違えて苦労した //score += 3;// テスト用

!273

Page 274: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 音が出て var sound1 = core.assets["sounds/coin.mp3"].clone(); sound1.play(); // ももちゃんブッ  var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/e_gass.png"]; bomb.x = bird.x; bomb.y = bird.y + 32; scene.addChild(bomb);        bomb.frame = [0, 1, 2, 3, 4, null];             }); // 60+20=80点でステージ5へ  if(score >= 79){ //if(score >= 57){ // テスト用 dokanGroup.remove(); fireGroup.remove(); //dokan1.remove(); //dokan2.remove(); bird.tl.clear(); bird.image = core.assets["images/cf307/momochanrotate.png"]; bird.frame = [0, 1, 2, 3, 4, 5, 6, 7]; bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop(); scene.tl.clear(); land.remove(); //oimo.remove(); var label = new Label(" STAGE4 CLEAR!"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.scaleTo(1.5, 1.5, 10); label.tl.then(function(){ var sound1 = core.assets["sounds/cf307/

decision21.mp3"].clone(); sound1.play(); }); label.tl.delay(32).then(function(){ gameStart5(); }); } }   }); }); scene.tl.loop();

// 陸4−2 var land = new ExSprite(320 * 2, 60); land.image = core.assets["images/kati_land.png"]; land.x = 0; land.y = 420; scene.addChild(land);// 衝突判定のために土管グループに入れる land.tag = "地面"; land.tl.moveBy(-320, 0, 50);

!274

Page 275: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

land.tl.moveTo(0, 420, 1); land.tl.loop();

// momo4−2 var bird = new ExSprite(32, 32); bird.image = core.assets["images/cf307/momo.png"]; bird.x = 80; bird.y = 30; bird.frame = [0, 0, 1, 1, 2, 2]; scene.addChild(bird); bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN);

// スコア表示4−2 var score = 60; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });       

// タッチでジャンプ4−2 scene.addEventListener(Event.TOUCH_START, function() { if(bird.y > 100 && score <= 79){ console.log("おほほ"); bird.tl.clear(); bird.tl.moveBy(0, -35, 5, enchant.Easing.QUAD_EASEOUT);// 40から35に bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); var sound = core.assets["sounds/cf307/jump12.mp3"].clone(); sound.play();  }  if(score >= 80){ console.log("クリアでタッチ"); bird.tl.clear(); bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop();   }   });

//========== // ここまでステージ4−2 //==========

}

function gameStart5(){// ステージ5 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume(); //========== // ここからステージ5

!275

Page 276: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//========== // 背景5 var background = new ExSprite(320 * 2, 480); background.image = core.assets["images/back_mountain.png"]; background.x = 0; background.y = 0; scene.addChild(background); background.tl.moveBy(-320, 0, 50); background.tl.moveTo(0, 0, 1); background.tl.loop(); // グループ5 var oimoGroup = new Group(); scene.addChild(oimoGroup); // 火グループ var fireGroup = new Group(); scene.addChild(fireGroup); // ドカングループ5 var dokanGroup = new Group(); scene.addChild(dokanGroup); // ももカウンター var hp = new ExSprite(96, 32); hp.image = core.assets["images/cf307/momohp.png"]; hp.x = 320 - 96; hp.y = 10; scene.addChild(hp); hp.frame = [0]; // STAGE5の文字 var label = new Label(" STAGE5"); label.color = 'blue'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.delay(32).then(function(){ label.remove(); }) // ステージ5 scene.tl.delay(24).then(function(){ // 上の土管 var y1 = getRandom(50, 150); // 100から50に200から150 var y2 = getRandom(280, 350); // 230から280に 300から350に //var y2 = 300; // テスト用      //var y2 = 250; // テスト用 var dokan1 = new ExSprite(45, 480); dokan1.image = core.assets["images/ft_tunnel.png"]; dokan1.x = 320; dokan1.y = y1; dokan1.originY = 0;

!276

Page 277: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

dokan1.scale(1, -1); dokanGroup.addChild(dokan1); var sound = core.assets['sounds/cf307/startup2.mp3'].clone(); sound.play(); dokan1.tag = "土管"; var speed = ( 320 + 45 ) / 50; var time = 280 / speed; dokan1.tl.moveBy(- 280, y2 / 4, time); var time1 = ( 40 + 45 )/ speed; dokan1.tl.moveBy(- 40 - 45, y2 / 4, time1); dokan1.tl.then(function(){ var sound = core.assets['sounds/cf307/footstep2.mp3'].clone(); sound.play(); console.log("土管1消える"); this.remove(); }); // 下の土管5 var dokan2 = new ExSprite(45, 480); dokan2.image = core.assets["images/ft_tunnel.png"]; dokan2.x = 320; dokan2.y = y1 + y2; dokanGroup.addChild(dokan2); dokan2.tag = "土管"; dokan2.tl.moveBy(- 280, - y2 / 4, time); dokan2.tl.moveBy(- 40 - 45, - y2 / 4, time1); dokan2.tl.then(function(){ console.log("土管2消える"); this.remove(); }); // 5 var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/coin_base.png"]; oimo.x = dokan1.x + 45 / 2 - 16;  oimo.y = y1 -32; oimoGroup.addChild(oimo); oimo.tag = ""; oimo.frame = [0, 1, 2, 3, 4] //oimo.scale(1.2, 1.2); oimo.tl.moveBy(-320 - 45, y2, 50); oimo.tl.then(function() { oimo.remove(); }); // 火5(下の火) var fire = new ExSprite(32, 25); fire.image = core.assets["images/cf307/fire32_25.png"]; fire.x = dokan1.x + 45 / 2 - 16;  fire.y = y1 + y2 - 25 + 3; fireGroup.addChild(fire); fire.scale(1.2, 1.2); fire.tag = "火"; fire.frame = [0, 0, 1, 1]; fire.tl.moveBy(- 280, - y2 / 4, time); fire.tl.moveBy(- 40 - 45, - y2 / 4, time1); fire.tl.then(function() { fire.remove(); });

!277

Page 278: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 火5−1(上の火) var fire1 = new ExSprite(32, 25); fire1.image = core.assets["images/cf307/fire32_25.png"]; fire1.x = dokan1.x + 45 / 2 - 16;  fire1.y = y1 - 3; fireGroup.addChild(fire1); fire1.scale(1.2, -1.2); fire1.tag = "火"; fire1.frame = [0, 0, 1, 1]; fire1.tl.moveBy(- 280, y2 / 4, time); fire1.tl.moveBy(- 40 - 45, y2 / 4, time1); fire1.tl.then(function() { fire1.remove(); }); // 衝突判定5 bird.addCollision(land); bird.addCollision(dokanGroup); bird.addCollision(oimoGroup); bird.addCollision(fireGroup); bird.addEventListener(Event.COLLISION, function(e){ // 土管、地面、火と衝突したとき if (e.collision.target.tag == "土管" || e.collision.target.tag == "地面"

|| e.collision.target.tag == "火") { console.log("いたっ!!"); console.log(e.collision.target.tag); // 残念ももちゃんに変える bird.tl.clear(); bird.tl.then(function(){ bird.remove(); hp.frame = [1];// こうやって入れないと−2にされる(なぜか衝突二回と判定

されるから) }); // 衝突した時の音 var sound = core.assets['sounds/cf307/pyu15.mp3'].clone(); sound.play(); // すべての動きを止める  background.tl.clear(); scene.tl.clear(); land.tl.clear(); dokan1.tl.clear();//これを効かせるためにシーンの中に入れる dokan2.tl.clear(); oimo.tl.clear(); fire.tl.clear(); fire1.tl.clear(); var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = bird.x; momoz.y = bird.y; scene.addChild(momoz); // 残念ももちゃんが落ちていく momoz.tl.delay(5).then(function(){ momoz.tl.moveBy(0, -48, 5, enchant.Easing.QUAD_EASEOUT); momoz.tl.moveBy(0, 480, 10, enchant.Easing.QUAD_EASEIN);        var sound =

!278

Page 279: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

              core.assets['sounds/cf307/se_maou_retro.mp3'].clone(); sound.play(); momoz.tl.then(function(){ var gass = new ExSprite(160 / 5, 32); gass.image = core.assets["images/e_gass.png"]; gass.x = bird.x; gass.y = bird.y + 32; scene.addChild(gass); gass.frame = [0, 1, 2, 3, 4, null]; var sound = core.assets['sounds/gass.mp3'].clone(); sound.play(); }); // コンティニュー momoz.tl.delay(16).then(function(){ if(hp.frame == 1){ console.log("2でコンティニュー"); // タップトゥーコンティニュー var label = new Label(" TAP TO CCONTINUE"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.scale(0.5, 0.5); label.tl.scaleTo(1, 1, 5); scene.addEventListener(Event.TOUCH_START, function() { gameStart5_1(); }); } }); });        } // ゲット5 if (e.collision.target.tag == "") { // が消えて e.collision.target.tl.clear(); e.collision.target.tl.moveTo(bird.x, bird.y, 3).and().scaleTo(0.2,

0.2, 3); // 当たったが小さくなった後に e.collision.target.tl.then(function(){ // 当たったが消えて e.collision.target.remove();             // でスコアアップ score += 1; //これを入れる場所を間違えて苦労した //score += 3;// テスト用 // 音が出て var sound1 = core.assets["sounds/coin.mp3"].clone(); sound1.play(); // ももちゃんブッ  var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/e_gass.png"]; bomb.x = bird.x; bomb.y = bird.y + 32; scene.addChild(bomb);        bomb.frame = [0, 1, 2, 3, 4, null];            

!279

Page 280: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}); // 80+20=100点でクリア  if(score >= 99){ //if(score >= 97){ // テスト用 dokanGroup.remove(); fireGroup.remove(); //dokan1.remove(); //dokan2.remove(); bird.tl.clear(); bird.image = core.assets["images/cf307/momochanrotate.png"]; bird.frame = [0, 1, 2, 3, 4, 5, 6, 7]; bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop(); scene.tl.clear(); land.remove(); //oimo.remove(); var label = new Label(" STAGE5 CLEAR!"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.scaleTo(1.5, 1.5, 10); label.tl.then(function(){ var sound1 = core.assets["sounds/cf307/

decision21.mp3"].clone(); sound1.play(); }); label.tl.delay(32).then(function(){ gameClear(); }); } }   }); }); scene.tl.loop(); // 陸5 var land = new ExSprite(320 * 2, 60); land.image = core.assets["images/kati_land.png"]; land.x = 0; land.y = 420; scene.addChild(land);// 衝突判定のために土管グループに入れる land.tag = "地面"; land.tl.moveBy(-320, 0, 50); land.tl.moveTo(0, 420, 1); land.tl.loop(); // momo var bird = new ExSprite(32, 32); bird.image = core.assets["images/cf307/momo.png"]; bird.x = 80; bird.y = 30; bird.frame = [0, 0, 1, 1, 2, 2]; scene.addChild(bird); bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN);

!280

Page 281: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// スコア表示5 var score = 80; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });        // タッチでジャンプ5 scene.addEventListener(Event.TOUCH_START, function() { if(bird.y > 50 && score <= 99){ console.log("おほほ"); bird.tl.clear(); bird.tl.moveBy(0, -35, 5, enchant.Easing.QUAD_EASEOUT);// 40から35に bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); var sound = core.assets["sounds/cf307/jump12.mp3"].clone(); sound.play();  }  if(score >= 100){ console.log("クリアでタッチ"); bird.tl.clear(); bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop();   }   }); //========== // ここまでステージ5 //========== }

function gameStart5_1(){// ステージ5 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume(); //========== // ここからステージ5−1 //========== // 背景5−1 var background = new ExSprite(320 * 2, 480); background.image = core.assets["images/back_mountain.png"]; background.x = 0; background.y = 0; scene.addChild(background); background.tl.moveBy(-320, 0, 50); background.tl.moveTo(0, 0, 1); background.tl.loop(); // グループ5−1

!281

Page 282: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var oimoGroup = new Group(); scene.addChild(oimoGroup); // 火グループ5−1 var fireGroup = new Group(); scene.addChild(fireGroup); // ドカングループ5−1 var dokanGroup = new Group(); scene.addChild(dokanGroup); // ももカウンター5−1 var hp = new ExSprite(96, 32); hp.image = core.assets["images/cf307/momohp.png"]; hp.x = 320 - 96; hp.y = 10; scene.addChild(hp); hp.frame = [1]; // STAGE5の文字5−1 var label = new Label(" STAGE5"); label.color = 'blue'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.delay(32).then(function(){ label.remove(); }) // ステージ5−1 scene.tl.delay(24).then(function(){ // 上の土管 var y1 = getRandom(50, 150); // 100から50に200から150 var y2 = getRandom(280, 350); // 230から280に 300から350に //var y2 = 300; // テスト用      //var y2 = 250; // テスト用 var dokan1 = new ExSprite(45, 480); dokan1.image = core.assets["images/ft_tunnel.png"]; dokan1.x = 320; dokan1.y = y1; dokan1.originY = 0; dokan1.scale(1, -1); dokanGroup.addChild(dokan1); var sound = core.assets['sounds/cf307/startup2.mp3'].clone(); sound.play(); dokan1.tag = "土管"; var speed = ( 320 + 45 ) / 50; var time = 280 / speed; dokan1.tl.moveBy(- 280, y2 / 4, time); var time1 = ( 40 + 45 )/ speed; dokan1.tl.moveBy(- 40 - 45, y2 / 4, time1); dokan1.tl.then(function(){ var sound = core.assets['sounds/cf307/footstep2.mp3'].clone(); sound.play();

!282

Page 283: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

console.log("土管1消える"); this.remove(); }); // 下の土管5 var dokan2 = new ExSprite(45, 480); dokan2.image = core.assets["images/ft_tunnel.png"]; dokan2.x = 320; dokan2.y = y1 + y2; dokanGroup.addChild(dokan2); dokan2.tag = "土管"; dokan2.tl.moveBy(- 280, - y2 / 4, time); dokan2.tl.moveBy(- 40 - 45, - y2 / 4, time1); dokan2.tl.then(function(){ console.log("土管2消える"); this.remove(); }); // 5 var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/coin_base.png"]; oimo.x = dokan1.x + 45 / 2 - 16;  oimo.y = y1 -32; oimoGroup.addChild(oimo); oimo.tag = ""; oimo.frame = [0, 1, 2, 3, 4] //oimo.scale(1.2, 1.2); oimo.tl.moveBy(-320 - 45, y2, 50); oimo.tl.then(function() { oimo.remove(); }); // 火5(下の火) var fire = new ExSprite(32, 25); fire.image = core.assets["images/cf307/fire32_25.png"]; fire.x = dokan1.x + 45 / 2 - 16;  fire.y = y1 + y2 - 25 + 3; fireGroup.addChild(fire); fire.scale(1.2, 1.2); fire.tag = "火"; fire.frame = [0, 0, 1, 1]; fire.tl.moveBy(- 280, - y2 / 4, time); fire.tl.moveBy(- 40 - 45, - y2 / 4, time1); fire.tl.then(function() { fire.remove(); }); // 火5−1(上の火) var fire1 = new ExSprite(32, 25); fire1.image = core.assets["images/cf307/fire32_25.png"]; fire1.x = dokan1.x + 45 / 2 - 16;  fire1.y = y1 - 3; fireGroup.addChild(fire1); fire1.scale(1.2, -1.2); fire1.tag = "火"; fire1.frame = [0, 0, 1, 1]; fire1.tl.moveBy(- 280, y2 / 4, time); fire1.tl.moveBy(- 40 - 45, y2 / 4, time1); fire1.tl.then(function() { fire1.remove();

!283

Page 284: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}); // 衝突判定5−1 bird.addCollision(land); bird.addCollision(dokanGroup); bird.addCollision(oimoGroup); bird.addCollision(fireGroup); bird.addEventListener(Event.COLLISION, function(e){ // 土管、地面、火と衝突したとき if (e.collision.target.tag == "土管" || e.collision.target.tag == "地面"

|| e.collision.target.tag == "火") { console.log("いたっ!!"); console.log(e.collision.target.tag); // 残念ももちゃんに変える bird.tl.clear(); bird.tl.then(function(){ bird.remove(); hp.frame = [2];// こうやって入れないと−2にされる(なぜか衝突二回と判定

されるから) }); // 衝突した時の音 var sound = core.assets['sounds/cf307/pyu15.mp3'].clone(); sound.play(); // すべての動きを止める  background.tl.clear(); scene.tl.clear(); land.tl.clear(); dokan1.tl.clear();//これを効かせるためにシーンの中に入れる dokan2.tl.clear(); oimo.tl.clear(); fire.tl.clear(); fire1.tl.clear(); var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = bird.x; momoz.y = bird.y; scene.addChild(momoz); // 残念ももちゃんが落ちていく momoz.tl.delay(5).then(function(){ momoz.tl.moveBy(0, -48, 5, enchant.Easing.QUAD_EASEOUT); momoz.tl.moveBy(0, 480, 10, enchant.Easing.QUAD_EASEIN);        var sound =               core.assets['sounds/cf307/se_maou_retro.mp3'].clone(); sound.play(); momoz.tl.then(function(){ var gass = new ExSprite(160 / 5, 32); gass.image = core.assets["images/e_gass.png"]; gass.x = bird.x; gass.y = bird.y + 32; scene.addChild(gass); gass.frame = [0, 1, 2, 3, 4, null]; var sound = core.assets['sounds/gass.mp3'].clone(); sound.play(); }); // コンティニュー momoz.tl.delay(16).then(function(){

!284

Page 285: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

if(hp.frame == 2){ console.log("2でコンティニュー"); // タップトゥーコンティニュー var label = new Label(" TAP TO CCONTINUE"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.scale(0.5, 0.5); label.tl.scaleTo(1, 1, 5); scene.addEventListener(Event.TOUCH_START, function() { gameStart5_2(); }); } }); });        } // ゲット5 if (e.collision.target.tag == "") { // が消えて e.collision.target.tl.clear(); e.collision.target.tl.moveTo(bird.x, bird.y, 3).and().scaleTo(0.2,

0.2, 3); // 当たったが小さくなった後に e.collision.target.tl.then(function(){ // 当たったが消えて e.collision.target.remove();             // でスコアアップ score += 1; //これを入れる場所を間違えて苦労した //score += 3;// テスト用 // 音が出て var sound1 = core.assets["sounds/coin.mp3"].clone(); sound1.play(); // ももちゃんブッ  var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/e_gass.png"]; bomb.x = bird.x; bomb.y = bird.y + 32; scene.addChild(bomb);        bomb.frame = [0, 1, 2, 3, 4, null];             }); // 80+20=100点でクリア  if(score >= 99){ //if(score >= 97){ // テスト用 dokanGroup.remove(); fireGroup.remove(); //dokan1.remove(); //dokan2.remove(); bird.tl.clear(); bird.image = core.assets["images/cf307/momochanrotate.png"]; bird.frame = [0, 1, 2, 3, 4, 5, 6, 7]; bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop();

!285

Page 286: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.tl.clear(); land.remove(); //oimo.remove(); var label = new Label(" STAGE5 CLEAR!"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.scaleTo(1.5, 1.5, 10); label.tl.then(function(){ var sound1 = core.assets["sounds/cf307/

decision21.mp3"].clone(); sound1.play(); }); label.tl.delay(32).then(function(){ gameClear(); }); } }   }); }); scene.tl.loop(); // 陸5−1 var land = new ExSprite(320 * 2, 60); land.image = core.assets["images/kati_land.png"]; land.x = 0; land.y = 420; scene.addChild(land);// 衝突判定のために土管グループに入れる land.tag = "地面"; land.tl.moveBy(-320, 0, 50); land.tl.moveTo(0, 420, 1); land.tl.loop(); // momo5−1 var bird = new ExSprite(32, 32); bird.image = core.assets["images/cf307/momo.png"]; bird.x = 80; bird.y = 30; bird.frame = [0, 0, 1, 1, 2, 2]; scene.addChild(bird); bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); // スコア表示5−1 var score = 80; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = '♡ : ' + score; });        // タッチでジャンプ5

!286

Page 287: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

scene.addEventListener(Event.TOUCH_START, function() { if(bird.y > 50 && score <= 99){ console.log("おほほ"); bird.tl.clear(); bird.tl.moveBy(0, -35, 5, enchant.Easing.QUAD_EASEOUT);// 40から35に bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); var sound = core.assets["sounds/cf307/jump12.mp3"].clone(); sound.play();  }  if(score >= 100){ console.log("クリアでタッチ"); bird.tl.clear(); bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop();   }   }); //========== // ここまでステージ5−1 //========== }

function gameStart5_2(){// ステージ5−2 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume(); //========== // ここからステージ5−2 //========== // 背景5−2 var background = new ExSprite(320 * 2, 480); background.image = core.assets["images/back_mountain.png"]; background.x = 0; background.y = 0; scene.addChild(background); background.tl.moveBy(-320, 0, 50); background.tl.moveTo(0, 0, 1); background.tl.loop(); // グループ5−2 var oimoGroup = new Group(); scene.addChild(oimoGroup); // 火グループ5−2 var fireGroup = new Group(); scene.addChild(fireGroup); // ドカングループ5−2 var dokanGroup = new Group(); scene.addChild(dokanGroup); // ももカウンター5−2 var hp = new ExSprite(96, 32);

!287

Page 288: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

hp.image = core.assets["images/cf307/momohp.png"]; hp.x = 320 - 96; hp.y = 10; scene.addChild(hp); hp.frame = [2]; // STAGE5の文字5−2 var label = new Label(" STAGE5"); label.color = 'blue'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.tl.delay(32).then(function(){ label.remove(); }) // ステージ5−2 scene.tl.delay(24).then(function(){ // 上の土管 var y1 = getRandom(50, 150); // 100から50に200から150 var y2 = getRandom(280, 350); // 230から280に 300から350に //var y2 = 300; // テスト用      //var y2 = 250; // テスト用 var dokan1 = new ExSprite(45, 480); dokan1.image = core.assets["images/ft_tunnel.png"]; dokan1.x = 320; dokan1.y = y1; dokan1.originY = 0; dokan1.scale(1, -1); dokanGroup.addChild(dokan1); var sound = core.assets['sounds/cf307/startup2.mp3'].clone(); sound.play(); dokan1.tag = "土管"; var speed = ( 320 + 45 ) / 50; var time = 280 / speed; dokan1.tl.moveBy(- 280, y2 / 4, time); var time1 = ( 40 + 45 )/ speed; dokan1.tl.moveBy(- 40 - 45, y2 / 4, time1); dokan1.tl.then(function(){ var sound = core.assets['sounds/cf307/footstep2.mp3'].clone(); sound.play(); console.log("土管1消える"); this.remove(); }); // 下の土管5 var dokan2 = new ExSprite(45, 480); dokan2.image = core.assets["images/ft_tunnel.png"]; dokan2.x = 320; dokan2.y = y1 + y2; dokanGroup.addChild(dokan2); dokan2.tag = "土管"; dokan2.tl.moveBy(- 280, - y2 / 4, time); dokan2.tl.moveBy(- 40 - 45, - y2 / 4, time1); dokan2.tl.then(function(){

!288

Page 289: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

console.log("土管2消える"); this.remove(); }); // 5 var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/coin_base.png"]; oimo.x = dokan1.x + 45 / 2 - 16;  oimo.y = y1 -32; oimoGroup.addChild(oimo); oimo.tag = ""; oimo.frame = [0, 1, 2, 3, 4] //oimo.scale(1.2, 1.2); oimo.tl.moveBy(-320 - 45, y2, 50); oimo.tl.then(function() { oimo.remove(); }); // 火5(下の火) var fire = new ExSprite(32, 25); fire.image = core.assets["images/cf307/fire32_25.png"]; fire.x = dokan1.x + 45 / 2 - 16;  fire.y = y1 + y2 - 25 + 3; fireGroup.addChild(fire); fire.scale(1.2, 1.2); fire.tag = "火"; fire.frame = [0, 0, 1, 1]; fire.tl.moveBy(- 280, - y2 / 4, time); fire.tl.moveBy(- 40 - 45, - y2 / 4, time1); fire.tl.then(function() { fire.remove(); }); // 火5(上の火) var fire1 = new ExSprite(32, 25); fire1.image = core.assets["images/cf307/fire32_25.png"]; fire1.x = dokan1.x + 45 / 2 - 16;  fire1.y = y1 - 3; fireGroup.addChild(fire1); fire1.scale(1.2, -1.2); fire1.tag = "火"; fire1.frame = [0, 0, 1, 1]; fire1.tl.moveBy(- 280, y2 / 4, time); fire1.tl.moveBy(- 40 - 45, y2 / 4, time1); fire1.tl.then(function() { fire1.remove(); }); // 衝突判定5−2 bird.addCollision(land); bird.addCollision(dokanGroup); bird.addCollision(oimoGroup); bird.addCollision(fireGroup); bird.addEventListener(Event.COLLISION, function(e){ // 土管、地面、火と衝突したとき if (e.collision.target.tag == "土管" || e.collision.target.tag == "地面"

|| e.collision.target.tag == "火") { console.log("いたっ!!"); console.log(e.collision.target.tag);

!289

Page 290: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 残念ももちゃんに変える bird.tl.clear(); bird.tl.then(function(){ bird.remove(); hp.frame = [3];// こうやって入れないと−2にされる(なぜか衝突二回と判定

されるから) }); // 衝突した時の音 var sound = core.assets['sounds/cf307/pyu15.mp3'].clone(); sound.play(); // すべての動きを止める  background.tl.clear(); scene.tl.clear(); land.tl.clear(); dokan1.tl.clear();//これを効かせるためにシーンの中に入れる dokan2.tl.clear(); oimo.tl.clear(); fire.tl.clear(); fire1.tl.clear(); var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = bird.x; momoz.y = bird.y; scene.addChild(momoz); // 残念ももちゃんが落ちていく momoz.tl.delay(5).then(function(){ momoz.tl.moveBy(0, -48, 5, enchant.Easing.QUAD_EASEOUT); momoz.tl.moveBy(0, 480, 10, enchant.Easing.QUAD_EASEIN);        var sound =               core.assets['sounds/cf307/se_maou_retro.mp3'].clone(); sound.play(); momoz.tl.then(function(){ var gass = new ExSprite(160 / 5, 32); gass.image = core.assets["images/e_gass.png"]; gass.x = bird.x; gass.y = bird.y + 32; scene.addChild(gass); gass.frame = [0, 1, 2, 3, 4, null]; var sound = core.assets['sounds/gass.mp3'].clone(); sound.play(); });              // ゲームオーバー momoz.tl.delay(16).then(function(){ var gameover = new ExSprite(147, 48); gameover.image = core.assets['images/title_gameover.png']; gameover.x = 320 / 2 - 147 / 2;        gameover.y = 480 / 2 - 48 / 2; gameover.scale(0, 0); scene.addChild(gameover); // タップトゥーリスタート gameover.tl.scaleTo(1.5, 1.5, 5).then(function() { var label = new Label(" TAP TO RESTART"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center";

!290

Page 291: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.y = 220 + 100; scene.addChild(label); scene.addEventListener(Event.TOUCH_START, function() { gameStart(); }); }); }); });        } // ゲット5 if (e.collision.target.tag == "") { // が消えて e.collision.target.tl.clear(); e.collision.target.tl.moveTo(bird.x, bird.y, 3).and().scaleTo(0.2,

0.2, 3); // 当たったが小さくなった後に e.collision.target.tl.then(function(){ // 当たったが消えて e.collision.target.remove();             // でスコアアップ score += 1; //これを入れる場所を間違えて苦労した //score += 3;// テスト用 // 音が出て var sound1 = core.assets["sounds/coin.mp3"].clone(); sound1.play(); // ももちゃんブッ  var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/e_gass.png"]; bomb.x = bird.x; bomb.y = bird.y + 32; scene.addChild(bomb);        bomb.frame = [0, 1, 2, 3, 4, null];             }); // 80+20=100点でクリア  if(score >= 99){ //if(score >= 97){ // テスト用 dokanGroup.remove(); fireGroup.remove(); //dokan1.remove(); //dokan2.remove(); bird.tl.clear(); bird.image = core.assets["images/cf307/momochanrotate.png"]; bird.frame = [0, 1, 2, 3, 4, 5, 6, 7]; bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop(); scene.tl.clear(); land.remove(); //oimo.remove(); var label = new Label(" STAGE5 CLEAR!"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label);

!291

Page 292: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.tl.scaleTo(1.5, 1.5, 10); label.tl.then(function(){ var sound1 = core.assets["sounds/cf307/

decision21.mp3"].clone(); sound1.play(); }); label.tl.delay(32).then(function(){ gameClear(); }); } }   }); }); scene.tl.loop(); // 陸5−2 var land = new ExSprite(320 * 2, 60); land.image = core.assets["images/kati_land.png"]; land.x = 0; land.y = 420; scene.addChild(land);// 衝突判定のために土管グループに入れる land.tag = "地面"; land.tl.moveBy(-320, 0, 50); land.tl.moveTo(0, 420, 1); land.tl.loop(); // momo var bird = new ExSprite(32, 32); bird.image = core.assets["images/cf307/momo.png"]; bird.x = 80; bird.y = 30; bird.frame = [0, 0, 1, 1, 2, 2]; scene.addChild(bird); bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); // スコア表示5−2 var score = 80; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });        // タッチでジャンプ5−2 scene.addEventListener(Event.TOUCH_START, function() { if(bird.y > 50 && score <= 99){ console.log("おほほ"); bird.tl.clear(); bird.tl.moveBy(0, -35, 5, enchant.Easing.QUAD_EASEOUT);// 40から35に bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); var sound = core.assets["sounds/cf307/jump12.mp3"].clone(); sound.play(); 

!292

Page 293: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}  if(score >= 100){ console.log("クリアでタッチ"); bird.tl.clear(); bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop();   }   }); //========== // ここまでステージ5−2 //========== }

function gameClear(){// ステージ5のクリア scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここからステージ5のクリア //==========

// BGM var soundbgm = core.assets["sounds/cf307/ofunede487.mp3"].clone(); soundbgm.play();

// 背景5のクリア var background = new ExSprite(320 * 2, 480); background.image = core.assets["images/back_mountain.png"]; background.x = 0; background.y = 0; scene.addChild(background); background.tl.moveBy(-320, 0, 50); background.tl.moveTo(0, 0, 1); background.tl.loop();

// ゲームクリアの文字 var clear = new ExSprite(147, 48); clear.image = core.assets["images/title_gameclear.png"]; clear.x = 320 / 2 - clear.width / 2; clear.y = 480 / 2 - clear.height / 2; scene.addChild(clear); // グループ5 var oimoGroup = new Group(); scene.addChild(oimoGroup); // 火グループ var fireGroup = new Group(); scene.addChild(fireGroup); // ドカングループ5 var dokanGroup = new Group(); scene.addChild(dokanGroup);

!293

Page 294: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// ももカウンター var hp = new ExSprite(96, 32); hp.image = core.assets["images/cf307/momohp.png"]; hp.x = 320 - 96; hp.y = 10; scene.addChild(hp); hp.frame = [0]; // CONGRATULATIONSの文字 var label = new Label(" CONGRATULATIONS!"); label.color = 'blue'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220 - 100; scene.addChild(label); label.tl.delay(32).then(function(){ //label.remove(); }) // ステージ5のクリア // ももちゃんにぶつからないように動かす scene.tl.delay(24).then(function(){ // 上の土管 var y1 = getRandom(50, 100); // 100から50に150から130 var y2 = getRandom(280, 350); // 230から280に 300から350に //var y2 = 300; // テスト用      //var y2 = 250; // テスト用 var dokan1 = new ExSprite(45, 480); dokan1.image = core.assets["images/ft_tunnel.png"]; dokan1.x = 320; dokan1.y = y1; dokan1.originY = 0; dokan1.scale(1, -1); dokanGroup.addChild(dokan1); //var sound = core.assets['sounds/cf307/startup2.mp3'].clone(); //sound.play(); dokan1.tag = "土管"; // ももちゃんまでの土管の動き var speed = ( 320 + 45 ) / 50; var time = 280 / speed; dokan1.tl.moveBy(- 280, bird.y - y1 - 32 - 10, time); // ももちゃんを過ぎてからの土管の動き var time1 = ( 40 + 45 )/ speed; dokan1.tl.moveBy(- 40 - 45, y2 / 4, time1); dokan1.tl.then(function(){ //var sound = core.assets['sounds/cf307/footstep2.mp3'].clone(); //sound.play(); console.log("土管1消える"); this.remove(); }); // 下の土管5 var dokan2 = new ExSprite(45, 480); dokan2.image = core.assets["images/ft_tunnel.png"];

!294

Page 295: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

dokan2.x = 320; dokan2.y = y1 + y2; dokanGroup.addChild(dokan2); dokan2.tag = "土管"; dokan2.tl.moveBy(- 280, - (y1 + y2 - bird.y - 32 - 32 - 32), time); dokan2.tl.moveBy(- 40 - 45, - y2 / 4, time1); dokan2.tl.then(function(){ console.log("土管2消える"); this.remove(); }); // 5 var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/coin_base.png"]; oimo.x = dokan1.x + 45 / 2 - 16;  oimo.y = y1 -32; oimoGroup.addChild(oimo); oimo.tag = ""; oimo.frame = [0, 1, 2, 3, 4] //oimo.scale(1.2, 1.2); oimo.tl.moveBy(-320 - 45, y2, 50); oimo.tl.then(function() { oimo.remove(); }); // 火5(下の火) var fire = new ExSprite(32, 25); fire.image = core.assets["images/cf307/fire32_25.png"]; fire.x = dokan1.x + 45 / 2 - 16;  fire.y = y1 + y2 - 25 + 3; fireGroup.addChild(fire); fire.scale(1.2, 1.2); fire.tag = "火"; fire.frame = [0, 0, 1, 1]; fire.tl.moveBy(- 280, - (y1 + y2 - bird.y - 32 - 32 - 32), time); fire.tl.moveBy(- 40 - 45, - y2 / 4, time1); fire.tl.then(function() { fire.remove(); }); // 火5−1(上の火) var fire1 = new ExSprite(32, 25); fire1.image = core.assets["images/cf307/fire32_25.png"]; fire1.x = dokan1.x + 45 / 2 - 16;  fire1.y = y1 - 3; fireGroup.addChild(fire1); fire1.scale(1.2, -1.2); fire1.tag = "火"; fire1.frame = [0, 0, 1, 1]; fire1.tl.moveBy(- 280, bird.y - y1 - 32 - 10, time); fire1.tl.moveBy(- 40 - 45, y2 / 4, time1); fire1.tl.then(function() { fire1.remove(); }); // 衝突判定5 bird.addCollision(land); bird.addCollision(dokanGroup); bird.addCollision(oimoGroup); bird.addCollision(fireGroup);

!295

Page 296: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bird.addEventListener(Event.COLLISION, function(e){ // 土管、地面、火と衝突したとき if (e.collision.target.tag == "土管" || e.collision.target.tag == "地

面") { console.log("いたっ!!"); console.log(e.collision.target.tag); // 残念ももちゃんに変える bird.tl.clear(); bird.tl.then(function(){ bird.remove(); hp.frame = [1];// こうやって入れないと−2にされる(なぜか衝突二回と判定

されるから) }); // 衝突した時の音 var sound = core.assets['sounds/cf307/pyu15.mp3'].clone(); sound.play(); // すべての動きを止める  background.tl.clear(); scene.tl.clear(); land.tl.clear(); dokan1.tl.clear();//これを効かせるためにシーンの中に入れる dokan2.tl.clear(); oimo.tl.clear(); fire.tl.clear(); fire1.tl.clear(); var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = bird.x; momoz.y = bird.y; scene.addChild(momoz); // 残念ももちゃんが落ちていく momoz.tl.delay(5).then(function(){ momoz.tl.moveBy(0, -48, 5, enchant.Easing.QUAD_EASEOUT); momoz.tl.moveBy(0, 480, 10, enchant.Easing.QUAD_EASEIN);        var sound =               core.assets['sounds/cf307/se_maou_retro.mp3'].clone(); sound.play(); momoz.tl.then(function(){ var gass = new ExSprite(160 / 5, 32); gass.image = core.assets["images/e_gass.png"]; gass.x = bird.x; gass.y = bird.y + 32; scene.addChild(gass); gass.frame = [0, 1, 2, 3, 4, null]; var sound = core.assets['sounds/gass.mp3'].clone(); sound.play(); }); // コンティニュー momoz.tl.delay(16).then(function(){ if(hp.frame == 1){ console.log("2でコンティニュー"); // タップトゥーコンティニュー var label = new Label(" TAP TO CCONTINUE"); label.color = 'red';

!296

Page 297: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220; scene.addChild(label); label.scale(0.5, 0.5); label.tl.scaleTo(1, 1, 5); scene.addEventListener(Event.TOUCH_START, function() { gameClear(); }); } }); });        } // ゲット5 if (e.collision.target.tag == "") { // が消えて e.collision.target.tl.clear(); e.collision.target.tl.moveTo(bird.x, bird.y, 3).and().scaleTo(0.2,

0.2, 3); // 当たったが小さくなった後に e.collision.target.tl.then(function(){ // 当たったが消えて e.collision.target.remove();             // でスコアアップ //score += 1; //これを入れる場所を間違えて苦労した //score += 3;// テスト用 // 音が出て var sound1 = core.assets["sounds/coin.mp3"].clone(); sound1.play(); // ももちゃんブッ  var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/e_gass.png"]; bomb.x = bird.x; bomb.y = bird.y + 32; scene.addChild(bomb);        bomb.frame = [0, 1, 2, 3, 4, null];             }); }   }); }); scene.tl.loop(); // 陸5 var land = new ExSprite(320 * 2, 60); land.image = core.assets["images/kati_land.png"]; land.x = 0; land.y = 420; scene.addChild(land);// 衝突判定のために土管グループに入れる land.tag = "地面"; land.tl.moveBy(-320, 0, 50); land.tl.moveTo(0, 420, 1); land.tl.loop(); // momo var bird = new ExSprite(32, 32);

!297

Page 298: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bird.image = core.assets["images/cf307/momo.png"]; bird.x = 80; bird.y = 240; bird.frame = [0, 0, 1, 1, 2, 2]; scene.addChild(bird); //bird.tl.moveBy(0, 400, 15, enchant.Easing.QUAD_EASEIN); // スコア表示5 var score = 100; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'black'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE : ' + score; });        // 自動でジャンプ5 bird.tl.clear(); bird.tl.then(function(){ if(bird.y > 50 && score <= 99){ console.log("おほほ"); //bird.tl.clear(); bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT);// 40から35に bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); var sound = core.assets["sounds/cf307/jump12.mp3"].clone(); sound.play();  }  if(score >= 100){ console.log("クリアでタッチ"); bird.tl.clear(); bird.tl.moveBy(0, -50, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.moveBy(0, 50, 10, enchant.Easing.QUAD_EASEIN); bird.tl.loop();   }   }); //bird.tl.delay(3); bird.tl.loop();

// タップトゥーリスタート land.tl.delay(16 * 45).then(function(){ dokanGroup.remove(); fireGroup.remove(); bird.tl.clear(); bird.tl.moveTo(320 / 2 - bird.width / 2, 240 + 35, 10).and().scaleTo(2.0,

2.0, 10); bird.image = core.assets["images/cf307/momochanrotate.png"]; bird.tl.then(function(){ var sound1 = core.assets["sounds/cf307/decision21.mp3"].clone(); sound1.play(); }); bird.tl.moveBy(0, -100, 10, enchant.Easing.QUAD_EASEOUT); bird.tl.then(function(){ bird.frame = [0, 1, 2, 3, 4, 5, 6, 7];

!298

Page 299: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}); bird.tl.moveBy(0, 100, 10, enchant.Easing.QUAD_EASEIN); bird.tl.then(function(){ bird.frame = [0]; }); bird.tl.loop(); scene.tl.clear(); land.remove(); // ラベル var label = new Label(" TAP TO RESTART"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220 + 100; scene.addChild(label); label.scale(0, 0); label.tl.scaleTo(1, 1, 10); scene.addEventListener(Event.TOUCH_START, function() { gameStart(); }); }); //========== // ここまでステージ5のクリア //========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); //scene.on(enchant.Event.TOUCH_START, function(){gameClear();}); // テスト }

//========== // EnchantJS enchant(); var gameManager; var core; var scene; window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); };

!299

Page 300: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

◉ 工夫したところや難しかったところ ・ステージが進んでいくにつれて、ドカンの動きを変えて、難易度を上げていったところを工夫した。

・4ステージ目からはライフをつけて、3回までは失敗してもやり直せるようにした。

・ドカンが動いて閉じる動作は、閉じる前と閉じた後でドカンの速度を同じようにするのに苦労した。

・ゲームクリアすると、自動でゲームが進んで行く画像が見られるようにした。

!300

Page 301: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

21 トイレからの脱出

◉ 内容 ・CODEFRIENDSの中で、グループで協力して作ったゲーム。

・置いてあるアイテムを使って、何らかのアクションをして脱出する。

・画像はグループのメンバーが作ったものを使った。

◉ 使った画像

!301

Page 302: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

!302

Page 303: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード var assets = [ "images/title.png",// タイトル "images/cf303/howaitoroom.png", "images/cf310/KUSAYA (1).png", "images/cf307/toilet240.png", "images/cf306/toirenoare (1).png", "images/cf306/bakagee (2).png", "images/cf307/yugey.png", "images/cf307/yazirusiblue.png", "images/gameover.png", "images/cf307/kamidana.png", "images/cf303/door.png", "images/po_gameclear.png", "images/hat_back.png", "images/cf307/brasi.png", // 音 "sounds/cf307/hotel_toilet.mp3", "sounds/cf307/gameover07.mp3", "sounds/cf307/clear05.mp3", ];

function gameStart(){// ゲーム画面 scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

var kbr = 0; scene.backgroundColor = "darkgray";

// 扉 var door = new ExSprite(480, 450); door.image = core.assets["images/cf303/door.png"]; scene.addChild(door); door.originX = 0; door.originY = 0; door.scale(320 / 240, 480 / 450); // 目玉のところ(判定用) var medama = new ExSprite(10, 20); //medama.backgroundColor = "blue"; medama.x = 160 - 5; medama.y = 97; //scene.addChild(medama);// 後から出す

// ブロックグループ var blockGroup = new Group(); //scene.addChild(blockGroup); // 後で出すため無効化しておく // ブロック(繰り返し処理) var blocks = new Array(); for(var i=0; i< 150; i++){

!303

Page 304: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// ブロック var block = new ExSprite(32, 32); //block.backgroundColor = "black"; // 透明にしたいので無効化しておく block.x = 0 + ((i % 10) * 32); // 320にしておいて動かす block.y = 0 + (Math.floor(i / 10) * 32); blockGroup.addChild(block); //block.tag = "b";// タグをつけます blocks.push(block); }

// 白 var bombGroup = new Group(); scene.addChild(bombGroup);

// 部屋を表示 var back = new ExSprite(960, 1440); back.image = core.assets["images/cf303/howaitoroom.png"]; scene.addChild(back); back.originX = 0; back.originY = 0; back.scale(1 / 3, 1 / 3);

// トイレ var toire = new ExSprite(240, 240); toire.image = core.assets["images/cf307/toilet240.png"]; toire.x = 320 / 2 - 120; toire.y = 250; scene.addChild(toire);

// カウンター var counter = 0; // ラベル var label = new Label("x"); label.x = 75; label.y = 380 - 60; label.color = "blue"; label.font = "32px Arial"; label.text = counter; //scene.addChild(label); // 後から出す // レバーのところ var lever = new ExSprite(20, 30); //lever.backgroundColor = "red"; lever.x = 210; lever.y = 250 + 52; scene.addChild(lever); // レバータッチしたときにくさやが水の中にあったら //var g_lever = new GestureDetector(lever);// TAPでやるならこれ必要 lever.addEventListener(Event.TOUCH_START, function(e){ console.log("レバー"); var sound1 = core.assets["sounds/cf307/hotel_toilet.mp3"].clone(); sound1.play(); if(kusaya.intersect(water)){

!304

Page 305: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

kusaya.tl.delay(12); kusaya.tl.rotateBy(360, 12); kusaya.tl.scaleTo(0.1, 0.1, 24); kusaya.tl.and(); kusaya.tl.rotateBy(360, 24); yuge.tl.scaleTo(0.1, 0.1, 48); kusaya.tl.then(function(){ kusaya.remove(); yuge.remove(); var sounds = core.assets["sounds/cf307/gameover07.mp3"].clone(); sounds.play(); var gameover = new ExSprite(230 , 32); gameover.image = core.assets["images/gameover.png"]; gameover.x = 320 / 2 - gameover.width / 2; gameover.y = 50 + 40; scene.addChild(gameover); var label1 = new Label("食べ物を粗末にしてはいけません"); label1.x = 320 / 2 - label1.width / 2 + 23; label1.y = 100 + 40; label1.color = "black"; label1.font = "17px PixelMplus10"; //label1.textAlign = "center"; scene.addChild(label1); gameover.tl.then(function(){ core.stop(); }); }); } }); // レバータッチしたときにトイレットペーパーが水の中にあったら //var g_lever = new GestureDetector(lever);// TAPでやるならこれ必要 lever.addEventListener(Event.TOUCH_START, function(e){ console.log("レバー"); var sound1 = core.assets["sounds/cf307/hotel_toilet.mp3"].clone(); sound1.play(); if(kami.intersect(water)){ kami.tl.delay(12); kami.tl.rotateBy(360, 12); kami.tl.scaleTo(0.1, 0.1, 24); kami.tl.and(); kami.tl.rotateBy(360, 24); //yuge.tl.scaleTo(0.1, 0.1, 48); kami.tl.then(function(){ kami.remove(); //yuge.remove(); var sounds = core.assets["sounds/cf307/gameover07.mp3"].clone(); sounds.play(); var gameover = new ExSprite(230 , 32); gameover.image = core.assets["images/gameover.png"]; gameover.x = 320 / 2 - gameover.width / 2; gameover.y = 50 + 40; scene.addChild(gameover); var label1 = new Label("トイレがつまりました"); label1.x = 80; label1.y = 100 + 40; label1.color = "black"; label1.font = "17px PixelMplus10";

!305

Page 306: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//label1.textAlign = "center"; scene.addChild(label1); gameover.tl.then(function(){ core.stop(); }); }); } }); // 水のところ var water = new ExSprite(30, 20); //water.backgroundColor = "blue"; water.x = 117; water.y = 382; scene.addChild(water);

// ブラシ var brush = new ExSprite(90, 128); brush.image = core.assets["images/cf307/brasi.png"]; brush.x = 240; brush.y = 330; scene.addChild(brush); var g_brush = new GestureDetector(brush); // ブラシの頭部分 var brushhead = new ExSprite(30, 20); //brushhead.backgroundColor = "blue"; brushhead.x = brush.x + 10; brushhead.y = brush.y + 128 - 30; scene.addChild(brushhead); brushhead.follow(brush); // ブラシドラッグ brush.addEventListener(Event.TOUCH_MOVE, function(e){ // TOUCH_MOVEで brush.x = e.x - 45; brush.y = e.y - 64; if(water.x <= brushhead.x && brushhead.x <= water.x + 30 && water.y <=

brushhead.y && brushhead.y <= water.y + 20){ // intersectでもできるけどおかしいので

scene.addChild(label); }else{ label.remove(); } }); brush.addEventListener(Event.TOUCH_START, function(){ if(water.x <= brushhead.x && brushhead.x <= water.x + 30 && water.y <=

brushhead.y && brushhead.y <= water.y + 20){ console.log("ブラシとお水"); brush.frame = 1; counter++; console.log("みがき!!"); console.log(counter); label.text = counter; if(counter == 10){ water.remove(); label.remove(); brush.remove(); // トイレ小さくなってから消える

!306

Page 307: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

lever.addEventListener(Event.TOUCH_START, function(e){ kusaya.tl.moveTo(210, 450, 32); toire.tl.moveTo(toire.x, -240, 96); toire.tl.then(function(){ toire.remove(); scene.addChild(kamidana); scene.addChild(kh); kamidana.scale(0.1, 0.1); kamidana.tl.scaleTo(1.5, 1.5, 32); scene.addChild(kami);// 神棚の上に出す為に上書き scene.addChild(kusaya);// 上に同じ scene.addChild(yuge);// 上に同じ }); }); } } }); brush.addEventListener(Event.TOUCH_END, function(){ brush.frame = 0; }); // くさや var kusaya = new ExSprite(49, 37); kusaya.image = core.assets["images/cf310/KUSAYA (1).png"]; kusaya.x = 160; kusaya.y = 250; scene.addChild(kusaya); var g_kusaya = new GestureDetector(kusaya); // くさやドラッグ kusaya.addEventListener(Event.TOUCH_MOVE, function(e){ kusaya.x = e.x - 16; kusaya.y = e.y - 16; if(kusaya.intersect(water)){ kusaya.tl.scaleTo(0.7, 0.7, 0); }else{ kusaya.tl.scaleTo(1, 1, 0); } // 目玉に合わせると黒いもやもや if(kusaya.intersect(medama)){ door.tl.delay(8); door.tl.moveTo(-320, 0, 64); medama.remove(); door.tl.then(function(){ scene.addChild(blockGroup); scene.addChild(kusaya); console.log("扉が動いた後"); }); } });

// くさやでなぞると白くなる // 当たり判定 for(var i=0; i<blocks.length; i++){ kusaya.addCollision(blocks[i]); } kusaya.addEventListener(Event.COLLISION, function(e) {

!307

Page 308: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

e.collision.target.remove(); kbr += 1; console.log(kbr); if(kbr == 150){ kusaya.remove(); //背景 var goal = new ExSprite(320, 480); goal.image = core.assets["images/hat_back.png"]; scene.addChild(goal); goal.scale(0.1, 0.1); goal.tl.scaleTo(1,1,32); //ゲームクリア var soundsc = core.assets["sounds/cf307/clear05.mp3"].clone(); soundsc.play(); var gameclear = new ExSprite(230, 32); gameclear.image = core.assets["images/po_gameclear.png"]; gameclear.x = 320 / 2 - gameclear.width / 2; gameclear.y = 100; scene.addChild(gameclear); gameclear.scale(0.1, 0.1); gameclear.tl.scaleTo(1,1,32); } var bomb = new ExSprite(32, 32); bomb.backgroundColor = "white"; bomb.x = e.collision.target.x; bomb.y = e.collision.target.y; bombGroup.addChild(bomb); });

var kamidana = new ExSprite(100, 70); kamidana.image = core.assets["images/cf307/kamidana.png"]; kamidana.x = 160 - 50; kamidana.y = 70 * 0.5 - 15; //scene.addChild(kamidana);

// 神棚判定用 var kh = new ExSprite(30, 10); //kh.backgroundColor = "white"; kh.x = kamidana.x + kamidana.width / 2 - kh.width / 2; kh.y = kamidana.y + kamidana.height / 2 - kh.height / 2 - 10; //scene.addChild(kh);

var kami = new ExSprite(60, 54); kami.image = core.assets["images/cf306/toirenoare (1).png"]; kami.x = 30; kami.y = 200; scene.addChild(kami); //kami.rotate(30); // 紙ドラッグ var g_kami = new GestureDetector(kami); kami.addEventListener(Event.TOUCH_MOVE, function(e){ kami.x = e.x - 30; kami.y = e.y - 54 / 2; // 紙をトイレに入れると if(kami.intersect(water)){ kami.tl.scaleTo(0.5, 0.5, 0); }else{

!308

Page 309: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

kami.tl.scaleTo(1, 1, 0); } // 紙を神棚に置くと・・ if(kami.intersect(kh)){ kami.tl.rotateTo(0, 0); console.log("紙を神に"); scene.tl.delay(8).then(function(){ back.tl.moveBy(320, 0, 32); back.tl.then(function(){ scene.addChild(medama);// このタイミングで出す }); kami.tl.moveBy(320, 0, 32); kamidana.tl.moveBy(320, 0, 32); toire.tl.moveBy(320, 0, 32); yazirusi.moveBy(320, 0, 32); lever.remove(); water.remove(); kh.remove();   }); }else{ kami.tl.rotateTo(30, 0); } });

var yazirusi = new ExSprite(32, 32); yazirusi.image = core.assets["images/cf307/yazirusiblue.png"]; yazirusi.x = 235; yazirusi.y = 300; scene.addChild(yazirusi); yazirusi.rotate(-90);

var gamepad = new GamePad(); scene.addChild(gamepad); gamepad.addEventListener(Event.GAMEPAD_LEFT, function(){ kami.x -= 5; }); gamepad.addEventListener(Event.GAMEPAD_RIGHT, function(){ kami.x += 5; }) gamepad.addEventListener(Event.GAMEPAD_UP, function(){ kami.y -= 5; }); gamepad.addEventListener(Event.GAMEPAD_DOWN, function(){ kami.y += 5; }) var yuge = new ExSprite(64, 32); yuge.image = core.assets["images/cf307/yugey.png"]; yuge.x = 150; yuge.y = 230; scene.addChild(yuge); yuge.frame = [1, 1, 2, 2, 3, 3]; yuge.scale(1.5, 1.5); yuge.follow(kusaya);    //========== // ここまで

!309

Page 310: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//========== }

function getRandom(start, end) { return start + Math.floor( Math.random() * (end - start + 1)); }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){gameStart();}); }

//========== // EnchantJS enchant(); var gameManager; var core; var scene; window.onload = function(){ gameManager = new common.GameManager(); core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); }

◉ 工夫したところや難しかったところ ・DRUGがうまくいかないので、TOUCH_MOVEに変更した。

・あらかじめ重ねて置いておいた背景を動かすことで、場面が変わっていくような感じを出したところ。

・最後の、もやもやを消していくところは、実際は透明と白の2フレームの画像を並べて置いておいて、最初は透明にしておき、くさやとの衝突判定をつけて、くさやでなぞったら(衝突したら)白くするという仕組みで作った。

!310

Page 311: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

22 乱れ撃ちシューティング

◉ 内容 ・アイテムを取りながら進んで行くシューティングゲーム

・おいもの文字を打つと、ランダムにおいものアイテムに変化する。

・アイテムを取ると、速射、三方向弾、一層ボムが発動する。

・中ボスとラストボスが出現する。

・ライフは三つ。

◉ 使った画像

!311

Page 312: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

!312

Page 313: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

完成したソースコード var assets = [ // 背景 //"images/cf307/houganbg1.png", // 自機 "images/cf307/momo.png", // 敵機 "images/cf307/igagurikurugray.png", "images/cf307/perapera.png", // アイテム "images/cf307/kann eituho.png", // ボス //“images/xe_boss.png",// 後で確認 "images/cf307/tonoikari.png", "images/bk_mage.png", "images/cf307/honoo.png", // 弾 "images/cf307/momoziri.png", "images/e_gass.png", "images/xe_bullet_r.png", "images/cf307/applekorokoro.png", "images/cf307/bananakuru.png", "images/cf307/sakuranbokuru.png", // 爆発 "images/bomb.png", // 音 "sounds/shot.mp3", "sounds/coin.mp3", "sounds/bomb.mp3", "sounds/bomb_m.mp3", "sounds/cf307/suck1.mp3", "sounds/cf307/bomb2.mp3", "sounds/cf307/suck1.mp3", "sounds/gass.mp3", "sounds/cf307/cannon2.mp3", "sounds/cf307/battle_gun02.mp3", "sounds/cf307/exp.mp3", "sounds/cf307/clear05.mp3", "sounds/cf307/hakkiriotome.mp3", "sounds/cf307/recollection1.mp3", "sounds/cf307/kyuuchide.mp3", "sounds/cf307/deaeedeaee.mp3", "sounds/cf307/get04.mp3", "sounds/cf307/flee1.mp3",

// CodeFriendsタイトル "images/title_gameclear.png", "images/title_gameover.png", "images/title.png", "images/cf307/hiragana_o.png", "images/cf307/hiragana_i.png", "images/cf307/hiragana_mo.png", "images/cf307/back2400_0.6.png",

!313

Page 314: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

"images/cf307/oimohokahoka1.png", "images/cf307/oimokirahoka.png", "images/cf307/hoge.png", "images/gameclear.png", "images/cf307/iyaan.png", "images/cf307/bbon.png", "images/cf307/momochanzannen.png", "images/gameover.png", "sounds/cf307/se_maoudamashii_onepoint31.mp3", "images/cf307/momohp.png", "sounds/cf307/se_maoudamashii_onepoint31.mp3", "images/cf307/hanabi.png", "images/beam.png", "images/b_red.png", "sounds/cf307/clear07.mp3", ];

function title(){// タイトル画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

// 背景     scene.backgroundColor = "rgb(255, 255, 224)";

var sound = core.assets["sounds/cf307/clear07.mp3"].clone(); sound.play();

// にっこりももちゃん var momo = new ExSprite(32, 32); momo.image = core.assets["images/cf307/momo.png"]; momo.x = 32 + 32 * 2 + 5; momo.y = 60; scene.addChild(momo); // Itemの文字 var label = new Label("Item"); label.x = 32; label.y = momo.y; label.color = "black"; label.font = "32px 'PixelMplus10'"; scene.addChild(label);

// 寛永通宝 var kanei = new ExSprite(64, 64); kanei.image = core.assets["images/cf307/kann eituho.png"]; kanei.x = 32; kanei.y = momo.y + 50; scene.addChild(kanei);

// おいも var oimo = new ExSprite(32, 32);

!314

Page 315: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

oimo.image = core.assets["images/cf307/oimohokahoka1.png"]; oimo.x = kanei.x + kanei.width + 20;  oimo.y = kanei.y + kanei.height / 2 - oimo.height / 2; scene.addChild(oimo);

// bigおいも var bigoimo = new ExSprite(80, 80); bigoimo.image = core.assets["images/cf307/oimokirahoka.png"]; bigoimo.x = oimo.x + oimo.width + 20;  bigoimo.y = kanei.y + kanei.height / 2 - bigoimo.height / 2; scene.addChild(bigoimo);

// 残念ももちゃん var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = 32 + 32 * 2.5; momoz.y = kanei.y + kanei.height + 50; scene.addChild(momoz);

// Enemyの文字 var label = new Label("Enemy"); label.x = 32; label.y = momoz.y; label.color = "black"; label.font = "32px 'PixelMplus10'"; scene.addChild(label);

// いがぐり var x = new ExSprite(32,32); x.image = core.assets["images/cf307/igagurikurugray.png"]; x.x = 32; x.y = momoz.y + 50 scene.addChild(x);

// お var go2 = new ExSprite(32,32); go2.image = core.assets["images/cf307/hiragana_o.png"]; go2.x = x.x + x.width + 10; go2.y = x.y; scene.addChild(go2);

// い var dai = new ExSprite(32,32); dai.image = core.assets["images/cf307/hiragana_i.png"]; dai.x = go2.x + go2.width + 10; dai.y = x.y; scene.addChild(dai);

// も var go = new ExSprite(32,32); go.image = core.assets["images/cf307/hiragana_mo.png"]; go.x = dai.x + dai.width + 5; go.y = x.y; scene.addChild(go);

// りんご

!315

Page 316: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var apple1 = new ExSprite(32, 32); apple1.image = core.assets["images/cf307/applekorokoro.png"]; apple1.x = go.x + go.width + 5; apple1.y = x.y; scene.addChild(apple1);

// バナナ var banana = new ExSprite(32,32); banana.image = core.assets["images/cf307/bananakuru.png"]; banana.x = apple1.x + apple1.width + 10; banana.y = x.y; scene.addChild(banana);

// さくらんぼ var sakuranbokuru = new ExSprite(32,32); sakuranbokuru.image = core.assets["images/cf307/sakuranbokuru.png"]; sakuranbokuru.x = banana.x + banana.width + 10; sakuranbokuru.y = x.y; scene.addChild(sakuranbokuru);

// ボタン var button_fire = new ExSprite(62, 55); button_fire.image = core.assets['images/b_red.png']; button_fire.x = scene.width / 2 - 55 / 2; button_fire.y = 480 - 120; scene.addChild(button_fire); button_fire.addEventListener(Event.TOUCH_START, function(){ button_fire.frame = 1; }); button_fire.addEventListener(Event.TOUCH_END, function(){ button_fire.frame = 0; gameStart(); sound.stop(); }); // スタート var label = new Label(" TAP TO START"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = button_fire.y + 55 + 5; scene.addChild(label);

//========== // ここまで //========== }

function gameStart(){// ゲーム画面 var scene = gameManager.createGameScene(); core.replaceScene(scene); core.resume();

//========== // ここから //==========

!316

Page 317: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// ビーム(花火の線)グループ var beamGroup = new Group(); scene.addChild(beamGroup); // 背景 var background = new ExSprite(192, 1440); background.image = core.assets["images/cf307/back2400_0.6.png"]; background.x = 0; background.y = -2400 + 480; scene.addChild(background); background.originX = 0; background.originY = 0; background.scale(1 / 0.6, 1 / 0.6); // 0.6倍に縮小したものを1倍に戻す // 速さを一定にして、中ボスまで動かす var speed = (2400 - 480) / 1200; background.tl.moveBy(0, 1200, 1200 / speed); //background.tl.moveBy(0, 1200, 50);// テスト用 // 音 var bgm = core.assets["sounds/cf307/hakkiriotome.mp3"].clone(); bgm.play(); bgm.src.loop = true; var deae = core.assets["sounds/cf307/deaeedeaee.mp3"].clone(); var pera = core.assets["sounds/cf307/kyuuchide.mp3"].clone(); // ↑上二つは、ここに入れないと、止められない

// いがぐりグループ var igaguriGroup = new Group(); scene.addChild(igaguriGroup);

// 敵グループ var enemyGroup = new Group(); scene.addChild(enemyGroup);

// アイテムグループ var itemGroup = new Group(); scene.addChild(itemGroup);

// ボスグループ var bossGroup = new Group(); scene.addChild(bossGroup);

// フルーツグループ var fruitGroup = new Group(); scene.addChild(fruitGroup);

// 鉛筆グループ var pencilGroup = new Group(); scene.addChild(pencilGroup);

// 敵の弾グループ(一番上に出したいので後ろに) var enemyShotGroup = new Group(); scene.addChild(enemyShotGroup);

!317

Page 318: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// スコア表示 var score = 0; scoreLabel = new Label('SCORE : 0'); scene.addChild(scoreLabel); scoreLabel.x = 10; scoreLabel.y = 10; scoreLabel.color = 'white'; scoreLabel.font = "24px 'PixelMplus10'"; scoreLabel.addEventListener(Event.ENTER_FRAME, function() { scoreLabel.text = 'SCORE♡: ' + score; }); 

// ももカウンター var hp = new ExSprite(96, 32); hp.image = core.assets["images/cf307/momohp.png"]; hp.x = 320 - 96 + (96 * 0.3 / 2); hp.y = 10; scene.addChild(hp); hp.scale(0.7, 0.7);      //momo号 var momo = new ExSprite(32,32); momo.image = core.assets["images/cf307/momo.png"]; momo.x = 320 / 2 - momo.width / 2; momo.y = 480 - 64; scene.addChild(momo); momo.frame = [0, 0, 1, 1, 2, 2]; // momoの操縦 var posionX; var posionY; scene.addEventListener(Event.TOUCH_START, function(e){ posionX = momo.x - e.x; console.log(posionX); posionY = momo.y - e.y; console.log(posionY); }); scene.addEventListener(Event.TOUCH_MOVE, function(e) { momo.x = posionX + e.x; momo.y = posionY + e.y; }); //自動発射 pencilGroup.tl.then(function(){ var pencil = new ExSprite(32,32); pencil.image = core.assets["images/cf307/momoziri.png"]; pencil.x = momo.x + momo.width / 2 - pencil.width / 2; pencil.y = momo.y - pencil.height; pencilGroup.addChild(pencil); pencil.scale(0.8, 0.8); // 弾の飛ぶ範囲を調節(画面外で倒さないように var p; if(momo.y >= 350){ p = 300; } if(momo.y < 350){ p = momo.y - 50;

!318

Page 319: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

} var pspeed = 300 / 15; var ptime = p / pspeed; pencil.tl.moveBy(0, -p, ptime); pencil.tl.then(function(){ pencil.remove(); }); }); pencilGroup.tl.delay(15); pencilGroup.tl.loop();

// 中ボス(ぺらぺら小僧5方向攻撃)~ラスボス(殿)までのタイムライン background.tl.then(function(){ console.log(background.y); // 音 bgm.stop(); pera.play(); // 弾を一旦撃てないようにする pencilGroup.tl.pause(); momo.tl.pause(); // いがぐりだけ一旦出さないようにする igaguriGroup.remove(); // ぺらぺら小僧 var enemy = new ExSprite(64, 64); enemy.image = core.assets["images/cf307/perapera.png"]; enemy.x = scene.width / 2 - enemy.width / 2; enemy.y = -enemy.height; bossGroup.addChild(enemy); enemy.tag = "敵"; enemy.tl.moveBy(0, 150, 50); enemy.frame =[0, 1, 2]; // 中ボスの動き enemy.tl.then(function(){ // 弾を撃てるように pencilGroup.tl.resume(); momo.tl.resume(); // 中ボスの左右の動き enemy.tl.moveBy(-50, 0, 10); enemy.tl.moveBy(100, 0, 20); enemy.tl.moveBy(-50, 0, 10); // 速さ一定でmomoに向かってくる var speed = 20; var distance = getDistance(enemy.x, enemy.y, momo.x, momo.y); var time = distance / speed; enemy.tl.moveTo(momo.x, momo.y, time); enemy.tl.moveTo(scene.width / 2 - enemy.width / 2, -enemy.height + 150,

time); enemy.tl.then(function() { // 弾を発射 for (var i=-2; i<=2; i++) { var bullet = new ExSprite(9, 9); bullet.image = core.assets["images/xe_bullet_r.png"]; bullet.x = enemy.x + enemy.width / 2 - bullet.width / 2; bullet.y = enemy.y + enemy.height; enemyShotGroup.addChild(bullet);

!319

Page 320: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bullet.tag = "敵"; bullet.tl.moveBy(i * 130, scene.height, 100); bullet.tl.then(function() { this.remove(); }); } }); enemy.tl.loop(); }); // 衝突判定(30発で死ぬ) enemy.addCollision(pencilGroup); // カウンター var counter = 30; //var counter = 1;// テスト用 enemy.addEventListener(Event.COLLISION, function(e) { // カウンター counter--; console.log(counter); // スコア score += 10; // 弾が当たったらほげ e.collision.target.remove(); var hoge = new ExSprite(32, 32); hoge.image = core.assets['images/cf307/hoge.png']; hoge.x = this.x; hoge.y = enemy.y + enemy.height - 20; scene.addChild(hoge); hoge.frame = [0, 0, 1, 1, 2, 2, null]; hoge.addEventListener(Event.ANIMATION_END, function(){ hoge.remove(); }); var soundBomb = core.assets['sounds/cf307/battle_gun02.mp3'].clone(); soundBomb.play(); // カウンターが0になったら if(counter <= 0){ // スコア score += 500; var bomb2 = new ExSprite(160 / 5, 32); bomb2.image = core.assets["images/bomb.png"]; bomb2.x = this.x + enemy.width / 2 - bomb2.width / 2; bomb2.y = this.y + enemy.height / 2 - 32 / 2; scene.addChild(bomb2); bomb2.scale(4, 4); bomb2.frame = [0, 1, 2, 3, 4, null]; this.remove(); var sound = core.assets["sounds/cf307/cannon2.mp3"].clone(); sound.play(); // 背景と音を再生させる background.tl.moveBy(0, 1200 - 480, (1200 - 480) / speed); bgm.play(); pera.stop(); // いがぐりを復活させる scene.addChild(igaguriGroup);

// ⚫ ラスボス(殿3方向攻撃)

!320

Page 321: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

background.tl.then(function(){ // 音 bgm.stop(); deae.play(); deae.src.loop = true; // 弾を一旦撃てないようにする pencilGroup.tl.pause(); momo.tl.pause(); // いがぐりだけ一旦出さないようにする igaguriGroup.remove(); // まげの炎 var honoo = new ExSprite(45, 60); honoo.image = core.assets["images/cf307/honoo.png"]; honoo.x = scene.width / 2 - honoo.width / 2; honoo.y = - 140 - 10; bossGroup.addChild(honoo); honoo.scale(0.7, 0.7); honoo.tl.moveBy(0, 230, 50); // 殿 var tono = new ExSprite(190, 140); tono.image = core.assets["images/cf307/tonoikari.png"]; tono.x = scene.width / 2 - tono.width / 2; tono.y = -tono.height; tono.originY = 0; bossGroup.addChild(tono); tono.scale(0.7, 0.7); tono.tag = "敵"; tono.tl.moveBy(0, 230, 50); // まげ var mage = new ExSprite(45, 60); mage.image = core.assets["images/bk_mage.png"]; mage.x = tono.x + tono.width / 2 - mage.width / 2; mage.y = tono.y - mage.height + 10; bossGroup.addChild(mage); mage.scale(0.7, 0.7); mage.tl.moveBy(0, 230, 50); // まげの上の静止果物 // りんご var apple1 = new ExSprite(32, 32); apple1.image = core.assets["images/cf307/applekorokoro.png"]; bossGroup.addChild(apple1); apple1.scale(0.7, 0.7); apple1.x = 160 - 16; apple1.y = mage.y - apple1.height * 0.7 + mage.height * 0.3 -

10; apple1.tl.moveBy(0, 230, 50);             // バナナ var banana = new ExSprite(32,32); banana.image = core.assets["images/cf307/bananakuru.png"]; bossGroup.addChild(banana); banana.x = 160 - 16; banana.y = apple1.y - 32 * 0.7; banana.scale(0.7, 0.7); banana.tl.moveBy(0, 230, 50); // さくらんぼ

!321

Page 322: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var sakuranbokuru = new ExSprite(32,32); sakuranbokuru.image = core.assets["images/cf307/

sakuranbokuru.png"]; bossGroup.addChild(sakuranbokuru); sakuranbokuru.x = 160 - 16; sakuranbokuru.y = banana.y - 32 * 0.7; sakuranbokuru.scale(0.7, 0.7); sakuranbokuru.tl.moveBy(0, 230, 50); // フルーツグループでまとめて動かす             //fruitGroup.tl.moveBy(0, 230, 50); // 殿の動き tono.tl.then(function(){ // 弾を撃てるように pencilGroup.tl.resume(); momo.tl.resume(); // 殿とまげとフルーツの左右の動き bossGroup.tl.moveBy(-50, 0, 10); // 一緒にうごかしたいので // 殿の顔とフルーツを戻す bossGroup.tl.then(function(){ tono.frame = [0]; apple1.opacity = 1; banana.opacity = 1; sakuranbokuru.opacity = 1; }); bossGroup.tl.moveBy(100, 0, 20); bossGroup.tl.moveBy(-50, 0, 10); // まげは上下に mage.tl.delay(20); mage.tl.moveBy(0, -30, 10); mage.tl.moveBy(0, 30, 10); mage.tl.loop(); // 炎も上下に honoo.tl.clear(); // これ入れないとできない honoo.tl.delay(20); honoo.tl.moveBy(0, -30, 10); honoo.tl.moveBy(0, 30, 10); honoo.tl.loop(); // りんごも上下に apple1.tl.clear(); // これ入れないとできない apple1.tl.delay(20); apple1.tl.moveBy(0, -30, 10); apple1.tl.moveBy(0, 30, 10); apple1.tl.loop(); // バナナも上下に banana.tl.clear(); // これ入れないとできない banana.tl.delay(20); banana.tl.moveBy(0, -30, 10); banana.tl.moveBy(0, 30, 10); banana.tl.loop(); // さくらんぼも上下に sakuranbokuru.tl.clear(); // これ入れないとできない sakuranbokuru.tl.delay(20); sakuranbokuru.tl.moveBy(0, -30, 10); sakuranbokuru.tl.moveBy(0, 30, 10);

!322

Page 323: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

sakuranbokuru.tl.loop(); bossGroup.tl.then(function() { // 殿が怒って攻撃                  tono.frame = [1]; // 同じタイミングでまげの上のフルーツ透明に apple1.opacity = 0; banana.opacity = 0; sakuranbokuru.opacity = 0; // 弾を発射 for (var i=-1; i<=1; i++) { var apple = new ExSprite(32, 32); // 果物をランダムで出す var ku = getRandom(0, 2); if(ku == 0){ apple.image = core.assets["images/cf307/

applekorokoro.png"]; } if(ku == 1){ apple.image = core.assets["images/cf307/

bananakuru.png"]; } if(ku == 2){ apple.image = core.assets["images/cf307/

sakuranbokuru.png"]; } apple.x = mage.x + mage.width / 2 - apple.width /

2; apple.y = mage.y - apple.height + 15; enemyShotGroup.addChild(apple); apple.frame = [0, 0, 1, 1, 2, 2, 3, 3]; apple.tag = "敵"; apple.tl.moveBy(i * 130, 300, 100 * 300 / 480);//

「480:100カウント」のスピードにしたいから apple.tl.moveTo(momo.x, momo.y, 20); apple.tl.then(function() { this.remove(); }); } }); bossGroup.tl.loop(); }); // 衝突判定(50発で死ぬ) tono.addCollision(pencilGroup); // カウンター var countertono = 50; //var countertono = 10;// テスト用 tono.addEventListener(Event.COLLISION, function(e) { countertono--; console.log(countertono); // 弾が当たったらいやーん e.collision.target.remove(); var iyan = new ExSprite(32, 32); iyan.image = core.assets['images/cf307/iyaan.png']; iyan.x = e.collision.target.x; iyan.y = e.collision.target.y - 32;

!323

Page 324: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

//iyan.y = tono.y + tono.height - 20; scene.addChild(iyan); iyan.frame = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, null]; iyan.addEventListener(Event.ANIMATION_END, function(){ iyan.remove(); }); var soundBomb = core.assets['sounds/cf307/

battle_gun02.mp3'].clone(); soundBomb.play(); // カウンターが0になったら if(countertono <= 0){ // スコア score += 1000000; var bomb2 = new ExSprite(130, 130); bomb2.image = core.assets["images/cf307/bbon.png"]; bomb2.x = this.x + tono.width / 2 - bomb2.width / 2; bomb2.y = this.y + tono.height / 2 - 32 / 2; scene.addChild(bomb2); //bomb2.scale(4, 4); bomb2.frame = [0,0,0,1,1,1,2,2,

2,3,3,3,4,4,4,5,5,5,6,6,6,7,7,7,8,8,8,9,9,9,10,10,10,11,11,11,12,12,12,13,13,13,null];

this.remove(); bossGroup.remove();// まげも消す // 全部消す igaguriGroup.remove(); enemyGroup.remove(); itemGroup.remove(); enemyShotGroup.remove(); pencilGroup.remove(); deae.stop(); var sound = core.assets["sounds/cf307/

exp.mp3"].clone(); sound.play(); // クリアの文字 bomb2.addEventListener(Event.ANIMATION_END, function(){ // 音 var sound = core.assets["sounds/cf307/

get04.mp3"].clone(); sound.play(); var clear = new ExSprite(230, 32); clear.image = core.assets["images/gameclear.png"]; clear.x = 320 / 2 - clear.width / 2; clear.y = 480 / 2 - clear.height / 2; scene.addChild(clear); clear.scale(0.5, 0.5); clear.tl.scaleTo(1, 1, 10); // 花火6発 for (var h=0; h<6; h++) { var wait = getRandom(5, 10); clear.tl.then(function() {     //花火の火花 var hanabi = new ExSprite(100, 100); hanabi.image = core.assets["images/cf307/

hanabi.png"]; var x = getRandom(100, 320 - 100);

!324

Page 325: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

hanabi.x = x - 48; var y = getRandom(0, 160) hanabi.y = y; scene.addChild(hanabi); var s = getRandom(1, 1.5); hanabi.tl.scaleTo(s, s, 0); //花火の線 var beam = new ExSprite(6, 32); beam.image = core.assets["images/

beam.png"]; beam.x = x; beam.y = 480; var sound = core.assets["sounds/cf307/

flee1.mp3"].clone(); sound.play(); beamGroup.addChild(beam); beam.tl.moveBy(0, -480, 10); beam.tl.then(function() { beam.remove(); });    //衝突したら、音と爆発アニメ hanabi.addCollision(beam);  hanabi.addEventListener (Event.COLLISION, function(e) { var sound = core.assets["sounds/

bomb.mp3"].clone(); sound.play(); // hanabi(アニメーション) hanabi.image = core.assets["images/

cf307/hanabi.png"] hanabi.frame =

[0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,null]; beam.remove(); }); }); clear.tl.delay(wait); } clear.tl.then(function(){ momo.tl.clear(); var label = new Label(" TAP TO RESTART"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220 + 100; scene.addChild(label); label.scale(0, 0); label.tl.scaleTo(1, 1, 10); scene.addEventListener(Event.TOUCH_START,

function() { gameStart(); }); }); }); } }); }); }

!325

Page 326: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

}); });

// いがぐりと「おいも」5個ずつののかたまりを繰り返して25回出す for(j=0; j<25; j++){ // まずいがぐり5個のかたまりを出現させる scene.tl.then(function(){ for (i=0; i<10; i++) { // x var x = new ExSprite(32,32); x.image = core.assets["images/cf307/igagurikurugray.png"]; x.x = getRandom(0, scene.width - x.width); x.y = getRandom(-100, -32); // ここを調整する igaguriGroup.addChild(x); x.tag = "敵"; x.scale(1.5, 1.5); x.tl.moveBy(getRandom(-200, 200), 600, 100); x.tl.then(function(){ this.remove(); }); x.addCollision(pencilGroup); x.addEventListener(Event.COLLISION, function(e) { // スコア score += 10; var bomb2 = new ExSprite(160 / 5, 32); bomb2.image = core.assets["images/bomb.png"]; bomb2.x = this.x + x.width / 2 - bomb2.width / 2; bomb2.y = this.y + 64 / 2 - 32 / 2; scene.addChild(bomb2); console.log("衝突"); bomb2.frame = [0, 1, 2, 3, 4, null]; this.remove(); var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); }); } }); // 次に文字おいも5つのかたまり scene.tl.delay(20); // xより遅れて出す for (i=0; i<5; i++) { scene.tl.then(function() { // 出す位置のxとy(ランダム) var gox = getRandom(0, 320); // // も var go = new ExSprite(32,32); go.image = core.assets["images/cf307/hiragana_mo.png"]; go.x = gox; go.y = - 100; enemyGroup.addChild(go); go.tag = "敵"; // い var dai = new ExSprite(32,32); dai.image = core.assets["images/cf307/hiragana_i.png"]; dai.x = gox; // ●後と同じにする

!326

Page 327: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

dai.y = go.y - 18; // ●一文字の大きさ分後ろにずらせばよい enemyGroup.addChild(dai); dai.tag = "敵"; // お var go2 = new ExSprite(32,32); go2.image = core.assets["images/cf307/hiragana_o.png"]; go2.x = gox; // ●後と同じにする     go2.y = go.y - 34; // ●二文字分後ろにずらせばよい enemyGroup.addChild(go2); go.tag = "敵"; // もの動き(蛇行) for (var j=0; j<=5; j++) { go.tl.moveBy(0, 50, 20); go.tl.and(); go.tl.moveBy(-100, 0, 20, enchant.Easing.QUAD_EASEINOUT); go.tl.moveBy(0, 50, 20); go.tl.and(); go.tl.moveBy(100, 0, 20, enchant.Easing.QUAD_EASEINOUT); } go.tl.then(function() { this.remove(); }); // いの動き(後と同じだが蛇行させる為に最初にdelayを入れる) for (var k=0; k<=5; k++) { dai.tl.delay(1); // 蛇行させるためにすこし遅らす dai.tl.moveBy(0, 50, 20); dai.tl.and(); dai.tl.moveBy(-100, 0, 20, enchant.Easing.QUAD_EASEINOUT); dai.tl.moveBy(0, 50, 20); dai.tl.and(); dai.tl.moveBy(100, 0, 20, enchant.Easing.QUAD_EASEINOUT); } dai.tl.then(function() { this.remove(); }); // おの動き(醍と同じだが蛇行させるためにさらにdelayを入れる) for (var l=0; l<=5; l++) { go2.tl.delay(2); // 蛇行させるためにさらにすこし遅らす go2.tl.moveBy(0, 50, 20); go2.tl.and(); go2.tl.moveBy(-100, 0, 20, enchant.Easing.QUAD_EASEINOUT); go2.tl.moveBy(0, 50, 20); go2.tl.and(); go2.tl.moveBy(100, 0, 20, enchant.Easing.QUAD_EASEINOUT); } go2.tl.then(function() { this.remove(); }); // もとペンシルの衝突判定 go.addCollision(pencilGroup); go.addEventListener(Event.COLLISION, function(e) { // スコア score += 10; var bomb2 = new ExSprite(160 / 5, 32); bomb2.image = core.assets["images/bomb.png"];

!327

Page 328: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bomb2.x = this.x + go.width / 2 - bomb2.width / 2; bomb2.y = this.y + 64 / 2 - 32 / 2; scene.addChild(bomb2); console.log("衝突go"); bomb2.frame = [0, 1, 2, 3, 4, null]; this.remove(); var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); }); // いとペンシルの衝突判定 dai.addCollision(pencilGroup); dai.addEventListener(Event.COLLISION, function(e) { // スコア score += 10; var bomb2 = new ExSprite(160 / 5, 32); bomb2.image = core.assets["images/bomb.png"]; bomb2.x = this.x + dai.width / 2 - bomb2.width / 2; bomb2.y = this.y + 64 / 2 - 32 / 2; scene.addChild(bomb2); console.log("衝突dai"); bomb2.frame = [0, 1, 2, 3, 4, null]; this.remove(); var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); }); // 「お」とペンシルの衝突判定 go2.addCollision(pencilGroup); go2.addEventListener(Event.COLLISION, function(e) { // スコア score += 10; var bomb2 = new ExSprite(160 / 5, 32); bomb2.image = core.assets["images/bomb.png"]; bomb2.x = this.x + go2.width / 2 - bomb2.width / 2; bomb2.y = this.y + 64 / 2 - 32 / 2; scene.addChild(bomb2); console.log("衝突go2"); bomb2.frame = [0, 1, 2, 3, 4, null]; this.remove(); var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); // 「お」の爆発が終わったらおいも(アイテム)を出す // ランダムで出す(1/6の確率) bomb2.addEventListener(Event.ANIMATION_END,function(){ var o1 = getRandom(0, 5); console.log(o1); // 小いも(o1 = 0) if(o1 == 0){ console.log("おいも"); var oimo = new ExSprite(32, 32); oimo.image = core.assets["images/cf307/

oimohokahoka1.png"]; oimo.x = go2.x;  oimo.y = go2.y; itemGroup.addChild(oimo); oimo.tag = "おいも";

!328

Page 329: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

oimo.frame = [0, 1, 2, 3, 4]; oimo.scale(1.2, 1.2); // おいもの動き(蛇行をなくす)

speed = 100 / 40; // 距離➗ 時間 time = 400 / speed; oimo.tl.moveBy(0, 400, time); oimo.tl.then(function() { oimo.remove(); }); } // 大おいも if(o1 == 2){ console.log("大おいも"); var bigoimo = new ExSprite(80, 80); bigoimo.image = core.assets["images/cf307/

oimokirahoka.png"]; bigoimo.x = go2.x;  bigoimo.y = go2.y; itemGroup.addChild(bigoimo); bigoimo.tag = "大おいも"; bigoimo.frame = [0, 1, 2, 3, 4]; //bigoimo.scale(1.2, 1.2); // 大おいもの動き

speed = 100 / 40; // 距離➗ 時間 time = 400 / speed; bigoimo.tl.moveBy(0, 400, time); bigoimo.tl.then(function() { bigoimo.remove(); }); } });            }); }); } // アイテム(寛永) scene.tl.then(function(){ var kanei = new ExSprite(64, 64); kanei.image = core.assets["images/cf307/kann eituho.png"]; kanei.x = getRandom(0, 320 - kanei.width); kanei.y = -32; kanei.tag = "連射"; itemGroup.addChild(kanei); kanei.tl.moveBy(0, scene.height + kanei.height, scene.height / 5); kanei.tl.then(function(){ this.remove(); }); }); // 上記一連のものを?カウントごとに出す scene.tl.delay(75); // 75カウント毎に }

   // 自機の衝突判定 momo.addCollision(enemyGroup); var counterteki = 3; // 敵とぶつかったときの為のカウンター

!329

Page 330: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

momo.addCollision(igaguriGroup); momo.addCollision(itemGroup); momo.addCollision(enemyShotGroup); momo.addCollision(bossGroup); momo.addEventListener(Event.COLLISION, function(e) { // 寛永(連射)アイテムを取ったとき if(e.collision.target.tag == "連射"){ // スコア score += 50; e.collision.target.remove(); var sound = core.assets["sounds/coin.mp3"].clone(); sound.play(); // 弾を早くして10発発射する pencilGroup.tl.clear(); momo.tl.clear(); // 角度と大きさを戻す momo.tl.rotateTo(0, 0); momo.tl.scaleTo(1, 1, 0); for(m=0; m<10; m++) { console.log("早く2"); //momo.tl.clear(); //←ここに入れてはだめ。前に入れる。 momo.tl.then(function(){ console.log("早く"); var pencil = new ExSprite(32,32); pencil.image = core.assets["images/cf307/momoziri.png"]; pencil.x = momo.x + momo.width / 2 - pencil.width / 2; pencil.y = momo.y - pencil.height; pencilGroup.addChild(pencil); var p; if(momo.y >= 350){ p = 300; } if(momo.y < 350){ p = momo.y - 50; } var pspeed = 300 / 15; var ptime = p / pspeed; pencil.tl.moveBy(0, -p, ptime); pencil.tl.then(function(){ this.remove(); }); }); momo.tl.delay(5); } // 10発の発射が終わったら遅く戻す momo.tl.then(function(){ //delayをいれなくてもforの繰り返しの後に発動する console.log("遅く戻したい"); pencilGroup.tl.clear(); momo.tl.clear(); pencilGroup.tl.then(function(){ var pencil = new ExSprite(32,32); pencil.image = core.assets["images/cf307/momoziri.png"]; pencil.x = momo.x + momo.width / 2 - pencil.width / 2; pencil.y = momo.y - pencil.height; pencilGroup.addChild(pencil);

!330

Page 331: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

pencil.scale(0.8, 0.8); var p; if(momo.y >= 350){ p = 300; } if(momo.y < 350){ p = momo.y - 50; } var pspeed = 300 / 15; var ptime = p / pspeed; pencil.tl.moveBy(0, -p, ptime); pencil.tl.then(function(){ this.remove(); }); }); pencilGroup.tl.delay(15); pencilGroup.tl.loop(); }); } // アイテム(おいも大)を取ったら一掃ボム if(e.collision.target.tag == "大おいも"){ // スコア score += 30; e.collision.target.remove(); pencilGroup.tl.clear(); momo.tl.clear(); // 音 var sound = core.assets["sounds/cf307/suck1.mp3"].clone(); sound.play(); // 回転して大おなら momo.tl.scaleTo(1.2, 1.2, 0); momo.tl.rotateTo(180, 5); momo.tl.then(function(){ // 音 var sound1 = core.assets["sounds/gass.mp3"].clone(); sound1.play(); // ももちゃんブッ  var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/e_gass.png"]; bomb.x = momo.x; bomb.y = momo.y - 32 * 2.5; scene.addChild(bomb);    bomb.scale(5, 5);     bomb.frame = [0, 1, 2, 3, 4, null];    // 一掃 bomb.addEventListener(Event.ANIMATION_END,function(){ // 「お」と「い」と「も」を一掃 var start = enemyGroup.childNodes.length; // スコア score += 10 * start; for (var i=start-1; i>=0; i--) { console.log(i); var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/bomb.png"]; bomb.x = enemyGroup.childNodes[i].x;

!331

Page 332: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bomb.y = enemyGroup.childNodes[i].y; bomb.frame = [0, 1, 2, 3, 4, null]; scene.addChild(bomb); bomb.scale(3, 3); bomb.addEventListener(Event.ANIMATION_END, function() { this.remove(); var sound = core.assets["sounds/cf307/

bomb2.mp3"].clone(); sound.play(); }); enemyGroup.childNodes[i].remove(); } // いがぐりを一掃 var start1 = igaguriGroup.childNodes.length; // スコア score += 10 * start1; for (var j=start1-1; j>=0; j--) { console.log(j); var bomb = new ExSprite(32, 32); bomb.image = core.assets["images/bomb.png"]; bomb.x = igaguriGroup.childNodes[j].x; bomb.y = igaguriGroup.childNodes[j].y; bomb.frame = [0, 1, 2, 3, 4, null]; scene.addChild(bomb); bomb.scale(3, 3); bomb.addEventListener(Event.ANIMATION_END, function() { this.remove(); var sound = core.assets["sounds/cf307/

bomb2.mp3"].clone(); sound.play(); }); igaguriGroup.childNodes[j].remove(); } }); }); momo.tl.rotateBy(180, 10); // これを入れないとrotateを繰り返してしまう momo.tl.then(function(){ momo.tl.clear(); momo.tl.rotateTo(0, 0);// 角度のバグの修正 momo.tl.scaleTo(1, 1, 0); // 弾を再び発射するようにする pencilGroup.tl.clear(); pencilGroup.tl.then(function(){ var pencil = new ExSprite(32,32); pencil.image = core.assets["images/cf307/momoziri.png"]; pencil.x = momo.x + momo.width / 2 - pencil.width / 2; pencil.y = momo.y - pencil.height; pencilGroup.addChild(pencil); pencil.scale(0.8, 0.8); var p; if(momo.y >= 350){ p = 300; } if(momo.y < 350){ p = momo.y - 50; }

!332

Page 333: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

var pspeed = 300 / 15; var ptime = p / pspeed; pencil.tl.moveBy(0, -p, ptime); pencil.tl.then(function(){ this.remove(); }); }); pencilGroup.tl.delay(15); pencilGroup.tl.loop(); }); } // アイテム(おいも小)を取ったらおなら三方向弾 if(e.collision.target.tag == "おいも"){ // スコア score += 20; e.collision.target.remove(); var sound = core.assets["sounds/cf307/suck1.mp3"].clone(); sound.play(); pencilGroup.tl.clear(); momo.tl.clear(); // ももちゃん拡大 momo.tl.scaleTo(1.2, 1.2, 0); // 三方向弾 for(m=0; m<3; m++) { //momo.tl.clear();// ここに入れてはだめ // ももちゃん回転 momo.tl.rotateBy(180, 5); momo.tl.delay(5); momo.tl.then(function(){ for(var i=-1; i<=1; i++){ // 音 var sound = core.assets["sounds/gass.mp3"].clone(); sound.play(); var pencil = new ExSprite(32,32); pencil.image = core.assets["images/e_gass.png"]; pencil.x = momo.x + momo.width / 2 - pencil.width / 2; pencil.y = momo.y - pencil.height; pencilGroup.addChild(pencil); pencil.frame = [0, 1, 2, 3]; var p; if(momo.y >= 350){ p = 300; } if(momo.y < 350){ p = momo.y - 50; } var pspeed = 300 / 15; var ptime = p / pspeed; pencil.tl.moveBy(i * 150, -p, ptime); pencil.tl.then(function(){ this.remove();// thisにしないと消えない(pencilではだめ) }); } }); momo.tl.rotateBy(180, 5); }

!333

Page 334: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

// 5回の発射が終わったら遅く戻す momo.tl.then(function(){ //delayをいれなくてもforの繰り返しの後に発動する console.log("遅く戻したい"); momo.tl.clear();// これを入れないとbackgroundのtlがresumeしない? pencilGroup.tl.clear(); // 角度と大きさを戻す momo.tl.rotateTo(0, 0); momo.tl.scaleTo(1, 1, 0); pencilGroup.tl.then(function(){ var pencil = new ExSprite(32,32); pencil.image = core.assets["images/cf307/momoziri.png"]; pencil.x = momo.x + momo.width / 2 - pencil.width / 2; pencil.y = momo.y - pencil.height; pencilGroup.addChild(pencil); pencil.scale(0.8, 0.8); var p; if(momo.y >= 350){ p = 300; } if(momo.y < 350){ p = momo.y - 50; } var pspeed = 300 / 15; var ptime = p / pspeed; pencil.tl.moveBy(0, -p, ptime); pencil.tl.then(function(){ this.remove(); }); }); pencilGroup.tl.delay(15); pencilGroup.tl.loop(); }); } // 敵とぶつかったら if(e.collision.target.tag == "敵"){ counterteki--; // ももカウンターの変化 if(counterteki == 2){ hp.frame = [1]; } if(counterteki == 1){ hp.frame = [2]; } // 弾を止める pencilGroup.tl.clear(); // 角度と大きさを戻す momo.tl.clear(); momo.tl.rotateTo(0, 0); momo.tl.scaleTo(1, 1, 0); //e.collision.target.remove(); // これは入れちゃダメ 敵は消さない var sound = core.assets["sounds/bomb_m.mp3"].clone(); sound.play(); var bomb = new ExSprite(160 / 5, 32); bomb.image = core.assets["images/bomb.png"]; bomb.x = momo.x + momo.width / 2 - bomb.width / 2;

!334

Page 335: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

bomb.y = momo.y + 64 / 2 - 32 / 2; scene.addChild(bomb); console.log("衝突"); bomb.frame = [0, 1, 2, 3, 4, null]; bomb.addEventListener(Event.ANIMATION_END,function(){ this.remove(); if(counterteki <= 0){ bgm.stop(); hp.frame = [3];             // 背景を止めて敵やアイテムを消す background.tl.pause(); pencilGroup.remove(); console.log("がめおべ"); // 残念ももちゃん momo.remove(); var momoz = new ExSprite(32, 32); momoz.image = core.assets['images/cf307/momochanzannen.png']; momoz.x = momo.x; momoz.y = momo.y; scene.addChild(momoz); var sound = core.assets["sounds/cf307/

se_maoudamashii_onepoint31.mp3"].clone(); sound.play();   momoz.tl.then(function(){  // ゲームオーバーを表示 var gameover = new ExSprite(230, 32); gameover.image = core.assets['images/gameover.png']; gameover.x = 320 / 2 - gameover.width/2; gameover.y = 480 / 2 - gameover.height/2; scene.addChild(gameover); // 大きく gameover.scale(0.5, 0.5); gameover.tl.scaleTo(1, 1, 10); //igaguriGroup.remove(); //enemyGroup.remove(); //itemGroup.remove(); // タップトゥーリスタート gameover.tl.then(function() { momo.tl.clear(); var label = new Label(" TAP TO RESTART"); label.color = 'red'; label.font = "28px 'PixelMplus10'"; label.textAlign = "center"; label.y = 220 + 100; scene.addChild(label); label.scale(0, 0); label.tl.scaleTo(1, 1, 10); scene.addEventListener(Event.TOUCH_START, function() { gameStart(); }); }); }); if(background.y == 0){ deae.stop(); } if(background.y <= -720 && background.y >= -721){

!335

Page 336: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

pera.stop(); }// -720.0000000000002だからこうしないと止まらない var sound = core.assets["sounds/cf307/

se_maoudamashii_onepoint31.mp3"].clone(); sound.play();       } }); positionX = null; positionY = null; // 透明 momo.opacity = 0.1; // 衝突判定解除 momo.removeCollision(enemyGroup); momo.removeCollision(enemyShotGroup); momo.removeCollision(itemGroup); // 25カウント後に復活 momo.tl.delay(10); momo.tl.then(function(){ //momo.tl.clear();// ここに入れちゃだめ momo.x = scene.width / 2 - momo.width / 2; momo.y = 480; // 下からヌーと momo.tl.moveBy(0, -64 / 6, 20 / 6).and().fadeTo(0.3, 20 / 6); momo.tl.moveBy(0, -64 / 6, 20 / 6).and().fadeTo(1, 20 / 6); momo.tl.moveBy(0, -64 / 6, 20 / 6).and().fadeTo(0.3, 20 / 6); momo.tl.moveBy(0, -64 / 6, 20 / 6).and().fadeTo(1, 20 / 6); momo.tl.moveBy(0, -64 / 6, 20 / 6).and().fadeTo(0.3, 20 / 6); momo.tl.moveBy(0, -64 / 6, 20 / 6).and().fadeTo(1, 20 / 6); console.log("ぬー"); if(counterteki > 0){ var soundhukkatu = core.assets["sounds/cf307/

recollection1.mp3"].clone(); soundhukkatu.play(); } momo.tl.then(function(){ momo.tl.clear(); momo.opacity = 1; // 衝突判定復活 momo.addCollision(enemyGroup); momo.addCollision(enemyShotGroup); momo.addCollision(itemGroup); // 弾が出るように戻す pencilGroup.tl.clear(); pencilGroup.tl.then(function(){ var pencil = new ExSprite(32,32); pencil.image = core.assets["images/cf307/momoziri.png"]; pencil.x = momo.x + momo.width / 2 - pencil.width / 2; pencil.y = momo.y - pencil.height; pencilGroup.addChild(pencil); pencil.scale(0.8, 0.8); var p; if(momo.y >= 350){ p = 300; } if(momo.y < 350){ p = momo.y - 50;

!336

Page 337: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

} var pspeed = 300 / 15; var ptime = p / pspeed; pencil.tl.moveBy(0, -p, ptime); pencil.tl.then(function(){ this.remove(); }); }); pencilGroup.tl.delay(15); pencilGroup.tl.loop(); }); }); } });

//========== // ここまで //========== }

function titleStart(){// タイトル画面 var scene = gameManager.createTitleScene(); core.replaceScene(scene); core.pause(); scene.on(enchant.Event.TOUCH_START, function(){title();}); }

//========== //EnchantJS var gameManager; var core; enchant(); gameManager = new common.GameManager(); window.onload = function() { core = gameManager.createCore(320, 480); core.preload(assets); core.onload = function(){titleStart();}; core.start(); };

◉ 工夫したところや難しかったところ

・ここまでのシューティングゲームの授業でならったことを全部つなげてみたくてやってみたが、forやfunctionが入れ子になり苦労した。

・今まで使ったドット絵のキャラクターや、花火のゲーム、殿から果物が落ちるゲームなど、自分が作ったゲームも利用した。

・コードが長くなると何を書いていたのかわからなくなるので、コメントアウトでメモをしながら作った。

!337

Page 338: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

まとめと感想

・これまでプログラミングを学んできて 僕がはじめてやったプログラミングは、スクラッチというものだった。スクラッチは、今勉強しているものとは違い、あらかじめ用意されているブロックを組み合わせてゲームを作るものである。それでも、基本的なことは今勉強していることと、同じだった。

去年の4月からCODEFRIENDSに通い始めた。それから一回も休まず通っている。家でも復習しながらゲームをつくったりしてきた。プログラミングを勉強してきて思ったことは、ゲームをやるのより、ゲームを作る方が何倍も大変で面白いということである。プレイするにはさほど大変ではない動作でも、自分が思ったように動くようにプログラミングするには、根気と、緻密で地味な作業が必要となる。そして、ゲームが完成したときの達成感はゲームをクリアした時の達成感よりもずっと大きい。

プログラミングに重要だと思うことは、三つある。まず一つ目に、根気である。プログラミングはバグがつきものだ。バグが出たときには、まず、バグが出た原因を探し、そこを修正する必要がある。そして、最終的にゲームを面白いものにするには、根気よく時間をかけてやっていく必要がある。

二つ目は、注意力である。先に述べたように、プログラミングにはバグを見つけ出す作業が必要だ。そのためには原因となる誤字・脱字などを長いソースコードの中から探し出す注意力が必要となる。

三つ目は、アイデア力である。いくらプログラミングがうまくても、面白いアイデアがなければ面白いゲームはできない。ゲームをつくるのにはまず、アイデア力が重要である。

・これからの目標・やってみたいこと 今回、今まで作ったゲームについてまとめたことで、勉強してきたことを振り返ることができた。改めて、用語の意味や、使い方や規則を確認することもできた。

今までプログラミングの基本を勉強して、いろいろな技術をいくつも習ってきたが、まだまだ知らないことがたくさんあり、学ぼうと思えば学べることはたくさんあることもわかった。そして、プログラミングは、ゲームだけでなく、世の中の様々なところで利用され人の役に立っている。よいプログラミングをするには、数学や英語、そのほかすべての勉強も大事で

!338

Page 339: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

あるということも感じている。

これから、他の勉強も頑張り、ゲームづくりの他にも、プログラミングには色々な言語や分野があるので、それらにも挑戦してみたいと思っている。

最後に、普段のプログラミングの勉強や今回の研究に協力してくれた母、応援してくれている父、そしていつもわかりやすく丁寧にプログラミングをご指導してくださっているCODEFRIENDSの尾崎慎一先生はじめ先生方に、感謝します。

!339

Page 340: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

先生から

CodeFriendsでご指導いただいている尾崎先生から   ご講評をいただきました

前段

優志君は一度も休まずにCodeFriendsに参加してくれていて、授業も真剣に取り組んでいます。夏休みの研究に"プログラミング"を取り上げてくれたのはとても嬉しいです。

成果物を一通り見させてもらった上で講評をさせて頂きたいと思います。

講評

全体として、成果物では作成したゲームを作品をふりかえりながら、よくまとめていると感じました。

まず特筆すべき点は、取り上げたゲームの数です。 クラスでは最も作品数が多い事から、普段からプログラミングをしている事が伺えます。

まとめかたに関しては、ゲームそれぞれで使っている細かい技術、そしてその目的と使用例等、とても読みやすくまとまっています。 授業では先生が言った事をノートにまとめてメモを取っていた事がそれを支えているのでしょう。

それと同時に"工夫したところ"や、"難しかったところ"にも言及してあり、課題を発見する手がかりにもなっています。 技術を積み重ねる上で、出来る事や出来ない事が明確になっていく過程での創意工夫が感じられます。

今後に期待する事

今回の成果物は全体的にとてもよくまとまっているので、同じ手順でBlogやSNSを活用し、インターネット上に学習の過程や結果などを残していくと良いと思います。

!340

Page 341: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

最後に

優志君の新作ゲームは同じクラスだけでなく、他のクラスの子にも刺激を与えています。 ゲームのアイデアも面白いですね!! 先生たちも新作を毎回楽しみにしていますよ!! これからもプログラミングを続けていってくれると嬉しいです!!

!341

Page 342: プログラミングで オリジナルゲームをつくろうcf307.wktk.so/wp/wp-content/uploads/ziyuukenkyuu_link_ari.pdf · enchant.jsというフレームワークを使って、javascriptを用いて、パソコンやスマート

参考にした資料・サイト CODEFRIENDSホームページ

http://codefriends.jp/

wise9.github.io

http://wise9.github.io/enchant.js/doc/plugins/ja/symbols/enchant.Event.html

Easing function早見表

http://easings.net/ja

「はじめて学ぶenchant.js ゲーム開発」蒲生睦男著 C&R研究所

!342