Immutable.js：2Dゲームフィールドを表現するデータ構造

Question

私は疑問に思っています。正方形のゲームボードを表現するためにどのデータ構造を使用すればよいですか？最も自然なアイデアは2次元のリストですが、それを照会して変更するのは難しいです。だから、

、今、このような何かのキーが${x}.${y}ある地図を使用します（JSにはタプルが:(ありません）と値が色 を表す刺され、次のとおりです。

Map([['0.0', 'red'], ['0.1', 'red'], ['1.0', 'blue'], ['1.1', 'red']]) 

は、このようなデータを使用することがOK ？？構造Immutable.jsの面で任意のより良い解決策はあり

Answer 1

私は自分の2Dゲームボードをいくつか構築しており、同じ問題を抱えています。私が作った解決策はRecordです。

これは単にオブジェクトのように見えるだけでなく、同様に動作します。しかし、バニラオブジェクトでは、次のマッピング辞書の処理はできません。

const dict = {}; 

const key1 = { row: 0, col: 1 }; 
const value1 = { some: 'value' }; 

dict[key1] = value; // will not work 

これは私が欲しいものですが、できるだけ対処しやすいようにマッピングを試みました。 RecordとMapImmutable.jsから、次の操作を行うことができます。

import { Map, Record } from 'immutable'; 

const dict = Map(); 
const Pos = Record({ row: 0, col: 0 }); // some initial value. 
const Val = Record({ some: 'value' }); // same here. 

const key1 = new Pos({ row: 0, col: 1 }); 
const value1 = new Val({ some: 'value' }); 

dict = dict.set(key1, value1); // works like you wish 

詳細については、公式の文書を読むことができます。たぶんあなたはより良い解決策を持っています、私に教えてください:)。

Answer 2

は、あなたがそうのような2次元配列を使用できない理由がある理由です：

let square = [ 
    ['red', 'green', 'blue'], 
    ['orange', 'red', 'blue'], 
    ['red', 'blue', 'blue'] 
]; 

次に、上記のデータ構造をマップに追加することができます。

中間のタイルにアクセスするには、配列の[1][1]インデックスを使用します。

Answer 3

リストのリストがクエリや変更が難しいと思うのはなぜですか？長さ2の配列を[x, y]のペアとして使用し、これをgetIn,setIn、およびupdateInのメソッドに渡すことができます。

let grid = Immutable.toJS([ 
    ['red', 'green'], 
    ['blue', 'yellow'] 
]); 

grid.getIn([0, 1]); // => 'green'; 
grid = grid.setIn([0, 1], 'purple'); 
grid.getIn([0, 1]); // => 'purple'; 
grid = grid.updateIn([0, 0], cell => cell.toUpperCase()); 
grid.getIn([0, 0]); // => 'RED'; 

それはmap(...)と、グリッド内のすべてのセルにいくつかの関数を適用するのは簡単です：地図とよりトリッキーかもしれません

grid.map((row, x) => row.map(cell, y) => x + cell + y); 
grid.get([1, 1]); // => '1yellow1' 

ことの一つは、値の座標を見つけようとしています。

const x = grid.findIndex(row => row.contains('blue')); // => 1 
const y = grid.get(x).indexOf('blue'); // => 0 
grid.get([x, y]); // => blue