Создайте арканоид на реагирование и Raxy

Создать магазин в Raxy.

const initStore: IGame = {
  game: { width: 660, height: 450 },
  bricks: [{ x: 0, y: 0 }],
  base: { x: 0, y: 0 },
  bat: { x: 150, y: 52, height: 8, width: 150 },
  ball: { x: 150, y: 60, stick: true, a: Math.PI / 4, r: 15, k: 1 }
};

const instanse = raxyReact(initStore);
export const { store, transaction, subscribe, useRaxy } = instanse;

Создать основную игровую службу для проверки столкновения

import { subscribe } from "./store";
subscribe("update", (e) => {}); // subscribe to store update

в кодовой коробке

Создание счетчика оценки

import React from "react";
import { useRaxy } from "./store";

export default function Score() {
  const { state } = useRaxy((store) => ({
    score: store.bricks.filter((brick) => !brick.removed).length
  }));

  return Blocks : {state.score};
}

Создать мяч

import React, { forwardRef } from "react";
import { useRaxy } from "./store";

const Ball = forwardRef((props, ref: any) => {
  const { state } = useRaxy((store) => ({ ball: store.ball }));

  return (
    
  );
});

export default Ball;

А потом создайте Кирпич Компонент с Colllision Check в кодовой коробке

Наконец создать Игра Компонент, который связывает все остальные в кодовой коробке

Обратите особое внимание на код код

  const { store, state } = useRaxy(
    (store) => ({
      bricks: store.bricks,
      game: store.game
    }),
    { game: { ignoreTimeStamp: true }, bricks: { ignoreTimeStamp: true } }
  );

{ game: { ignoreTimeStamp: true }, bricks: { ignoreTimeStamp: true } }

Эта часть говорит – не перерисовать компонент при изменении детей в магазине. Таким образом, когда мяч движется и столкновения, только набрать, летучая мышь, мяч и блок, с которым он столкнулся, будет перерисован

Оригинал: “https://dev.to/tetragius/create-arkanoid-on-react-and-raxy-4pc1”

Читайте ещё по теме: