├── README.md
├── apple-touch-icon.png
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── index.html
└── ogp.png


/README.md:
--------------------------------------------------------------------------------
 1 | # Minesweeper spoiled by AI
 2 | 
 3 | https://mame.github.io/minesweeper-spoiled-by-ai/
 4 | 
 5 | ## What is this?
 6 | 
 7 | This is a new Minesweeper of the AI age.
 8 | 
 9 | In a traditional Minesweeper, your task consists of two parts:
10 | 
11 | 1. Select a random cell based on your sixth sense
12 | 2. Identify a non-mine cell based on logical reasoning
13 | 
14 | Task 2 is error-prone, unproductive, and a waste of time for humans.
15 | You must leave such a boring task to a computer!
16 | 
17 | This program is a semi-automatic minesweeper that does part (2) automatically.
18 | What you have to do is part (1).
19 | You can just test if you are lucky or not.
20 | 
21 | ## Why did you make this program?
22 | 
23 | I created this program to symbolize the relationship between AI and humans in the near future.
24 | 
25 | In recent years, AI has begun to take fun jobs away from humans, such as writing, drawing, and programming.
26 | The new role of humans is to take responsibility, that is, validate the output of the AI and make the final decision.
27 | 
28 | I expressed this relationship in Minesweeper.
29 | 
30 | ## Sometimes this AI does not solve parts that can be solved logically. Why?
31 | 
32 | This is by design.
33 | AI still is not perfect and it needs human intelligence for verification, validation and correction.
34 | 
35 | ## What's the truth?
36 | 
37 | This AI only handles where it can infer locally from two close number cells.
38 | So, it will *not* infer the following cases:
39 | 
40 | * Where it can infer from three or more number cells.
41 | * Where it can infer globally from the remaining number of mines.
42 | 
43 | This AI algorithm is ported from my IOCCC 2020 winning entry ([code](https://www.ioccc.org/2020/endoh1/prog.c) / [doc](https://www.ioccc.org/2020/endoh1/index.html)).
44 | 
45 | ## This AI is too slow.
46 | 
47 | Move the range slider at the bottom of the page to the right.
48 | 
49 | ## 💣 is not a mine, it's a bomb.
50 | 
51 | Yes, it is. Looks like it's too late now that the fire is already lit.
52 | 
53 | (I couldn't find a Unicode emoji for a mine.)
54 | 
55 | ## I've seen other Minesweepers with AI.
56 | 
57 | Yes, there are many existing Minesweeper AIs created by many different people for many different purposes.
58 | 
59 | My purpose in creating this AI is to take away the fun element of Minesweeper, to show its "luck game" nature, and to make the player feel helpless.
60 | 
61 | ## Mine2000 has too much luck factor!
62 | 
63 | I agree.
64 | 
65 | FYI: [Minesweeper 2000 project](http://dobo.o.oo7.jp/soft/mine2000/index.htm).
66 | 
67 | ## This is not AI. It is just an algorithm.
68 | 
69 | Well, let's ask AI.
70 | 
71 | Me: "Can a program that semi-automatically solves Minesweeper be considered AI?"
72 | ChatGPT: "Yes, a program that semi-automatically solves Minesweeper can be considered a form of artificial intelligence (AI)."
73 | 
74 | AI says it's AI, so why not AI?
75 | 


--------------------------------------------------------------------------------
/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/minesweeper-spoiled-by-ai/fb54e9eb810eb3b1eeac1bcf9738f393cbc433cb/apple-touch-icon.png


--------------------------------------------------------------------------------
/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/minesweeper-spoiled-by-ai/fb54e9eb810eb3b1eeac1bcf9738f393cbc433cb/favicon-16x16.png


--------------------------------------------------------------------------------
/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/minesweeper-spoiled-by-ai/fb54e9eb810eb3b1eeac1bcf9738f393cbc433cb/favicon-32x32.png


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/minesweeper-spoiled-by-ai/fb54e9eb810eb3b1eeac1bcf9738f393cbc433cb/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html lang="en-US">
  2 |   <head>
  3 |     <meta charset="utf-8" />
  4 |     <title>Minesweeper spoiled by AI</title>
  5 |     <meta name="description" content="This Minesweeper AI does the brain-testing part for you. You do the luck-testing part." />
  6 |     <meta property="og:type" content="website" />
  7 |     <meta property="og:title" content="Minesweeper spoiled by AI" />
  8 |     <meta property="og:url" content="https://mame.github.io/minesweeper-spoiled-by-ai/" />
  9 |     <meta property="og:description" content="This Minesweeper AI does the brain-testing part for you. You do the luck-testing part." />
 10 |     <meta property="og:site_name" content="Minesweeper spoiled by AI" />
 11 |     <meta property="og:image" content="https://mame.github.io/minesweeper-spoiled-by-ai/ogp.png" />
 12 |     <meta name="twitter:card" content="summary" />
 13 |     <meta name="twitter:site" content="@mametter" />
 14 |     <meta name="twitter:title" content="Minesweeper spoiled by AI" />
 15 |     <meta name="twitter:description" content="This Minesweeper AI does the brain-testing part for you. You do the luck-testing part." />
 16 |     <meta name="twitter:image" content="https://mame.github.io/minesweeper-spoiled-by-ai/ogp.png" />
 17 |     <link rel="apple-touch-icon" sizes="180x180" href="https://mame.github.io/minesweeper-spoiled-by-ai/apple-touch-icon.png" />
 18 |     <link rel="icon" type="image/png" sizes="32x32" href="https://mame.github.io/minesweeper-spoiled-by-ai/favicon-32x32.png" />
 19 |     <link rel="icon" type="image/png" sizes="16x16" href="https://mame.github.io/minesweeper-spoiled-by-ai/favicon-16x16.png" />
 20 |     <link rel="icon" href="https://mame.github.io/minesweeper-spoiled-by-ai/favicon.ico" />
 21 |     <meta name="msapplication-TileColor" content="#dcdcdc" />
 22 |     <meta name="theme-color" content="#dcdcdc" />
 23 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 24 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 25 |     <link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Press+Start+2P&display=swap" rel="stylesheet" />
 26 |     <style>
 27 |       * {
 28 |         padding: 0;
 29 |         margin: 0;
 30 |       }
 31 |       html {
 32 |         touch-action: manipulation;
 33 |       }
 34 |       body {
 35 |         padding: 0em 1em;
 36 |         background: white;
 37 |         color: black;
 38 |         font-size: 3.5vmin;
 39 |         font-family: sans-serif;
 40 |       }
 41 |       div.header {
 42 |         margin: 1em 0em;
 43 |         text-align: center;
 44 |       }
 45 |       h1 {
 46 |         font-size: 1.5em;
 47 |       }
 48 |       div.nav {
 49 |         display: grid;
 50 |         place-content: center;
 51 |         margin: 1em auto;
 52 |       }
 53 |       div.footer {
 54 |         margin: 1em 0em;
 55 |         text-align: center;
 56 |       }
 57 |       div#dashboard {
 58 |         display: flex;
 59 |         justify-content: space-between;
 60 |         margin: 0em auto 0em auto;
 61 |         padding: 0em 0em 0.5em 0em;
 62 |       }
 63 |       span.number {
 64 |         display: inline-block;
 65 |         height: 1.5em;
 66 |         padding: 0.15em;
 67 |         background: black;
 68 |         color: orangered;
 69 |         font-family: "DotGothic16", sans-serif;
 70 |       }
 71 |       span#button {
 72 |         position: relative;
 73 |         display: inline-block;
 74 |         width: 1.5em;
 75 |         height: 1.5em;
 76 |         background: gainsboro;
 77 |         border: 0.15em outset white;
 78 |       }
 79 |       span#button:active {
 80 |         border: 0.15em inset white;
 81 |       }
 82 |       span#icon {
 83 |         position: absolute;
 84 |         display: inline-block;
 85 |         top: 50%;
 86 |         left: 50%;
 87 |         z-index: 1000;
 88 |         transform: translate(-50%, -50%);
 89 |       }
 90 |       span#button span#icon::before { content: "🙂"; }
 91 |       span#button.astonished span#icon::before { content: "🫣"; }
 92 |       span#button.smirking span#icon::before { content: "😏"; }
 93 |       span#button.thinking span#icon::before { content: "🤔"; }
 94 |       span#button.gameover span#icon::before { content: "😵"; }
 95 |       span#button.clear span#icon::before { content: "😎"; }
 96 |       div#board {
 97 |         margin: 0em auto;
 98 |         padding: 0.5em;
 99 |         background: gainsboro;
