297 lines
10 KiB
Plaintext
297 lines
10 KiB
Plaintext
|
<h2>tutorial</h2>
|
||
|
|
|
||
|
|
<div id="page1">
|
||
|
|
<div class="gameBoard">
|
||
|
|
<ul>
|
||
|
|
<li class="mine"></li><li></li><li></li><li></li><li></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine toFlag"></li><li></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines2 highlighted">2</li><li class="revealed mines2">2</li><li></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine toFlag"></li><li></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="mine"></li><li></li><li></li><li></li><li></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>take a look at the <strong>highlighted tile</strong>.</p>
|
||
|
|
<p>the <strong>2</strong> means there are <strong>2 mines</strong> next to it.</p>
|
||
|
|
<p>there are only <strong>2 tiles</strong> next to it, so we know they are both mines.</p>
|
||
|
|
<p><strong>right-click</strong> or <strong>press and hold</strong> to flag these mines.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="page2">
|
||
|
|
<div class="gameBoard">
|
||
|
|
<ul>
|
||
|
|
<li class="mine"></li><li></li><li></li><li></li><li></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="toClick"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2 highlighted">2</li><li class="toClick"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="toClick"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="mine"></li><li></li><li></li><li></li><li></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>take a look at the next <strong>highlighted tile</strong>.</p>
|
||
|
|
<p>this also has <strong>2 mines</strong> next to it- but we already know which ones are mines.</p>
|
||
|
|
<p><strong>click</strong> or <strong>tap</strong> the other adjacent tiles to clear them.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="page3">
|
||
|
|
<div class="gameBoard">
|
||
|
|
<ul>
|
||
|
|
<li class="mine"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="mine"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>there are some more tiles that are definitely not mines. clear these too.</p>
|
||
|
|
<p>if you <strong>click or tap</strong> a <strong>number</strong>, any unflagged adjacent tiles will be clicked.</p>
|
||
|
|
<p>this can save you a lot of time!</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="page4">
|
||
|
|
<div class="gameBoard">
|
||
|
|
<ul>
|
||
|
|
<li class="mine"></li><li class="revealed mines1 highlighted">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li class="revealed mines1 highlighted">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="toClick"></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="mine"></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>look at these 2 <strong>highlighted</strong> tiles.</p>
|
||
|
|
<p>the <strong>first</strong> has 1 mine next to it.</p>
|
||
|
|
<p>the <strong>second</strong> also has 1 mine next to it.</p>
|
||
|
|
<p>however, the <strong>second</strong> spans the same tiles as the <strong>first</strong>, plus one extra.</p>
|
||
|
|
<p>the extra tile the <strong>second</strong> tile spans cannot be a mine. clear it!</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="page5">
|
||
|
|
<div class="gameBoard">
|
||
|
|
<ul>
|
||
|
|
<li class="mine toFlag"></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="revealed"></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="mine toFlag"></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>when you clear a tile with <strong>no adjacent mines</strong>, the surrounding tiles will all clear as well.</p>
|
||
|
|
<p>flag the <strong>remaining mines</strong>.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="page6">
|
||
|
|
<div class="gameBoard">
|
||
|
|
<ul>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed mines2">2</li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed mines3">3</li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed mines3">3</li>
|
||
|
|
<li class="mine toFlag highlighted"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="revealed mines2">2</li>
|
||
|
|
<li class="revealed mines3">3</li>
|
||
|
|
<li class="revealed mines3">3</li>
|
||
|
|
<li class="revealed mines4">4</li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="mine"></li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
<li class="revealed mines2">2</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>in this tutorial so far, the game board has been static.</p>
|
||
|
|
<p>but in <strong>endless mines</strong>, <strong>rows</strong> and <strong>columns</strong> slide away when cleared!</p>
|
||
|
|
<p>flag the <strong>highlighted</strong> tile to continue.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="page7">
|
||
|
|
<div class="gameBoard clearRowsColumns">
|
||
|
|
<ul>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed mines2">2</li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed mines3">3</li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed mines3">3</li>
|
||
|
|
<li class="mine flagged"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="revealed mines2">2</li>
|
||
|
|
<li class="revealed mines3">3</li>
|
||
|
|
<li class="revealed mines3">3</li>
|
||
|
|
<li class="revealed mines4">4</li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="mine"></li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
<li class="mine"></li>
|
||
|
|
<li class="revealed mines2">2</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>in this tutorial so far, the game board has been static.</p>
|
||
|
|
<p>but in <strong>endless mines</strong>, <strong>rows</strong> and <strong>columns</strong> slide away when cleared!</p>
|
||
|
|
<p>flag the <strong>highlighted</strong> tile to continue.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="page8">
|
||
|
|
<div class="gameBoard">
|
||
|
|
<ul>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed mines2">2</li>
|
||
|
|
<li class="mine toFlag"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed"></li>
|
||
|
|
<li class="revealed mines3">3</li>
|
||
|
|
<li class="mine toFlag"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="revealed mines2">2</li>
|
||
|
|
<li class="revealed mines3">3</li>
|
||
|
|
<li class="revealed mines3">3</li>
|
||
|
|
<li class="revealed mines4">4</li>
|
||
|
|
<li class="mine toFlag"></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li class="mine toFlag"></li>
|
||
|
|
<li class="mine toFlag"></li>
|
||
|
|
<li class="mine toFlag"></li>
|
||
|
|
<li class="mine toFlag"></li>
|
||
|
|
<li class="revealed mines2">2</li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li></li><li></li><li></li><li></li><li></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>a <strong>new row</strong> has appeared at the bottom.</p>
|
||
|
|
<p>notice how you can't clear any columns now!</p>
|
||
|
|
<br>
|
||
|
|
<p><strong>flag</strong> the <strong>remaining mines</strong> to continue.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="page9">
|
||
|
|
<div class="gameBoard clearRowsColumns">
|
||
|
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||
|
|
<ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
|
||
|
|
<ul><li class="revealed mines2">2</li><li class="revealed mines4">4</li><li class="revealed mines4">4</li><li class="highlighted revealed mines7">7</li><li class="mine toFlag"></li></ul>
|
||
|
|
<ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
|
||
|
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>look at the <strong>highlighted</strong> tile.</p>
|
||
|
|
<p>it has 7 adjacent mines and 7 adjacent tiles.</p>
|
||
|
|
<p>flag the 7 <strong>adjacent mines</strong>.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="page10">
|
||
|
|
<div class="gameBoard clearRowsColumns">
|
||
|
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||
|
|
<ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
|
||
|
|
<ul><li class="revealed mines2">2</li><li class="revealed mines4">4</li><li class="revealed mines4">4</li><li class="revealed mines7">7</li><li class="mine highlighted flagged"></li></ul>
|
||
|
|
<ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
|
||
|
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>oh no! we've lost all our hints!</p>
|
||
|
|
<p>sometimes it's best to wait before clearing a row.</p>
|
||
|
|
<br>
|
||
|
|
<p>the best we can do is guess now.</p>
|
||
|
|
<p>click <strong>any tile</strong> to continue.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="page11">
|
||
|
|
<div class="gameBoard clearRowsColumns">
|
||
|
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||
|
|
<ul><li></li><li class="revealed mines1">1</li><li></li><li class="revealed mines1">1</li><li></li></ul>
|
||
|
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||
|
|
<ul><li></li><li class="revealed mines3">3</li><li class="revealed mines3">3</li><li class="revealed mines3">3</li><li></li></ul>
|
||
|
|
<ul><li></li><li></li><li class="revealed mines3">3</li><li></li><li></li></ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>sorry! I feel bad leading you into a trap like that!</p>
|
||
|
|
<p>but I think mistakes are a good way to learn.</p>
|
||
|
|
<p>this is the end of the <strong>tutorial</strong> for now. I hope it has helped in some way.</p>
|
||
|
|
<p>have fun!</p>
|
||
|
|
</div>
|