如何在反应中动态更改数组的元素？

Question

Hello My Developer Friends, Greetings,, I am making a react based Snake Game, where there is a board consisting of 100 blocks. which is nothing but an array of 100 objects. mapped into a paper component, I have made an another array of objects indicating the snake positions (position of snake's head and its tail), The objective is on getting a random number generated by the die. one item from each object of array should set to true, which was initially false. Let me clarify this a bit: say you get 6 as random number, I have made an item named "player, boolean" inside each array object, and except array[0] index, player = true. rest at all other 99 objects inside that array, player is being set to false. Now i need to dynamically change the value of the player (inside each object), as per the random number i get on die, Say, I get 6 on die, then at array object (having id = 6), the player = true. and false elsewhere (1 - 100, except at id = 6), Then at second throw, say i get 4 on die(a random number). then array object (having id = 10)'s 'player' should set to true, rest all other should set to false. It should happen dynamically depending directly on the value of number, we get on the die. How should I impliment this logic. the one into my mind goes like this....

suppose, i have an array of object named 'tiles', having each object into the form

{
 id : number,
 tilenumber : number,
 snakeAt : number, 
 name : string, 
 tailAt : number, 
 player : boolean,
}

so logic goes like this - 
for(let i = 0; i <array.length ; i++) //this should give me 100 when logged to console
 {
 var count = 0;
 var number = //an object storing the number on die (b/w 1 - 6)
 let updatedCount = number + count;
 const updatedTile = tile.map(Tile => {
 id = Tile.id, 
 name = Tile.name, 
 tilenumber = Tile.tilenumber,
 player = //set player at (updatedCount)th position to true (and rest 99 objects to false);
count++;
});

after this logic, the position of player (which is a boolean into every of 100 objects inside the array), can be tested against an or something like that, as a visual indicator to the user, where their player is out of 100 boxes into the gameboard. I assume, you might have understand my problem statement.

here's my object array

const Tiles = [
    {
        id: 1,
        tilenumber: 1,
        name: "start",
        player : true
    },
    {
        id: 2,
        tilenumber: 2,
        name: "two",
        player : false
    },
    {
        id: 3,
        tilenumber: 3,
        name: "three",
        player : false
    },
    {
        id: 4,
        tilenumber: 4,
        name: "four",
        player : false
    },
    {
        id: 5,
        tilenumber: 5,
        name: "five",
        player : false
    },
    {
        id: 6,
        tilenumber: 6,
        name: "six",
        player : false
    },
    {
        id: 7,
        tilenumber: 7,
        name: "seven",
        player : false
    },
    {
        id: 8,
        tilenumber: 8,
        name: "eight",
        player : false
    },
    {
        id: 9,
        tilenumber: 9,
        name: "nine",
        player : false
    },
    {
        id: 10,
        tilenumber: 10,
        name: "ten",
        player : false
    },
    {
        id: 11,
        tilenumber: 11,
        name: "eleven",
        player : false
    },
    {
        id: 12,
        tilenumber: 12,
        name: "tweleve",
        player : false
    },
    {
        id: 13,
        tilenumber: 13,
        name: "thirteen",
        player : false
    },
    {
        id: 14,
        tilenumber: 14,
        name: "fourten",
        player : false
    },
    {
        id: 15,
        tilenumber: 15,
        name: "fifteen",
        player : false
    },
    {
        id: 16,
        tilenumber: 16,
        name: "sixteen",
        player : false
    },
    {
        id: 17,
        tilenumber: 17,
        name: "seventeen",
        player : false
    },
    {
        id: 18,
        tilenumber: 18,
        name: "eighteen",
        player : false
    },
    {
        id: 19,
        tilenumber: 19,
        name: "nineteen",
        player : false
    },
    {
        id: 20,
        tilenumber: 20,
        name: "twenty",
        player : false
    },
    {
        id: 21,
        tilenumber: 21,
        name: "twentyone",
        player : false
    },
    {
        id: 22,
        tilenumber: 22,
        name: "twentytwo",
        player : false
    },
    {
        id: 23,
        tilenumber: 23,
        name: "twentythree",
        player : false
    },
    {
        id: 24,
        tilenumber: 24,
        name: "twentyfour",
        player : false
    },
    {
        id: 25,
        tilenumber: 25,
        name: "twentyfive",
        player : false
    },
    {
        id: 26,
        tilenumber: 26,
        name: "twentysix",
        player : false
    },
    {
        id: 27,
        tilenumber: 27,
        name: "twentyseven",
        player : false
    },
    {
        id: 28,
        tilenumber: 28,
        name: "twentyeight",
        player : false
    },
    {
        id: 29,
        tilenumber: 29,
        name: "twentynine",
        player : false
    },
    {
        id: 30,
        tilenumber: 30,
        name: "thirty",
        player : false
    },
    {
        id: 31,
        tilenumber: 31,
        name: "thirtyone",
        player : false
    },
    {
        id: 32,
        tilenumber: 32,
        name: "thirtytwo",
        player : false
    },
    {
        id: 33,
        tilenumber: 33,
        name: "thirtythree",
        player : false
    },
    {
        id: 34,
        tilenumber: 34,
        name: "thirtyfour",
        player : false
    },
    {
        id: 35,
        tilenumber: 35,
        name: "thirtyfive",
        player : false
    },
    {
        id: 36,
        tilenumber: 36,
        name: "thirtysix",
        player : false
    },
    {
        id: 37,
        tilenumber: 37,
        name: "thirtyseven",
        player : false
    },
    {
        id: 38,
        tilenumber: 38,
        name: "thirtyeight",
        player : false
    },
    {
        id: 39,
        tilenumber: 39,
        name: "thirtynine",
        player : false
    },
    {
        id: 40,
        tilenumber: 40,
        name: "fourty",
        player : false
    },
    {
        id: 41,
        tilenumber: 41,
        name: "fourtyOne",
        player : false
    },
    {
        id: 42,
        tilenumber: 42,
        name: "fourtyTwo",
        player : false
    },
    {
        id: 43,
        tilenumber: 43,
        name: "fourtyThree",
        player : false
    },
    {
        id: 44,
        tilenumber: 44,
        name: "fourtyFour",
        player : false
    },
    {
        id: 45,
        tilenumber: 45,
        name: "fourtyFive",
        player : false
    },
    {
        id: 46,
        tilenumber: 46,
        name: "fourtySix",
        player : false
    },
    {
        id: 47,
        tilenumber: 47,
        name: "fourtySeven",
        player : false
    },
    {
        id: 48,
        tilenumber: 48,
        name: "fourtyEight",
        player : false
    },
    {
        id: 49,
        tilenumber: 49,
        name: "fourtyNine",
        player : false
    },
    {
        id: 50,
        tilenumber: 50,
        name: "fifty",
        player : false
    },
    {
        id: 51,
        tilenumber: 51,
        name: "fiftyOne",
        player : false
    },
    {
        id: 52,
        tilenumber: 52,
        name: "fiftyTwo",
        player : false
    },
    {
        id: 53,
        tilenumber: 53,
        name: "fiftyThree",
        player : false
    },
    {
        id: 54,
        tilenumber: 54,
        name: "fiftyFour",
        player : false
    },
    {
        id: 55,
        tilenumber: 55,
        name: "fiftyFive",
        player : false
    },
    {
        id: 56,
        tilenumber: 56,
        name: "fiftySix",
        player : false
    },
    {
        id: 57,
        tilenumber: 57,
        name: "fiftySeven",
        player : false
    },
    {
        id: 58,
        tilenumber: 58,
        name: "fiftyEight",
        player : false
    },
    {
        id: 59,
        tilenumber: 59,
        name: "fiftyNine",
        player : false
    },
    {
        id: 60,
        tilenumber: 60,
        name: "Sixty",
        player : false
    },
    {
        id: 61,
        tilenumber: 61,
        name: "sixtyOne",
        player : false
    },
    {
        id: 62,
        tilenumber: 62,
        name: "sixtyTwo",
        player : false
    },
    {
        id: 63,
        tilenumber: 63,
        name: "sixtyThree",
        player : false
    },
    {
        id: 64,
        tilenumber: 64,
        name: "sixtyFour",
        player : false
    },
    {
        id: 65,
        tilenumber: 65,
        name: "sixtyFive",
        player : false
    },
    {
        id: 66,
        tilenumber: 66,
        name: "sixtySix",
        player : false
    },
    {
        id: 67,
        tilenumber: 67,
        name: "sixtySeven",
        player : false
    },
    {
        id: 68,
        tilenumber: 68,
        name: "sixtyEight",
        player : false
    },
    {
        id: 69,
        tilenumber: 69,
        name: "sixtyNine",
        player : false
    },
    {
        id: 70,
        tilenumber: 70,
        name: "Seventy",
        player : false
    }, {
        id: 71,
        tilenumber: 71,
        name: "seventyOne",
        player : false
    },
    {
        id: 72,
        tilenumber: 72,
        name: "seventyTwo",
        player : false
    },
    {
        id: 73,
        tilenumber: 73,
        name: "seventyThree",
        player : false
    },
    {
        id: 74,
        tilenumber: 74,
        name: "seventyFour",
        player : false
    },
    {
        id: 75,
        tilenumber: 75,
        name: "seventyFive",
        player : false
    },
    {
        id: 76,
        tilenumber: 76,
        name: "seventySix",
        player : false
    },
    {
        id: 77,
        tilenumber: 77,
        name: "seventySeven",
        player : false
    },
    {
        id: 78,
        tilenumber: 78,
        name: "seventyEight",
        player : false
    },
    {
        id: 79,
        tilenumber: 79,
        name: "seventyNine",
        player : false
    },
    {
        id: 80,
        tilenumber: 80,
        name: "Eighty",
        player : false
    }, {
        id: 81,
        tilenumber: 81,
        name: "eightyOne",
        player : false
    },
    {
        id: 82,
        tilenumber: 82,
        name: "eightyTwo",
        player : false
    },
    {
        id: 83,
        tilenumber: 83,
        name: "eightyThree",
        player : false
    },
    {
        id: 84,
        tilenumber: 84,
        name: "eightyFour",
        player : false
    },
    {
        id: 85,
        tilenumber: 85,
        name: "eightyFive",
        player : false
    },
    {
        id: 86,
        tilenumber: 86,
        name: "eightSix",
        player : false
    },
    {
        id: 87,
        tilenumber: 87,
        name: "eightySeven",
        player : false
    },
    {
        id: 88,
        tilenumber: 88,
        name: "eightyEight",
        player : false
    },
    {
        id: 89,
        tilenumber: 89,
        name: "eightyNine",
        player : false
    },
    {
        id: 90,
        tilenumber: 90,
        name: "Ninety",
        player : false
    }, {
        id: 91,
        tilenumber: 91,
        name: "ninetyOne",
        player : false
    },
    {
        id: 92,
        tilenumber: 92,
        name: "ninetyTwo",
        player : false
    },
    {
        id: 93,
        tilenumber: 93,
        name: "ninetyThree",
        player : false
    },
    {
        id: 94,
        tilenumber: 94,
        name: "ninetyFour",
        player : false
    },
    {
        id: 95,
        tilenumber: 95,
        name: "ninetyFive",
        player : false
    },
    {
        id: 96,
        tilenumber: 96,
        name: "ninetySix",
        player : false
    },
    {
        id: 97,
        tilenumber: 97,
        name: "ninetySeven",
        player : false
    },
    {
        id: 98,
        tilenumber: 98,
        name: "ninetyEight",
        player : false
    },
    {
        id: 99,
        tilenumber: 99,
        name: "ninetyNine",
        player : false
    },
    {
        id: 100,
        tilenumber: 100,
        name: "Hundread",
        player : false
    }
]

const sortOrder = Tiles.sort((a : any, b : any) => b.id - a.id);
//descending order
console.log(sortOrder, 'descending order - print 1');

let newTileData : any[] = [];
const sections = Math.ceil(sortOrder.length / 10);
console.log(sections);
for (let i = sections - 10 ; i < sections ; i++)
{
    const slice = Tiles.slice(i * 10, i * 10 + 10);
    if (i % 2 == 1)
    {
        slice.sort((a : any, b : any) => b.id - a.id).reverse();
    }
    newTileData = newTileData.concat(slice);
}

console.log(newTileData, 'sorted accordingly');

export default newTileData;

component below

import { Box, Button, Grid, Paper, Typography } from "@mui/material";
    import { Fragment } from "react";
    import newTileData from "../../Data/tileData";
    import snakePositions  from "../../Data/SnakePositions";
    import Player from "./Player";
    
    export default function TileList() {   
     

    const newTileSet = newTileData.map((tile) => ({
    id : tile.id,
    tilenumber : tile.tilenumber,
    name : tile.name,
    snakeAt : snakePositions.some((snakePosition) => snakePosition.id === tile.id),
    tailAt : snakePositions.some((tailPosition) => tailPosition.tailAt === tile.id),
    player : tile.player,
    }));
    console.log(newTileSet);
    

  //I should apply the above mentioned logic here to dynamically change the player : boolean to either 'true' / 'false' based on the 'count' i get on die, and should iterate till 100th block.
    
        return (
            <Fragment>
              <Grid container columns={11} columnSpacing={0} rowSpacing={0} sx={{justifyContent : 'center', alignItems : 'center'}}>
                {newTileSet.map((tile : any) => (
                <Grid item xs={1} sx={{p: 0, m: 0.2}} key={tile.id}>
                    <Paper sx={{p: 0, mx: 0, width : '100%', height : '72px', borderRadius : '0px', border: '0.4px solid rgba(0, 0, 0, 0.4)'}} elevation={0} >
                    <Box justifyContent="center" alignItems="center" sx={{textAlign : 'center', fontWeight : 800, fontSize : '25px'}}>
                    <Typography variant ='body2' sx={{fontSize : '12px'}}>{tile.tilenumber}</Typography>
                      <Box display='flex' justifyContent='center' alignItems='center' sx={{p: 1}}>
                      {tile.player ? <Player /> : ""}
                      </Box>
                      <Typography variant ='subtitle2' sx={{fontSize : '11px', fontWeight: 600}}>{tile.name}</Typography>
                      <Typography variant ='subtitle1' sx={{fontSize : '12px', color : 'red'}}>{tile.tailAt ? "Tail" : ""}</Typography>
                      <Typography variant ='subtitle1' sx={{fontSize : '12px', color : '#0000FF'}}>{tile.snakeAt ? "Snake" : ""}</Typography>
                    </Box>
                    </Paper> 
                </Grid>
                ))}
              </Grid>
              <Grid item xs={4}>
                <Button variant ='contained'>Click</Button>
              </Grid>
            </Fragment>
        )
    }

here are the snakeposition array

const SnakePositions =  [
    {
        id: 44,
        snakeAt : 44,
        tailAt : 22,
    },
    {
        id: 48,
        snakeAt : 48,
        tailAt : 9,
    },
    {
        id: 52,
        snakeAt : 52,
        tailAt : 11,
    },
    {
        id: 55,
        snakeAt : 55,
        tailAt : 7,
    },
    {
        id: 59,
        snakeAt : 59,
        tailAt : 17,
    },
    {
        id: 69,
        snakeAt : 69,
        tailAt : 33,
    },
    {
        id: 64,
        snakeAt : 64,
        tailAt : 36,
    },
    {
        id: 73,
        snakeAt : 73,
        tailAt : 4,
    },
    {
        id: 83,
        snakeAt : 83,
        tailAt : 19,
    },
    {
        id: 92,
        snakeAt : 92,
        tailAt : 51,
    },
    {
        id: 95,
        snakeAt : 95,
        tailAt : 24,
    },
    {
        id: 98,
        snakeAt : 98,
        tailAt : 22,
    },
    {
        id: 20,
        snakeAt : 20,
        tailAt : 3,
    }
];

export default SnakePositions;

//is there any another work around you could suggest me? I want that one out of two players should roll the die and his corrosponding avatar should move across the gameboard(consisting of 100 blocks(//100 objects)). also keeping into the mind, if they find snake position, then they should be redirected to the tail posiiton of that snake. say, the player's avatar is active at box 64 which is a snake position, then it should never go to 64 instead it should go to 24 which is the corrosponding tail position of that snake. Similarly if the avatar is at 53(a snake position), it should go to 12 (tail position) and so on.

please suggest better solutions to acheive this. warm regards

• Himanshu