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

Size: px

Start display at page:

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

まれあしもかさ
5 years ago
Views:

2 ゲームの作り方 3 ボールとバーを出そう! 13 ボールを跳ね返そう! 19 ブロックを並べよう! 25 絵にかえよう!

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

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(); console.log("start"); this.bar = cc.labelttf.create("========"); 18 this.addchild(this.bar); 19 this.bar.setposition(size.width/2, 50); this.ball = cc.labelttf.create("o"); 22 this.addchild(this.ball); 23 this.ball.setposition(size.width/2, 60); return true; 26 }, update : function(dt) { }, onmousedown:function(event) { }, 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 }, ontouchbegan:function(touch, event) { }, onaccelerometer:function(accelero, event) { } 56 }); var MyScene = cc.scene.extend({ 59 onenter:function (){ 60 this._super(); 61 var layer = new MyLayer(); 62 layer.init(); 63 this.addchild(layer); 64 } 65 }); 4

5 What is program? プログラムって? このテキストのプログラムは javascript でかかれています 5

6 What var is program? プログラムって箱作り? 名前のついた箱をつくります箱は数をいれたりくさりをのばしたりできます 1 taro:1 2 var size = cc.director.getwinsize(); 3 var nafuda = cc.labelttf.create(" ダンブン "); 6

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 も正しいかどうか 7

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

9 console.log() What is game? ゲームってログ? ゲームとはキャラクターが描かれたシートを動かして遊ぶプログラムですこのテキストのゲームは cocos2d-html5 でかかれています 9

10 console.log() ログ () の中に書かれた文字や値をコンソール画面に表示します動作の確認に使う事ができます console.log(" こんにちは! "); var hako = 1; console.log(" はこのなかみは "+hako); cc.director.getwinsize() 画面の大きさ調べゲーム画面の大きさを調べますシートの位置計算に使えます var size = cc.director.getwinsize(); 10

11 cc.labelttf.create() シート作り文字の書かれたシートを作ります var hippo = cc.labelttf.create(" ヒッポ ); addchild() シート置きステージにシートを置きます this.addchild(hippo); setposition() 場所決めシートの場所を指定します hippo.setposition(100, 20); getposition() 場所調べシートの場所を調べます hippo.getposition(100, 20); 11

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

13 ボールを跳ね返そう! presented by NaturalStyle Co.Ltd. 2

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, init:function(){ 13 this._super(); 14 this.scheduleupdate(); 15 var size = cc.director.getwinsize(); console.log("start"); 18 this.bar = cc.labelttf.create("========"); 19 this.addchild(this.bar); 20 this.bar.setposition(size.width/2, 50); 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 }, 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; var winsize = cc.director.getwinsize(); 36 var ballsize = this.ball.getcontentsize(); 37 var barpos = this.bar.getposition(); 38 var barsize = this.bar.getcontentsize(); 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 } 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 } if (p.y <= 0){ 57 this.ball.setvisible(false); 58 } 59 this.ball.setposition(p.x, p.y); 60 } 61 }, onmousedown:function(event) { }, onkeypressed:function(key, event) { 68 if (key == cc.key.left) { 69 var p = this.bar.getposition(); 14

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; 76 this.bar.setposition(p); 77 } 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 }, ontouchbegan:function(touch, event) { }, onaccelerometer:function(accelero, event) { } 94 }); var MyScene = cc.scene.extend({ 97 onenter:function (){ 98 this._super(); 99 var layer = new MyLayer(); 100 layer.init(); 101 this.addchild(layer); 102 } 103 }); 15

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

17 update : function() { } 更新の横道ゲーム時間が進むたびにダンブンがやってくる横道です箱 dt には進んだ秒数が入っています update:function(dt){ }, console.log("hi!") setvisible() 表示非表示見えるようにしたり見せないようにします ball.setvisible(true); ball.setvisible(false); isvisible() 表示調べ見えるようにしたり見せないようにします getcontentsize(); 大きさ調べ見えるようにしたり見せないようにします 17

18 MEMO

19 ブロックを並べよう! presented by NaturalStyle Co.Ltd. 3

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, init:function(){ 16 this._super(); 17 this.scheduleupdate(); 18 var size = cc.director.getwinsize(); console.log("start"); 21 this.bar = cc.labelttf.create("========"); 22 this.addchild(this.bar); 23 this.bar.setposition(size.width/2, 50); this.ball = cc.labelttf.create("o"); 26 this.addchild(this.ball); 27 this.ball.setposition(size.width/2, 60); 28 this.ball.setvisible(false); this.block1 = cc.labelttf.create("[++]"); 31 this.addchild(this.block1); 32 this.block1.setposition(size.width/2, size.height/2); this.block2 = cc.labelttf.create("[++]"); 35 this.addchild(this.block2); 36 this.block2.setposition(size.width/2, size.height/2 + 20); this.block3 = cc.labelttf.create("[++]"); 39 this.addchild(this.block3); 40 this.block3.setposition(size.width/2, size.height/2 + 40); return true; 43 }, 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; var winsize = cc.director.getwinsize(); 52 var ballsize = this.ball.getcontentsize(); 53 var barpos = this.bar.getposition(); 54 var barsize = this.bar.getcontentsize(); 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 } 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; 69 } 20

