Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript でパックマン!第6回

341 views

Published on

MPS Setagaya 第9回ミーティング資料です。

Published in: Software
  • Be the first to comment

JavaScript でパックマン!第6回

  1. 1. MPS Setagaya 第9回 (2015/11/8) ミーティング JavaScript でパックマン! 第6回 金子純也 Morning Project Samurai 代表 MPS Setagaya 第9回 (2015/11/8) ミーティング (c) Junya Kaneko
  2. 2. 本日の目標 マップ上を動き回るパックマンを作る!! マップを管理するMapオブジェクトを作る MPS Setagaya 第9回 (2015/11/8) ミーティング (c) Junya Kaneko
  3. 3. マップのデータ表現 row col MPS Setagaya 第9回 (2015/11/8) ミーティング (c) Junya Kaneko
  4. 4. マップのデータ表現 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 1 1 0 0 0 0 0 1 1 1 1 1 1 1 1 1 0 1 0 0 0 1 1 1 0 0 1 0 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 1 0 0 0 1 0 0 0 1 1 1 0 0 1 0 0 1 0 0 1 1 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 1 1 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 row col MPS Setagaya 第9回 (2015/11/8) ミーティング (c) Junya Kaneko
  5. 5. this.map = [ [0,0,0,0,0,0,0,0,0,0,0,0], [0,1,1,1,0,0,0,0,0,1,1,0], [0,1,0,1,1,1,1,1,1,1,0,0], [0,1,1,1,0,1,0,1,0,1,0,0], [0,1,0,1,0,1,0,1,1,1,1,0], [0,1,1,1,1,1,1,1,0,0,1,0], [0,1,0,0,1,0,0,1,0,0,1,0], [0,1,1,1,1,0,0,1,1,1,1,0], [0,1,0,0,1,0,0,1,0,1,0,0], [0,1,1,1,1,1,1,1,0,1,0,0], [0,0,1,0,0,1,0,1,0,1,0,0], [0,0,1,0,0,1,0,1,0,1,0,0], [0,0,1,1,1,1,1,1,1,1,0,0], [0,0,0,0,0,0,0,0,0,0,0,0] ]; MPS Setagaya 第9回 (2015/11/8) ミーティング (c) Junya Kaneko
  6. 6. Map オブジェクト Map オブジェクト Pacman オブジェクト x = 50, y=50 に移動 してみたんだけど、 そこって壁? 壁だね MPS Setagaya 第9回 (2015/11/8) ミーティング (c) Junya Kaneko
  7. 7. Map オブジェクトのisWall メソッド (定義と使い方) 定義: isWall : function(x, y) { var tile = this.getTile(x, y); return tile.kind == 0; } 使い方: isInWall: function() { return this.map.isWall(this.getLeft(), this.getTop()) || this.map.isWall(this.getLeft(), this.getBottom()) || this.map.isWall(this.getRight(), this.getTop()) || this.map.isWall(this.getRight(), this.getBottom()) } MPS Setagaya 第9回 (2015/11/8) ミーティング (c) Junya Kaneko
  8. 8. Map オブジェクトのisWall メソッド 定義と使い方 使い方: this.position.x += this.movingDirection.x; if (this.isInWall()) { this.position.x = previous_pos_x; } MPS Setagaya 第9回 (2015/11/8) ミーティング (c) Junya Kaneko
  9. 9. ピクセル座標からタイル情報を取得
 getTile メソッド 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 1 1 0 0 0 0 0 1 1 1 1 1 1 1 1 1 0 1 0 0 0 1 1 1 0 0 1 0 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 1 0 0 0 1 0 0 0 1 1 1 0 0 1 0 0 1 0 0 1 1 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 1 1 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 (100, 20) (5, 1, 1) MPS Setagaya 第9回 (2015/11/8) ミーティング (c) Junya Kaneko
  10. 10. getTile : function(x, y) { var col = Math.floor((x - this.startX) / this.getTileWidth()); var row = Math.floor((y - this.startY) / this.getTileHeight()); return {'row': row, 'col': col, 'kind': this.map[row][col]}; } ピクセル座標からタイル情報を取得
 getTile メソッド x this.startX MPS Setagaya 第9回 (2015/11/8) ミーティング (c) Junya Kaneko
  11. 11. あとはソースコードを見て
 考えながら打ち込んでみよう! https://github.com/morningprojectsamurai/mpssd_pacman20151108 不明な点は聞いてください :) MPS Setagaya 第9回 (2015/11/8) ミーティング (c) Junya Kaneko

×