ЗАМОЧКИ

Пример

4
1 2 3 9
3
9
4 6
1 2 3 9
3 2 1 6
9 2
4 8 6 2
1 2 3 9
3 2 1 6
9 3 2 3

Задачи:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

Ответы:

1.
4 2 6 8
3 9 4 3
5 6 7 4
7 5 3 6
2.
7 5 2 6
3 3 5 4
2 9 3 8
2 6 4 3
3.
8 4 7 9
3 1 3 6
6 3 2 4
4 8 5 7
4.
4 4 9 7
8 3 5 6
2 1 7 8
6 2 2 5
5.
9 4 6 6
5 1 2 2
2 3 1 7
8 8 4 5
6.
9 7 4 8
5 3 8 7
2 1 3 9
7 5 4 6
7.
2 3 4 9
6 4 1 9
3 6 3 3
4 1 2 6
8.
2 4 7 1
7 8 5 3
3 2 2 2
3 6 4 5
9.
5 3 7 8
4 4 9 7
3 6 8 1
3 1 2 2
10.
7 5 4 8
8 3 1 4
3 4 5 7
5 2 1 9
11.
6 3 9 9
5 1 2 3
8 2 1 5
9 8 7 8
12.
7 4 2 6
2 8 5 2
3 3 5 4
3 4 5 2
13.
3 5 9 6
6 2 5 8
3 1 1 2
3 9 5 7
14.
3 4 7 5
2 4 5 3
2 4 4 4
7 5 6 2
15.
8 2 1 3
2 7 4 5
4 6 3 7
4 3 7 8
16.
4 2 3 2
6 2 1 4
3 1 2 1
8 3 4 7
17.
5 9 2 7
4 1 2 3
3 4 6 2
3 2 7 8
18.
7 4 3 9
9 9 2 3
4 6 8 3
4 7 9 2

Правила:

- 1,4,7 - 2,3 - 3,5,9 - 0,8,9 - 0,6,8

А вот исходный код этой страницы. Здесь используется css, javascript и только одна единственная картинка. 
<html>
<head><title>Замочки</title>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
 <style>
.c1,.c2,.c3,.c6,.c9,.pl,.mi,.mu,.di,.eq {background-image:url(carpets.png) }
 
.c1 { background-position:  60px  0    }
.c2 { background-position: -60px  0    }
.c3 { background-position: -60px  60px }
.c6 { background-position:   0    60px }
.c9 { background-position:   0    0    }
.pl { background-position:  60px  20px }
.mi { background-position:  40px  20px }
.mu { background-position:  20px -60px }
.di { background-position:  20px -80px }
.eq { background-position:  20px  20px }
 
.carpet {border-collapse: collapse; padding:20px;}
.carpet tr {height:20px; padding:0px;}
.carpet td {width:20px; padding:0; text-align:center; font-weight:bold; font-family:"Franklin Gothic Medium",Tahoma; font-size:20px;}
table { font-weight:bold; font-family:"Franklin Gothic Medium",Tahoma; font-size:20px; }
div { float:left; }
 </style>
 
 <script type="text/javascript">
 var s
  ='<table class=carpet>                                     '
  +'             <tr><td rowspan=3 colspan=3 class=#1#>%1%   '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#2#>%2%   '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#3#>%3%   '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#4#>%4%   '
  +'   </td></tr>                    <tr><td class=#17#>     '
  +'                                </td><td class=#18#>     '
  +'                                </td><td class=#19#>     '
  +' </td></tr><tr><td></td><td></td><td></td></tr>          '
  +'                        <tr><td></td><td class=#20#>     '
  +'     </td><td></td><td></td><td></td><td class=#21#>     '
  +'     </td><td></td><td></td><td></td><td class=#22#>     '
  +'     </td><td></td><td></td><td></td><td class=#23#>     '
  +'   </td><td></td></tr>                                   '
  +'                                                         '
  +'             <tr><td rowspan=3 colspan=3 class=#5#>%5%   '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#6#>%6%   '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#7#>%7%   '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#8#>%8%   '
  +'   </td></tr>                    <tr><td class=#24#>     '
  +'                                </td><td class=#25#>     '
  +'                                </td><td class=#26#>     '
  +' </td></tr><tr><td></td><td></td><td></td></tr>          '
  +'                        <tr><td></td><td class=#27#>     '
  +'     </td><td></td><td></td><td></td><td class=#28#>     '
  +'     </td><td></td><td></td><td></td><td class=#29#>     '
  +'     </td><td></td><td></td><td></td><td class=#30#>     '
  +'   </td><td></td></tr>                                   '
  +'                                                         '
  +'             <tr><td rowspan=3 colspan=3 class=#9#>%9%   '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#10#>%10% '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#11#>%11% '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#12#>%12% '
  +'   </td></tr>                    <tr><td class=#31#>     '
  +'                                </td><td class=#32#>     '
  +'                                </td><td class=#33#>     '
  +' </td></tr><tr><td></td><td></td><td></td></tr>          '
  +'                        <tr><td></td><td class=#34#>     '
  +'     </td><td></td><td></td><td></td><td class=#35#>     '
  +'     </td><td></td><td></td><td></td><td class=#36#>     '
  +'     </td><td></td><td></td><td></td><td class=#37#>     '
  +'   </td><td></td></tr>                                   '
  +'                                                         '
  +'             <tr><td rowspan=3 colspan=3 class=#13#>%13% '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#14#>%14% '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#15#>%15% '
  +'   </td><td></td><td rowspan=3 colspan=3 class=#16#>%16% '
  +'   </td></tr>                    <tr><td class=#38#>     '
  +'                                </td><td class=#39#>     '
  +'                                </td><td class=#40#>     '
  +' </td></tr><tr><td></td><td></td><td></td></tr>          '
  +'</table>                                                 '
