MPS Setagaya 第10回ミーティング資料です。 GitHub https://github.com/morningprojectsamurai/mpssd_pacman_20151129 --- MPSは東京で活動しているクリエイティブなキャリアをつくるための場の活動です。 Websiteはこちらです！ https://mpsamurai.org/ コミュニティ/イベント告知はDoorkeeperでおこなっています。 https://mpsamurai.doorkeeper.jp/events 興味がある方はぜひご参加ください〜！

1. MPS Setagaya 第10回 (2015/11/29) ミーティング
JavaScript でパックマン! 第7回
金子純也
Morning Project Samurai 代表
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

2. 本日の目標
• パックマンを追跡し殺すあかべーを作り動かす!
- JavaScript における継承の実現
コードは mpssd_pacman_20151129 で github.com を検索 !
https://github.com/morningprojectsamurai/mpssd_pacman_20151129MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

3. 継承
Character
Pacman と Akabeiに
共通の性質 (properties)と
機能 (methods) を持つ
Character の properties と methodsに加え
独自のものも持つ
親
子
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

4. 継承の利点
• キャラを楽に増やすことが可能!
• 保守や変更が楽!
全てのキャラに共通のコードは再利用可能
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

5. オブジェクトの作成
• Step1:
コンストラクタの作成 (Properties の定義)
var Pacman = function (radius, speed, theta, …) {
this.radius = radius;
…
}
• Step2:
メソッドの定義
Pacman.prototype.move = function() {
…
}
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

6. JavaScript における継承の実現
• ステップ1:
キャラクターに共通の properties と methods を
持ったオブジェクト Character を作成
• ステップ2:
具体的なキャラクタのオブジェクトを作成
- Character オブジェクトのコンストラクタを
内部で呼び出し、Character オブジェクトの
Prototype を Prototype として持つ
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

7. Character と Pacman オブジェクト
var Character = function (speed, map, row, col) {…};
Character.prototype.move = function() {…};
var inheritFromCharacter = function (childClass) {
var CharacterTempConstructor = function () {
};
CharacterTempConstructor.prototype = Character.prototype;
childClass.prototype = new CharacterTempConstructor();
childClass.prototype.constructor = childClass;
};
var Pacman = function (radius, speed, theta, map, row, col) {
Character.call(this, speed, map, row, col);
…
};
inheritFromCharacter(Pacman);
Pacman.prototype.getRadius = function () {…};
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

8. Character と Pacman オブジェクト
var Character = function (speed, map, row, col) {…};
Character.prototype.move = function() {…};
var inheritFromCharacter = function (childClass) {
var CharacterTempConstructor = function () {
};
CharacterTempConstructor.prototype = Character.prototype;
childClass.prototype = new CharacterTempConstructor();
childClass.prototype.constructor = childClass;
};
var Pacman = function (radius, speed, theta, map, row, col) {
Character.call(this, speed, map, row, col);
…
};
inheritFromCharacter(Pacman);
Pacman.prototype.getRadius = function () {…};
Character オブジェクト
のコンストラクタの定義
とメソッドの定義
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

9. Character と Pacman オブジェクト
var Character = function (speed, map, row, col) {…};
Character.prototype.move = function() {…};
var inheritFromCharacter = function (childClass) {
var CharacterTempConstructor = function () {
};
CharacterTempConstructor.prototype = Character.prototype;
childClass.prototype = new CharacterTempConstructor();
childClass.prototype.constructor = childClass;
};
var Pacman = function (radius, speed, theta, map, row, col) {
Character.call(this, speed, map, row, col);
…
};
inheritFromCharacter(Pacman);
Pacman.prototype.getRadius = function () {…};
Character オブジェクトのメソッドを持つ
CharacterTempConsutuctor オブジェクトを
作成し子のプロトタイプとして設定する関数
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

10. Character と Pacman オブジェクト
var Character = function (speed, map, row, col) {…};
Character.prototype.move = function() {…};
var inheritFromCharacter = function (childClass) {
var CharacterTempConstructor = function () {
};
CharacterTempConstructor.prototype = Character.prototype;
childClass.prototype = new CharacterTempConstructor();
childClass.prototype.constructor = childClass;
};
var Pacman = function (radius, speed, theta, map, row, col) {
Character.call(this, speed, map, row, col);
…
};
inheritFromCharacter(Pacman);
Pacman.prototype.getRadius = function () {…};
Pacman オブジェクトの Properties のうち、
Character オブジェクトの持つものを
Character コンストラクタを用いて初期化
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

11. Character と Pacman オブジェクト
var Character = function (speed, map, row, col) {…};
Character.prototype.move = function() {…};
var inheritFromCharacter = function (childClass) {
var CharacterTempConstructor = function () {
};
CharacterTempConstructor.prototype = Character.prototype;
childClass.prototype = new CharacterTempConstructor();
childClass.prototype.constructor = childClass;
};
var Pacman = function (radius, speed, theta, map, row, col) {
Character.call(this, speed, map, row, col);
…
};
inheritFromCharacter(Pacman);
Pacman.prototype.getRadius = function () {…};
Pacman オブジェクトに Character オブジェクト
の持つ methods を継承させる。
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

12. Character と Pacman オブジェクト
var Character = function (speed, map, row, col) {…};
Character.prototype.move = function() {…};
var inheritFromCharacter = function (childClass) {
var CharacterTempConstructor = function () {
};
CharacterTempConstructor.prototype = Character.prototype;
childClass.prototype = new CharacterTempConstructor();
childClass.prototype.constructor = childClass;
};
var Pacman = function (radius, speed, theta, map, row, col) {
Character.call(this, speed, map, row, col);
…
};
inheritFromCharacter(Pacman);
Pacman.prototype.getRadius = function () {…};
Pacman オブジェクト独自の method を定義
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

13. Q: Pacman とあかべーに共通する
properties と methods は何だろう?
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

14. Q: Pacman とあかべーに共通する
properties と methods は何だろう?
• マップ上の移動に関する properties と methods
• 他のキャラとの距離を測る method
• etc.
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

15. 当たり判定
d
(px, py) (ax, ay)
接触 ⇄ d <= max(あかべーの半径, Pacman の半径)
(Character.getDistance メソッド参照)
(Akabei.killPacman メソッド参照)
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

16. おバカなだけど割と手強いあかべー
• ステップ1:
水平方向に動くか垂直方向に動くかランダムに
決定
• ステップ2:
パックマンとの位置関係から詳細な移動方向を
決定
例: ステップ1 で水平方向を選択した場合は右左を決定
(Akabei.decideDirection 参照)
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko

17. Q: 自分なりのあかべーアルゴリズムを
作ってみよう!
MPS Setagaya 第10回 (2015/11/29) ミーティング資料 (c) Junya Kaneko