ボールとバーを出そう! presented by NaturalStyle Co.Ltd. 1

(1)

(2)

ゲームの作り方

3 ボールとバーを出そう！

13 ボールを跳ね返そう！

19 ブロックを並べよう！

(3)

presented by

NaturalStyle Co.Ltd.

1

(4)

4

Program

プログラム

1 var res = { 2 3 }; 4

5 var MyLayer = cc.KidspodLayer.extend({ 6 7 bar:null, 8 ball:null, 9 10 init:function(){ 11 this._super(); 12 this.scheduleUpdate();

13 var size = cc.director.getWinSize(); 14 15 console.log("start"); 16 17 this.bar = cc.LabelTTF.create("========"); 18 this.addChild(this.bar); 19 this.bar.setPosition(size.width/2, 50); 20 21 this.ball = cc.LabelTTF.create("o"); 22 this.addChild(this.ball); 23 this.ball.setPosition(size.width/2, 60); 24 25 return true; 26 }, 27 28 update : function(dt) { 29 30 }, 31 32 onMouseDown:function(event) { 33 34 }, 35 36 onKeyPressed:function(key, event) { 37 if (key == cc.KEY.left) { 38 var p = this.bar.getPosition(); 39 p.x = p.x - 20; 40 this.bar.setPosition(p); 41 }

42 else if (key == cc.KEY.right) {

43 var p = this.bar.getPosition(); 44 p.x = p.x + 20; 45 this.bar.setPosition(p); 46 } 47 }, 48 49 onTouchBegan:function(touch, event) { 50 51 }, 52 53 onAccelerometer:function(accelero, event) { 54 55 } 56 }); 57

