Syntaxic Fruit Fusion

Syntaxic Fruit Fusion is a high-performance physics-based merge game built with React and Matter.js. Inspired by the viral "Suika Game" mechanics, this project features a custom-tuned Liquid Physics engine designed to provide ultra-smooth fruit movement, zero-friction interactions, and seamless object stacking.

Features

• 🍎 Smooth Liquid Physics: Custom-tuned Matter.js engine for high-performance fruit interactions.
• 🏗️ React Component: Easy to integrate into any React application.
• 🔧 Highly Customizable: Control sizes, gravity, fruit types, and callbacks.
• 🕹️ External Controller: Use React refs to programmatically control the game (Reset, Pause, Spawn).
• 🇬🇧 Multilingual Ready: Fully translated to English with a premium aesthetic.

Installation

npm install syntaxic-fruit-fusion

Note: Depends on react, react-dom, and matter-js.

Quick Start

import { useRef } from 'react';
import { FruitFusion } from 'syntaxic-fruit-fusion';
import 'syntaxic-fruit-fusion/style.css';

function App() {
  const gameRef = useRef(null);

  const handleScore = (score) => console.log('Current Score:', score);
  const handleGameOver = (finalScore) => console.log('Game Over!', finalScore);

  return (
    <div>
      <div className="controls">
        <button onClick={() => gameRef.current?.reset()}>Reset</button>
        <button onClick={() => gameRef.current?.pause()}>Pause</button>
      </div>

      <FruitFusion 
        ref={gameRef}
        width={400}
        height={600}
        onScoreChange={handleScore}
        onGameOver={handleGameOver}
      />
    </div>
  );
}

API Documentation

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | number | 400 | Width of the game canvas. | | height | number | 600 | Height of the game canvas. | | onScoreChange | function | undefined | Callback fired when the score updates. Returns (score). | | onGameOver | function | undefined | Callback fired when the game ends. Returns (finalScore). | | fruitTypes | array | (Internal) | Custom array of fruit objects (emoji, radius, score, color). | | dangerLineY | number | 100 | The Y-coordinate threshold for the Game Over state. | | gravity | number | 2.5 | Physics gravity strength. |

Ref Methods

| Method | Description | | :--- | :--- | | reset() | Clears the board and restarts the game. | | pause() | Suspends the physics engine and blocks fruit dropping. | | resume() | Resumes physics and game interactions. | | spawnFruit(x, y, index) | Manually spawns a specific fruit at coordinates. |

Support the Project

If you find this project useful, consider supporting the development!

Developed with ❤️ by Syntaxic Labs.