Create Store in 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;
Create main game service for collision check
import { subscribe } from "./store";
subscribe("update", (e) => {}); // subscribe to store update
Create score counter
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 <div className="score">Blocks : {state.score}</div>;
}
Create ball
import React, { forwardRef } from "react";
import { useRaxy } from "./store";
const Ball = forwardRef((props, ref: any) => {
const { state } = useRaxy((store) => ({ ball: store.ball }));
return (
<div
ref={ref}
className="ball"
style={{ bottom: `${state.ball.y}px`, left: `${state.ball.x}px` }}
/>
);
});
export default Ball;
And then create Brick component with colllision check in codesandbox
Finally create Game component that binds all the others in codesandbox
Pay special attention to the code block
const { store, state } = useRaxy(
(store) => ({
bricks: store.bricks,
game: store.game
}),
{ game: { ignoreTimeStamp: true }, bricks: { ignoreTimeStamp: true } }
);
{ game: { ignoreTimeStamp: true }, bricks: { ignoreTimeStamp: true } }
This part says - do not redraw the component when changing children in the store.
Thus, when the ball moves and collisions, only score, a bat, a ball and a block with which it collided will be redrawn
Top comments (0)