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

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

2. 本日の目標
パックマンを追いかけるアカベーを作る！
• オブジェクトを理解して、キャラクターを
オブジェクトとして表現する
• オブジェクト間のメッセージを理解する
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

3. ECMAScript
(European Computer Manufacturers Association Script)
• Netscape と Microsoft が主となって策定した
言語仕様
• JavaScript はこの仕様に則って作られた
言語の一つ
• ECMAScript はオブジェクト指向
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

4. ECMAScript
(European Computer Manufacturers Association Script)
• Netscape と Microsoft が主となって策定した
言語仕様
• JavaScript はこの仕様に則って作られた
言語の一つ
• ECMAScript はオブジェクト指向
デファクトスタンダード
例: Python, Java, Ruby, etc.
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

5. オブジェクト指向
プログラムをオブジェクトの集合と
オブジェクト間のメッセージのやり取りで構築
オブジェクト: 属性とメソッドの集合
どこ？
x = 50, y=50
パックマンオブジェクト アカベーオブジェクト
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

6. 今までのコード
function drawPacman(ctx ,cx, cy, theta){
ctx.strokeStyle="#FF0000";
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(cx, cy, 50, theta * Math.PI / 180,
(360 - theta) * Math.PI / 180);
ctx.lineTo(cx, cy);
ctx.lineTo(cx + 50 * Math.cos(theta * Math.PI / 180),
cy + 50 * Math.sin(theta * Math.PI / 180));
ctx.fill();
}
パックマンを描くという関数 (機能) をブラウザに組み込んだ
パックマンというモノは明確には存在していない
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

7. オブジェクトの作り方・使い方
• コンストラクタ (オブジェクトのレシピを
持ったコックさん) を定義する
• コンストラクタにインスタンス (オブジェクト)
を作ってもらう
Pacman の コンストラクタ
属性
• 位置
• 口の開き具合
メソッド
• 移動
• 口パク
パックマン
インスタンス
生成
(インスタンス化)
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

8. アカベーの例
Akabei の コンストラクタ
属性
• 位置
メソッド
• 移動
インスタンス化
インスタンス化
インスタンス化
それぞれのアカベーはメモリの別々の領域に存在
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

9. コンストラクタの定義と使い方
var Pacman = function(cx, cy, speed, theta) {
this.position = [cx, cy];
this.movingDirection = [0, 0];
this.speed = speed;
this.theta = theta;
}
Pacman.prototype = {
get_position: function () {
return this.position;
}
}
pacman = new Pacman(50, 50, 2, 30);
position = pacman.get_position();MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

10. コンストラクタの定義と使い方
var Pacman = function(cx, cy, speed, theta) {
this.position = [cx, cy];
this.movingDirection = [0, 0];
this.speed = speed;
this.theta = theta;
}
Pacman.prototype = {
move: function () {
this.position = [cx + 1, this.cy];
}
}
var pacman = new Pacman(50, 50, 2, 30);
pacman.move();
パックマンの属性とともに
コンストラクタを定義して
Pacman という名前をつける
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

11. コンストラクタの定義と使い方
var Pacman = function(cx, cy, speed, theta) {
this.position = [cx, cy];
this.movingDirection = [0, 0];
this.speed = speed;
this.theta = theta;
}
Pacman.prototype = {
move: function () {
this.position = [cx + 1, this.cy];
}
}
var pacman = new Pacman(50, 50, 2, 30);
pacman.move();
定義した Pacman コンストラクタ
にメソッドを定義
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

12. コンストラクタの定義と使い方
var Pacman = function(cx, cy, speed, theta) {
this.position = [cx, cy];
this.movingDirection = [0, 0];
this.speed = speed;
this.theta = theta;
}
Pacman.prototype = {
move: function () {
this.position = [cx + 1, this.cy];
}
}
var pacman = new Pacman(50, 50, 2, 30);
pacman.move();
定義した Pacman コンストラクタを用いて
インスタンスを作り、pacman と命名
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

13. コンストラクタの定義と使い方
var Pacman = function(cx, cy, speed, theta) {
this.position = [cx, cy];
this.movingDirection = [0, 0];
this.speed = speed;
this.theta = theta;
}
Pacman.prototype = {
move: function () {
this.position = [cx + 1, this.cy];
}
}
var pacman = new Pacman(50, 50, 2, 30);
pacman.move();
pacman に move() とメッセージを送信
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko

14. ソースコードの在り処
https://github.com/morningprojectsamurai/mpssd_pacman20151024
ソースコードにコメントが書いてあるので、
それを見ながら自分で作ってみよう !
まずは 20151024.html を見てみよう !
MPS Setagaya 第8回 (2015/10/24) ミーティング (c) Junya Kaneko