Game Instructions

Tap a tile to toggle its color. When a tile changes nearby tiles may change as well. Each move affect multiple tiles. The target is to turn all tiles into yellow in the fewest steps possible.

Press 'j' to show/hide the game. Press 'i' to show/hide the instructions. Press 't' to show/hide the top score table.

Steps: 0

Top Scores

Name Steps
Press J to toggle the game, I to toggle instructions, and T to toggle the top scores

Congratulations!

You solved the puzzle in 0 steps!

Success!

Score submitted successfully!

Error

Failed to submit score. Please try again.

HTML5 History API

The HTML5 History API allows us to manipulate the web browser history. The new capabilities this API adds include the possibility to add new entries into the web browser history and to change the visible URL address the web browser shows without any refresh.

The following code sample shows how simple it is to change the URL address the web browser shows without any refresh.

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
 <script type="text/javascript">
 var ob1 = { str: "abc1" };
 window.history.pushState(ob1, "blue data", "blue.html");
 </script>
 <h1>bla bla bla</h1>
</body>
</html>

The following video clip shows the execution of this code sample, overviews it and explains it step by step.

You can find more training material for learning this topic in my Introduction to HTML5 course. You can find its community free version at http://abelski.lifemichael.com.

Share:

The Beauty of Code

Coding is Art! Developing Code That Works is Simple. Develop Code with Style is a Challenge!

Update cookies preferences