jumping.html

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   4 <head>
   5     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
   6     <link rel="stylesheet" href="style/pixelless.css" type="text/css"/>
   7     <script type="text/javascript" src="script/util.js"></script>
   8     <title>Jumping cube</title>
   9     <style type="text/css">
  10         .jumping
  11         {
  12         }
  13
  14         .jumping td
  15         {
  16             font-size: 14pt;
  17             font-weight: bold;
  18             font-family: Verdana, sans-serif;
  19             width: 3em;
  20             height: 3em;
  21             padding: 0 .1em .1em 0;
  22
  23             text-align: center;
  24             vertical-align: middle;
  25
  26             border: 1px solid transparent;
  27             -moz-border-radius: .3em;
  28             background-color:gray;
  29             color: #262626;
  30         }
  31
  32         .jumping td:hover
  33         {
  34                    border-color:silver;
  35         }
  36
  37         .jumping td.red.level-1 {color:#888;background-color:#b04444;}
  38         .jumping td.red.level-2 {color:#bbb;background-color:#cc4444;}
  39         .jumping td.red.level-3 {color:#ddd;background-color:#e04444;}
  40         .jumping td.red.level-4 {color:#fff;background-color:#ff4444;}
  41
  42         .jumping td.blue.level-1 {color:#888;background-color:#4444b0;}
  43         .jumping td.blue.level-2 {color:#bbb;background-color:#4444cc;}
  44         .jumping td.blue.level-3 {color:#ddd;background-color:#4444e0}
  45         .jumping td.blue.level-4 {color:#fff;background-color:#4444ff;}
  46     </style>
  47 </head>
  48 <body>
  49 <div id="container">
  50     <div class="content header">
  51         <h1>Jumping cube</h1>
  52     </div>
  53
  54     <div class="content">
  55         <div id="target"></div>
  56
  57         <div class="empty_footer">
  58         </div>
  59     </div>
  60 </div>
  61 <div id="footer">
  62     <div class="content">
  63         &copy; Copyright
  64     </div>
  65 </div>
  66 <script type="text/javascript" language="JavaScript">
  67     var target = document.getElementById('target');
  68     var html = ['<table class="jumping">'];
  69
  70     var SIZE = 7;
  71     var n = 7;
  72
  73    var i = -1;
  74     while(++i<n)
  75     {
  76         html.push('<tr>');
  77         var j = -1;
  78         while(++j<n)
  79         {
  80             var v = Math.round(Math.random()*10);
  81             v = 1;
  82             html.push('<td onclick="switchColor();addPoint('+i+','+j+')" class="level-'+v+'" id="btn-' + i +'-'+j+'">●</td>');
  83         }
  84         html.push('</tr>');
  85     }
  86     html.push('</table>');
  87
  88     target.innerHTML = html.join('');
  89
  90     var oldColor = '';
  91     var color = 'red';
  92
  93
  94     function switchColor()
  95     {
  96         oldColor = color;
  97
  98         if(color == 'red')
  99         color = 'blue'   ;
 100         else color = 'red';
 101     }
 102
 103     function addPoint(i, j)
 104     {
 105
 106         var point = document.getElementById('btn-'+i+'-'+j);
 107         point.className = color;
 108
 109         var val = point.innerHTML.match(/●/g).length;
 110         var n = getNeighbors(i, j);
 111
 112         if(val + 1 > n.length)
 113         {
 114             val = 1;
 115
 116             point.className += ' level-' + (4-n.length + 1);
 117             point.innerHTML = '●';
 118
 119
 120             n.map(function(e){
 121                 var f = function()
 122                 {
 123                 addPoint(e[0], e[1]);
 124                 }
 125
 126                 window.setTimeout(f, 50);
 127
 128             });
 129         }
 130         else
 131         {
 132             var x = '●';
 133
 134             switch(val+1)
 135                     {
 136
 137             case 2:x= '&nbsp;&nbsp;&nbsp;●<br/>●&nbsp;&nbsp;&nbsp;';break;
 138             case 3:x='●<br/>●&nbsp; ●';break;
 139             case 4:x = '●&nbsp; ●<br/>●&nbsp; ●';break;
 140             default:x = '● '.x(val+1);
 141             }
 142
 143             point.innerHTML = x
 144             point.className += ' level-'+(4-n.length +val+ 1);
 145         }
 146     }
 147
 148     function getNeighbors(i, j)
 149     {
 150         var n = [];
 151         if(i>0)n.push([i-1, j]);
 152         if(i<SIZE-1)n.push([i+1, j]);
 153         if(j>0)n.push([i,j-1]);
 154         if(j<SIZE-1)n.push([i,j+1]);
 155
 156         return n;
 157     }
 158
 159 </script>
 160 </body>
 161 </html>