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
Our aim is the use a single picture file called flower.png and to create 9 CSS classes for each tile of the picture as displayed below:
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
We now need to position our 9 tiles using a 3×3 table layout in HTML & CSS. To do so, we will use the display property in CSS using the following three options:
- 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
For each cell we will add an onClick attribute to call a JavaScript function to implement the game logic when the user clicks on one of the 9 cells.
We will also add a re-shuffle button to shuffle all the tiles and start a new game.
Full Code
We have implemented the HTML and CSS code above and added on onClick attribute on each tile. When a tile is clicked the javascript function clickTile() is called. This is where the code will check if the tiles can be swapped.
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:
Your Challenge
Amend the HTML, CSS and JavaScript code provided above to create a sliding puzzle based on a 4×4 grid (instead of 3×3).
Tips:
- Start by changing the HTML code to add enough <DIV> tags to create a grid of 16 tiles.
- 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. - 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
The idea of this python challenge is to write a python program to help guitar players learn and practise new songs. 
In this challenge we will use Python code to create text-based (ASCII) animations. Each of these animations is using a main loop that repeats the given code every 0.2 seconds and clear the screen between two iterations (frames).
You have been asked to create a program to keep track of the scores from the football Premier League.
results.txt
In this challenge we will write a set of functions to calculate how many Bytes there are in a given number of kilobytes, megabytes, gigabytes, terabytes or petabytes.
Create a new Python program that will:
In this blog post you will use Python Code to complete this simulation of the game of connect 4. (
Langton’s Ant is a cellular automaton that models an ant moving on a grid of cells following some very basic rules.
LMC Simulator
Logic Gates Circuits
Network Designer
Flowchart Studio
Online Python IDE