matter.jsの衝突イベント発火時に自前の配列の検索と抽出が正しく完了できない

Question

実現したいこと

• matter.jsのcollisionStartなどの衝突イベント内で、自前の配列にArray.findIndexで検索したインデックスの次の要素を取得したい

前提

TypeScript, SolidStart, Matter.jsでスイカゲームを作っています。
同じフルーツが衝突して次のフルーツに進化する機能を実装中に以下の問題が発生しました。

発生している問題

進化順は本家?switch版と同じです。

進化前と進化後のフルーツ名をコンソールに出力するようにしているのですが、時折意図しないものが生成されてしまっています。
うまくいく時もあるので不安定な感じです。

//理想
old: orange
new: kaki

//問題
old: orange
new: orange

//問題2
old: kaki
new: orange

レンダリングでは衝突後に消えて新しいフルーツが生成されるまでは正常に動作しています。
生成するフルーツの種類をArray.findIndexで検索し、1を足して再度配列を参照するところでつまずいているみたいです。

該当のソースコード

実際はファイルを分けてexportしています。

• データ定義

type FruitData = {
        name: string
        point: number
        radius: number
        imageURL: string
    }

// データ自動生成
const boxWidth = 300
const maxRadius = boxWidth * (2 / 7)
const fruitRadius = (num: number) => maxRadius / (1.2 ** num)

// 定義
const fruitList: FruitData[] = [
    {
        name: 'cherry',
        point: 1,
        radius: fruitRadius(10),
        imageURL: ''
    },
//... 中略
 {
        name: 'watermelon',
        point: 66,
        radius: maxRadius,
        imageURL: ''
    }
]

• 処理

/* 前略 */

// 進化後のフルーツの情報を取得
const newFruitData = (list: FruitData[], name: string) => {

    console.log(`old: ${name}`) // 進化前のフルーツ

    // 進化後のフルーツのインデックス
    const newIndex = list.findIndex(e => e.name === name) + 1

    // スイカの時は生成しない
    if (newIndex === list.length) return undefined

    // もしもの為
    if (newIndex === -1) return undefined

    // 進化後のフルーツ
    const newData = list[newIndex]
    console.log(`new: ${newData.name}`)
    return newData
}

// フルーツのbodyを生成するための関数
type FruitObject = (data: FruitData, x: number, y: number) => Matter.Body
const fruitObject: FruitObject = (data, x, y) => Bodies.circle(x, y, data.radius, {
    label: data.name
})

/* 中略 */

Events.on(engine, 'collisionStart', e => {
            e.pairs.forEach(pair => {
                if (pair.bodyA.label === pair.bodyB.label) {
                    // 間の座標を算出
                    const halfXY = () => {
                        const halfGapX = (pair.bodyA.position.x - pair.bodyB.position.x) / 2
                        const halfGapY = (pair.bodyA.position.y - pair.bodyB.position.y) / 2
                        return {x: pair.bodyA.position.x + halfGapX, y: pair.bodyB.position.y + halfGapY}
                    }
                    const newPos = halfXY()

                    // 衝突した２つを削除
                    Composite.remove(fruitsComposite, pair.bodyA)
                    Composite.remove(fruitsComposite, pair.bodyB)

                    // 上で定義した関数で新しいフルーツの情報を取得
                    const data = newFruitData(fruitList, pair.bodyA.label)
                    if (!data) return
                    console.log(data)

                    // 追加
                    const newFruit = fruitObject(data, newPos.x, newPos.y)

                    Composite.add(fruitsComposite, newFruit)
                }
            })
        })

試したこと

vitestで関数を抽出してテストしたところ何回試しても一貫して正常でした。

const newFruitData = (list: FruitData[], name: string) => {

    console.log(`old: ${name}`)  // 進化前のフルーツ

    // 進化後のフルーツのインデックス
    const newIndex = list.findIndex(e => e.name === name) + 1

    // スイカの時は生成しない
    if (newIndex === list.length) return undefined

    // もしもの為
    if (newIndex === -1) return undefined

    // 進化後のフルーツ
    const newData = list[newIndex]
    console.log(`new: ${newData.name}`)
    return newData
}


test.only('config', () => {
    // ランダムにフルーツの名前を生成
    const randomName = fruitList[Math.trunc(Math.random() * fruitList.length)].name

    const data = newFruitData(fruitList, randomName)
    if (!data) return
    console.log(data)
})

• 例

old: orange
new: kaki
{ name: 'kaki', point: 15, radius: 28.705540858318642, imageURL: '' }

補足情報（FW/ツールのバージョンなど）

Node.js v18.16.0
"solid-js": "^1.7.12"
"vite": "^4.4.9"
"solid-start": "^0.3.6"
"vitest": "^0.26.3"
"matter-js": "^0.19.0"

Comments

[Lhankor_Mhy]

ご提示のコードから言えることはありませんが、私であれば fruitList の値をチェックするとは思います。

[Tokino]

fruitListの値はmatter.js内とvitestでそれぞれ同じソースからimportしています。
vitestでは正常に動作しているので値に問題はないと思われます。

[Lhankor_Mhy]

なるほど。
fruitList はミュータブルでしょうから、テスト時に実行されていない部分のコードで書き替え可能なのではないかと思ったのですが、問題ないのであれば失礼しました。

[Tokino]

ミュータブルなので他で書き換え可能、というところが気になったので試しにfruitListを関数の引数からではなくグローバル変数に直接structurdCloneでディープコピーしてから利用してみたら正常に動きました。ヒントをくださりありがとうございます。
機能的にはミュータブルである必要はないので意図せず書き換えてしまっている部分を探してみます。

[Lhankor_Mhy]

ご解決されて何よりです。

Answer 1

コメントで頂いたアドバイスをもとに解決できました。ありがとうございます。

問題のコード

実際のコードにはfruitListだけでなく、新しくフルーツを投下する用の配列を準備し、実際にフルーツを透過する時に使用していました。

// 定義
const dropData = fruitList.slice(0, 5)

// この関数でランダムに呼び出していた
const dropFruit = (fruitList: FruitData[]) => fruitList[Math.trunc(Math.random() * fruitList.length)]

このdropDataはfruitListの参照をslice()していたので、fruitListに不必要な書き換えを引き起こしていました。

解決方法

// 問題のコード
const dropData = fruitList.slice(0, 5)

// 解決後
const dropData = structuredClone(fruitList).slice(0, 5)

structuredCloneでディープコピーして定義することでfruitListに影響が及ばなくなりました。