Más contenido relacionado
La actualidad más candente (20)
Similar a enchant.js meetup Tokyo vol.2 Tutorial (20)
enchant.js meetup Tokyo vol.2 Tutorial
- 5. 有名なSTG
ゼビウス グラディウス R-TYPE
ナムコ 1982 コナミ 1985 アイレム 1987
- 7. 共通点は?
ゼビウス グラディウス R-TYPE
ナムコ 1982 コナミ 1985 アイレム 1987
- 15. もう少し細かく
1. 自機がでる 0.enchant.js初期化
2. 敵がでる 1.1自機を動かす
3. 弾を撃てる
2.1敵を動かす
4. 弾で敵を倒せる
3.1弾を動かす
5. ゲームオーバーになる
6. スコアがある
- 17. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 18. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 21. 1.enchant.js初期化
index.html
<html>
<head>
<script type=‘text/javascript’ src=‘enchant.js’></script>
<script type=‘text/javascript’ src=‘main.js’></script>
</head>
</html>
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.onload=function(){
console.log(‘Hello, enchant.js!!’);
};
game.start();
};
- 25. 1.enchant.js初期化
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.onload=function(){
console.log(‘Hello, enchant.js!!’);
};
game.start();
};
- 26. 1.enchant.js初期化
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
enchant.jsの読み込み
game.onload=function(){
console.log(‘Hello, enchant.js!!’); (おまじない)
};
game.start();
};
- 27. 1.enchant.js初期化
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.onload=function(){
ページ読み込み
console.log(‘Hello, enchant.js!!’);
}; 完了の処理の設定
game.start();
};
- 28. 1.enchant.js初期化
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.onload=function(){
console.log(‘Hello, enchant.js!!’); 実際の処理
};
game.start();
};
- 29. 1.enchant.js初期化
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320); Gameクラスの初期化
game.onload=function(){
console.log(‘Hello, enchant.js!!’);
};
game.start();
};
- 38. 1.enchant.js初期化
クラスとは?
データと関連する処理をひとまとめにした、意味の
ある一つのまとまり。
enchant.jsには、Game, Sprite, Labelなどいろいろな
クラスが存在する。
- 41. 1.enchant.js初期化
クラスの定義方法
enchant();
var MyClass = Class.create({
initialize:function(){
console.log(‘My Class Init’);
},
myMethod:function(){
console.log(‘My Method’);
}
});
var myInstance = new MyClass();
myInstance.myMethod();
- 42. 1.enchant.js初期化
クラスの定義方法
クラスの生成
enchant();
var MyClass = Class.create({
initialize:function(){
console.log(‘My Class Init’);
},
myMethod:function(){
console.log(‘My Method’);
}
});
var myInstance = new MyClass();
myInstance.myMethod();
- 43. 1.enchant.js初期化
クラスの定義方法
enchant();
var MyClass = Class.create({
initialize:function(){
console.log(‘My Class Init’);
},
myMethod:function(){
console.log(‘My Method’); 親クラス
}
});
var myInstance = new MyClass();
myInstance.myMethod();
- 44. 1.enchant.js初期化
クラスの定義方法
enchant();
var MyClass = Class.create({
initialize:function(){
console.log(‘My Class Init’);
},
myMethod:function(){
console.log(‘My Method’); コンストラクタ
}
});
var myInstance = new MyClass();
myInstance.myMethod();
- 45. 1.enchant.js初期化
クラスの定義方法
enchant();
var MyClass = Class.create({
initialize:function(){
console.log(‘My Class Init’);
},
myMethod:function(){
console.log(‘My Method’);
} メソッドの定義
});
var myInstance = new MyClass();
myInstance.myMethod();
- 46. 1.enchant.js初期化
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.onload=function(){ Gameクラスの
console.log(‘Hello, enchant.js!!’);
};
game.start(); 初期化完了の処理
};
- 47. 1.enchant.js初期化
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.onload=function(){
console.log(‘Hello, enchant.js!!’); ゲームの処理
};
game.start();
};
- 48. 1.enchant.js初期化
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.onload=function(){
console.log(‘Hello, enchant.js!!’);
};
game.start(); ゲームの開始
};
- 51. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 52. 2.自機を出す
1. enchant.jsに同梱のchara1.gifをフォルダに入れる
2. main.jsを以下のように書き換える
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.preload(‘chara1.gif’);
game.onload=function(){
var player=new Sprite(32, 32);
player.image=game.assets[‘chara1.gif’];
game.rootScene.addChild(player);
};
game.start();
};
- 56. 2.自機を出す
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.preload(‘chara1.gif’);
game.onload=function(){
var player=new Sprite(32, 32);
player.image=game.assets[‘chara1.gif’];
game.rootScene.addChild(player);
};
game.start();
};
- 57. 2.自機を出す
main.js
enchant();
window.onload=function(){ 画像の読み込み
var game=new Game(320, 320);
game.preload(‘chara1.gif’);
game.onload=function(){
var player=new Sprite(32, 32);
player.image=game.assets[‘chara1.gif’];
game.rootScene.addChild(player);
};
game.start();
};
- 62. 2.自機を出す
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.preload(‘chara1.gif’);
game.onload=function(){
var player=new Sprite(32, 32);
player.image=game.assets[‘chara1.gif’];
game.rootScene.addChild(player);
};
game.start();
};
- 63. 2.自機を出す
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.preload(‘chara1.gif’);
game.onload=function(){
var player=new Sprite(32, 32);
自機の生成
player.image=game.assets[‘chara1.gif’];
game.rootScene.addChild(player);
};
game.start();
};
- 72. 2.自機を出す
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.preload(‘chara1.gif’);
game.onload=function(){
var player=new Sprite(32, 32);
player.image=game.assets[‘chara1.gif’];
};
game.rootScene.addChild(player); 画像の設定
game.start();
};
- 79. 2.自機を出す
main.js
enchant();
window.onload=function(){
var game=new Game(320, 320);
game.preload(‘chara1.gif’);
game.onload=function(){
var player=new Sprite(32, 32);
player.image=game.assets[‘chara1.gif’];
game.rootScene.addChild(player);
};
};
game.start();
シーンに追加して表示
- 80. 2.自機を出す
game.rootScene.addChild(player);
enchant.Game enchant.Scene
enchant.Group
- 81. 2.自機を出す
game.rootScene.addChild(player);
enchant.Game enchant.Scene
enchant.Group
- 82. 2.自機を出す
game.rootScene.addChild(player);
enchant.Game enchant.Scene
enchant.Group
- 83. 2.自機を出す
game.rootScene.addChild(player);
enchant.Game enchant.Scene
enchant.Group
- 84. 2.自機を出す
game.rootScene.addChild(player);
enchant.Game enchant.Scene
enchant.Group
- 85. 2.自機を出す
game.rootScene.addChild(player);
enchant.Game enchant.Scene
enchant.Group
Gameの表示ツリーにplayerを追加する
- 86. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 87. 3.自機を動かす
1. main.jsを以下のように書き換える
main.js
enchant();
window.onload=function(){
//...中略...
player.image=game.assets[‘chara1.gif’];
game.rootScene.addChild(player);
game.rootScene.addEventListener(‘touchstart’, function(e){
player.y=e.y;
});
};
game.start();
};
- 92. 3.自機を動かす
main.js
enchant();
window.onload=function(){ 画面のタッチの処理の設定
//...中略...
player.image=game.assets[‘chara1.gif’];
game.rootScene.addChild(player);
game.rootScene.addEventListener(‘touchstart’, function(e){
player.y=e.y;
});
};
game.start();
};
- 94. 3.自機を動かす
main.js
enchant();
window.onload=function(){
//...中略...
player.image=game.assets[‘chara1.gif’];
game.rootScene.addChild(player);
game.rootScene.addEventListener(‘touchstart’, function(e){
player.y=e.y;
});
};
};
game.start();
タッチされたときの処理
- 96. 3.自機を動かす
main.js
enchant();
window.onload=function(){
//...中略...
player.image=game.assets[‘chara1.gif’];
game.rootScene.addChild(player);
game.rootScene.addEventListener(‘touchstart’, function(e){
player.y=e.y;
});
};
game.start();
};
- 97. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 98. 4.敵を出す
1. enchant.jsに同梱のchara2.gifをフォルダに入れる
2. main.jsを以下のように書き換える
main.js
//...中略...
game.preload(‘chara1.gif’, ‘chara2.gif’);
//...中略...
game.rootScene.addChild(player);
var enemy = new Sprite(32, 32);
enemy.image = game.assets[‘chara2.gif’];
enemy.x = 320 - 32;
enemy.y = 320 * Math.random();
game.rootScene.addChild(enemy);
game.rootScene.addEventListener(‘touchstart’, function(e){
//...中略...
- 101. 4.敵を出す
main.js 敵の画像の読み込み
//...中略...
game.preload(‘chara1.gif’, ‘chara2.gif’);
//...中略...
game.rootScene.addChild(player);
var enemy = new Sprite(32, 32);
enemy.image = game.assets[‘chara2.gif’];
enemy.x = 320 - 32;
enemy.y = (320 - 32) * Math.random();
game.rootScene.addChild(enemy);
game.rootScene.addEventListener(‘touchstart’, function(e){
//...中略...
- 105. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 110. 5.敵を動かす
main.js
//...中略...
enemy.x = 320 - 32;
game.rootScene.addChild(enemy);
enemy.addEventListener(‘enterframe’, function(){
this.x -= 2;
}); 敵の毎フレームの
game.rootScene.addEventListener(‘touchstart’, function(e){
//...中略... 処理の設定
- 111. 5.敵を動かす
main.js
//...中略...
enemy.x = 320 - 32;
game.rootScene.addChild(enemy);
enemy.addEventListener(‘enterframe’, function(){
this.x -= 2;
}); 自分の位置を
game.rootScene.addEventListener(‘touchstart’, function(e){
//...中略... 左に2px動かす
- 112. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 113. 6.弾を撃つ
1. icon0.gifをフォルダに追加
2. main.jsを以下のように書き換える
main.js
//...中略...
game.preload(‘chara1.gif’, ‘chara2.gif’, ‘icon0.gif’);
//...中略...
game.rootScene.addEventListener(‘touchstart’, function(e){
player.y = e.y;
var missile = new Sprite(16, 16);
missile.image = game.assets[‘icon0.gif’];
missile.frame = 54;
missile.x = player.x;
missile.y = player.y;
missile.addEventListener(‘enterframe’, function(){
this.x += 2;
});
game.rootScene.addChild(missile);
});
//...中略...
- 116. 6.弾を撃つ
弾画像の読み込み
main.js
//...中略...
game.preload(‘chara1.gif’, ‘chara2.gif’, ‘icon0.gif’);
//...中略...
game.rootScene.addEventListener(‘touchstart’, function(e){
player.y = e.y;
var missile=new Sprite(16, 16);
missile.image = game.assets[‘icon0.gif’];
missile.frame = 54;
missile.x = player.x;
missile.y = player.y;
missile.addEventListener(‘enterframe’, function(){
this.x += 2;
});
game.rootScene.addChild(missile);
});
//...中略...
- 120. 6.弾を撃つ
icon0.gif
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
64 65 66 67 68 69 70
- 121. 6.弾を撃つ
icon0.gif
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
48 49 50 51 52 53 55 56 57 58 59 60 61 62 63
64 65 66 67 68 69 70
- 124. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 129. 3.自機を動かす
Entity.intersect(s);
Entityの矩形が交差しているかどうかにより判定衝突
を行う。引数には対象のEntitiyをとる。このメソッド
はEntityクラスにて定義さているので、Spriteで利用可
能
- 133. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 146. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 153. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 154. 10.スコアを出す
1. main.jsを以下のように書き換える
main.js
//...中略...
enemies.push(enemy);
}
});
var label = new Label(“SCORE:0”);
game.rootScene.addChild(label);
var score = 0;
game.rootScene.addEventListener(‘touchstart’, function(e){
//...中略...
enemies.splice(i, 1);
score++;
label.text = “SCORE:” + score;
break;
//...中略...
- 156. 10.スコアを出す
main.js
//...中略...
enemies.push(enemy);
} ラベルの表示
});
var label = new Label(“SCORE:0”);
game.rootScene.addChild(label);
var score = 0;
game.rootScene.addEventListener(‘touchstart’, function(e){
//...中略...
enemies.splice(i, 1);
score++;
label.text = “SCORE:” + score;
break;
//...中略...
- 157. 10.スコアを出す
main.js
//...中略...
enemies.push(enemy);
}
});
var label = new Label(“SCORE:0”);
game.rootScene.addChild(label); スコアの初期化
var score = 0;
game.rootScene.addEventListener(‘touchstart’, function(e){
//...中略...
enemies.splice(i, 1);
score++;
label.text = “SCORE:” + score;
break;
//...中略...
- 158. 10.スコアを出す
main.js
//...中略...
enemies.push(enemy);
}
});
var label = new Label(“SCORE:0”);
game.rootScene.addChild(label);
var score = 0;
game.rootScene.addEventListener(‘touchstart’, function(e){
//...中略...
enemies.splice(i, 1);
score++;
スコアの増加
label.text = “SCORE:” + score;
break;
//...中略...
- 159. 10.スコアを出す
main.js
//...中略...
enemies.push(enemy);
}
});
var label = new Label(“SCORE:0”);
game.rootScene.addChild(label);
var score = 0;
game.rootScene.addEventListener(‘touchstart’, function(e){
//...中略...
enemies.splice(i, 1);
score++;
表示の更新
label.text = “SCORE:” + score;
break;
//...中略...
- 160. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 161. あなたがシューティングゲームを
作るのに必要なたった10個の要素 625 users
1. enchant.js初期化 6. 弾を撃つ
済
2. 自機を出す 7. 弾で敵を倒す
3. 自機を動かす 8. 敵をたくさん出す
4. 敵を出す 9. ゲームオーバーを作る
5. 敵を動かす 10.スコアを出す
http://chephes.com/meetup/
- 162. 1 enchant();
2 window.onload=function(){
3 var game=new Game(320, 320);
4 game.preload('chara1.gif', 'chara2.gif','icon0.gif');
5 game.onload=function(){
6 ! var player=new Sprite(32,32);
7 ! player.image=game.assets['chara1.gif'];
8 ! game.rootScene.addChild(player);
9 ! var enemies = [];
10 ! game.rootScene.addEventListener('enterframe', function(){
11 ! ! if(Math.random() < 0.1){
12 ! ! ! var enemy=new Sprite(32, 32);
13 ! ! ! enemy.image=game.assets['chara2.gif'];
14 ! ! ! enemy.x = 320 - 32;
15 ! ! ! enemy.y = (320 - 32) * Math.random();
16 ! ! ! game.rootScene.addChild(enemy);
17 ! ! ! enemy.addEventListener('enterframe', function(){
18 ! ! ! ! this.x -= 2;
19 ! ! ! ! if(player.intersect(this)){
20 ! ! ! ! ! game.stop();
21 ! ! ! ! ! var label = new Label('GAME OVER');
22 ! ! ! ! ! label.font = '32px sans-serif';
23 ! ! ! ! ! label.x = 50;
24 ! ! ! ! ! label.y = 150;
25 ! ! ! ! ! game.rootScene.addChild(label);
26 ! ! ! ! }
27 ! ! ! });
28 ! ! ! enemies.push(enemy);
29 ! ! }
30 ! });
- 163. 31 ! var label = new Label("SCORE:0");
32 ! game.rootScene.addChild(label);
33 ! var score = 0;
34 ! game.rootScene.addEventListener('touchstart', function(e){
35 ! ! player.y=e.y;
36 ! ! var missile=new Sprite(16,16);
37 ! ! missile.image=game.assets['icon0.gif'];
38 ! ! missile.frame=54;
39 ! ! missile.x=player.x;
40 ! ! missile.y=player.y;
41 ! ! missile.addEventListener('enterframe',function(){
42 ! ! ! this.x += 2;
43 ! ! ! for(var i = 0; i < enemies.length; i++){
44 ! ! ! ! if(enemies[i].intersect(this)){
45 ! ! ! ! ! game.rootScene.removeChild(enemies[i]);
46 ! ! ! ! ! game.rootScene.removeChild(this);
47 ! ! ! ! ! enemies.splice(i, 1);
48 ! ! ! ! ! score++;
49 ! ! ! ! ! label.text = "SCORE:" + score;
50 ! ! ! ! ! break;
51 ! ! ! ! }
52 ! ! ! }
53 ! ! });
54 ! ! game.rootScene.addChild(missile);
55 ! });
56 };
57 game.start();
58 };