-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
135 lines (109 loc) · 8.29 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
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Play Super Master Mind online</title>
<meta name="title" content="Play Super Master Mind online">
<meta name="description" content="Play Super Master Mind online, assisted by a calculator which knows the optimal strategy!">
<meta name="keywords" content="super master mind, mastermind, code breaker, game, online, optimal strategy">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- scale for smartphones -->
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="common_functions.js" charset="utf-8"></script>
<script src='lib/jquery-3.7.1.min.js'></script>
<script>
// Animation during page loading:
// 1) when document is ready
$(document).ready(function () {
console.log("(ready)");
});
// 2) when all elements of the page are completely loaded
$(window).on('load', function() {
console.log("(on load)");
// $(".loading").fadeOut("slow"); // loading div fades out
});
// 2') Defense timeout to allow interactions with the page
// setTimeout("console.log('(on load timeout)');$('.loading').fadeOut('slow');", 5000); // loading div fades out
try {
if (localStorage.gamesok) {
localStorage.lastAdsDisplayTime = (new Date()).getTime(); // (duplicated code in game.html)
localStorage.lastAdsDisplayGamesOk = localStorage.gamesok; // (duplicated code in game.html)
}
}
catch (err) {}
</script>
</head>
<body onunload="console.log('exit...');">
<!-- <div class="loading" style='user-select:none;'>
<img src="img/loading.gif" style='width:5.5rem'><br>
Loading...
</div> -->
<div id="main">
<!-- HEADER -->
<script>write_menu(0);</script>
<div id="site_content">
<!-- MAIN CONTENT -->
<div id="content">
<h1>Super Master Mind</h1>
Play Super Master Mind and evaluate your strategy!
<hr style="height:0.5rem; visibility:hidden;" />
During the game, each of your attempts is compared to what the optimal strategy would have played, which will help you to progress.<br>
At each attempt, the number of possible codes is displayed, and the lists of possible codes are shown at game end.<br>
Several displays (with colors or numbers) and modes (from 3 to 7 columns and from 5 to 10 colors/numbers) are possible.<br>
Game scores are stored online to rank players and follow their progression.
<hr style="height:0.5rem; visibility:hidden;" />
<a href="img/SMM_game_example_1_portrait.png"><img src="img/SMM_game_example_1_portrait.png" style="width:30%;border-color:#AAAAAA;border-style:solid;border-width:thin;margin-top:0.5rem;border-radius:2%"></a>
<a href="img/SMM_game_example_2_portrait.png"><img src="img/SMM_game_example_2_portrait.png" style="width:30%;border-color:#AAAAAA;border-style:solid;border-width:thin;margin-top:0.5rem;border-radius:2%"></a>
<hr style="height:0.5rem; visibility:hidden;" />
<b><font style='font-size:111%'>On your smartphone: </font><a href='https://play.google.com/store/apps/details?id=supermastermind.github.io' onfocus='this.blur()'><font style='font-size:111%'>play with the android app</font></a></b><br>
<a href='https://play.google.com/store/apps/details?id=supermastermind.github.io'>
<img alt='Get it on Google Play' style='width:11.0rem;margin-top:0.5rem;margin-bottom:0' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/><img alt='Get it on Google Play' style='width:5.5rem;margin-top:0.5rem;margin-bottom:0;border-radius:7%' src='img/Playstore_icon.png'/>
</a>
<hr style="height:0.5rem; visibility:hidden;" />
<b><font style='font-size:111%'>On your PC: </font><a href='game.html' onfocus='this.blur()'><font style='font-size:111%'>play in your browser</font></a></b><br>
<a name='game_rules'></a>
<h2>Game rules</h2>
The goal of Super Master Mind is to find out a secret code of 5 colors chosen randomly among 8 (with duplicate colors allowed).<br>
The player makes successive attempts, and each code played is given pegs:<br>
<ul style='margin:0'>
<li style='list-style-type:disc'>a black peg <small><small>⚫</small></small> indicates the existence of a correct color in a correct position,</li>
<li style='list-style-type:disc'>a white peg <small><small>⚪</small></small> indicates the existence of a correct color in a wrong position.</li>
</ul>
Only the total numbers of black pegs and of white pegs are given (without column information).<br>
The game is won when 5 black pegs are got (secret code discovered) or lost when the maximum number of attempts is reached.
<hr style="height:0.5rem; visibility:hidden;" />
For Master Mind, the rules are the same with a secret code of 4 colors chosen randomly among 6, and more generally M among N for other code breaker games.<br>
<h2>How to play?</h2>
<a href='img/SuperMasterMind_rules.png'><img src='img/SuperMasterMind_rules.png' style='width:30%;border-color:#AAAAAA;border-style:solid;border-width:thin;background-color:#FFFFFF;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1.5rem;padding-right:1.5rem;margin-top:0.5rem;margin-right:0.5rem;border-radius:2%'><small>click to enlarge</small></a>
<a name='Strategy'></a>
<h2>Strategy evaluation: performances and scores</h2>
Behind the graphical interface, the program is assisted by a calculator which will give you hints to find the optimal strategy.
This calculator compares what you played to what the optimal strategy would have played. For each code played,
it compares "the average number of attempts to find secret codes" which is reachable when an optimal code is played
to this same average number when your code is played, and then displays the difference next to your code, called <b><font color=#CC0099>performance</font></b>.<br>
<hr style='height:0.5rem; visibility:hidden;' />
For example:<br>
<ul style='margin:0'>
<li style='list-style-type:disc'><b>0.00</b> means that what you played was optimal: no difference between your code and the optimal code(s),</li>
<li style='list-style-type:disc'><b><font color=#F00000>-1.00</font></b> means that what you played was useless: 1 attempt was lost on average, thus -1,</li>
<li style='list-style-type:disc'><b><font color=#F00000>-0.50</font></b> means that what you played was not optimal: you lost <sup>1</sup>⁄<sub>2</sub> attempt on average
to reach secret codes in comparison to an optimal code. That means that if the optimal strategy reaches
secret codes in 4 attempts on average, your code (followed by an optimal strategy) will reach them in 4.5 attempts on average.
Of course, if you are lucky, this inefficient code may be the secret code, in which case you will win the game instantly!
</ul>
<hr style='height:0.5rem; visibility:hidden;' />
When you win, summing those performances over all the codes you played gives <b><font color=#CC0099>your global performance for this game</font></b>. It will be stored together with <b><font color=#CC0099>your score</font></b>, which on its side only depends on the number of attempts you took to find the secret code and the time you needed, so is much more subject to luck than your global performance.
<hr style='height:0.5rem; visibility:hidden;' />
<!-- OPTIMAL STRATEGY DETAILS -->
<script>write_optimal_strategy_details_1();</script>
<h2>Game examples</h2>
<a href=screenshots.html><b>Game examples</b></a>
<h2>Contact info and how to support this game?</h2>
<a href='contact_info.html' onfocus='this.blur()'><b>Contact info</b></a>
</div>
</div>
<!-- FOOTER -->
<div id="footer">
</div>
</div>
</body>
</html>