-
Notifications
You must be signed in to change notification settings - Fork 1
/
how-do-i-play.html
142 lines (128 loc) · 5.64 KB
/
how-do-i-play.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
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<title>Othello - How do I play?</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Othello instructions. Multi-player, browser-based, server-less Othello. Can be played locally or P2P with video chat.">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="othello.css">
<link rel="icon" type="image/png" href="icon-192.png">
<link rel="apple-touch-icon" href="icon-192.png">
<!-- Don't defer this, or we get a flash of an incomplete page. -->
<script src="othello.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
for (const container of document.querySelectorAll('.stone-container')) {
container.appendChild(createStone());
}
});
</script>
<style>
#exampleBoard {
/* The example board is a 8x1 grid. */
display: grid;
grid-template: repeat(1, 1fr) / repeat(8, 1fr);
width: calc(var(--square-size) * 8);
/* The border around the whole board. */
border: 0.15vmin solid black;
}
</style>
</head>
<body class="docs">
<h1>Othello</h1>
<h2>How do I play?</h2>
<p>
You take turns placing stones on the squares of the board. You may only
play a stone that captures some of the other player's stones. A stone is
captured if there is one or more opponent's stone between your new play
and another stone of yours. The captured stones flip over to show the
opposite color. For example:
</p>
<div id="exampleBoard">
<div class="square stone-container valid"></div>
<div class="square stone-container white"></div>
<div class="square stone-container white"></div>
<div class="square stone-container white"></div>
<div class="square stone-container black"></div>
<div class="square stone-container white"></div>
<div class="square stone-container black"></div>
<div class="square stone-container"></div>
</div>
<p>
In this example, is it black's turn. The square on the left is a valid
move, and is marked with a small gray dot. The square on the right is
not a valid move, because it doesn't border any white stones and would
not capture anything. If black plays on the left, the three white stones
on the left would be captured and become black. The white stone in the
middle would not be captured, because the capture stops at the first
black stone.
</p>
<p>
If you cannot capture any of the other player's stones, you must pass.
The app will determine this for you and give control back to the other
player after showing this on your part of the score board:
<span class="stone-container white turn pass">
<span class="msg-container"></span>
</span>
</p>
<p>
When the board is full, the game is over. The player with the most
stones wins. The app will show this on the score board for the winner:
<span class="stone-container black win">
<span class="msg-container"></span>
</span>
</p>
<p>
You can start the game over at any time using the "Reset Game" button at
the bottom.
</p>
<h3>Playing locally</h3>
<p>
To play locally, two players take turns clicking or tapping on the same
device to make their moves. This works really well with a tablet or
phone laying on the table between two players, but can also be done on a
laptop or desktop with a mouse.
</p>
<h3>Playing offline</h3>
<p>
To play offline, just load the URL. If you've loaded it before, it
should be cached and available offline. On some platforms, such as
Android, you may also be prompted to install the app to your home screen.
</p>
<h3>Playing with a friend over the internet</h3>
<p>
To play over the internet, click or tap on the "P2P Multi-player" button
at the bottom of the screen. A video chat will appear under or to the
right of the game board. Click or tap on the text under "Your ID" to
copy it to the clipboard. Send this text to a friend. Your friend then
pastes your ID into the field labelled "Your friend's ID" and hits enter
on the keyboard or tablet/phone's on-screen keyboard. This will start
the connection between you and your friend.
</p>
<p>
During the game, you can see and talk to your friend while you play.
There is a mute button which can be used to mute or unmute the connection.
You can use the "X" button on the video chat to end the connection.
</p>
<p>
When it's your turn, your color will have a halo behind it at the top of
the scoreboard, and all valid moves will be marked for you with a gray
dot. Either player can use the "Reset Game" button at the bottom of the
board at any time to start a new game.
</p>
<h3>Match-making</h3>
<p>
This game is meant to be social and played with friends and family. It
is not meant as a way to meet internet trolls, so there is no
match-making service. You'll have to send your randomly-generated ID to
others using some other system, like a text message, chat, or email.
</p>
<h2>Browser support</h2>
<p>
This probably won't work on IE. It should work on any <i>current</i>
browser. If it doesn't work for you, please file a new issue here:
<a href="https://github.com/joeyparrish/othello/issues">https://github.com/joeyparrish/othello/issues</a>
</p>
</body>
</html>