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.