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

(1)

(2)

ゲームの作り方

3 さっちゃんとなわを出そう！

11 ジャンプさせよう！

17 なわを動かそう！

21 当たり判定をつけよう！

27 得点をつけよう！

31 絵にかえよう！

35 改造してみよう！

(3)

presented by

NaturalStyle Co.Ltd.

1

(4)

Program

プログラム

1 var res = { 2 3 }; 4 5 var MyLayer = cc.KidspodLayer.extend({ 6 7 nawa:null, 8 hito:null, 9 ground_y:0, 10 11 init:function(){ 12 this._super(); 13 this.scheduleUpdate(); 14 var size = cc.director.getWinSize(); 15 16 console.log("start"); 17 this.ground_y = 50; 18 19 this.nawa = cc.LabelTTF.create("----"); 20 this.nawa.setPosition(30, this.ground_y); 21 this.addChild(this.nawa); 22 23 this.hito = cc.LabelTTF.create("@"); 24 this.hito.setPosition(size.width/2, this.ground_y); 25 this.addChild(this.hito); 26 27 return true; 28 }, 29 30 update:function(dt){ 31 32 }, 33 34 onMouseDown:function(event) { 35 36 }, 37 38 onKeyPressed:function(key, event) { 39 40 }, 41 42 onTouchBegan:function(touch, event) { 43 44 }, 45 46 onAccelerometer:function(accelero, event) { 47 48 }, 49 }); 50 51 var MyScene = cc.Scene.extend({ 52 onEnter:function (){ 53 this._super(); 54 var layer = new MyLayer(); 55 layer.init(); 56 this.addChild(layer); 57 } 58 });

(5)

What is program?

プログラムって？

5

What is program?

プログラムって？

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

(6)

What is program?

プログラムって？

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)

console.log()

ログ

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

What is game ?

ゲームって？

(9)

console.log()

ログ

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

cc.director.getWinSize()

画面の大きさ調べ

(10)

cc.LabelTTF.create()

シート作り

