[Gametize Tech] Knowledge: Minigame - Spin the Wheel

Background

Spin the Wheel games have their roots in carnival games, where physical wheels were spun to determine prizes or outcomes. The challenge in developing a digital version is to recreate the excitement and randomness of the physical wheel in a virtual environment. To this end, Gametize allows for customization of the wheel's probabilities, and outcomes. This enables game creators to tailor the experience to their specific needs, such as creating games with different prize distributions.

Disclaimer: the segment size does not necessarily indicate the odds of landing on each reward (even if we code it such that it does) and the points earned are subject to other terms and conditions.

Data for front-end

• Challenge ID - long

• Challenge title - String

• Challenge description - String

• Image (to render as background) - String

• List of options: JSON
  Note: This array will be provided to the front-end as JSON instead of Java objects so that it can be processed by Javascript to render the wheel.

  • Option ID - long

  • Option text - String

  • Points to award - int

Sample JSON for options:

{
  "options": [
    {
      "id": 1001,
      "name": "Outcome 1",
      "points": 25
    },
    {
      "id": 1002,
      "name": "Outcome 2",
      "points": 50
    },
    {
      "id": 1003,
      "name": "Outcome 3",
      "points": 75
    },
    {
      "id": 1004,
      "name": "Outcome 4",
      "points": 1000
    }
  ]
}

Front-end Rendering

Initial Render

Using the above JSON example, we have 4 wedges in the wheel. These wedges are rendered with equal sizes.

User Interaction

When the user clicks on “Spin Now!”, the wheel will start playing a spinning animation and at the same time, an API call is made to generate a random result for the current user for this challenge. (Input parameters: session_key and challenge_id.)

https://[APP_DOMAIN]/endminigame?id=[CHALLENGE ID]&session_key=[SESSION KEY]

You may assume that the JSON result of the above API call will be returned like this:

{
    ...
    "id": 3,
    "code": 200,
    "optionPoints": 25,
    "optionId": 1001,
    "optionName": "Outcome 1",
    ...
}

Display Result

After 5 seconds, the spinning stops and the result of the spin is displayed.