[Javascript] パックマンをHTMLで作ってみるブログ#8 ワープ機能

2023年6月27日

Javascript

eyecatch 前回、壁のコリジョン処理が実現できたので、今回は、画面端のワープエリアの処理を追加して、自機のコントロール処理は完了になります。 今回はそんなに難しい処理ではないので、サクッとこなしていきましょう。

今回の目的

- mapにマープ記号の配置(W1) - ワープはmap内に2個 - ワープ座標に自キャラが来たら、もう一つのワープ先の場所に移動する(方向はそのままにする)

対象ファイル一覧

  1. assets/frame.json
  2. js/frame.js
  3. js/pacman.js

ソースコード

[全部更新] assets/frame.json

一部の記号だけを入れ替えるだけなんですが、座標がズレたら問題になるので、全体を更新してください。 [ "D1","D2","D2","D2","D2","D2","D2","D2","D2","D2","D2","D2","D2","Da","Db","D2","D2","D2","D2","D2","D2","D2","D2","D2","D2","D2","D2","D3", "D4","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","S4","S6","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","D6", "D4","P1","S1","S2","S2","S3","P1","S1","S2","S2","S2","S3","P1","S4","S6","P1","S1","S2","S2","S2","S3","P1","S1","S2","S2","S3","P1","D6", "D4","P2","S4","S5","S5","S6","P1","S4","S5","S5","S5","S6","P1","S4","S6","P1","S4","S5","S5","S5","S6","P1","S4","S5","S5","S6","P2","D6", "D4","P1","S7","S8","S8","S9","P1","S7","S8","S8","S8","S9","P1","S7","S9","P1","S7","S8","S8","S8","S9","P1","S7","S8","S8","S9","P1","D6", "D4","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","D6", "D4","P1","S1","S2","S2","S3","P1","S1","S3","P1","S1","S2","S2","S2","S2","S2","S2","S3","P1","S1","S3","P1","S1","S2","S2","S3","P1","D6", "D4","P1","S7","S8","S8","S9","P1","S4","S6","P1","S7","S8","S8","S3","S1","S8","S8","S9","P1","S4","S6","P1","S7","S8","S8","S9","P1","D6", "D4","P1","P1","P1","P1","P1","P1","S4","S6","P1","P1","P1","P1","S4","S6","P1","P1","P1","P1","S4","S6","P1","P1","P1","P1","P1","P1","D6", "D7","D8","D8","D8","D8","S3","P1","S4","S7","S2","S2","S3","S5","S4","S6","S5","S1","S2","S2","S9","S6","P1","S1","D8","D8","D8","D8","D9", "S5","S5","S5","S5","S5","D4","P1","S4","S1","S8","S8","S9","S5","S7","S9","S5","S7","S8","S8","S3","S6","P1","D6","S5","S5","S5","S5","S5", "S5","S5","S5","S5","S5","D4","P1","S4","S6","S5","S5","S5","S5","S5","S5","S5","S5","S5","S5","S4","S6","P1","D6","S5","S5","S5","S5","S5", "S5","S5","S5","S5","S5","D4","P1","S4","S6","S5","S1","D8","D8","D8","D8","D8","D8","S3","S5","S4","S6","P1","D6","S5","S5","S5","S5","S5", "D2","D2","D2","D2","D2","S9","P1","S7","S9","S5","D6","S5","S5","S5","S5","S5","S5","D4","S5","S7","S9","P1","S7","D2","D2","D2","D2","D2", "W1","S5","S5","S5","S5","S5","P1","S5","S5","S5","D6","S5","S5","S5","S5","S5","S5","D4","S5","S5","S5","P1","S5","S5","S5","S5","S5","W1", "D8","D8","D8","D8","D8","S3","P1","S1","S3","S5","D6","S5","S5","S5","S5","S5","S5","D4","S5","S1","S3","P1","S1","D8","D8","D8","D8","D8", "S5","S5","S5","S5","S5","D4","P1","S4","S6","S5","S7","D2","D2","D2","D2","D2","D2","S9","S5","S4","S6","P1","D6","S5","S5","S5","S5","S5", "S5","S5","S5","S5","S5","D4","P1","S4","S6","S5","S5","S5","S5","S5","S5","S5","S5","S5","S5","S4","S6","P1","D6","S5","S5","S5","S5","S5", "S5","S5","S5","S5","S5","D4","P1","S4","S6","S5","S1","S2","S2","S2","S2","S2","S2","S3","S5","S4","S6","P1","D6","S5","S5","S5","S5","S5", "D1","D2","D2","D2","D2","S9","P1","S7","S9","S5","S7","S8","S8","S3","S1","S8","S8","S9","S5","S7","S9","P1","S7","D2","D2","D2","D2","D3", "D4","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","S4","S6","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","D6", "D4","P1","S1","S2","S2","S3","P1","S1","S2","S2","S2","S3","P1","S4","S6","P1","S1","S2","S2","S2","S3","P1","S1","S2","S2","S3","P1","D6", "D4","P1","S7","S8","S3","S6","P1","S7","S8","S8","S8","S9","P1","S7","S9","P1","S7","S8","S8","S8","S9","P1","S4","S1","S8","S9","P1","D6", "D4","P2","P1","P1","S4","S6","P1","P1","P1","P1","P1","P1","P1","S5","S5","P1","P1","P1","P1","P1","P1","P1","S4","S6","P1","P1","P2","D6", "Dc","S2","S3","P1","S4","S6","P1","S1","S3","P1","S1","S2","S2","S2","S2","S2","S2","S3","P1","S1","S3","P1","S4","S6","P1","S1","S2","De", "Dd","S8","S9","P1","S7","S9","P1","S4","S6","P1","S7","S8","S8","S3","S1","S8","S8","S9","P1","S4","S6","P1","S7","S9","P1","S7","S8","Df", "D4","P1","P1","P1","P1","P1","P1","S4","S6","P1","P1","P1","P1","S4","S6","P1","P1","P1","P1","S4","S6","P1","P1","P1","P1","P1","P1","D6", "D4","P1","S1","S2","S2","S2","S2","S9","S7","S2","S2","S3","P1","S4","S6","P1","S1","S2","S2","S9","S7","S2","S2","S2","S2","S3","P1","D6", "D4","P1","S7","S8","S8","S8","S8","S8","S8","S8","S8","S9","P1","S7","S9","P1","S7","S8","S8","S8","S8","S8","S8","S8","S8","S9","P1","D6", "D4","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","P1","D6", "D7","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D8","D9" ]

