-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
122 lines (117 loc) · 6.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html class="h-100">
<head>
<meta charset="UTF-8">
<title>Kaboom</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">
<div class="container">
<h1>Kaboom</h1>
<div class="card">
<div class="card-body">
<div id="game"></div>
</div>
</div>
<div class="mt-2">
</div>
<div class="row">
<div class="col-lg-3 col-md-6 mt-2">
<form id="form" onsubmit="newGame(event)">
<div>
<button class="btn btn-primary w-100" id="new-game"">New game</button>
</div>
<div class="input-group mt-2">
<div class="input-group-prepend">
<div class="input-group-text">width</div>
</div>
<input onchange="updateMax()" id="width" type="number" class="form-control" min="1" max="30" value="10">
</div>
<div class="input-group mt-2">
<div class="input-group-prepend">
<div class="input-group-text">height</div>
</div>
<input onchange="updateMax()" id="height" type="number" class="form-control" min="1" max="30" value="10">
</div>
<div class="input-group mt-2">
<div class="input-group-prepend">
<div class="input-group-text">mines</div>
</div>
<input id="numMines" type="number" class="form-control" min="1" max="899" value="20">
</div>
</form>
</div>
<div class="col-lg-3 col-md-6 mt-2">
<button onClick="setParams(8, 8, 8)" class="btn btn-light w-100" id="new-game">I'm too young to die</button>
<button onClick="setParams(10, 10, 20)" class="btn btn-light w-100 mt-2" id="new-game">Hey, not too rough</button>
<button onClick="setParams(15, 15, 50)" class="btn btn-light w-100 mt-2" id="new-game">Hurt me plenty</button>
<button onClick="setParams(10, 10, 50)" class="btn btn-light w-100 mt-2" id="new-game">Ultra-Violence</button>
</div>
<div class="col-lg-6 mt-2">
<div>
<label class="form-check-label">
<input id="debug" type="checkbox">
Debug mode
</label>
</div>
<div>
<label class="form-check-label">
<input id="allowOutside" type="checkbox">
Allow guessing anywhere <abbr title="By default, you are allowed to guess only on the boundary of revealed tiles.">(?)</abbr>
</label>
</div>
<div>
<label class="form-check-label">
<input id="safeMode" type="checkbox">
Safe mode (double-click to reveal)
</label>
</div>
<div>
<label class="form-check-label">
<input id="countdownMode" type="checkbox">
Countdown mode <abbr title="Instead of showing the total number of mines around a tile, show the remaining (based on placed flags)">(?)</abbr>
</label>
</div>
<div>
<button onClick="hint()" class="btn btn-light btn-sm mt-2">Give me a hint</button>
<button id="undo" onClick="undo()" class="btn btn-light btn-sm mt-2">Undo</button>
</div>
<div id="hint" class="hidden text-muted mt-2">Hello, world</div>
</div>
</div>
<h2>What is this?</h2>
<p>This is a <b>cruel, but fair</b> Minesweeper game:</p>
<ul>
<li>The mines are not placed at the beginning, but determined as you play. There is no hidden state.</li>
<li>If you try to guess, the game will always choose the worst scenario.</li>
<li>
Except when you are <b>forced</b> to guess (there are no safe cells anywhere). Then, guessing is completely safe.
<ul><li>You are still expected to select one of the <b>adjacent</b> cells.
Select "Allow guessing anywhere" if you want to be able to play elsewhere on the board.
</ul>
</li>
</ul>
<p>Have fun!</p>
<h2>See also</h2>
<p><a href="https://www.youtube.com/watch?v=LHY8NKj3RKs">Minesweeper - The Movie</a></p>
<p><a href="https://www.chiark.greenend.org.uk/~sgtatham/puzzles/js/mines.html">Simon Tatham's Mines</a> - guaranteed solvable without guessing</p>
<p><a href="https://mrgris.com/projects/minesweepr/">minesweepr</a> - a probabilistic minesweeper solver</p>
<p><a href="https://github.com/pwmarcz/kaboom">This project on Github</a></p>
<p><b><a href="https://pwmarcz.pl/blog/kaboom/">Blog post about this project</a></b></p>
</div>
</main>
<footer class="footer mt-auto py-3" style="background-color: #f5f5f5;">
<div class="container">
<small class="text-muted">
By Paweł Marczewski (<a href="https://pwmarcz.pl">pwmarcz.pl</a>)
</small>
</div>
</footer>
<script src="lib/minisat.js"></script>
<script src="lib/long-press-event.min.js"></script>
<script src="sat.js"></script>
<script src="index.js"></script>
</body>