Snake Game Component

Introduction 

What Is the Snake Game Component 

The Snake Game Component allows you to create a classic snake game with a customizable appearance. By adjusting various settings, you can design a snake game that aligns with your brand and marketing campaign. 

Concepts 

Customize game appearance and controls 

All of the images in the game are customizable. You also have the option to customize the game container background. With this, you can use a custom image that matches your brand and current marketing campaign. The Snake Game Component is responsive and will resize to full width of the screen and adjust the size of each game element accordingly.

You can add a custom button and bind it with Start, Stop, and Pause actions to control the game state and Move Up, Move Down, Move Left, and Move Right actions to control snake movement. You can also use keyboard Arrow keys to control the snake movement. 

Customize game setting 

In the game settings, you can the change Horizontal Grid Size and Vertical Grid Size of the game to make the game wider or taller depending on your needs.

The edibles like Food, Speed Up, Speed Down, Traps, and three Prizes in this game have a Visible Probability setting for customizing the probability of each edible to appear on screen and Visible Duration to customize how long each edible will stay visible on screen. 

Speed up and speed down has Speed Scale setting that you can customize to control the snake speed increment or decrement after snake ate it.

For the three prizes, you can customize Min Score to set the minimum score required for each prize to appear on the screen and Max Visible Times to customize how many times each prize can appear on the screen. 

How to Configure 

This section will guide you through the configuration options available for the Snake Game Component, helping you design an engaging game for your marketing campaign. 

Game Settings 

• Horizontal Grid Size: Set the horizontal grid dimensions for the game. Ensure it is a positive value to allow movement in the left and right directions. 
• Vertical Grid Size: Set the vertical grid dimensions for the game. Ensure it is a positive value to allow movement in the up and down directions. 
• Score Increment: Set the game’s score increment value. This value is added to the current score each time the snake eats food. The value must be greater than 0. 
• Snake Base Speed: Set the snake’s initial speed when starting the game. Customize the snake’s initial speed by providing a min value of 0 or max value of 10. The min value will make the snake move every 300 milliseconds and make the snake move slow. The max value will make the snake move every 120 milliseconds and make the snake move fast. The value between will scale automatically in milliseconds. 
• Snake Start Size: Set the snake’s initial body length when starting the game. Ensure it aligns with the grid size provided to prevent unintentional game over situations. 

Game Asset

Customize the visuals of each in-game item by providing its image. Ensure the images size is 200×200 pixels 

• Head Image: Set the snake head image. Ensure the snake face faces in the right direction. 
• Body Image: Set the snake body image. 
• Body Corner Image: Set the snake body corner image for animating direction changes. Ensure the corner of the image is at the top left. 
• Tail Image: Set the snake tail image. Ensure the tip of the tail faces the right direction. 
• Food Image: Set the snake food image. 
• Speed Up Image: Set the speed up power image. 
• Speed Down Image: Set the speed down power image. 
• Trap Image: Set the trap image. 
• Prize One Image: Set the prize one image. 
• Prize Two Image: Set the prize two image. 
• Prize Three Image: Set the prize three image. 

Edible Settings 

Food Configuration 

• Snake body length and game score will increase when food is eaten. Food has default value for Food Visible Probability and Food Visible Duration set to 10 since this is a classic snake game. 

• Food Visible Probability: Customize the probability of food appearing on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then food will never appear on screen. If you set it to 10 then the food will appear immediately after the last one was eaten. The value between will scale automatically. 
• Food Visible Duration: Customize the duration for which food stays on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then food will only appear for one second. If you set it to 10 then the food will not disappear until it’s eaten. The value between will scale automatically in milliseconds. 

Speed Up Configuration 

Snake speed will increase when speed up is eaten. 

• Speed Up Scale: Customize the speed up increment by providing a min value of 0 or max value of 10. The min value will increase snake speed by 5 milliseconds. The max value will increase snake speed by 40 milliseconds. The value between will scale automatically in milliseconds. 
• Speed Up Visible Probability: Customize the probability of speed up appearing on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then speed up will never appear on screen. If you set it to 10 then the speed up will appear immediately after the last one was eaten. The value between will scale automatically. 
• Speed Up Visible Duration: Customize the duration for which speed up stays on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then the speed up will only appear for one second. If you set it to 10 then the speed up will not disappear until it’s eaten. The value between will scale automatically in milliseconds. 

Speed Down Configuration 

Snake speed will decrease when speed down is eaten. 

• Speed Down Scale: Customize the speed down decrement by providing a min value of 0 or max value of 10. The min value will decrease snake speed by 5 milliseconds. The max value will decrease snake speed by 40 milliseconds. The value between will scale automatically in milliseconds. 
• Speed Down Visible Probability: Customize the probability of speed down appearing on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then the speed down will never appear on screen. If you set it to 10 then the speed down will appear immediately after the last one was eaten. The value between will scale automatically. 
• Speed Down Visible Duration: Customize the duration for which speed down stays on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then the speed down will only appear for one second. If you set it to 10 then the speed down will not disappear until it’s eaten. The value between will scale automatically in milliseconds. 