;
 
function w(n) {document.write(n)};
 
function carpet(n,ans)
{
 var c=p[n][0], s1=s, i,j,k;
 for (i=0; i<40; i++)
 {
  switch (c.substring(i,i+1))
  {
   case '1': r='c1'; break;
   case '2': r='c2'; break;
   case '3': r='c3'; break;
   case '6': r='c6'; break;
   case '9': r='c9'; break;
   case '+': r='pl'; break;
   case '-': r='mi'; break;
   case '*': r='mu'; break;
   case ':': r='di'; break;
   case '=': r='eq'; break;
  }
  s1=s1.replace("#"+(i+1)+"#",r);
 }
 c=""; if(ans) c=p[n][1]; for (i=0; i<16; i++) {s1=s1.replace("%"+(i+1)+"%",c.substring(i,i+1));}
 w(s1);
}
 
 var p = [
  ['1962123932163223+:=---*+*=*:-:++=====-:=','                '],
  ['1962123932163223+:=---*+*=*:-:++=====-:=','4   12393   9   '],
  ['1962123932163223+:=---*+*=*:-:++=====-:=','4 6 123932169 2 '],
  ['1962123932163223+:=---*+*=*:-:++=====-:=','4862123932169323'],
 ];
 
 w("<h1>ЗАМОЧКИ</h1>");
 
  w("<h2>Пример</h2>");
  w("<table border=0 cellpadding=0 cellspacing=20>");
  for (i=0; i<4; i+=2) { w("<tr>"); for (j=0; j<2; j++) { w("<td>"); carpet(i+j,1); w("</td>"); } w("</tr><tr></tr>"); }
  w("</table>");
 
 
 p = [
  ['1962123932163223+:=---*+*=*:-:++=====-:=','4862123932169323'], //0
  ['1269291236111326:+=*++*+:=---:+-=====-*=','4268394356747536'], //1
  ['1326233129392612+:=-*+**-=---:+-=====*:=','7526335429382643'], //2
  ['6119213662211931:+=*++--*=:+:+:+=====+-=','8479313663244857'], //3
  ['1191623621196223*-=+-+++-=:+:--+=====:+=','4497835621786225'], //4
  ['9166312223116913*:=-+:*--=*++-*+=====:+=','9466512223178845'], //5
  ['3119326121391316-*=+-++*-=:+:-+*=====-+=','9748538721397546'], //6
  ['2319611936231126++=*++++-=:--:+:=====-*=','2349641936334126'], //7
  ['2111193232222613*-=++-*+:=::++-*=====+-=','2471785332223645'], //8
  ['3219119126613122*-=+++-*-=:-:++-=====+:=','5378449736813122'], //9
  ['1319621121313219-*=+++:--=:::+*-=====+-=','7548831434575219'], //10
  ['6393312292139619*-=-+-:+:=+**+:+=====-+=','6399512382159878'], //11
  ['1126293232312132-*=++*++:=::-:*-=====+-=','7426285233543452'], //12
  ['3336623931122931*-=+*-+:+=:-+:*-=====+-=','3596625831123957'], //13
  ['3113213221111362*-=+:-+*-=+++:*-=====+:=','3475245324447562'], //14
  ['9213211316211216:-=*+**+-=:-+-+-=====-+=','8213274546374378'], //15
  ['1232621121219211+:=*+-*:+=:-*--:=====+-=','4232621431218347'], //16
  ['3321112321622216+:=+-:-+-=::+**:=====-+=','5927412334623278'], //17
  ['1123932216621192-*=++--:+=:-+:*:=====+-=','7439992346834792'], //18
 ];
 
for (k=0; k<2; k++)
{
  w("<h2>"+(k?"Ответы":"Задачи")+":</h2>");
  w("<table border=0 cellpadding=0 cellspacing=20>");
  for (i=1; i<19; i+=3) { w("<tr>"); for (j=0; j<3; j++) { w("<td><div>"+(i+j)+".</div>"); carpet(i+j,k); w("</td>"); } w("</tr><tr></tr>"); }
  w("</table>");
}
 
</script>
</head>
 
<body>
 
<h2>Правила:</h2>
<table cellspacing=10>                                    
 <tr>
  <td width=60 height=60 class=c1></td><td width=100>-&nbsp;1,4,7 </td><td width=60 height=60 class=c2></td><td width=100>-&nbsp;2,3 </td>
  <td width=60 height=60 class=c3></td><td width=100>-&nbsp;3,5,9 </td><td width=60 height=60 class=c9></td><td width=100>-&nbsp;0,8,9 </td>
  <td width=60 height=60 class=c6></td><td width=100>-&nbsp;0,6,8 </td>
 </tr>
</table>
<br>
 
<iframe src=html.htm width=100% height=50%>
 
</body>
 
</html>