JavaScript でパックマン！第7回 (一旦最終回)
?
0 likes?713 views
MPS Setagaya 第10回ミーティング資料です。 GitHub https://github.com/morningprojectsamurai/mpssd_pacman_20151129 --- MPSは東京で活動しているクリエイティブなキャリアをつくるための場の活動です。 Websiteはこちらです！ https://mpsamurai.org/ コミュニティ/イベント告知はDoorkeeperでおこなっています。 https://mpsamurai.doorkeeper.jp/events 興味がある方はぜひご参加ください?！
JavaScript でパックマン！第7回 (一旦最終回)
- 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