[関数追加] js/frame.js

class内に下記の関数を追加してください。 static get_pos2num(pos){ return pos.y * Frame.map[0].length + pos.x } static get_num2pos(num){ return { x : num % Frame.map[0].length, y : ~~(num / Frame.map[0].length), } } static is_warp(map){ const num = Frame.get_pos2num(map) return Frame.frame_datas[num] === 'W1' ? true : false } static get_another_warp_pos(map){ const warp_index_arr = Frame.filterIndex(Frame.frame_datas , 'W1') const current_index = Frame.get_pos2num(map) const another_num = warp_index_arr.find(e => e !== current_index) return Frame.get_num2pos(another_num) } static filterIndex(datas,target){ const res_arr = [] for(let i=0; i<datas.length; i++){ if(datas[i] === target){ res_arr.push(i) } } return res_arr }

[関数更新] js/pacman.js

moving()関数を以下のコードに差し替えてください。 static moving(){ let next_pos = Pacman.next_pos(Pacman.direction) //warp if(Frame.is_warp(next_pos)){ Pacman.coodinates = Frame.get_another_warp_pos(next_pos) next_pos = Pacman.next_pos(Pacman.direction) } if(Frame.is_collision(next_pos)){ this.elm.setAttribute('data-anim' , "") delete Pacman.direction return } this.elm.setAttribute('data-direction' , Pacman.direction) this.elm.animate( [ { left : `${Pacman.coodinates.x * Frame.block_size}px`, top : `${Pacman.coodinates.y * Frame.block_size}px`, }, { left : `${next_pos.x * Frame.block_size}px`, top : `${next_pos.y * Frame.block_size}px`, } ], { duration: Pacman.anim_speed } ) Promise.all(this.elm.getAnimations().map(e => e.finished)).then(()=>{ Pacman.moved(next_pos) }) }

画面キャプチャ

解説

ワープ処理は、A地点とB地点の座標をそれぞれ入れ替えることによって、ワープしているようにできます。 is_warp()という関数を作って、frame.jsonで配置した"W1"という値に座標が重なったら、もう一つの"W1"座標に切り替えるという処理を行っています。 結果的に、その座標に乗った時に、もう一つの座標にワープするように挙動するんですね。 コードに不備などあれば、ご連絡ください。

知財

パックマンは、バンダイナムコ社の登録商標です。 PAC-MAN™ & ©1980 BANDAI NAMCO Entertainment Inc.

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。