JavaScript_Projects/sliding_puzzle/slidingPuzzle.html at main · KDProgramming/JavaScript_Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
   <!--
      Author: Kylie Drawdy
      Date: 10/21/2024
   -->
   <meta charset="utf-8" />
   <title>Hands-on Project 9-4</title>
   <link rel="stylesheet" href="styles/styles.css" />
   <script src="js/library.js" defer></script>
   <script src="js/slidingPuzzle.js" defer></script>
</head>

<body>
   <header>
      <h1>
         Sliding Eight Puzzle
      </h1>
   </header>

   <section>
      <p id="intro">
         Arrange the blocks in numeric order from 1 to 8.
         To move a block into the blank space, click a block adjacent to the
         space. Click the Start button to scramble the blocks and start the
         timer. Your best score is shown below.
      </p>

      <div id="slidingBlocks">
         <div id="block1" class="block r1 c1"><img src="images/block1.jpg" alt="1" /></div>
         <div id="block2" class="block r1 c2"><img src="images/block2.jpg" alt="2" /></div>
         <div id="block3" class="block r1 c3"><img src="images/block3.jpg" alt="3" /></div>
         <div id="block4" class="block r2 c1"><img src="images/block4.jpg" alt="4" /></div>
         <div id="block5" class="block r2 c2"><img src="images/block5.jpg" alt="5" /></div>
         <div id="block6" class="block r2 c3"><img src="images/block6.jpg" alt="6" /></div>
         <div id="block7" class="block r3 c1"><img src="images/block7.jpg" alt="7" /></div>
         <div id="block8" class="block r3 c2"><img src="images/block8.jpg" alt="8" /></div>
         <div id="block0" class="block r3 c3"><img src="images/block0.jpg" alt="0" /></div>
      </div>

      <div id="controls">
            <input type="button" id="Start" value="Start" />
            <input type="text" id="timer" value="0" />
      </div>

      <p id="record">
         Your best time is <span id="best">not yet recorded</span>
      </p>
   </section>
</body>
</html>