var hippo = cc.LabelTTF.create(" ヒッポ”); this.addChild(hippo); hippo.setPosition(100, 20); 文字の書かれたシートを作ります。ステージにシートを置きます。シートの場所を指定します。

addChild()

シート置き

setPosition()

場所決め

(11)

presented by

NaturalStyle Co.Ltd.

ジャンプさせよう！

(12)

Program

プログラム

1 var res = { 2 3 }; 4 5 var MyLayer = cc.KidspodLayer.extend({ 6 7 nawa:null, 8 hito:null, 9 hito_Vy:0, 10 ground_y:0, 11 12 init:function(){ 13 this._super(); 14 this.scheduleUpdate(); 15 var size = cc.director.getWinSize(); 16 17 console.log("start"); 18 this.ground_y = 50; 19 20 this.nawa = cc.LabelTTF.create("----"); 21 this.nawa.setPosition(30, this.ground_y); 22 this.addChild(this.nawa); 23 24 this.hito = cc.LabelTTF.create("@"); 25 this.hito.setPosition(size.width/2, this.ground_y); 26 this.addChild(this.hito); 27 28 return true; 29 }, 30 31 update:function(dt){ 32 var hito_x = this.hito.getPosition().x; 33 var hito_y = this.hito.getPosition().y; 34 this.hito.setPosition(hito_x, hito_y + this.hito_Vy); 35 if(this.hito.getPosition().y > this.ground_y){ 36 this.hito_Vy = this.hito_Vy - 0.1; 37 } 38 else if(this.hito.getPosition().y < this.ground_y){ 39 this.hito.setPosition(hito_x, this.ground_y); 40 this.hito_Vy = 0; 41 } 42 }, 43 44 onMouseDown:function(event) { 45 46 }, 47 48 onKeyPressed:function(key, event) { 49 this.hito_Vy = 5; 50 }, 51 52 onTouchBegan:function(touch, event) { 53 54 }, 55 56 onAccelerometer:function(accelero, event) { 57 58 }, 59 }); 60 61 var MyScene = cc.Scene.extend({ 62 onEnter:function (){ 63 this._super(); 64 var layer = new MyLayer(); 65 layer.init(); 66 this.addChild(layer); 67 } 68 });

(13)

What is program?

プログラムって？

13 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

分かれ道

(14)

var hito_x = this.hito.getPosition().x; シートの場所を調べます。

getPosition()

場所調べ

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

update : function() { … }

更新の横道

(15)

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

onKeyPressed : function() { … }

キーボードの横道

(16)

(17)

presented by

NaturalStyle Co.Ltd.

3

(18)

Program

プログラム

1 var res = { 2 3 }; 4 5 var MyLayer = cc.KidspodLayer.extend({ 6 7 nawa:null, 8 nawa_Vx:0, 9 hito:null, 10 hito_Vy:0, 11 ground_y:0, 12 13 init:function(){ 14 this._super(); 15 this.scheduleUpdate(); 16 var size = cc.director.getWinSize(); 17 18 console.log("start"); 19 this.ground_y = 50; 20 21 this.nawa = cc.LabelTTF.create("----"); 22 this.nawa.setPosition(30, this.ground_y); 23 this.addChild(this.nawa); 24 25 this.hito = cc.LabelTTF.create("@"); 26 this.hito.setPosition(size.width/2, this.ground_y); 27 this.addChild(this.hito); 28 29 return true; 30 }, 31 32 update:function(dt){ 33 var size = cc.director.getWinSize(); 34 var nawa_x = this.nawa.getPosition().x + this.nawa_Vx; 35 var nawa_y = this.nawa.getPosition().y; 36 this.nawa.setPosition(nawa_x, nawa_y); 37 if(nawa_x < size.width/2){ 38 this.nawa_Vx = this.nawa_Vx + 0.1; 39 } 40 else if(nawa_x > size.width/2){ 41 this.nawa_Vx = this.nawa_Vx - 0.1; 42 } 43 44 var hito_x = this.hito.getPosition().x; 45 var hito_y = this.hito.getPosition().y; 46 this.hito.setPosition(hito_x, hito_y + this.hito_Vy); 47 if(this.hito.getPosition().y > this.ground_y){ 48 this.hito_Vy = this.hito_Vy - 0.1; 49 } 50 else if(this.hito.getPosition().y < this.ground_y){ 51 this.hito.setPosition(hito_x, this.ground_y); 52 this.hito_Vy = 0; 53 } 54 }, 55 56 onMouseDown:function(event) { 57 58 }, 59 60 onKeyPressed:function(key, event) { 61 this.hito_Vy = 5; 62 }, 63 64 onTouchBegan:function(touch, event) { 65 66 }, 67 68 onAccelerometer:function(accelero, event) { 69

(19)

19 70 }, 71 }); 72 73 var MyScene = cc.Scene.extend({ 74 onEnter:function (){ 75 this._super(); 76 var layer = new MyLayer(); 77 layer.init(); 78 this.addChild(layer); 79 } 80 });

(20)

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

else if

３本以上の分かれ道

(21)

presented by

NaturalStyle Co.Ltd.

当たり判定をつけよう！

(22)

Program

プログラム

1 var res = { 2 3 }; 4 5 var MyLayer = cc.KidspodLayer.extend({ 6 7 nawa:null, 8 nawa_Vx:0, 9 hito:null, 10 hito_Vy:0, 11 ground_y:0, 12 13 init:function(){ 14 this._super(); 15 this.scheduleUpdate(); 16 var size = cc.director.getWinSize(); 17 18 console.log("start"); 19 this.ground_y = 50; 20 21 this.nawa = cc.LabelTTF.create("----"); 22 this.nawa.setPosition(30, this.ground_y); 23 this.addChild(this.nawa); 24 25 this.hito = cc.LabelTTF.create("@"); 26 this.hito.setPosition(size.width/2, this.ground_y); 27 this.addChild(this.hito); 28 29 return true; 30 }, 31 32 update:function(dt){ 33 var size = cc.director.getWinSize(); 34 var distance = this.hito.getPosition().x - this.nawa.getPosition().x; 35 if(distance < 0){ 36 distance = distance * -1; 37 } 38 if(distance < this.hito.getContentSize().width/3 + this.nawa.getContentSize().width/3){ 39 if(this.hito.getPosition().y <= this.ground_y){ 40 var gameover = cc.LabelTTF.create("GameOver"); 41 this.addChild(gameover); 42 gameover.setPosition(size.width/2, 380); 43 this.unscheduleUpdate(); 44 } 45 } 46 47 var nawa_x = this.nawa.getPosition().x + this.nawa_Vx; 48 var nawa_y = this.nawa.getPosition().y; 49 this.nawa.setPosition(nawa_x, nawa_y); 50 if(nawa_x < size.width/2){ 51 this.nawa_Vx = this.nawa_Vx + 0.1; 52 } 53 else if(nawa_x > size.width/2){ 54 this.nawa_Vx = this.nawa_Vx - 0.1; 55 } 56 57 var hito_x = this.hito.getPosition().x; 58 var hito_y = this.hito.getPosition().y; 59 this.hito.setPosition(hito_x, hito_y + this.hito_Vy); 60 if(this.hito.getPosition().y > this.ground_y){ 61 this.hito_Vy = this.hito_Vy - 0.1; 62 } 63 else if(this.hito.getPosition().y < this.ground_y){ 64 this.hito.setPosition(hito_x, this.ground_y); 65 this.hito_Vy = 0; 66 } 67 }, 68 69 onMouseDown:function(event) {

(23)

23 70 71 }, 72 73 onKeyPressed:function(key, event) { 74 this.hito_Vy = 5; 75 }, 76 77 onTouchBegan:function(touch, event) { 78 79 }, 80 81 onAccelerometer:function(accelero, event) { 82 83 }, 84 }); 85 86 var MyScene = cc.Scene.extend({ 87 onEnter:function (){ 88 this._super(); 89 var layer = new MyLayer(); 90 layer.init(); 91 this.addChild(layer); 92 } 93 });　　　　　　

(24)

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

function

横道

(25)

25

this.unscheduleUpdate(); 更新の道に入らなくなります。

unscheduleUpdate()

更新の停止

(26)

(27)

presented by

NaturalStyle Co.Ltd.

5

(28)

Program

プログラム

1 var res = { 2 3 }; 4 5 var MyLayer = cc.KidspodLayer.extend({ 6 7 nawa:null, 8 nawa_Vx:0, 9 hito:null, 10 hito_Vy:0, 11 ground_y:0, 12 tokuten:null, 13 tokuten_value:0, 14 15 init:function(){ 16 this._super(); 17 this.scheduleUpdate(); 18 var size = cc.director.getWinSize(); 19 20 console.log("start"); 21 this.ground_y = 50; 22 23 this.nawa = cc.LabelTTF.create("----"); 24 this.nawa.setPosition(30, this.ground_y); 25 this.addChild(this.nawa); 26 27 this.hito = cc.LabelTTF.create("@"); 28 this.hito.setPosition(size.width/2, this.ground_y); 29 this.addChild(this.hito); 30 31 this.tokuten = cc.LabelTTF.create("0"); 32 this.tokuten.setPosition(size.width/2, 400); 33 this.addChild(this.tokuten); 34 35 return true; 36 }, 37 38 update:function(dt){ 39 var size = cc.director.getWinSize(); 40 var distance = this.hito.getPosition().x - this.nawa.getPosition().x; 41 if(distance < 0){ 42 distance = distance * -1; 43 } 44 if(distance < this.hito.getContentSize().width/3 + this.nawa.getContentSize().width/3){ 45 if(this.hito.getPosition().y <= this.ground_y){ 46 var gameover = cc.LabelTTF.create("GameOver"); 47 this.addChild(gameover); 48 gameover.setPosition(size.width/2, 380); 49 this.unscheduleUpdate(); 50 } 51 } 52 53 var nawa_x = this.nawa.getPosition().x + this.nawa_Vx; 54 var nawa_y = this.nawa.getPosition().y; 55 this.nawa.setPosition(nawa_x, nawa_y); 56 if(nawa_x < size.width/2){ 57 this.nawa_Vx = this.nawa_Vx + 0.1; 58 } 59 else if(nawa_x > size.width/2){ 60 this.nawa_Vx = this.nawa_Vx - 0.1; 61 } 62 63 var hito_x = this.hito.getPosition().x; 64 var hito_y = this.hito.getPosition().y; 65 this.hito.setPosition(hito_x, hito_y + this.hito_Vy); 66 if(this.hito.getPosition().y > this.ground_y){ 67 this.hito_Vy = this.hito_Vy - 0.1; 68 } 69 else if(this.hito.getPosition().y < this.ground_y){

(29)

29 70 this.hito.setPosition(hito_x, this.ground_y); 71 this.hito_Vy = 0; 72 this.tokuten_value = this.tokuten_value + 1; 73 this.tokuten.setString(this.tokuten_value); 74 } 75 }, 76 77 onMouseDown:function(event) { 78 79 }, 80 81 onKeyPressed:function(key, event) { 82 this.hito_Vy = 5; 83 }, 84 85 onTouchBegan:function(touch, event) { 86 87 }, 88 89 onAccelerometer:function(accelero, event) { 90 91 }, 92 }); 93 94 var MyScene = cc.Scene.extend({ 95 onEnter:function (){ 96 this._super(); 97 var layer = new MyLayer(); 98 layer.init(); 99 this.addChild(layer); 100 } 101 });　　　　　　

(30)

var hippo = cc.LabelTTF.create("hippo"); hippo.setString("danbun");

文字で作られたシートの中身をかきかえます。

setString()

(31)

presented by

NaturalStyle Co.Ltd.

6

(32)

Program

プログラム

1 var res = { 2 3 }; 4 5 var MyLayer = cc.KidspodLayer.extend({ 6 7 nawa:null, 8 nawa_Vx:0, 9 hito:null, 10 hito_Vy:0, 11 ground_y:0, 12 tokuten:null, 13 tokuten_value:0, 14 15 init:function(){ 16 this._super(); 17 this.scheduleUpdate(); 18 var size = cc.director.getWinSize(); 19 20 var back = cc.Sprite.create("res/nawatobi/back.png"); 21 back.setPosition(size.width/2, size.height/2); 22 this.addChild(back); 23 24 console.log("start"); 25 this.ground_y = 50; 26 27 this.nawa = cc.Sprite.create("res/nawatobi/nawa.png"); 28 this.nawa.setPosition(30, this.ground_y); 29 this.addChild(this.nawa); 30 31 this.hito = cc.Sprite.create("res/nawatobi/sachiko01.png"); 32 this.hito.setPosition(size.width/2, this.ground_y); 33 this.addChild(this.hito); 34 35 this.tokuten = cc.LabelTTF.create("0"); 36 this.tokuten.setPosition(size.width/2, 400); 37 this.addChild(this.tokuten); 38 39 return true; 40 }, 41 42 update:function(dt){ 43 var size = cc.director.getWinSize(); 44 var distance = this.hito.getPosition().x - this.nawa.getPosition().x; 45 if(distance < 0){ 46 distance = distance * -1; 47 } 48 if(distance < this.hito.getContentSize().width/3 + this.nawa.getContentSize().width/3){ 49 if(this.hito.getPosition().y <= this.ground_y){ 50 var gameover = cc.LabelTTF.create("GameOver"); 51 this.addChild(gameover); 52 gameover.setPosition(size.width/2, 380); 53 this.unscheduleUpdate(); 54 } 55 } 56 57 var nawa_x = this.nawa.getPosition().x + this.nawa_Vx; 58 var nawa_y = this.nawa.getPosition().y; 59 this.nawa.setPosition(nawa_x, nawa_y); 60 if(nawa_x < size.width/2){ 61 this.nawa_Vx = this.nawa_Vx + 0.1; 62 } 63 else if(nawa_x > size.width/2){ 64 this.nawa_Vx = this.nawa_Vx - 0.1; 65 } 66 67 var hito_x = this.hito.getPosition().x; 68 var hito_y = this.hito.getPosition().y; 69 this.hito.setPosition(hito_x, hito_y + this.hito_Vy);

(33)

33 70 if(this.hito.getPosition().y > this.ground_y){ 71 this.hito_Vy = this.hito_Vy - 0.1; 72 } 73 else if(this.hito.getPosition().y < this.ground_y){ 74 this.hito.setPosition(hito_x, this.ground_y); 75 this.hito_Vy = 0; 76 this.tokuten_value = this.tokuten_value + 1; 77 this.tokuten.setString(this.tokuten_value); 78 } 79 }, 80 81 onMouseDown:function(event) { 82 83 }, 84 85 onKeyPressed:function(key, event) { 86 this.hito_Vy = 5; 87 }, 88 89 onTouchBegan:function(touch, event) { 90 91 }, 92 93 onAccelerometer:function(accelero, event) { 94 95 }, 96 }); 97 98 var MyScene = cc.Scene.extend({ 99 onEnter:function (){ 100 this._super(); 101 var layer = new MyLayer(); 102 layer.init(); 103 this.addChild(layer); 104 } 105 });　　　　　　

(34)

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

cc.Sprite.create()

絵のシート作り

(35)

presented by

NaturalStyle Co.Ltd.

ex

(36)

Program

プログラム

1 var res = { 2 back:"res/nawatobi/back.png", 3 nawa:"res/nawatobi/nawa.png", 4 sachiko01:"res/nawatobi/sachiko01.png", 5 sachiko02:"res/nawatobi/sachiko02.png", 6 }; 7 8 var MyLayer = cc.KidspodLayer.extend({ 9 10 nawa:null, 11 nawa_Vx:0, 12 hito:null, 13 hito_Vy:0, 14 ground_y:0, 15 tokuten:null, 16 tokuten_value:0, 17 18 init:function(){ 19 this._super(); 20 this.scheduleUpdate(); 21 var size = cc.director.getWinSize(); 22 23 var back = cc.Sprite.create(res.back); 24 back.setPosition(size.width/2, size.height/2); 25 this.addChild(back); 26 27 console.log("start"); 28 this.ground_y = 50; 29 30 this.nawa = cc.Sprite.create(res.nawa); 31 this.nawa.setPosition(30, this.ground_y); 32 this.addChild(this.nawa); 33 34 this.hito = cc.Sprite.create(res.sachiko01); 35 this.hito.setPosition(size.width/2, this.ground_y); 36 this.addChild(this.hito); 37 38 this.tokuten = cc.LabelTTF.create("0"); 39 this.tokuten.setPosition(size.width/2, 400); 40 this.addChild(this.tokuten); 41 42 return true; 43 }, 44 45 update:function(dt){ 46 var size = cc.director.getWinSize(); 47 var distance = this.hito.getPosition().x - this.nawa.getPosition().x; 48 if(distance < 0){ 49 distance = distance * -1; 50 } 51 if(distance < this.hito.getContentSize().width/3 + this.nawa.getContentSize().width/3){ 52 if(this.hito.getPosition().y <= this.ground_y){ 53 var gameover = cc.LabelTTF.create("GameOver"); 54 this.addChild(gameover); 55 gameover.setPosition(size.width/2, 380); 56 this.unscheduleUpdate(); 57 } 58 } 59 60 var nawa_x = this.nawa.getPosition().x + this.nawa_Vx; 61 var nawa_y = this.nawa.getPosition().y; 62 this.nawa.setPosition(nawa_x, nawa_y); 63 if(nawa_x < size.width/2){ 64 this.nawa_Vx = this.nawa_Vx + 0.1; 65 } 66 else if(nawa_x > size.width/2){ 67 this.nawa_Vx = this.nawa_Vx - 0.1; 68 } 69

(37)

37 70 var hito_x = this.hito.getPosition().x; 71 var hito_y = this.hito.getPosition().y; 72 this.hito.setPosition(hito_x, hito_y + this.hito_Vy); 73 if(this.hito.getPosition().y > this.ground_y){ 74 this.hito_Vy = this.hito_Vy - 0.1; 75 } 76 else if(this.hito.getPosition().y < this.ground_y){ 77 this.hito.setPosition(hito_x, this.ground_y); 78 this.hito.setTexture(res.sachiko01); 79 this.hito_Vy = 0; 80 this.tokuten_value = this.tokuten_value + 1; 81 this.tokuten.setString(this.tokuten_value); 82 } 83 }, 84 85 onMouseDown:function(event) { 86 87 }, 88 89 onKeyPressed:function(key, event) { 90 this.hito.setTexture(res.sachiko02); 91 this.hito_Vy = 5; 92 }, 93 94 onTouchBegan:function(touch, event) { 95 96 }, 97 98 onAccelerometer:function(accelero, event) { 99 100 }, 101 }); 102 103 var MyScene = cc.Scene.extend({ 104 onEnter:function (){ 105 this._super(); 106 var layer = new MyLayer(); 107 layer.init(); 108 this.addChild(layer); 109 } 110 });　　　　　　

(38)