Tag Archives: tangles

Update: Tangles

While giving my website a facelift I deciced that the Tangles (Live page) project needed some attention. The page was previously the main game, followed by a mess of buttons and then instructions. I rearranged the content to give a proper introduction and made an in-canvas transition screen between levels. The end result looks much nicer and now it’s almost a completely self contained game. With some more work it could be made into a standalone app for the App Store. This project also benefitted from a higher resolution canvas than the actual element size, leading to better graphics.

Screenshot

Tangles, with a new transition screen
Tangles, with a new transition screen

Tangles

I love to create games and I try to keep up with the latest web based technology to create open source games. When it became clear that all the modern browsers support the canvas I decided to create this game to see what I could make. It’s a clone of similar games such as Loops of Zen.

Links

Live page
GitHub repository

Overview

This is one of the first projects I made where the user interacts with a grid of squares on the canvas. The aim of the game is to link up the network of pieces by rotating the squares. Given that the game is so simple it did not take long to create.

Challenges

Challenge: The game needed a simple grid layout that was easy to control.
Solution: This was one of the first projects I made that had a gridlike interface on the canvas, and this model became used a lot elsewhere. One of the users asked for scroll bars for the larger levels, and this took a few iterations to get right. In the end I was satisfied with how they work, but I would feel better if they were also draggable. (Resolved)
Challenge: The game is very simple, so it should have elegant style.
Solution: I very much enjoyed creating the styles for this game, with the simple choice of colours, and simple arc paths. The code that makes the arcs is simple enough to edit quickly, but also complex enough that it took a while to assemble. (Resolved)
Challenge: One of the features is the “autosolve” function.
Solution: Once I made this game I became fascinated with finding the optimal solution, so I wrote a function that tries to solve the game. It works through the cells one by one and in each iteration it identifies squares that can only be oriented in one way, and fixes them in place. The algorithm gives up when it completes an iteration without making any changes. So far all tests have shown that it completes as much of the level as puzzle before coming to a degenerate case which has two or more valid solutions. At that point the user can intervene to resolve the degeneracy, and start the autosolver again. (Resolved)
Screenshot of Tangles.
Screenshot of Tangles.