Bring Excitement to Your Game with the Crazy Time Spin Wheel

Crazy Time Spin Wheel

Looking to create an engaging, interactive component to randomize choices and prizes? This "crazy time spin wheel" is an easy-to-use, themeable solution perfect for adding excitement to any game or app.

Spin Wheel

  

A user-friendly, customizable component for randomizing selections and awarding prizes.

Features

• Pure Vanilla JavaScript (ES6): Lightweight and dependency-free.
• Intuitive, Simple API: Designed for smooth integration.
• Momentum-Based Spinning: Spin with realistic drag and release or animate precisely to an angle with easing.
• Interactivity Options: Click-drag and touch-flick for easy user engagement.
• Responsive Layout: Adapts automatically to fit any container size.

Customizable Themes

Customize the wheel’s appearance to match your app's look. From individual item colors to label rotation and alignment, it’s easy to create unique styles. Add images, set color schemes, or adjust wheel labels for a completely tailored spin wheel.

Event Callbacks

With events like onSpin and onCurrentIndexChange, you can execute actions as the wheel spins and interacts. Spin clockwise or counterclockwise, trigger sound effects, or update visual elements in real-time for a fully immersive experience.

Installation Options

1. ESM Module
   javascript

   import { Wheel } from 'https://cdn.jsdelivr.net/npm/spin-wheel@5.0.2/dist/spin-wheel-esm.js';
2. IIFE
   html

   <script src="https://cdn.jsdelivr.net/npm/spin-wheel@5.0.2/dist/spin-wheel-iife.js"></script>
3. Local Installation
   bash

   npm install spin-wheel

Building Your Own Crazy Time Spin Wheel

1. Set Up Properties:
   javascript

   const props = { items: [ { label: 'Prize 1' }, { label: 'Prize 2' }, { label: 'Prize 3' }, ] };
2. Target Your Container:
   javascript

   const container = document.querySelector('.wheel-container');
3. Initialize the Wheel:
   javascript

   const wheel = new Wheel(container, props);

Spinning the Wheel

To control the wheel’s spin, use Wheel.spinToItem() to direct it to a specified item. Calculate the winning item on the backend, then call the following:

javascript

const winningItemIndex = await fetchWinningItemIndex(); const duration = 4000; const easing = easing.cubicOut; wheel.spinToItem(winningItemIndex, duration, true, 2, 1, easing);

For a more free-form spin, use Wheel.spin() with adjustable speed and resistance.

Adding a Pointer

The wheel component doesn’t include a pointer by default, giving you the flexibility to design and position it as you like. Overlay an image with Wheel.overlayImage or use CSS and DOM elements for a custom effect.

Flexible Configuration

The crazy time spin wheel is designed to be responsive, adjusting automatically based on its container. Sizes are percentage-based to simplify scaling, and font sizes auto-adjust for balanced readability.

Methods for Advanced Control

Here’s a quick look at the main methods:

• spin(rotationSpeed): Spins the wheel at a specific speed and slows over time.
• spinTo(rotation, duration, easingFunction): Spins the wheel to a precise angle.
• spinToItem(itemIndex, duration, spinToCenter, revolutions, direction, easingFunction): Spins to a target item with customized duration and easing.

Example Usage

Create your very own crazy time spin wheel today, customizing properties and using the Wheel API to create exciting, dynamic gameplay experiences that captivate players.