> For the complete documentation index, see [llms.txt](https://doc.lucky-cycle.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.lucky-cycle.com/games/index/candy-crush.md).

# Candy Crush

{% hint style="warning" %}
Demo: <https://campaigns.lucky-cycle.com/utils/games?game=candy-crush>
{% endhint %}

1. [#configuration](#configuration "mention")
2. [#options](#options "mention")
3. [#assets](#assets "mention")

### Configuration

<details>

<summary>JSON</summary>

```json
{
  "options": {
    "canvas_width": 550,
    "canvas_height": 550,
    "max_moves": 7,
    "time_left": 0,
    "game_rows": 7,
    "game_columns": 7,
    "header_height": 0,
    "margin_height_top": 0,
    "margin_height_bottom": 0,
    "backgroundColor": "transparent",
    "backgroundPosition": "center",
    "highlightColor": "black",
    "textColor": "white",
    "headerColor": "black",
    "moveColor": "white",
    "clueColor": "black",
    "datas": [
      {
        "img": GAME_URL + "/item-1.png",
        "points": 100,
        "proba": 1
      },
      {
        "img": GAME_URL + "/item-2.png",
        "points": 100,
        "proba": 1
      },
      {
        "img": GAME_URL + "/item-3.png",
        "points": 100,
        "proba": 1
      },
      {
        "img": GAME_URL + "/item-4.png",
        "points": 100,
        "proba": 1
      },
      {
        "img": GAME_URL + "/item-5.png",
        "points": 100,
        "proba": 1
      },
      {
        "img": GAME_URL + "/item-6.png",
        "points": 100,
        "proba": 1
      }
    ]
  },
  "texts": {
    "en": {
      "score": "Score",
      "move_left": "Moves",
      "time_left": "Time remaining",
      "flush": "No more combinations…",
      "flush2": "Shuffle!",
      "gameover": "Game over!",
      "gameover2": "Did you win?"
    },
    "fr": {
      "score": "Score ",
      "move_left": "Déplacements ",
      "time_left": "Temps restant ",
      "flush": "Plus de combinaisons possibles…",
      "flush2": "Redistribution !",
      "gameover": "Le jeu est terminé !",
      "gameover2": "Avez-vous gagné ?"
    },
    "nl": {
      "score": "Score",
      "move_left": "Bewegingen",
      "time_left": "Resterende tijd",
      "flush": "Geen meer combinaties…",
      "flush2": "Herverdeling!",
      "gameover": "Het spel is afgelopen!",
      "gameover2": "Heb je gewonnen?"
    }
  },
  "images": {
    "backgroundImage": "",
    "rewards": {}
  }
}
```

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>canvas_width / _height
</code></pre></td><td>Integer</td><td>Size of the game.</td><td>550 / 380</td></tr><tr><td><pre><code>max_moves
</code></pre></td><td>Integer</td><td>Number of moves allowed.</td><td>10</td></tr><tr><td><pre><code>time_left
</code></pre></td><td>Integer</td><td>Time before game over <mark style="color:red;">(if no </mark><em><mark style="color:red;">max_moves</mark></em><mark style="color:red;">)</mark>. <mark style="color:orange;">If both </mark><em><mark style="color:orange;">moves</mark></em><mark style="color:orange;"> and </mark><em><mark style="color:orange;">time</mark></em><mark style="color:orange;"> are set, </mark><em><mark style="color:orange;">time</mark></em><mark style="color:orange;"> is used!</mark></td><td>0</td></tr><tr><td><pre><code>game_rows / _columns
</code></pre></td><td>Integer</td><td>Number of rows / columns in the game.</td><td>6 / 9</td></tr><tr><td><pre><code>header_height
margin_height_top
margin_height_bottom
</code></pre></td><td>Integer</td><td><mark style="color:yellow;">[Advanced]</mark> Layout adjustements.</td><td>0 / 0 / 0</td></tr><tr><td><pre><code>backgroundColor
</code></pre></td><td>String</td><td>Background colour (visible if no image).</td><td>"transparent"</td></tr><tr><td><pre><code>backgroundPosition
</code></pre></td><td>String</td><td>Background image positioning <em>(CSS)</em>.</td><td>"center"</td></tr><tr><td><pre><code>highlightColor
</code></pre></td><td>String</td><td>Colour of item selection.</td><td>"black"</td></tr><tr><td><pre><code>textColor
</code></pre></td><td>String</td><td>Texts color.</td><td>"white"</td></tr><tr><td><pre><code>headerColor
</code></pre></td><td>String</td><td>Header background colour.</td><td>"black"</td></tr><tr><td><pre><code>moveColor
</code></pre></td><td>String</td><td>Colour of the line showing the current move.</td><td>"white"</td></tr><tr><td><pre><code>clueColor
</code></pre></td><td>String</td><td>Colour of the clue line.</td><td>"grey"</td></tr><tr><td><pre><code>datas > points
</code></pre></td><td>Integer</td><td>Points given per item matched.</td><td>100</td></tr><tr><td><pre><code>datas > proba
</code></pre></td><td>Integer</td><td>Chances of the item to drop in the grid.</td><td>1</td></tr><tr><td><pre><code>score
</code></pre></td><td>String</td><td>Text in the header.</td><td>"Score"</td></tr><tr><td><pre><code>move_left
</code></pre></td><td>String</td><td>Text in the header <mark style="color:orange;">(if </mark><em><mark style="color:orange;">max_moves</mark></em><mark style="color:orange;"> set)</mark>. </td><td>"Moves"</td></tr><tr><td><pre><code>time_left
</code></pre></td><td>String</td><td>Text in the header <mark style="color:orange;">(if </mark><em><mark style="color:orange;">time_left</mark></em><mark style="color:orange;"> set)</mark>.</td><td>"Time remaining"</td></tr><tr><td><pre><code>flush / flush2
</code></pre></td><td>String</td><td>Text displayed if no more combinations.</td><td>"No more combinations..." / "Shuffle!"</td></tr><tr><td><pre><code>gameover / gameover2
</code></pre></td><td>String</td><td>Text displayed at the end of the game.</td><td>"Game over!" / "Did you win?"</td></tr></tbody></table>

### Assets

<table><thead><tr><th>Key</th><th>Size</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>backgroundImage
</code></pre></td><td>550 x 380px <mark style="color:green;">(fit the canvas config size)</mark>.</td><td>Background of the game.</td><td>/</td></tr><tr><td><pre><code>datas > img
</code></pre></td><td>64 x 64px</td><td>Items of the game <mark style="color:red;">(must be square)</mark>.</td><td><a href="https://statics.lucky-cycle.com/files/_games/candy-crush/item-1.png">/item-1.png</a></td></tr></tbody></table>