Forum Discussion

AlexMilyaev-f86's avatar
AlexMilyaev-f86
Community Member
12 months ago

Creating the Snake Game in Articulate Storyline without using JS and web objects.

Hello, everyone!
 
I've always been drawn to creating something unique using Articulate Storyline, and I decided to challenge myself by developing the classic game "Snake" without using JavaScript and web objects, relying solely on Storyline triggers.
 
 
Development:
It took me around 600 triggers to develop the Snake game.
 
How is the snake movement implemented?
Each segment of the snake is a separate object with four movement directions (up, down, left, and right), triggered sequentially. When element1 completes its movement (e.g., upward or in any other direction), element2 starts moving in the same direction. Essentially, each subsequent element replicates the movement of the previous one after its completion.
 
 
How is the snake growth mechanic implemented?
In reality, our snake is always at its maximum size, but at the beginning of the game, only the first 3 snake elements have a "State Normal," while the rest have a different state with elements' transparency set to 100%. So, we simply don't see the remaining part of the tail. After picking up an apple, we switch the next tail element to "Normal."
 
How is the losing mechanic implemented?
When the head of our snake collides with any tail element (visible or invisible), we check how many apples have been collected. This helps us determine whether this element is visible or not. If visible, we lose; if not, the game continues.
 
 
Conclusion and Lessons:
This project confirmed for me that Articulate Storyline can be a powerful tool not only for education but also for creating engaging games. The limitations became a source of inspiration, and I learned to see new possibilities where I hadn't seen them before. Creating the "Snake" game in Articulate Storyline is a story of how creativity can overcome technical constraints.
 
You can view the project using the link below:
  • Alex, this is a sss-pectacular example! 🐍👏 I'm impressed! And it works so smoothly! Thanks for sharing your project and the details of how you made it!

    • AlexMilyaev-f86's avatar
      AlexMilyaev-f86
      Community Member

      Thank you for the feedback. Such comments are very motivating. Now I have a strong desire to share some other projects.

  • AdamZamczyk's avatar
    AdamZamczyk
    Community Member

    This is a really great implementation, and thanks for sharing the logic behind it. Can I suggest to make the control buttons slightly bigger (it's hard to click on a phone) or even consider changing the game size to a mobile first 1080x1920?

    Similar to this game built by me https://aiquiz.spongelearning.com/ 

    • AlexMilyaev-f86's avatar
      AlexMilyaev-f86
      Community Member

      It is true, changes are indeed needed for using the project on a mobile phone.

       
      By the way, I'd like to share the .story of the project. Perhaps it can be useful to someone, and maybe others will have ideas on how to apply it in education.
      • SarahHodge's avatar
        SarahHodge
        Former Staff

        Ohhh...nice! Thank you for sharing the story file, Alex! It's always helpful to get a behind-the-scenes look at how something was created.