equal
deleted
inserted
replaced
9 <script src="board.js"></script> |
9 <script src="board.js"></script> |
10 <script src="perf.js"></script> |
10 <script src="perf.js"></script> |
11 <script src="ai.js"></script> |
11 <script src="ai.js"></script> |
12 |
12 |
13 <style> |
13 <style> |
|
14 body { |
|
15 font-size: 11pt; |
|
16 } |
14 h1, div.area { |
17 h1, div.area { |
15 text-align: center; |
18 text-align: center; |
16 margin: 10px auto; |
19 margin: 10px auto; |
17 } |
20 } |
18 #board { |
21 #board { |
37 } |
40 } |
38 div.ai.enabled { |
41 div.ai.enabled { |
39 background-color: wheat; |
42 background-color: wheat; |
40 } |
43 } |
41 div.ai > h5 { |
44 div.ai > h5 { |
42 margin: 2px 0; |
45 margin: 2px 0 2px 6em; |
43 } |
46 } |
44 button.ai { |
47 button.ai { |
45 position: absolute; |
48 position: absolute; |
46 left: 1em; |
49 left: 1em; |
47 top: -1em; |
50 top: -1em; |
|
51 } |
|
52 div.ai > div.option { |
|
53 display: inline-block; |
|
54 float: left; |
|
55 margin: 1px 4px; |
|
56 } |
|
57 .clearfix { |
|
58 clear: both; |
48 } |
59 } |
49 </style> |
60 </style> |
50 </head> |
61 </head> |
51 <body> |
62 <body> |
52 |
63 |
101 <div> |
112 <div> |
102 <div class="ai" id="ai-random"> |
113 <div class="ai" id="ai-random"> |
103 <button class="ai">enable</button> |
114 <button class="ai">enable</button> |
104 <h5>bling random</h5> |
115 <h5>bling random</h5> |
105 </div> |
116 </div> |
106 <div class="ai" id="ai-next-max-score"> |
117 <div class="ai" id="ai-blind-cycle"> |
107 <button class="ai">enable</button> |
118 <button class="ai">enable</button> |
108 <h5>next merge makes max score</h5> |
119 <h5>blind cycle</h5> |
|
120 <div class="option"> |
|
121 <input type="checkbox" name="clockwise"/> clockwise |
|
122 </div> |
|
123 <div class="option"> |
|
124 <input type="checkbox" name="whilePossible"/> max move in one direction |
|
125 </div> |
|
126 <div class="clearfix"></div> |
109 </div> |
127 </div> |
110 <div class="ai" id="ai-next-max-value"> |
128 <div class="ai" id="ai-next-max-value"> |
111 <button class="ai">enable</button> |
129 <button class="ai">enable</button> |
112 <h5>next merge makes max value</h5> |
130 <h5>next merge makes max value</h5> |
113 </div> |
131 </div> |
379 ui.ai.current = null; |
397 ui.ai.current = null; |
380 ui.ai.algList = { |
398 ui.ai.algList = { |
381 "ai-random": function() { |
399 "ai-random": function() { |
382 return new ai.random(ui.brdEngine); |
400 return new ai.random(ui.brdEngine); |
383 }, |
401 }, |
|
402 "ai-blind-cycle": function(aiDom) { |
|
403 var cfg = {}; |
|
404 cfg.clockwise = aiDom.querySelectorAll("input[name='clockwise']")[0].checked; |
|
405 cfg.whilePossible = aiDom.querySelectorAll("input[name='whilePossible']")[0].checked; |
|
406 return new ai.blindCycle(ui.brdEngine, cfg); |
|
407 }, |
384 "ai-next-max-score": function() { |
408 "ai-next-max-score": function() { |
385 return new ai.nextMaxScore(ui.brdEngine); |
409 return new ai.nextMaxScore(ui.brdEngine); |
386 }, |
410 }, |
387 "ai-next-max-value": function() { |
411 "ai-next-max-value": function() { |
388 return new ai.nextMaxValue(ui.brdEngine); |
412 return new ai.nextMaxValue(ui.brdEngine); |
417 aiDom.classList.add('enabled'); |
441 aiDom.classList.add('enabled'); |
418 } |
442 } |
419 ui.ai.enable = function(aiDom) { |
443 ui.ai.enable = function(aiDom) { |
420 if (ui.ai.current) |
444 if (ui.ai.current) |
421 ui.ai.current.cleanup(); |
445 ui.ai.current.cleanup(); |
422 var ai = ui.ai.algList[aiDom.id]; |
|
423 ui.ai.moveToTop(aiDom); |
446 ui.ai.moveToTop(aiDom); |
424 ui.ai.current = ai(); |
447 ui.ai.current = ui.ai.algList[aiDom.id](aiDom); |
425 } |
448 } |
426 |
449 |
427 ui.brdEngine = BoardArr2d; // TODO make user selectable |
450 ui.brdEngine = BoardArr2d; // TODO make user selectable |
428 |
451 |
429 </script> |
452 </script> |