Forum Discussion
Step by Step on how to create a Snake and ladder puzzle
Hi all. I am working on an assignment on course gamification. I need help with a step-by-step process on how to create a Snake and ladder puzzle on articulate storyline
I can briefly outline the logic of the process:
- We need to create a die. When we click the button, we roll the die. You can use the search function to find a template for this activity on this site. The logic for rolling the die is as follows: we create a numeric variable and name it something like "die." Then we create the die itself, which should be an object with 6 states (one for each side of the die). When the button is pressed, we launch a trigger that changes this variable to a random value from 1 to 6. Next, we change the die's state to correspond to the rolled number (change the die's state to 1 if the variable "die" equals 1, and so on for the other sides of the die). If desired, you can add some animation for changing the die faces.
- We need to move the player's token around the game board. For this, we will create another numeric variable, which we can call "GameBoard." After rolling the die, we will add the value of the "die" variable to the "GameBoard" variable. Now, let's move the token. If we want to move the token without animation (so that it just appears where needed), we can use triggers similar to those for the die. For example, if our game board has 20 cells, we create 20 states for the player's token so that it stands on different cells in different states. We add 20 triggers (when the button is pressed, change the token's state to 7 if the value of the "Game_Board" variable equals 7). If we want to add an animation effect for moving the token, it will be a bit more complicated.
- Ladders. If you've reached this stage and everything is working, it will be quite simple now. For example, if we have a ladder that goes from cell 8 to 12, we write a trigger that, when the "GameBoard" variable changes and it equals 7, changes the value of the "GameBoard" variable to 12.
Thank you, Alex, for this great tip. This has surely Helped me.
Regarding the animation of the player's token moving across the board, there are 2 implementation options:
- It can be implemented using Storyline animations and triggers. This is a very complex approach. If your game board has a simple shape (all cells are the same size and have simple geometry—like moving 10 cells to the right, then 1 up, then 10 cells to the left, etc.), then you can create 3 movement animations (left, right, and up) and use a complex trigger system to launch these animations. For example: If the die shows 5, we launch the movement animation. At the end of this animation, we decrease the value shown on the die by 1, and if the resulting number is greater than 0, we launch the animation again (the choice of animation—left, right, or up—depends on which cell we are currently on). If the board has a complex shape, then we will need to create separate animations for each step (if you have 30 cells on the board, you need to create 30 animations: how the player moves from cell 1 to cell 2, then from 2 to 3, etc.).
- A simpler way is to use the GSAP library. It is excellent for such cases. This library is designed for animating objects. The logic of the script will be as follows: We create an array of coordinates (in which we specify the X and Y coordinates of all the cells on the game board). Then we get from Storyline the information about where the player is currently standing and what value was rolled on the die. Then we sequentially move the player's token to the coordinates recorded in the array. At the end of the animation, we inform Storyline that the animation is complete, and the next turn can be taken.