Trap Configuration 

Game Over will be triggered when trap is eaten. 

• Trap Visible Probability: Customize the probability of traps appearing on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then trap will never appear on screen. If you set it to 10 then the trap will appear immediately after the last one was eaten. The value between will scale automatically. 
• Trap Visible Duration: Customize the duration for which traps stay on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then trap will only appear for one second. If you set it to 10 then the trap will not disappear until it’s eaten. The value between will scale automatically in milliseconds. 

Prize Configuration

Prize One Configuration

You can customize what action or trigger to run when prize one is eaten. Initially, it will do nothing when eaten. 

• Prize One Visible Probability: Customize the probability of prize one appearing on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then prize one will never appear on screen. If you set it to 10 then the prize one will appear immediately after the last one was eaten. The value between will scale automatically. 
• Prize One Visible Duration: Customize the duration for which prize one stays on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then prize one will only appear for one second. If you set it to 10 then the prize one will not disappear until it’s eaten. The value between will scale automatically in milliseconds. 
• Prize One Score Increment: Set prize one score increment value. This value is added to the current score each time the snake eats prize one. The value must be 0 or greater.
• Prize One Min Score: Customize the minimum score required for prize one to appear on the screen. 
• Prize One Max Visible Times: Customize how many times prize one can appear on the screen. If you set it to 0 then the prize one will never appear. 

Prize Two Configuration 

You can customize what action or trigger to be run when prize two is eaten. Initially, it will do nothing when eaten. 

• Prize Two Visible Probability: Customize the probability of prize two appearing on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then prize two will never appear on screen. If you set it to 10 then the prize two will appear immediately after the last one was eaten. The value between will scale automatically. 
• Prize Two Visible Duration: Customize the duration for which prize two stays on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then prize two will only appear for one second. If you set it to 10 then the prize two will not disappear until it’s eaten. The value between will scale automatically in milliseconds. 
• Prize Two Score Increment: Set prize two score increment value. This value is added to the current score each time the snake eats prize two. The value must be 0 or greater.
• Prize Two Min Score: Customize the minimum score required for prize two to appear on the screen. 
• Prize Two Max Visible Times: Customize how many times prize two can appear on the screen. If you set it to 0 then the prize two will never appear. 

Prize Three Configuration 

You can customize what action or trigger to be run when prize three is eaten. Initially, it will do nothing when eaten. 

• Prize Three Visible Probability: Customize the probability of prize three appearing on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then prize three will never appear on screen. If you set it to 10 then the prize three will appear immediately after the last one was eaten. The value between will scale automatically. 
• Prize Three Visible Duration: Customize the duration for which prize three stays on the screen by providing a min value of 0 or max value of 10. If you set it to 0 then prize three will only appear for one second. If you set it to 10 then the prize three will not disappear until it’s eaten. The value between will scale automatically in milliseconds. 
• Prize Three Score Increment: Set prize three score increment value. This value is added to the current score each time the snake eats prize three. The value must be 0 or greater.
• Prize Three Min Score: Customize the minimum score required for prize three to start appearing on the screen. 
• Prize Three Max Visible Times: Customize how many times prize three can appear on the screen. If you set it to 0 then the prize three will never appear. 

Controls 

The Snake Game Component provides simple and intuitive controls for navigating the snake: 

Movement 

• Actions: Use the actions to bind with your button and control the snake’s movement. 
• Move Up: Move the snake upwards. 
• Move Down: Move the snake downwards. 
• Move Left: Move the snake to the left. 
• Move Right: Move the snake to the right. 
• Arrow Keys: Use the arrow keys on your keyboard to control the snake’s movement. 
• Up Arrow: Move the snake upwards. 
• Down Arrow: Move the snake downwards. 
• Left Arrow: Move the snake to the left. 
• Right Arrow: Move the snake to the right. 

Game State 

Players can press the `Escape/esc` key to pause or resume the game. Alternatively, they can use the dedicated game controls button: 

• Actions: Use the actions to bind with your custom button and control the game state. 
• Start: Start or resume the game. 
• Pause: Temporarily stops the game. 
• Stop: Reset the game. 
• Restart Game: In case the snake eats a trap or its own body, it will be game over. You can then press the `Start` button to restart the game from the beginning. 

Triggers 

• FoodCollected: Triggered when snake ate food. 
• SpeedIncreased: Triggered when snake ate speed up. 
• SpeedIncreased: Triggered when snake ate speed down. 
• PrizeOneCollected: Triggered when snake ate prize one. 
• PrizeTwoCollected: Triggered when snake ate prize two. 
• PrizeThreeCollected: Triggered when snake ate prize three. 
• PrizeThreeCollected: Triggered when snake ate trap. 
• GameOver: Triggered when snake ate its body or trap.