Creating the layout

Create a file named index.html inside the Chapter2 folder. It will contain the entire HTML. For the JavaScript code, create another file named puzzle.js inside the js folder of Chapter2. Now the Chapter2 folder will have four items: the index.html file, the image file for the puzzle (kitty.jpg), the js folder, and the css folder.

Creating the markup for the puzzle

Our first step towards creating the puzzle will be to prepare the required HTML markup. This HTML markup will then be styled using CSS. The following HTML markup will prepare the bare-bones structure of the page required to make the puzzle:

<html>
  <head>
    <meta charset="utf-8">
    <title>Designing a Jigsaw Puzzle</title>
    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
  </head>
  <body>
    <div class="container">
      <div id="pieceBox"></div>

      <div id="puzzleContainer"></div>

      <class="clear">&nbsp;</div>
      <div class="clear"> </div>
      <span id="message"></span>

      <div class="clear"> </div>

      <ul class="buttons">
        <li><button id="start">Start</button></li>
        <li><button id="reset">Reset</button></li>
      </ul>
    </div>

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="js/puzzle.js" type="text/javascript"></script>
  </body>
</html>

In the preceding markup, we have a div element with the value of id as container, which is a wrapper for whole page. Inside it are two div elements with pieceBox and puzzleContainer as the values for id. The element pieceBox will act as a box in which we will keep the 16 sliced pieces of the image, whereas the element puzzleContainer will be the canvas on which users will drop these pieces and arrange them. Next, there is a span element where we will show a success or error message after the user has placed all the pieces. There is also a list containing two list items. We will use them as Start and Reset buttons.

Finally, at the bottom of the page are the references to the jQuery, jQueryUI, and puzzle . js files.

Tip

Ensure that the path for the CSS and JavaScript files is correct.

Styling elements

After our page structure is ready, we need to add CSS styles for different elements created in the markup to give the page the desired appearance. This will be done by adding some CSS rules to the head section of the index.html file. The styles that we will use are explained here:

<style type="text/css">
  body{
    font-family:arial,verdana;
    font-size:12px;
    margin: 0 auto; 
    width: 900px;
  }
  div.container{
    border: 1px solid #000;
    float:left;
    margin:0 auto;
    padding:10px;
    width: 100%;
  }

  #pieceBox{
    border: 1px solid #000;
    float: left;
    height: 408px;
    margin: 0 auto;
    position:relative;
    width: 408px;
  }

  #puzzleContainer
  {
    border: 1px solid #000;
    float: right;
    margin: 0 auto;
    height: 408px;
    width: 408px;
  }

  div.img{
    background-image: url('kitty.jpg');
    background-repeat: no-repeat;
    height:100px;
    width:100px;
    float:left;
    border:1px solid #000;
  }
  ul{
    text-align:center;
    list-style:none;
    margin:0;
    padding:0;
  }

  span#message{
    clear:both;
    display: none; 
    font-size: 20px;
    padding: 20px 0;
    text-align: center; 
    width: 100%; 
  }

  ul.buttons{
    cursor:pointer;
    margin-top:10px;
  }

  ul button{
    border:1px solid #000;
    font-weight:bold;
    margin:0 auto;
    padding:10px 0;
    text-align:center;
    width:175px;
    display:inline-block;
  }
  #reset{
    display:none;
  }
  .clear{
    clear:both;
  }
</style>

First, we defined some basic styles for body, container, pieceBox, and puzzleContainer. Then we defined styling for the div elements that have the .img class. This class will be applied to the pieces of the puzzle. Since it will not be efficient to create 16 different images to use as jigsaw pieces, we will use a single image as a sprite. Therefore, we set the background-image property to kitty.jpg, which is the image that we are going to use. Using the background-position CSS property, we will be able to show a specific 100 px x 100 px part of the image.

After this, we defined some CSS properties for the success or error message and the buttons. In the last CSS rule, we hid the Reset button as it will not be required initially.

After writing the HTML and markup, we are ready to make the puzzle functional by plugging in the JavaScript to create the game.

Meanwhile, run the index.html file in your browser and you will see a screen with two boxes, as shown in the following screenshot. Based on their IDs, we will call these boxes pieceBox and puzzleContainer, respectively:

Styling elements
上一章目录下一章