21 70 } if (p.y <= 0){ 73 this.ball.setvisible(false); 74 } var b1pos = this.block1.getposition(); 77 var b2pos = this.block2.getposition(); 78 var b3pos = this.block3.getposition(); 79 var bsize = this.block1.getcontentsize(); 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()) { 90 if (b2pos.y-(bsize.height/2) <= p.y && p.y <= b2pos.y+(bsize.height/2)) { 91 if (b2pos.x-(bsize.width/2) <= p.x && p.x <= b2pos.x+(bsize.width/2)) { 92 this.ball_dy = this.ball_dy * -1; 93 this.block2.setvisible(false); 94 } 95 } 96 } 97 if (this.block3.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 } this.ball.setposition(p.x, p.y); 107 } 108 }, onmousedown:function(event) { }, 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 } 120 else if (key == cc.key.right) { 121 var p = this.bar.getposition(); 122 p.x = p.x + 20; 123 this.bar.setposition(p); 124 } 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 }, ontouchbegan:function(touch, event) { 135 this.onkeypressed(cc.key.space, event); 136 }, 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){ 21

22 143 this.onkeypressed(cc.key.space, event); 144 } 145 }, 146 }); var MyScene = cc.scene.extend({ 149 onenter:function (){ 150 this._super(); 151 var layer = new MyLayer(); 152 layer.init(); 153 this.addchild(layer); 154 } 155 }); 22

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

24 onaccelerometer : function() { } 加速度の横道画面をタッチされた時に通る横道です箱にはタッチ情報が入っています ontouchbegan : function(touch, event){ }, this.onkeypressed(cc.key.space, event); onaccelerometer : function() { } 加速度の横道画面が傾いた時に通る横道です箱には加速度情報が入っています 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); } }, 24

25 絵にかえよう! presented by NaturalStyle Co.Ltd. 4

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, init:function(){ 16 this._super(); 17 this.scheduleupdate(); 18 var size = cc.director.getwinsize(); console.log("start"); var back = cc.sprite.create("res/galaxy/back.png"); 23 this.addchild(back); 24 back.setposition(size.width/2, size.height/2); this.bar = cc.sprite.create("res/galaxy/bar.png"); 27 this.addchild(this.bar); 28 this.bar.setposition(size.width/2, 50); 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); 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); 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); this.block3 = cc.sprite.create("res/galaxy/block.png"); 44 this.addchild(this.block3); 45 this.block3.setposition(size.width/2, size.height/ ); return true; 48 }, 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; var winsize = cc.director.getwinsize(); 57 var ballsize = this.ball.getcontentsize(); 58 var barpos = this.bar.getposition(); 59 var barsize = this.bar.getcontentsize(); 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 } 26

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 } var b1pos = this.block1.getposition(); 81 var b2pos = this.block2.getposition(); 82 var b3pos = this.block3.getposition(); 83 var bsize = this.block1.getcontentsize(); if (this.block1.isvisible()) { 86 if (b1pos.y-(bsize.height/2) <= p.y && p.y <= b1pos.y+(bsize.height/2)) { 87 if (b1pos.x-(bsize.width/2) <= p.x && p.x <= b1pos.x+(bsize.width/2)) { 88 this.ball_dy = this.ball_dy * -1; 89 this.block1.setvisible(false); 90 } 91 } 92 } 93 if (this.block2.isvisible()) { 94 if (b2pos.y-(bsize.height/2) <= p.y && p.y <= b2pos.y+(bsize.height/2)) { 95 if (b2pos.x-(bsize.width/2) <= p.x && p.x <= b2pos.x+(bsize.width/2)) { 96 this.ball_dy = this.ball_dy * -1; 97 this.block2.setvisible(false); 98 } 99 } 100 } 101 if (this.block3.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 } this.ball.setposition(p.x, p.y); 111 } 112 }, onmousedown:function(event) { 115 }, 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 } 123 else if (key == cc.key.right) { 124 var p = this.bar.getposition(); 125 p.x = p.x + 20; 126 this.bar.setposition(p); 127 } 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 }, ontouchbegan:function(touch, event) { 138 this.onkeypressed(cc.key.space, event); 139 }, onaccelerometer:function(accelero, event) { 142 if(0.2 < accelero.x){ 27

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 }, }); var MyScene = cc.scene.extend({ 153 onenter:function (){ 154 this._super(); 155 var layer = new MyLayer(); 156 layer.init(); 157 this.addchild(layer); 158 } 159 }); 28

29 cc.sprite.create() 絵のシート作り絵のかかれたシートを作ります var saru = cc.sprite.create("saru.png"); 29

30 Last

ゲームの作り方 3 さっちゃんとなわを出そう! 11 ジャンプさせよう! 17 なわを動かそう! 21 当たり判定をつけよう! 27 得点をつけよう! 31 絵にかえよう! 35 改造してみよう!

ゲームの作り方 3 さっちゃんとなわを出そう! 11 ジャンプさせよう! 17 なわを動かそう! 21 当たり判定をつけよう! 27 得点をつけよう! 31 絵にかえよう! 35 改造してみよう! さっちゃんとなわを出そう! presented by NaturalStyle Co.Ltd. 1 Program プログラム 1 var res = { 2 3 }; 4 5 var MyLayer =