equal
deleted
inserted
replaced
7 |
7 |
8 <style> |
8 <style> |
9 body { |
9 body { |
10 width: 100%; |
10 width: 100%; |
11 } |
11 } |
12 h1, .score-area, .control-area, #message-area { |
12 h1, div.area { |
13 text-align: center; |
13 text-align: center; |
|
14 margin: 10px auto; |
14 } |
15 } |
15 #board { |
16 #board { |
16 margin: 10px auto; |
17 margin: 10px auto; |
17 } |
18 } |
18 #board td { |
19 #board td { |
20 height: 40px; |
21 height: 40px; |
21 border: 1px solid red; |
22 border: 1px solid red; |
22 margin: 0; |
23 margin: 0; |
23 text-align: center; |
24 text-align: center; |
24 } |
25 } |
|
26 .report > .name { |
|
27 font-weight: bold; |
|
28 } |
25 </style> |
29 </style> |
26 </head> |
30 </head> |
27 <body> |
31 <body> |
28 |
32 |
29 <h1>2048</h1> |
33 <h1>2048</h1> |
30 |
34 |
31 <div class="score-area">Score: <span id="score">0</span>, Max: <span id="max">0</span>, Speed: <span id="speed">0</span> t/s, Turn: <span id="turn">0</span></div> |
35 <div id="score-area" class="area">Score: <span id="score">0</span>, Max: <span id="max">0</span>, Speed: <span id="speed">0</span> t/s, Turn: <span id="turn">0</span></div> |
32 |
36 |
33 <div id="message-area"></div> |
37 <div id="message-area" class="area"></div> |
34 |
38 |
35 <table id="board"> |
39 <table id="board"> |
36 <tr> |
40 <tr> |
37 <td></td> |
41 <td></td> |
38 <td></td> |
42 <td></td> |
57 <td></td> |
61 <td></td> |
58 <td></td> |
62 <td></td> |
59 </tr> |
63 </tr> |
60 </table> |
64 </table> |
61 |
65 |
62 <div class="control-area"> |
66 <div id="control-area" class="area"> |
63 <div> |
67 <div> |
64 <button id="start">Start</button> |
68 <button id="start">Start</button> |
65 <button id="step">Step</button> |
69 <button id="step">Step</button> |
66 <button id="loop">Loop</button> |
70 <button id="loop">Loop</button> |
67 <button id="finish">Finish</button> |
71 <button id="finish">Finish</button> |
78 <button id="ai-next-max-score">next max score</button> |
82 <button id="ai-next-max-score">next max score</button> |
79 <button id="ai-next-max-value">next max value</button> |
83 <button id="ai-next-max-value">next max value</button> |
80 </div> |
84 </div> |
81 </div> |
85 </div> |
82 |
86 |
|
87 <div id="report-area" class="area"> |
|
88 <h1>Reports</h1> |
|
89 <div class="report" class="area"> |
|
90 <div class="name">next max score</div> |
|
91 <table> |
|
92 <tr> |
|
93 <th>Max</th> |
|
94 <th>Count</th> |
|
95 <th>%</th> |
|
96 </tr> |
|
97 <tr> |
|
98 <td>128</td><td>8</td><td><div style="background: red; width: 100px">x</div></td> |
|
99 </tr> |
|
100 <tr> |
|
101 <td>256</td><td>4</td><td><div style="background: red; width: 50px">x</div></td> |
|
102 </tr> |
|
103 <tr> |
|
104 <td>512</td><td>12</td><td><div style="background: red; width: 150px">x</div></td> |
|
105 </tr> |
|
106 </table> |
|
107 </div> |
|
108 </div> |
|
109 |
83 <script> |
110 <script> |
84 "use strict"; |
111 "use strict"; |
85 |
112 |
86 var board = {}; |
113 var board = {}; |
87 board.create = function() { |
114 board.create = function() { |