Sliding Puzzle

The aim of this challenge is to use HTML, CSS and Javascript to create an interactive sliding puzzle.

Step 1: Creating 9 tiles from a single picture, using CSS

We will create our tiles using DIV tags. We will use the flower.png picture file as the background for each tile and by applying different background-position we will create the 9 different tiles as needed.

.tile1 {
width: 120px;
height: 120px;
background: url(flower.png)
background-position: left top;
}

.tile2 {
width: 120px;
height: 120px;
background: url(flower.png)
background-position: center top;
}

.tile3 {
width: 120px;
height: 120px;
background: url(flower.png)
background-position: right top;
}

.tile4 {
width: 120px;
height: 120px;
background: url(flower.png)
background-position: left center;
}

.tile5 {
width: 120px;
height: 120px;
background: url(flower.png)
background-position: center center;
}

.tile6 {
width: 120px;
height: 120px;
background: url(flower.png)
background-position: right center;
}

.tile7 {
width: 120px;
height: 120px;
background: url(flower.png)
background-position: left bottom;
}

.tile8 {
width: 120px;
height: 120px;
background: url(flower.png)
background-position: center bottom;
}

.tile9 {
width: 120px;
height: 120px;
background: white;
}

Step 2: Table Layout

• display: table;
• display: table-row;
• display: table-cell;

This is an alternative to using the <TABLE>, <TR> and <TD> tags in HTML.

<div id="table" style="display: table;">
   <div id="row1" style="display: table-row;">
      <div id="cell11" class="tile1" style="display: table-cell;"></div>
      <div id="cell12" class="tile2" style="display: table-cell;"></div>
      <div id="cell13" class="tile3" style="display: table-cell;"></div>
   </div>
   <div id="row2" style="display: table-row;">
      <div id="cell21" class="tile4" style="display: table-cell;"></div>
      <div id="cell22" class="tile5" style="display: table-cell;"></div>
      <div id="cell23" class="tile6" style="display: table-cell;"></div>
   </div>
   <div id="row3" style="display: table-row;">
      <div id="cell31" class="tile7" style="display: table-cell;"></div>
      <div id="cell32" class="tile8" style="display: table-cell;"></div>
      <div id="cell33" class="tile9" style="display: table-cell;"></div>
   </div>
</div>

Step 3: Adding Interactivity and Game Logic using JavaScript

We will also add a re-shuffle button to shuffle all the tiles and start a new game.

Full Code

We have also added the “New Game” button and the JavaScript code to reshuffle all the tiles of the grid.

See the Pen Sliding Puzzle by 101 Computing (@101Computing) on CodePen.

Note that this script uses one picture. In case this picture is not displaying properly, you may have to replace its URL in the CSS code, using the following address:

• Flower Image: https://www.101computing.net/wp/wp-content/uploads/flower.png

Your Challenge

Tips:

1. Start by changing the HTML code to add enough <DIV> tags to create a grid of 16 tiles.
2. Change the CSS code to add extra classes for .tile10, .tile11, … to .tile16.
   Not that you will have to use more accurate background positioning using the following approach:
   

   .tile10 { width: 90px; height: 90px; background: url(flower.png) background-position: -90px -180px; }

   You will also need to revisit the CSS definitions for classes .tile1, .tile2, … to .tile9.
   Note that the white tile should now be tile 16.

3. Adapt the JavaScript code to ensure it works with a 4 by 4 grid instead of a 3 by 3 grid.

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area