Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

戦術SLGでよく見る移動範囲表示をJavascriptで実装してみる その1:阻害するものが無い場合

戦術シミュレーションゲームでよく見かける、移動範囲や武器射程範囲の表示をするロジックをjavascriptで書いてみました。
まずは阻害するものが無いバージョン。

実際のところ

  • 9x16の四角で構成された盤面
  • ユニットは4,5の位置
  • ユニット移動力は3

というケースです。
個人的好みで、再帰表現とmathjsライブラリを使っています。

math   = require('mathjs')
var MAX_Y = 9
var MAX_X = 16
var P_Y   = 4
var P_X   = 5

//マップ情報。
var a  = math.matrix().resize([MAX_Y,MAX_X],-1)
function bar(y,x,move) {
  if (move < 0 || y < 0 || x < 0 
      || y > MAX_Y-1 || x > MAX_X-1
      || (move-1) < a.get([y,x])
  ) { return }
  var movecost = -1
  a.set([y,x], move)
  move = move + movecost
  bar(y-1, x,   move)
  bar(y+1, x,   move)
  bar(y,   x-1, move)
  bar(y,   x+1, move)
}

bar(P_Y,P_X,3)

移動範囲を多重配列で確認すると、こんな感じ。
"(move-1) < a.get([y,x])"の部分で余計な計算をしないようになっているので、数値が放射状に広がっています。

[ [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1 ],
  [ -1, -1, -1, -1, -1, 0, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1 ],
  [ -1, -1, -1, -1, 0, 1, 0, -1, -1, -1, -1, -1, -1, -1, -1, -1 ],
  [ -1, -1, -1, 0, 1, 2, 1, 0, -1, -1, -1, -1, -1, -1, -1, -1 ],
  [ -1, -1, 0, 1, 2, 3, 2, 1, 0, -1, -1, -1, -1, -1, -1, -1 ],
  [ -1, -1, -1, 0, 1, 2, 1, 0, -1, -1, -1, -1, -1, -1, -1, -1 ],
  [ -1, -1, -1, -1, 0, 1, 0, -1, -1, -1, -1, -1, -1, -1, -1, -1 ],
  [ -1, -1, -1, -1, -1, 0, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1 ],
  [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1 ] ]

0以上を■、自機位置(移動力3)を"G"で表示した移動範囲では、こんな塩梅で表示されます。

________________
_____■__________
____■■■_________
___■■■■■________
__■■■G■■■_______
___■■■■■________
____■■■_________
_____■__________
________________