58 var MyScene = cc.Scene.extend({ 59 onEnter:function (){ 60 this._super();

61 var layer = new MyLayer(); 62 layer.init();

63 this.addChild(layer); 64 }

(5)

What is program?

プログラムって？

5

What is program?

プログラムって？

このテキストのプログラムは javascript でかかれています。

(6)

What is program?

プログラムって？

6

var

箱作り

① taro:1

② var size = cc.director.getWinSize();

③ var nafuda = cc.LabelTTF.create(" ダンブン "); 名前のついた箱をつくります。

(7)

7

operator

計算記号

コンピュータに計算させます。結果は箱に入れておけます。 + ・・・足し算 - ・・・引き算 * ・・・かけ算 / ・・・わり算 = ・・・箱へ入れる値の大小を比べることもできます。下の式では、正しいときは true、間違っているときは false になります。 a < b ・・・ a より b が大きい a <= b ・・・ a より b が大きいか等しい a == b ・・・ a と b は等しい a != b ・・・ a と b は等しくない && を使って、合わせて比べることもできます。 a < b && b < c ・・・ a < b も b < c も正しいかどうか

(8)

8 var taro = 1; if (taro == 1){ taro = taro + 2; } var taro = 3; if(taro == 1){ taro = taro + 2; } else{ taro = taro - 1; } if は () の中の式に当てはまるかどうかで分かれる道を作ります。 if の式に当てはまらなかった時に通る道を作ります。

if

分かれ道

if

分かれ道

(9)

console.log()

ログ

9 ゲームとはキャラクターが描かれたシートを動かして遊ぶプログラムです。このテキストのゲームは cocos2d-html5 でかかれています。

What is game ?

ゲームって？

(10)

console.log()

ログ

10 console.log(" こんにちは！ "); var hako = 1; console.log(" はこのなかみは "+hako);

var size = cc.director.getWinSize();

() の中に書かれた文字や値をコンソール画面に表示します。動作の確認に使う事ができます。

ゲーム画面の大きさを調べます。シートの位置計算に使えます。

cc.director.getWinSize()

画面の大きさ調べ

(11)

11

cc.LabelTTF.create()

シート作り

var hippo = cc.LabelTTF.create(" ヒッポ”);

this.addChild(hippo); hippo.setPosition(100, 20); hippo.getPosition(100, 20); 文字の書かれたシートを作ります。ステージにシートを置きます。シートの場所を指定します。シートの場所を調べます。

addChild()

シート置き

setPosition()

場所決め

getPosition()

場所調べ

(12)

12 キーボードが押された時に通る横道です。箱には押されたキー情報が入っています。 onKeyPressed:function(key, event) { if(key == cc.KEY["left"]){ x = x + 1; } },

onKeyPressed : function() { … }

キーボードの横道

(13)

presented by

NaturalStyle Co.Ltd.

ボールを跳ね返そう！

(14)

14

Program

プログラム

1 var res = { 2 3 }; 4

5 var MyLayer = cc.KidspodLayer.extend({ 6 7 bar:null, 8 ball:null, 9 ball_dx:0, 10 ball_dy:0, 11 12 init:function(){ 13 this._super(); 14 this.scheduleUpdate();

15 var size = cc.director.getWinSize(); 16 17 console.log("start"); 18 this.bar = cc.LabelTTF.create("========"); 19 this.addChild(this.bar); 20 this.bar.setPosition(size.width/2, 50); 21 22 this.ball = cc.LabelTTF.create("o"); 23 this.addChild(this.ball); 24 this.ball.setPosition(size.width/2, 60); 25 this.ball.setVisible(false); 26 return true; 27 }, 28 29 update : function(dt) { 30 if (this.ball.isVisible()) { 31 var p = this.ball.getPosition(); 32 p.x = p.x + this.ball_dx; 33 p.y = p.y + this.ball_dy; 34

35 var winsize = cc.director.getWinSize(); 36 var ballsize = this.ball.getContentSize(); 37 var barpos = this.bar.getPosition(); 38 var barsize = this.bar.getContentSize(); 39 40 if (p.x <= 0) { 41 this.ball_dx = this.ball_dx * -1; 42 } 43 if (winsize.width - ballsize.width <= p.x) { 44 this.ball_dx = this.ball_dx * -1; 45 } 46 if (winsize.height <= p.y) { 47 this.ball_dy = this.ball_dy * -1; 48 } 49

50 if (p.y <= barpos.y+(barsize.height/2) && barpos.y-(barsize.height/2) <= p.y) { 51 if(barpos.x-(barsize.width/2) <= p.x && p.x <= barpos.x+(barsize.width/2)){ 52 this.ball_dy = this.ball_dy * -1; 53 } 54 } 55 56 if (p.y <= 0){ 57 this.ball.setVisible(false); 58 } 59 this.ball.setPosition(p.x, p.y); 60 } 61 }, 62 63 onMouseDown:function(event) { 64 65 }, 66 67 onKeyPressed:function(key, event) { 68 if (key == cc.KEY.left) { 69 var p = this.bar.getPosition();

(15)

15

70 p.x = p.x - 20;

71 this.bar.setPosition(p); 72 }

73 else if (key == cc.KEY.right) { 74 var p = this.bar.getPosition(); 75 p.x = p.x + 20;

78 else if (key == cc.KEY.space) { 79 var p = this.bar.getPosition(); 80 this.ball.setVisible(true); 81 this.ball.setPosition(p.x, p.y+10); 82 this.ball_dx = 5.0; 83 this.ball_dy = 5.0; 84 } 85 }, 86 87 onTouchBegan:function(touch, event) { 88 89 }, 90 91 onAccelerometer:function(accelero, event) { 92 93 } 94 }); 95

(16)

16 var taro = 3; if(taro == 1){ taro == taro + 3; } else if(taro == 2){ taro == taro + 2; } else{ taro == taro + 1; } もっと分かれ道を作ります。どれか一本の道しか通りません。

else if

３本以上の分かれ道

(17)

17 update:function(dt){ console.log("HI!") }, ゲーム時間が進むたびにダンブンがやってくる横道です。箱 dt には進んだ秒数が入っています。

update : function() { … }

更新の横道

ball.setVisible(true); ball.setVisible(false); 見えるようにしたり、見せないようにします。見えるようにしたり、見せないようにします。見えるようにしたり、見せないようにします。

setVisible()

表示、非表示

isVisible()

表示調べ

getContentSize();

大きさ調べ

(18)

(19)

presented by

NaturalStyle Co.Ltd.

3

(20)

20

Program

プログラム

1 var res = { 2 3 }; 4

5 var MyLayer = cc.KidspodLayer.extend({ 6 7 bar:null, 8 ball:null, 9 ball_dx:0, 10 ball_dy:0, 11 block1:null, 12 block2:null, 13 block3:null, 14 15 init:function(){ 16 this._super(); 17 this.scheduleUpdate();

18 var size = cc.director.getWinSize(); 19 20 console.log("start"); 21 this.bar = cc.LabelTTF.create("========"); 22 this.addChild(this.bar); 23 this.bar.setPosition(size.width/2, 50); 24 25 this.ball = cc.LabelTTF.create("o"); 26 this.addChild(this.ball); 27 this.ball.setPosition(size.width/2, 60); 28 this.ball.setVisible(false); 29 30 this.block1 = cc.LabelTTF.create("[++]"); 31 this.addChild(this.block1); 32 this.block1.setPosition(size.width/2, size.height/2); 33 34 this.block2 = cc.LabelTTF.create("[++]"); 35 this.addChild(this.block2); 36 this.block2.setPosition(size.width/2, size.height/2 + 20); 37 38 this.block3 = cc.LabelTTF.create("[++]"); 39 this.addChild(this.block3); 40 this.block3.setPosition(size.width/2, size.height/2 + 40); 41 42 return true; 43 }, 44 45 update : function(dt) { 46 if (this.ball.isVisible()) { 47 var p = this.ball.getPosition(); 48 p.x = p.x + this.ball_dx; 49 p.y = p.y + this.ball_dy; 50

51 var winsize = cc.director.getWinSize(); 52 var ballsize = this.ball.getContentSize(); 53 var barpos = this.bar.getPosition(); 54 var barsize = this.bar.getContentSize(); 55 56 if (p.x <= 0) { 57 this.ball_dx = this.ball_dx * -1; 58 } 59 if (winsize.width - ballsize.width <= p.x) { 60 this.ball_dx = this.ball_dx * -1; 61 } 62 if (winsize.height <= p.y) { 63 this.ball_dy = this.ball_dy * -1; 64 } 65

66 if (p.y <= barpos.y+(barsize.height/2) && barpos.y-(barsize.height/2) <= p.y) { 67 if(barpos.x-(barsize.width/2) <= p.x && p.x <= barpos.x+(barsize.width/2)){ 68 this.ball_dy = this.ball_dy * -1;

(21)

21 70 } 71 72 if (p.y <= 0){ 73 this.ball.setVisible(false); 74 } 75

76 var b1pos = this.block1.getPosition(); 77 var b2pos = this.block2.getPosition(); 78 var b3pos = this.block3.getPosition(); 79 var bsize = this.block1.getContentSize(); 80

81 if (this.block1.isVisible()) {

82 if (b1pos.y-(bsize.height/2) <= p.y && p.y <= b1pos.y+(bsize.height/2)) { 83 if (b1pos.x-(bsize.width/2) <= p.x && p.x <= b1pos.x+(bsize.width/2)) { 84 this.ball_dy = this.ball_dy * -1; 85 this.block1.setVisible(false); 86 } 87 } 88 } 89 if (this.block2.isVisible()) {

98 if (b3pos.y-(bsize.height/2) <= p.y && p.y <= b3pos.y+(bsize.height/2)) { 99 if (b3pos.x-(bsize.width/2) <= p.x && p.x <= b3pos.x+(bsize.width/2)) { 100 this.ball_dy = this.ball_dy * -1; 101 this.block3.setVisible(false); 102 } 103 } 104 } 105 106 this.ball.setPosition(p.x, p.y); 107 } 108 }, 109 110 onMouseDown:function(event) { 111 112 }, 113 114 onKeyPressed:function(key, event) { 115 if (key == cc.KEY.left) { 116 var p = this.bar.getPosition(); 117 p.x = p.x - 20; 118 this.bar.setPosition(p); 119 }

125 else if (key == cc.KEY.space) { 126 var p = this.bar.getPosition(); 127 this.ball.setVisible(true); 128 this.ball.setPosition(p.x, p.y+10); 129 this.ball_dx = 5.0; 130 this.ball_dy = 5.0; 131 } 132 }, 133 134 onTouchBegan:function(touch, event) { 135 this.onKeyPressed(cc.KEY.space, event); 136 }, 137 138 onAccelerometer:function(accelero, event) { 139 if(0.2 < accelero.x){ 140 this.onKeyPressed(cc.KEY.right, event); 141 } 142 else if (accelero.x < -0.2){

(22)

22 143 this.onKeyPressed(cc.KEY.space, event); 144 } 145 }, 146 }); 147

(23)

23 yoko : function(taro){ taro = taro + 1; return taro; } 横道をつくります。横道は最後まで行くと元の道に帰ってきます。元の道から箱を持っていくことも出来ます。横道から戻る時に箱を１つ持ち帰る事もできます。

function

横道

(24)

24 onAccelerometer:function(accelero, event) { if(0.2 < accelero.x){ this.onKeyPressed(cc.KEY.right, event); } else if (accelero.x < -0.2){ this.onKeyPressed(cc.KEY.right, event); } },

onTouchBegan : function(touch, event){

this.onKeyPressed(cc.KEY.space, event); }, 画面が傾いた時に通る横道です。箱には加速度情報が入っています。画面をタッチされた時に通る横道です。箱にはタッチ情報が入っています。

onAccelerometer : function() { … }

加速度の横道

onAccelerometer : function() { … }

加速度の横道

(25)

presented by

NaturalStyle Co.Ltd.

絵にかえよう！

(26)

26

Program

プログラム

1 var res = { 2 3 }; 4

5 var MyLayer = cc.KidspodLayer.extend({ 6 7 bar:null, 8 ball:null, 9 ball_dx:0, 10 ball_dy:0, 11 block1:null, 12 block2:null, 13 block3:null, 14 15 init:function(){ 16 this._super(); 17 this.scheduleUpdate();

18 var size = cc.director.getWinSize(); 19

20 console.log("start"); 21

22 var back = cc.Sprite.create("res/galaxy/back.png"); 23 this.addChild(back); 24 back.setPosition(size.width/2, size.height/2); 25 26 this.bar = cc.Sprite.create("res/galaxy/bar.png"); 27 this.addChild(this.bar); 28 this.bar.setPosition(size.width/2, 50); 29 30 this.ball = cc.Sprite.create("res/galaxy/ball.png"); 31 this.addChild(this.ball); 32 this.ball.setPosition(size.width/2, 60); 33 this.ball.setVisible(false); 34 35 this.block1 = cc.Sprite.create("res/galaxy/block.png"); 36 this.addChild(this.block1); 37 this.block1.setPosition(size.width/2, size.height/2 + 0); 38 39 this.block2 = cc.Sprite.create("res/galaxy/block.png"); 40 this.addChild(this.block2); 41 this.block2.setPosition(size.width/2, size.height/2 + 60); 42 43 this.block3 = cc.Sprite.create("res/galaxy/block.png"); 44 this.addChild(this.block3); 45 this.block3.setPosition(size.width/2, size.height/2 + 120); 46 47 return true; 48 }, 49 50 update : function(dt) { 51 if (this.ball.isVisible()) { 52 var p = this.ball.getPosition(); 53 p.x = p.x + this.ball_dx; 54 p.y = p.y + this.ball_dy; 55

56 var winsize = cc.director.getWinSize(); 57 var ballsize = this.ball.getContentSize(); 58 var barpos = this.bar.getPosition(); 59 var barsize = this.bar.getContentSize(); 60 61 if (p.x <= 0) { 62 this.ball_dx = this.ball_dx * -1; 63 } 64 if (winsize.width - ballsize.width <= p.x) { 65 this.ball_dx = this.ball_dx * -1; 66 } 67 if (winsize.height <= p.y) { 68 this.ball_dy = this.ball_dy * -1; 69 }

(27)

27

70

71 if (p.y <= barpos.y+(barsize.height/2) && barpos.y-(barsize.height/2) <= p.y) { 72 if(barpos.x-(barsize.width/2) <= p.x && p.x <= barpos.x+(barsize.width/2)){ 73 this.ball_dy = this.ball_dy * -1; 74 } 75 } 76 if (p.y <= 0){ 77 this.ball.setVisible(false); 78 } 79

80 var b1pos = this.block1.getPosition(); 81 var b2pos = this.block2.getPosition(); 82 var b3pos = this.block3.getPosition(); 83 var bsize = this.block1.getContentSize(); 84

85 if (this.block1.isVisible()) {

102 if (b3pos.y-(bsize.height/2) <= p.y && p.y <= b3pos.y+(bsize.height/2)) { 103 if (b3pos.x-(bsize.width/2) <= p.x && p.x <= b3pos.x+(bsize.width/2)) { 104 this.ball_dy = this.ball_dy * -1; 105 this.block3.setVisible(false); 106 } 107 } 108 } 109 110 this.ball.setPosition(p.x, p.y); 111 } 112 }, 113 114 onMouseDown:function(event) { 115 }, 116 117 onKeyPressed:function(key, event) { 118 if (key == cc.KEY.left) { 119 var p = this.bar.getPosition(); 120 p.x = p.x - 20; 121 this.bar.setPosition(p); 122 }

128 else if (key == cc.KEY.space) { 129 var p = this.bar.getPosition(); 130 this.ball.setVisible(true); 131 this.ball.setPosition(p.x, p.y+10); 132 this.ball_dx = 5.0; 133 this.ball_dy = 5.0; 134 } 135 }, 136 137 onTouchBegan:function(touch, event) { 138 this.onKeyPressed(cc.KEY.space, event); 139 }, 140 141 onAccelerometer:function(accelero, event) { 142 if(0.2 < accelero.x){

(28)

28 143 this.onKeyPressed(cc.KEY.right, event); 144 } 145 else if (accelero.x < -0.2){ 146 this.onKeyPressed(cc.KEY.space, event); 147 } 148 }, 149 150 }); 151

(29)

29 var saru = cc.Sprite.create("saru.png");

絵のかかれたシートを作ります。

cc.Sprite.create()

絵のシート作り

(30)