100 |         user-select: none;
101 |       }
102 |       div#field {
103 |         display: inline-block;
104 |         margin: auto;
105 |         height: 192px;
106 |         width: 192px;
107 |         border: 5px ridge white;
108 |         font-size: 12px;
109 |         font-family: "Press Start 2P", cursive;
110 |         transform: scale(1);
111 |         transform-origin: top left;
112 |       }
113 |       div#field span {
114 |         position: relative;
115 |         display: inline-block;
116 |         width: 20px;
117 |         height: 20px;
118 |         background: gainsboro;
119 |         border: 2px outset white;
120 |         text-align: center;
121 |         overflow: hidden;
122 |       }
123 |       div#field span.active {
124 |         border: 2px inset white;
125 |       }
126 |       div#field span.probed {
127 |         background: silver;
128 |         border: 2px inset silver;
129 |       }
130 |       div#field span::before {
131 |         content: "";
132 |         position: absolute;
133 |         top: 50%;
134 |         left: 50%;
135 |         transform: translate(-50%, -50%);
136 |       }
137 |       div#field span.c1::before { content: "1"; color: blue; }
138 |       div#field span.c2::before { content: "2"; color: green; }
139 |       div#field span.c3::before { content: "3"; color: red; }
140 |       div#field span.c4::before { content: "4"; color: navy; }
141 |       div#field span.c5::before { content: "5"; color: darkred; }
142 |       div#field span.c6::before { content: "6"; color: hotpink; }
143 |       div#field span.c7::before { content: "7"; color: black; }
144 |       div#field span.c8::before { content: "8"; color: gray; }
145 |       div#field span.bomb::before { content: "💣"; }
146 |       div#field span.boom::before { content: "💣"; }
147 |       div#field span.boom {
148 |         background: crimson;
149 |         border: 2px inset darkgray;
150 |       }
151 |       div#field span.flagged::before { content: "🚩"; }
152 |       div#field span.flag-striked::before { content: "🚩"; }
153 |       div#field span.flag-striked::after {
154 |         content: "";
155 |         position: absolute;
156 |         display: block;
157 |         width: 150%;
158 |         height: 2px;
159 |         background-color: darkred;
160 |         transform: translateY(-1px) rotate(45deg);
161 |         transform-origin: top left;
162 |       }
163 |       select#level_selector {
164 |         margin-bottom: 1em;
165 |         padding: 10px;
166 |         background: white;
167 |         border: 1px solid #333333;
168 |         font-size: 1em;
169 |       }
170 |       input#ai_speed {
171 |         width: 100%;
172 |         height: 1em;
173 |         margin-bottom: 1em;
174 |       }
175 |     </style>
176 |   </head>
177 |   <body>
178 |     <div class="header">
179 |       <h1>Minesweeper spoiled by AI</h1>
180 |     </div>
181 |     <div class="nav">
182 |       <p>🤔"I do the <i>brain-testing</i> part for you"🎓</p>
183 |       <p>🙂"You do the <i>luck-testing</i> part"🤞</p>
184 |     </div>
185 |     <div id="main">
186 |       <div id="board">
187 |         <div id="dashboard">
188 |           <span id="rest" class="number">000</span>
189 |           <span id="button"><span id="icon"></span></span>
190 |           <span id="elapsed" class="number">000</span>
191 |         </div>
192 |         <div id="field"></div>
193 |       </div>
194 |     </div>
195 |     <div class="nav">
196 |       <p>
197 |         Level:<br />
198 |         <select id="level_selector">
199 |           <option value="8:8:10">Beginner: 8x8, 10 mines (12%)</option>
200 |           <option value="16:16:40">Intermediate: 16x16, 40 mines (16%)</option>
201 |           <option value="30:16:99">Expert: 30x16, 99 mines (21%)</option>
202 |           <option value="50:50:500">Superman: 50x50, 500 mines (20%)</option>
203 |           <option value="100:100:2000">Alien: 100x100, 2000 mines (20%)</option>
204 |           <option value="68:48:777">Mine2000: 68x48, 777 mines (24%)</option>
205 |         </select>
206 |       </p>
207 |       <p>
208 |         AI speed:<br />
209 |         <input type="range" id="ai_speed" min="1" value="1" max="100" />
210 |       </p>
211 |     </div>
212 |     <div class="footer">
213 |       <p>
214 |         <a href="https://github.com/mame/minesweeper-spoiled-by-ai">FAQ</a>
215 |       </p>
216 |       <p>(C) 2023 Yusuke Endoh</p>
217 |     </div>
218 |     <script>
219 |       const createUI = () => {
220 |         const elemBoard = document.getElementById("board");
221 |         const elemDashboard = document.getElementById("dashboard");
222 |         const elemRestBombs = document.getElementById("rest");
223 |         const elemIcon = document.getElementById("icon");
224 |         const elemElapsedTime = document.getElementById("elapsed");
225 |         const elemField = document.getElementById("field");
226 |         const elemButton = document.getElementById("button");
227 |         const elemLevelSelector = document.getElementById("level_selector");
228 |         const elemAISpeed = document.getElementById("ai_speed");
229 | 
230 |         let cells = null;
231 |         let elapsedTimer = null;
232 |         let inferenceTimer = null;
233 | 
234 |         const resize = () => {
235 |           elemBoard.style.width = "";
236 |           elemField.style.transform = "";
237 |           const scale = Math.min(
238 |             elemButton.offsetWidth / 24,
239 |             elemDashboard.offsetWidth / elemField.offsetWidth,
240 |             (window.innerHeight - elemDashboard.offsetHeight) / elemField.offsetHeight,
241 |           );
242 |           elemBoard.style.height = elemField.offsetHeight * scale + elemDashboard.offsetHeight;
243 |           elemBoard.style.width = elemField.offsetWidth * scale;
244 |           elemField.style.transform = `scale(${scale})`;
245 |         };
246 | 
247 |         const levelChange = (onLevelChange) => {
248 |           for (let i = 0; i < elemLevelSelector.options.length; i++) {
249 |             if (elemLevelSelector.options[i].selected) {
250 |               window.location.hash = i ? `level=${i + 1}` : "";
251 |             }
252 |           }
253 |           const level = elemLevelSelector.value.split(":");
254 |           const width = parseInt(level[0]);
255 |           const height = parseInt(level[1]);
256 |           const bombCount = parseInt(level[2]);
257 |           elemField.style.width = width * 24;
258 |           elemField.style.height = height * 24;
259 |           resize();
260 |           onLevelChange(width, height, bombCount);
261 |         };
262 | 
263 |         const init = (onInitialize, onClick, onInfer, onLevelChange) => {
264 |           const searchParams = new URLSearchParams(window.location.hash.substring(1));
265 |           if (searchParams.has("level")) {
266 |             elemLevelSelector.options[searchParams.get("level") - 1].selected = true;
267 |           }
268 |           window.addEventListener("resize", resize);
269 |           elemLevelSelector.addEventListener("change", () => levelChange(onLevelChange));
270 |           levelChange(onLevelChange);
271 | 
272 |           const mouseEventHandler = (callback) => {
273 |             return (ev) => {
274 |               if (ev.target instanceof HTMLSpanElement) {
275 |                 const x = parseInt(ev.target.dataset.x);
276 |                 const y = parseInt(ev.target.dataset.y);
277 |                 callback({ x, y, span: ev.target, right: ev.which == 3 });
278 |               }
279 |             };
280 |           };
281 | 
282 |           let lastActiveSpan = null;
283 |           elemField.addEventListener("mousedown", mouseEventHandler(({ span, right }) => {
284 |             if (span.classList.length == 0 && !right) {
285 |               elemButton.classList.add("astonished");
286 |               lastActiveSpan = span;
287 |               lastActiveSpan.classList.add("active");
288 |             }
289 |           }));
290 | 
291 |           elemField.addEventListener("mousemove", mouseEventHandler(({ span, right }) => {
292 |             if (lastActiveSpan && span.classList.length == 0 && !right) {
293 |               lastActiveSpan.classList.remove("active");
294 |               lastActiveSpan = span;
295 |               lastActiveSpan.classList.add("active");
296 |             }
297 |           }));
298 | 
299 |           elemField.addEventListener("mouseup", mouseEventHandler(({ x, y, right }) => {
300 |             if (lastActiveSpan && !right) {
301 |               lastActiveSpan.classList.remove("active");
302 |               lastActiveSpan = null;
303 |               elemButton.classList.remove("astonished");
304 |             }
305 |             onClick(x, y, right)
306 |             if (!inferenceTimer) runInference(onInfer);
307 |           }));
308 | 
309 |           elemField.addEventListener("contextmenu", (ev) => {
310 |             ev.preventDefault();
311 |             return false;
312 |           }, false);
313 | 
314 |           elemButton.addEventListener("click", onInitialize);
315 |           document.addEventListener("keypress", (ev) => ev.key == "r" && onInitialize());
316 |         };
317 | 
318 |         const reconfigure = (width, height, bombCount) => {
319 |           stopTimer();
320 |           setNumber("rest", bombCount)
321 |           setNumber("elapsed", 0);
322 |           setStatus(null);
323 | 
324 |           while (elemField.firstChild) elemField.removeChild(elemField.firstChild);
325 | 
326 |           cells = [];
327 |           for (let y = 0; y < height; y++) {
328 |             const div = document.createElement("div");
329 |             cells[y] = [];
330 |             for (let x = 0; x < width; x++) {
331 |               const span = document.createElement("span");
332 |               span.dataset.x = x;
333 |               span.dataset.y = y;
334 |               div.appendChild(span);
335 |               cells[y][x] = span;
336 |             }
337 |             elemField.appendChild(div);
338 |           }
339 | 
340 |           elapsedTimer = null;
341 |           inferenceTimer = null;
342 |         };
343 | 
344 |         const setCellState = (x, y, status, restBombCount) => {
345 |           const list = cells[y][x].classList;
346 |           list.remove("flagged");
347 |           if (status) list.add(status);
348 |           if (status != "" && status != "flagged" && status != "flag-striked") list.add("probed");
349 |           if (restBombCount !== undefined) setNumber("rest", restBombCount);
350 |         };
351 | 
352 |         const setStatus = (status) => {
353 |           elemButton.classList.remove("gameover", "clear");
354 |           if (status) elemButton.classList.add(status);
355 |         };
356 | 
357 |         const setNumber = (id, n) => {
358 |           if (n < 0) n = 0;
359 |           if (n > 999) n = 999;
360 |           const elem = id == "rest" ? elemRestBombs : elemElapsedTime;
361 |           elem.innerText = n.toString().padStart(3, '0');
362 |         };
363 | 
364 |         const startTimer = () => {
365 |           if (elapsedTimer) stopTimer();
366 |           let elapsed = 0;
367 |           elapsedTimer = setInterval(() => setNumber("elapsed", ++elapsed), 1000);
368 |         };
369 | 
370 |         const stopTimer = () => {
371 |           if (!elapsedTimer) return;
372 |           clearInterval(elapsedTimer);
373 |           elapsedTimer = null;
374 |         };
375 | 
376 |         const runInference = (onInfer) => {
377 |           let ret = null;
378 |           for (let i = 0; i < elemAISpeed.value; i++) {
379 |             ret = onInfer();
380 |             if (!ret) {
381 |               if (inferenceTimer || i) {
382 |                 elemButton.classList.add("smirking");
383 |                 setTimeout(() => {
384 |                   elemButton.classList.remove("smirking");
385 |                 }, 800);
386 |               }
387 |               if (inferenceTimer) {
388 |                 clearInterval(inferenceTimer);
389 |                 inferenceTimer = null;
390 |               }
391 |               elemButton.classList.remove("thinking");
392 |               moveIcon(elemButton);
393 |               return;
394 |             }
395 |           }
396 |           if (ret) {
397 |             const { x, y } = ret;
398 |             moveIcon(cells[y][x]);
399 |           }
400 |           elemButton.classList.add("thinking");
401 |           if (!inferenceTimer) {
402 |             inferenceTimer = setInterval(() => runInference(onInfer), 200);
403 |           }
404 |         };
405 | 
406 |         const getPos = (elem) => {
407 |           const pos = elem.getBoundingClientRect();
408 |           return [(pos.left + pos.right) / 2, (pos.top + pos.bottom) / 2];
409 |         }
410 | 
411 |         const moveIcon = (targetElem) => {
412 |           const [baseX, baseY] = getPos(elemButton);
413 |           const [prevX, prevY] = getPos(elemIcon);
414 |           const [nextX, nextY] = getPos(targetElem);
415 |           elemIcon.animate(
416 |             [
417 |               { transform: `translate(${prevX - baseX}px, ${prevY - baseY}px) translate(-50%, -50%)` },
418 |               { transform: `translate(${nextX - baseX}px, ${nextY - baseY}px) translate(-50%, -50%)` },
419 |             ],
420 |             { duration: 180, fill: "forwards" }
421 |           );
422 |         };
423 | 
424 |         const changeStatus = (status, width, height, bombCount) => {
425 |           switch (status) {
426 |             case "init":
427 |               reconfigure(width, height, bombCount);
428 |               break;
429 |             case "start":
430 |               startTimer();
431 |               break;
432 |             case "clear":
433 |               setNumber("rest", 0);
434 |             case "gameover":
435 |               stopTimer();
436 |               setStatus(status);
437 |           }
438 |         };
439 | 
440 |         return {
441 |           init,
442 |           changeStatus,
443 |           setCellState,
444 |         };
445 |       }
446 | 
447 |       const createGame = (uiChangeStatus, uiSetCellState) => {
448 |         let state = null;
449 |         let width = 8;
450 |         let height = 8;
451 |         let bombCount = 10;
452 |         let field = null;
453 |         let probedCells = null;
454 |         let unprobedCount = 0;
455 |         let unflaggedCount = 0;
456 | 
457 |         const reconfigure = (w, h, bc) => {
458 |           width = w;
459 |           height = h;
460 |           bombCount = Math.min(bc, width * height - 1);
461 | 
462 |           reinit();
463 |         }
464 | 
465 |         const reinit = () => {
466 |           state = "initialized";
467 | 
468 |           uiChangeStatus("init", width, height, bombCount);
469 | 
470 |           field = [];
471 |           for (let y = 0; y < height; y++) {
472 |             field[y] = new Array(width);
473 |             for (let x = 0; x < width; x++) {
474 |               field[y][x] = { bomb: false, state: "unprobed" };
475 |             }
476 |           }
477 | 
478 |           probedCells = [];
479 |           unprobedCount = width * height - bombCount;
480 |           unflaggedCount = bombCount;
481 |         };
482 | 
483 |         const random = (n) => {
484 |           return Math.floor(Math.random() * n);
485 |         };
486 | 
487 |         const initBombs = (probedX, probedY) => {
488 |           let cc = width * height - 1;
489 |           let bc = bombCount;
490 |           let offset = 0;
491 |           while (bc > 0) {
492 |             if (offset == probedX + probedY * width) offset++;
493 |             if (random(cc) < bc) {
494 |               field[Math.floor(offset / width)][offset % width].bomb = true;
495 |               bc--;
496 |             }
497 |             offset++;
498 |             cc--;
499 |           }
500 | 
501 |           state = "playing";
502 |           uiChangeStatus("start");
503 |         };
504 | 
505 |         const clear = () => {
506 |           state = "end";
507 |           uiChangeStatus("clear");
508 |           for (let y = 0; y < height; y++) {
509 |             for (let x = 0; x < width; x++) {
510 |               if (field[y][x].state == "unprobed") {
511 |                 uiSetCellState(x, y, "flagged")
512 |               }
513 |             }
514 |           }
515 |         };
516 | 
517 |         const gameover = (probedX, probedY) => {
518 |           state = "end";
519 |           uiChangeStatus("gameover");
520 |           for (let y = 0; y < height; y++) {
521 |             for (let x = 0; x < width; x++) {
522 |               const cell = field[y][x];
523 |               if (cell.state == "flagged" && !cell.bomb) uiSetCellState(x, y, "flag-striked");
524 |               if (cell.state != "flagged" && cell.bomb) uiSetCellState(x, y, "bomb");
525 |             }
526 |           }
527 |           uiSetCellState(probedX, probedY, "boom")
528 |         };
529 | 
530 |         const probe = (x, y) => {
531 |           if (state == "end") return;
532 |           if (state == "initialized") initBombs(x, y);
533 | 
534 |           const stack = [{ x, y }];
535 |           while (stack.length) {
536 |             const { x, y } = stack.pop();
537 |             const cell = field[y][x];
538 |             if (cell.state != "unprobed") continue;
539 |             cell.state = "probed";
540 | 
541 |             if (cell.bomb) return gameover(x, y);
542 | 
543 |             let bombCount = 0;
544 |             eachNeighbor(x, y, 1, (x, y, cell) => {
545 |               if (cell.bomb) bombCount++;
546 |             });
547 |             uiSetCellState(x, y, `c${bombCount}`);
548 | 
549 |             if (--unprobedCount == 0) return clear();
550 | 
551 |             if (bombCount == 0) eachNeighbor(x, y, 1, (x, y) => stack.push({ x, y }));
552 |             probedCells.push({ x, y });
553 |           }
554 |         };
555 | 
556 |         const flag = (x, y) => {
557 |           if (state == "end") return;
558 | 
559 |           const cell = field[y][x];
560 |           if (cell.state == "probed") return;
561 |           if (cell.state == "unprobed") {
562 |             cell.state = "flagged";
563 |             uiSetCellState(x, y, "flagged", --unflaggedCount);
564 |           }
565 |           else {
566 |             cell.state = "unprobed";
567 |             uiSetCellState(x, y, "", ++unflaggedCount);
568 |           }
569 |           eachNeighbor(x, y, 1, (x, y, cell) => {
570 |             if (cell.state == "probed") probedCells.push({ x, y });
571 |           });
572 |         };
573 | 
574 |         const click = (x, y, flag_) => {
575 |           if (flag_) {
576 |             flag(x, y);
577 |           }
578 |           else {
579 |             probe(x, y);
580 |           }
581 |         };
582 | 
583 |         const eachNeighbor = (cx, cy, distance, callback) => {
584 |           const xMin = Math.max(0, cx - distance);
585 |           const xMax = Math.min(width, cx + distance + 1);
586 |           const yMin = Math.max(0, cy - distance);
587 |           const yMax = Math.min(height, cy + distance + 1);
588 |           for (let y = yMin; y < yMax; y++) {
589 |             for (let x = xMin; x < xMax; x++) {
590 |               if (x != cx || y != cy) {
591 |                 const cell = field[y][x];
592 |                 callback(x, y, cell);
593 |               }
594 |             }
595 |           }
596 |         };
597 | 
598 |         const count = (x, y) => {
599 |           let unprobedCount = 0;
600 |           let bombCount = 0;
601 |           eachNeighbor(x, y, 1, (x, y, p) => {
602 |             if (p.state == "unprobed") unprobedCount++;
603 |             if (p.bomb) bombCount++;
604 |             if (p.state == "flagged") bombCount--;
605 |           });
606 |           return [unprobedCount, bombCount];
607 |         };
608 | 
609 |         const countUnshared = (xQ, yQ, xP, yP) => {
610 |           let unsharedCount = 0;
611 |           eachNeighbor(xQ, yQ, 1, (xR, yR, r) => {
612 |             if (r.state == "unprobed" && (Math.abs(xR - xP) >= 2 || Math.abs(yR - yP) >= 2)) {
613 |               unsharedCount++;
614 |             }
615 |           });
616 |           return unsharedCount;
617 |         };
618 | 
619 |         const infer0 = (xP, yP, unprobedCountP, bombCountP, xQ, yQ, unprobedCountQ, bombCountQ, unsharedCountQ) => {
620 |           const n = bombCountQ - bombCountP;
621 | 
622 |           let action = null;
623 |           if (n == unsharedCountQ) action = "probe";
624 |           if (n == unprobedCountQ - unprobedCountP - unsharedCountQ) action = "flag";
625 | 
626 |           if (action) {
627 |             let modified = false;
628 |             eachNeighbor(xP, yP, 1, (xR, yR, r) => {
629 |               if (r.state == "unprobed" && (Math.abs(xR - xQ) >= 2 || Math.abs(yR - yQ) >= 2)) {
630 |                 modified = true;
631 |                 click(xR, yR, action == "flag");
632 |               }
633 |             });
634 |             if (!modified) action = null;
635 |           }
636 | 
637 |           return action;
638 |         };
639 | 
640 |         const infer = () => {
641 |           if (state != "playing") return false;
642 |           if (probedCells.length == 0) return false;
643 | 
644 |           const repushQueue = [];
645 |           let ret = null;
646 |           while (probedCells.length) {
647 |             const { x: xP, y: yP } = probedCells.pop();
648 |             const p = field[yP][xP];
649 |             if (p.state == "probed") {
650 |               const [unprobedCountP, bombCountP] = count(xP, yP);
651 | 
652 |               if (infer0(xP, yP, unprobedCountP, bombCountP, -2, -2, 0, 0, 0)) {
653 |                 ret = { x: xP, y: yP };
654 |                 break;
655 |               }
656 |               let keep = false;
657 |               let stop = false;
658 |               eachNeighbor(xP, yP, 2, (xQ, yQ, q) => {
659 |                 if (stop) return;
660 |                 if (q.state == "unprobed") keep = true;
661 |                 if (q.state == "probed") {
662 |                   const [unprobedCountQ, bombCountQ] = count(xQ, yQ);
663 |                   const unsharedCountQ = countUnshared(xQ, yQ, xP, yP);
664 |                   if (infer0(xP, yP, unprobedCountP, bombCountP, xQ, yQ, unprobedCountQ, bombCountQ, unsharedCountQ)) {
665 |                     ret = { x: xP, y: yP };
666 |                     stop = true;
667 |                   }
668 |                 }
669 |               });
670 |               if (keep) repushQueue.push({ x: xP, y: yP });
671 |               if (stop) break;
672 |             }
673 |           }
674 |           probedCells = repushQueue.concat(...probedCells);
675 |           return ret;
676 |         };
677 | 
678 |         return {
679 |           reconfigure,
680 |           reinit,
681 |           click,
682 |           infer,
683 |         };
684 |       }
685 | 
686 |       const ui = createUI();
687 |       const game = createGame(ui.changeStatus, ui.setCellState);
688 |       ui.init(game.reinit, game.click, game.infer, game.reconfigure);
689 |     </script>
690 |   </body>
691 | </html>
692 | 


--------------------------------------------------------------------------------
/ogp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mame/minesweeper-spoiled-by-ai/fb54e9eb810eb3b1eeac1bcf9738f393cbc433cb/ogp.png


--------------------------------------------------------------------------------