Sand Game JS

More scenarios on SandSaga.com

About

Sand Game JS is a fast, free and open-source falling-sand game (engine) for desktop & mobile browsers. It allows players to experiment with various elements, such as sand, soil, water and fire. With grass and trees growing on soil, and other natural processes, it offers a unique experience. Sand Game JS is primarily tested on Google Chrome and Google Chrome for Android. Sand Game JS is the browser-based successor to Sand Game 2.

How to Play

Sand Game JS can be played using either a mouse and keyboard or a touch screen

• For mouse and keyboard users, the left mouse button (LMB) is used for drawing, while the right mouse button (RMB) is used for erasing. You can draw a straight line or a rectangle, you can hold the shift or ctrl key while dragging the LMB or RMB. To prevent elements from being redrawn, you can hold the alt key while drawing. To fill an area, hold both the ctrl and shift keys while using the LMB or RMB. Additionally, the middle mouse button can be used to create a meteor.

• On a touch screen device, touch input or dragging can be used to draw with the primary brush. Simply touch and drag your finger on the screen to create elements.

Scenes There are five scenes available for exploration. Furthermore, there are three distinct modes available for experimentation: boxed, fall-through, and erasing. The boxed mode confines the elements within the boundaries of the canvas. The erasing mode automatically removes elements when they reach the bottom of the canvas. The fall-through mode creates a continuous cycle where elements repeatedly fall from the top to the bottom, providing ongoing interactions and dynamics.

Scale Adjustment By default, the canvas size and the scale (element size) are calculated automatically based on the screen dimensions and other parameters. By increasing the element size, fewer elements will appear on the canvas, which improves performance but also leads to a more pixelated appearance. On the other hand, if the element size is decreased, more elements will populate the canvas, providing a finer level of detail, but potentially impacting performance. The Performance metric is a good indicator.

Exporting/Importing Canvas content can be exported (downloaded) for later use. These exports can then be opened or seamlessly placed into a scene.

Image Templates By importing a JPG/PNG... image (in the same way as an exported canvas), it is possible to create a template that can be placed onto the canvas. This feature enables to incorporate custom graphics.

Development

• ... be fast and stable,
• ... be able to handle small elements (= a lot of elements),
• ... look natural and not ugly,
• ... simple (with not too many buttons),
• ... perform well on mobile and desktop.

The source code is hosted on GitHub.

Changes in individual versions are listed in the version history.

Feedback is welcome.

History

I created my first basic falling sand game in 2013 and named it Sand Game.

The development of Sand Game 2, based on JavaFX, began in 2014 and concluded with its final version in 2017. Despite its success, the game’s reach was limited as it was a Java desktop application.

In 2022, the development of Sand Game JS began. Hosted on harag.cz, the game increased website traffic from tens to tens of thousands. With its growing popularity, I decided to build Sand Saga on top of the Sand Game JS engine and host it on a new website, SandSaga.com.

Similar Games

While there are numerous games in this genre, each with their own unique goals and features, none offer the same level of satisfying sand falling as Sand Game 2 and Sand Game JS :). But if you're done with my games, I recommend these:

• The Powder Toy (pc)
• PLOP by Caltrop (browser)
• Sandspiel by Max Bittker (browser)