내용의 테이블

콘웨이의 인생게임이란?

게임 규칙.

React를 사용하여 시뮬레이션 코딩

코드샌드박스 플레이그라운드

콘웨이의 인생 게임이란?

간단히 Life라고도 알려진 Game of Life는 1970년 영국의 수학자 John Horton Conway가 고안한 세포 자동 장치입니다. 이 게임은 초기 상태에 따라 진화가 결정되며 추가 입력이 필요하지 않은 제로 플레이어 게임입니다. 사람은 초기 구성을 만들고 그것이 어떻게 진화하는지 관찰함으로써 생명의 게임과 상호 작용합니다.

게임here에 대한 전체 세부 정보 보기

게임의 규칙

살아있는 이웃이 2개 미만인 살아있는 세포는 마치 인구 부족으로 인해 죽습니다.

2~3개의 살아있는 이웃이 있는 모든 살아있는 세포는 다음 세대에 살아 있습니다.

살아있는 이웃이 3개 이상인 살아있는 세포는 인구 과잉으로 인해 죽습니다.

살아 있는 이웃이 정확히 3개 있는 죽은 세포는 마치 번식을 통해 살아 있는 세포가 됩니다.

React를 사용한 코딩 아웃 시뮬레이터

빈 그리드 생성(첫 번째 작업)

그리드에 대한 Row 및 columns의 총 수는 초기에 설정됩니다.

Note: Totally depends as per the requirement. The best is to use 30/30.

const numRows = 30;
const numCols = 30;

const generateEmptyGrid = () => {
    const rows = [];
    for (let i = 0; i < numRows; i++) {
      rows.push(Array.from(Array(numCols), () => 0));
    }
    return rows;
  };

설명:

우리는 rows [] 길이의 배열numRows: 30을 사용했습니다.

모든 행 인덱스에 대해 numCols: 30 열을 푸시합니다.

이 기능은 나중에 그리드를 비우기 위해 지우기 위한 지우기 기능으로 사용됩니다.

[   {1, 2, 3, ...., 30},
    {1, 2, 3, ...., 30},
    .
    .
    30th row    ]

그리드에 임의의 항목 넣기

요구 사항: Button 및 funtion

기능 생성generateRandomStuff()

 const generateRandomStuff = () => {
    const rows = [];
    for (let i = 0; i < numRows; i++) {
      rows.push(
        Array.from(Array(numCols), 
       () => (Math.random() > 0.5 ? 1 : 0))
      );
    }
    return rows;
  };

이 함수에서 우리는 실제로 열의 번호를 무작위화하고 각 행에서 임의의 열을 선택하고 if Math.Random() value for the columns is greater than 0.5에서 1 : black else 0 :cleared;

임의 항목을 설정하고 그리드에서 항목을 지우기 위한 상태 관리

const [grid, setGrid] = useState(() => {
    return generateEmptyGrid();
  });

using State: 그리드에 대한 상태 관리를 수행할 수 있습니다.

초기: 그리드가 비어 있도록 설정됩니다.

Generate Random stuff: TO do this we will call for the function

const generateRandomStuff = () =>

그리드에 설정 : setGrid(generateRandomStuff())

 <button
    onClick={() => {
       setGrid(generateRandomStuff());
      }}>
      Random Stuff
</button>

Generate Empty Grid: To do this we will call for the function

const generateEmptyGrid = () =>

그리드 비우기로 설정합니다. setGrid(generateEmptyGrid())

 <button
    onClick={() => {
      setGrid(generateEmptyGrid());
       }}>
    Clear
</button>

시뮬레이션 실행(로직) :)

시뮬레이션을 위해 약간의 사전 처리가 필요합니다.

const redundant = [
  [0.1],
  [0, -1],
  [1, -1],
  [-1, 1],
  [1, 1],
  [-1, -1],
  [1, 0],
  [-1, 0]
];

an array is taken with all steps, where we can move

• We can move in all eight directions in the grid.

 const [Simulation, setSimulation] = useState(false);

  const runningRef = useRef(Simulation);
  runningRef.current = Simulation;

  const runSimulation = useCallback(() => {
    if (!runningRef.current) {
      return;
    }
    setGrid((g) => {
      return produce(g, (gridCopy) => {
        for (let i = 0; i < numRows; i++) {
          for (let k = 0; k < numCols; k++) {
            let neighbors = 0;
            redundant.forEach(([x, y]) => {
              const newI = i + x;
              const newK = k + y;
              if (newI >= 0 && newK >= 0 && newI < numRows && newK < numCols) {
                neighbors += g[newI][newK];
              }
            });
            if (neighbors < 2 || neighbors > 3) {
              gridCopy[i][k] = 0;
            } else if (g[i][k] === 0 && neighbors === 3) {
              gridCopy[i][k] = 1;
            }
          }
        }
      });
    });
    setTimeout(runSimulation, 100);
  }, []);

처음에 simulation가 될 상태 setStimulation 및 false를 만들 것입니다. 버튼을 사용하여 true로 트리거됩니다.

const runSimulation = useCallback(() =>{} : 여기서는 콜백 함수를 사용합니다.

논리:

인덱스 {0,0}에서 {numRows,numCols}

까지 그리드를 트래버스합니다.

neigbours에 대한 카운터를 가져옵니다.

우리가 정확히 원하는 것은 다음과 같습니다.

그리드에 정확히 set 또는 2 이웃이 있는 3 셀이 어떤 방향으로든 있는 경우.

그리드에 set가 아닌 셀이 있고 세 개의 set or live 이웃이 있는 경우 set or live 가 됩니다.

set or live인 다른 모든 셀은 이제 dead or unset로 설정되지만 모든 unset는 unset로 유지됩니다.

 redundant.forEach(([x, y]) => {
              const newI = i + x;
              const newK = k + y;
              if (newI >= 0 && newK >= 0 && newI < numRows && newK < numCols) {
                neighbors += g[newI][newK];
              }
            });

redundant array에서 8방향으로 이동합니다.

위의 규칙에 따라 세 가지 경우를 작성했습니다.

시뮬레이션이 완료된 후 일정 시간 간격을 두고 함수를 한 번 실행합니다.

이를 위해 setTimeout(runSimulation, 100);를 사용합니다.

시뮬레이션 버튼입니다.

<button onClick={() => {
     setSimulation(!Simulation);
       if (!Simulation) {
           runningRef.current = true;
           runSimulation();
         }
       }} >
{Simulation ? "Stop" : "start"} Simulation
</button>

Note: Using immer for mutating the state.

내용이 마음에 든다면. 친절하게 알려주세요.

행복한 코딩.