Modify your solution to Exercise 20.9 to use an image that is split into 16 equally sized pieces. Discard one of the pieces and randomly place the other 15 pieces in the HTML table.
What will be an ideal response?
```
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <!-- ex20_10.html -->
3
4 <HTML>
5 <HEAD>
6 <TITLE>Solution: 20.10</TITLE>
7
8 <SCRIPT LANGUAGE = "JavaScript">
9 var cells, swapped, emptyCell, numbers = new Array ( 16 );
10
11 function setup()
12 {
13 cells = new Array(
14 new Array( cell00, cell01, cell02, cell03 ),
15 new Array( cell10, cell11, cell12, cell13 ),
16 new Array( cell20, cell21, cell22, cell23 ),
17 new Array( cell30, cell31, cell32, cell33 ) );
18
19 emptyCell = document.images[ "empty" ].src;
20
21 placeNumbers();
22 }
23
24 function placeNumbers()
25 {
26 var randomLoc, temp;
27
28 for (var i = 0; i <= 15; ++i )
29 numbers[ i ] = i;
30
31 for (var i = 0; i <= 15; ++i ) {
32 randomLoc = Math.floor( Math.random() * 15 + 1 );
33
34 temp = document.images[ i ].src;
35 document.images[ i ].src = document.images[ randomLoc ].src;
36 document.images[ randomLoc ].src = temp;
37
38 temp = parseInt( numbers[ i ] );
39 numbers[ i ] = parseInt( numbers[ randomLoc ] );
40 numbers[ randomLoc ] = temp;
41 }
42 i = 0;
43
44 for ( var rows = 0; rows < 4; ++rows )
45 for ( var cols = 0; cols < 4; ++cols ) {
46 cells[ rows ][ cols ] = document.images[ i ].src;
47 ++i;
48 }
49 }
50
51 function processClick( rowClicked, colClicked )
52 {
53 var top, bottom, left, right;
54
55 var imagesIndex = 0, emptyIndex = 0;
56
57 start: {
58 for ( var rows = 0; rows < 4; ++rows )
59 for ( var cols = 0; cols < 4; ++cols ) {
60 if( cells[ rows ][ cols ] == emptyCell ){
61 emptyCell = cells[ rows ][ cols ];
62 break start;
63 }
64 emptyIndex++;
65 }
66 }
67
68 for ( var rows = 0; rows < 4; ++rows )
69 for ( var cols = 0; cols < 4; ++cols ) {
70 top = rows - 1;
71 bottom = rows + 1;
72 left = cols - 1;
73 right = cols + 1;
74
75 swapped = false;
76
77
78
79 if ( rows == rowClicked && cols == colClicked ) {
80
81 // test cell above
82 if ( top != -1 && ( cells[ top ][ cols ] == emptyCell ) ) {
83 swap( rowClicked, colClicked, top, cols,
84 parseInt( imagesIndex ), parseInt( emptyIndex ) );
85 }
86 // test cell right
87 else if ( right != 4 && cells[ rows ][ right ] == emptyCell ) {
88 swap( rowClicked, colClicked, rows, right,
89 parseInt( imagesIndex ), parseInt( emptyIndex ) );
90 }
91 // test cell below
92 else if ( bottom != 4 &&
93 cells[ bottom ][ cols ] == emptyCell ) {
94 swap( rowClicked, colClicked, bottom, cols,
95 parseInt( imagesIndex ), parseInt( emptyIndex ) );
96 }
97 // test cell left
98 else if ( left != -1 && cells[ rows ][ left ] == emptyCell ) {
99 swap( rowClicked, colClicked, rows, left,
100 parseInt( imagesIndex ), parseInt( emptyIndex ) );
101 }
102 if ( swapped == false )
103 alert( "This move is not allowed" );
104 }
105 imagesIndex++;
106 }
107 if ( isGameOver() ) {
108 var again = window.confirm( "You Win!!! Play again?" );
109 if ( again )
110 placeNumbers();
111 }
112 }
113
114 function isGameOver()
115 {
116 var done = false;
117
118 for ( var i = 1; i <= 16; ++i ) {
119 if ( numbers[ i ] != i )
120 break;
121 else
122 done = true;
123 }
124 return done;
125 }
126
127 function swap( firstRow, firstCol, secondRow, secondCol,
128 imagesIndex, emptyIndex )
129 {
130 swapped = true;
131 // Swap cells
132 cells[ secondRow ][ secondCol ] = cells[ firstRow ][ firstCol ];
133 cells[ firstRow ][ firstCol ] = emptyCell;
134 // Swap images
135 document.images[ emptyIndex ].src = document.images[ imagesIndex ].src;
136 document.images[ imagesIndex ].src = emptyCell;
137 // Swap numbers[] array values
138 var temp = numbers[ emptyIndex ];
139 numbers[ emptyIndex ] = numbers[ imagesIndex ];
140 numbers[ imagesIndex ] = temp;
141
142 }
143 </SCRIPT>
144
145 </HEAD>
146 <BODY ONLOAD = "setup()">
147 <TABLE BORDER = "10">
148 <TR>
149 <TD ID = "cell00" ONCLICK = "processClick( 0, 0 )" >
150 <IMG SRC = "a.gif" NAME = "a" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
151 </TD>
152 <TD ID = "cell01" ONCLICK = "processClick( 0, 1 )" >
153 <IMG SRC = "b.gif" NAME = "b" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
154 </TD>
155 <TD ID = "cell02" ONCLICK = "processClick( 0, 2 )" >
156 <IMG SRC = "c.gif" NAME = "c" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
157 </TD>
158 <TD ID = "cell03" ONCLICK = "processClick( 0, 3 )" >
159 <IMG SRC = "d.gif" NAME = "d" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
160 </TD>
161 </TR>
162 <TR>
163 <TD ID = "cell10" ONCLICK = "processClick( 1, 0 )" >
164 <IMG SRC = "e.gif" NAME = "e" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
165 </TD>
166 <TD ID = "cell11" ONCLICK = "processClick( 1, 1 )" >
167 <IMG SRC = "f.gif" NAME = "f" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
168 </TD>
169 <TD ID = "cell12" ONCLICK = "processClick( 1, 2 )" >
170 <IMG SRC = "g.gif" NAME = "g" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
171 </TD>
172 <TD ID = "cell13" ONCLICK = "processClick( 1, 3 )" >
173 <IMG SRC = "h.gif" NAME = "h" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
174 </TD>
175 </TR>
176 <TR>
177 <TD ID = "cell20" ONCLICK = "processClick( 2, 0 )" >
178 <IMG SRC = "i.gif" NAME = "i" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
179 </TD>
180 <TD ID = "cell21" ONCLICK = "processClick( 2, 1 )" >
181 <IMG SRC = "j.gif" NAME = "j" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
182 </TD>
183 <TD ID = "cell22" ONCLICK = "processClick( 2, 2 )" >
184 <IMG SRC = "k.gif" NAME = "k" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
185 </TD>
186 <TD ID = "cell23" ONCLICK = "processClick( 2, 3 )" >
187 <IMG SRC = "l.gif" NAME = "l" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
188 </TD>
189 </TR>
190 <TR>
191 <TD ID = "cell30" ONCLICK = "processClick( 3, 0 )" >
192 <IMG SRC = "m.gif" NAME = "m" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
193 </TD>
194 <TD ID = "cell31" ONCLICK = "processClick( 3, 1 )" >
195 <IMG SRC = "n.gif" NAME = "n" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
196 </TD>
197 <TD ID = "cell32" ONCLICK = "processClick( 3, 2 )" >
198 <IMG SRC = "o.gif" NAME = "o" WIDTH = "50" HEIGHT = "50" BORDER = "0" >
199 </TD>
200 <TD ID = "cell33" ONCLICK = "processClick( 3, 3 )" >
201 <IMG SRC = "empty.gif" NAME = "empty" WIDTH = "50" HEIGHT = "50"
202 BORDER = "0" >
203 </TD>
204 </TR>
205 </TABLE>
206 <P><INPUT TYPE = "button" VALUE = "Shuffle Numbers"
207 ONCLICK = "placeNumbers()"></P>
208 </BODY>
209 </HTML>
You might also like to view...
FlowLayout is ________.
a. an abstract class b. a way of organizing components vertically c. the simplest layout manager d. left-aligned by default
Which piece of a data communications system handles analog input?
What will be an ideal response?
Evaluate the performance of different systems hardware including the following:
What will be an ideal response?
A(n) ________ is a file that features a particular theme, layout or subject matter
Fill in the blank(s) with correct word