Walkableゲームマップを構築するために2次元配列を使用する

私は最近、私の最初の反応プロジェクトは、ミニゲームのゲームcodeCampクエストと呼ばれる場所は、学生の開発者として彼女の貧弱な(しかし愛らしい)犬の宿題をバランスしようとして再生と呼ばれる配置されます.

ここでプレイ

このプロジェクトを作成するだけでなく、私は反応の私の理解を深める機会を与えただけでなく、reduxとカスタムフックを書く経験を学ぶこと.私は方法に沿っていくつかの課題に直面しました.どうやってそれを解決したのか、まず最初に.

ゲームのインスピレーションに関するいくつかの背景

自分のインストラクターに、自分の反応プロジェクトのためにゲームをすることを考えていたとき、私は自分自身がどうなったかを完全に理解していなかった.私はSIMSとStardewバレーのようなゲームの私の愛に合わせてゲームを構築したいと思っていた.最小限で、私は飛行機と完全な仕事の上で性格を動かすことができたかったです.
私も、私がプロットが私の最近の経験学習を反映することを望むということを知っていました.あなたが知っているものを書くので、彼らは言います.
論理を概念化する際に、私はグリッドを作成して、文字のxとyをキーストロークでダイナミックにすることが可能であると感じました、しかし、それを越えて、私は本質的に推測を始める準備ができていました.
私はgoogled“反応ゲーム、”私はドリュー・コンレイに出会ったところで、彼のチームが反応で完全に組み立てられたゲームについて2016年に反応集会で話をしましたDanger Crew . 私も、アンドリューSteinheiserのものに遭遇しましたReact RPG , 私が研究時間の良い量を浪費したダンジョンクローラー.
これらのゲームは私が私が望んだものが可能であったことを証明しました、私は方法を理解する必要があっただけです.

配列マップ

私はどのように構築することを確認したことを開始:動的にキーストロークを使用して座標を変更することにより、平面上の文字を移動します.X - Y座標を格納したカスタムフックを作成し、押された矢印キーに従って変更しました.その後、文字は、ブラウザのウィンドウの周りに自由に移動することができます何も、壁の制限や無料の妖怪のようなマップの端の自由.驚くべきではなく、私が構築していたゲーム.
私は効率的にマップの境界を格納する方法が必要でした.別の部屋には、単純な範囲の条件が動作することができませんでしたので、別のゲームエリアを持って、最終的には、私はまた、特定のゲームのタイル上のアクションを許可する必要があります.
それで、私は私の父、私はビデオゲームの私の愛を得た開発者と呼ばれる.彼は、グリッドを使用するゲームの一般的な解決策である、二次元配列を使用することを検討している.
私のベッドルームの配列を構築し、各タイルにオブジェクト内の' walk 'と' action 'のブール値を格納しました.

const X = { walk: false, action: false,};
const O = { walk: true, action: false,};
const AO = { walk: true, action: true,};
const AX = { walk: false, action: true,};

const BEDROOM_MAP = [ //each elem in the nested array equals a tile on the x-axis
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 0
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 1
    [X, X, X, X, X, X, X, X, X, X, X, X], // y= 2
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 3
    [X, X, AX, AX, X, AO, AO, X, AO, AO, X, X], // y = 4
    [X, X, AO, AO, O, O, O, O, AO, AO, X, X], // y = 5
    [X, X, O, O, O, O, O, O, O, O, X, X], // y = 6
    [X, X, O, O, O, O, O, O, O, O, O, O], // y = 7
    [X, X, X, O, O, O, O, O, O, O, O, O], // y = 8
    [X, X, X, O, O, O, O, O, O, O, X, X], // y = 9
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 10
    [X, X, X, X, X, X, X, X, X, X, X, X], // y = 11
]

私がイメージエディタで作成した地図グリッドのモックアップまでこれを比較してください、我々はそれがほとんど同じであるのを見ることができます.(テストでは、動作しないアクションタイルを持っている必要がありました.

配列の使用

私の新しい規則によってキャラクタを守るために、私は現在の座標とKeyDownイベントで指示された方向を取った関数を作成しました.
次に、現在のXまたはY(移動方向に依存する)から2(足首の長さ)を足したり引いたりすることによって、彼女の次のストライキとなるものを調整します.

function getNextTile(direction, position) {
    let newPos;
    let X;
    let Y;

    switch (direction) {
        case 'up':
            newPos = position.top - 2
            X = ((position.left + 192) - (position.left % 32)) / 32
            Y = (newPos - (newPos % 32)) / 32
            return MAP_TABLE[Y][X][key];

に保持された座標を分割することによってposition 32(私のグリッドのピクセルサイズ)によって、そしてMAP_TABLE , それぞれのマップ領域に対して2次元配列を保持しているので、次のタイルに保持されている' walk 'のためにbooleanを返すことができます.このブール値の戻り値は、文字を移動する縮小子が実行されるかどうかを判断します.
あなたは私が現在の位置/32の残りの部分を減算しなければならないことに気がつきます.

ところで、あなたがなぜ私が192に192を加えているかについて好奇心が強いならばX 座標計算:古いPOKのMONゲームのように、Codecampクエストはビューポートを使用します.プレイヤーが上または下に歩くとき、文字スプライトが移動しますが、左または右に歩いているとき、スプライトは静止しており、代わりにマップイメージが移動します.192 px X軸上のビューポートコンテナの中心に文字をレンダリングします.The getNextTile 関数はその固定位置を説明する必要があります.