/
index.html
85 lines (76 loc) · 4.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<!--[if IE]><link rel="shortcut icon" href="images/favicons/favicon.ico"><![endif]-->
<link rel="icon" type="image/png" href="images/favicons/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="In Buffalo Chess, a.k.a. Bison, one player represents Indians who are trying to keep the village from being overrun by buffalo." />
<meta property="og:title" content="Buffalo Chess">
<meta property="og:description" content="Try to keep your village from the herd of rampaging buffalo" />
<meta property="og:image" content="https://raw.githubusercontent.com/joonas-yoon/buffalo-chess/main/images/thumbnail.png">
<title>Buffalo Chess</title>
<link rel="stylesheet" href="style.css" />
<!-- applause-button -->
<link rel="stylesheet" href="https://unpkg.com/applause-button/dist/applause-button.css" />
<script src="https://unpkg.com/applause-button/dist/applause-button.js"></script>
</head>
<body>
<a href="https://github.com/joonas-yoon/buffalo-chess/" style="position: absolute; top: 0; left: 0;">
<img loading="lazy" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_left_orange_ff7600.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1" />
</a>
<div class="container">
<div class="header">
<h1>Buffalo Chess</h1>
</div>
<div class="game">
<div class="box replay">
<p>spectating …</p>
</div>
<div class="box result">
<p class="message">You Win!</p>
<button class="button restart-button">Try Again</button>
<button class="button replay-button">Replay</button>
<button class="button share-button">Share Replay</button>
</div>
<div class="box markers"></div>
<div class="box guide"></div>
<div class="box grid"></div>
</div>
<div class="cemetery"></div>
<div class="desc">
<p>In Buffalo Chess, a.k.a. Bison, one player represents Indians who are trying to keep the village from being overrun by buffalo.</p>
<p>This player moves the Indian chief and his dogs while the other player takes charge of the herd of rampaging buffalo, all of which are represented by wooden pieces. Each side has its own style of play as the pieces move differently.</p>
</div>
<div class="divider"></div>
<div class="desc">
<h1 class="heading">The Rules</h1>
<p>Moving is compulsory; it is illegal to skip a turn, even when having to move is detrimental.</p>
<h2 class="heading">Moves</h2>
<img src="images/fig1.png" class="image-center"/>
<p><b>Dog</b> <i>(as 'D')</i> can move any number of vacant squares diagonally, horizontally, or vertically as like <a href="https://en.wikipedia.org/wiki/Queen_(chess)" target="_blank">Queen</a> in chess.</p>
<img src="images/fig2.png" class="image-center"/>
<p><b>Player</b> <i>(as 'P')</i> can move exactly one square horizontally, vertically, or diagonally as like <a href="https://en.wikipedia.org/wiki/King_(chess)" target="_blank">King</a> in chess. Player can captured a piece of <b>Buffalo</b> <i>(as 'B')</i> and removed it.</p>
<img src="images/fig3.png" class="image-center"/>
<p><b>Buffalo</b> <i>(as 'B')</i> can move forward one square, if that square is unoccupied. Its movement is exactly same with as like <a href="https://en.wikipedia.org/wiki/Pawn_(chess)" target="_blank">Pawn</a> in chess.</p>
<p>In this game (not in original boardgame), Buffalo moves automatically after <b>Player</b> or <b>Dog</b> moves.</p>
<br>
<h2 class="heading">Goal</h2>
<p><b>Close off the load</b> to buffaloes can NOT be arrived the bottom, with moving <b>Player</b> and <b>Dog</b> by removing buffaloes or blocking them.</p>
<br>
<h2 class="heading">End of the game</h2>
<p>If all buffaloes can not move, Player <b>Wins</b><p>
<p>If any of buffalo arrived the bottom, Player <b>Loses</b></p>
</div>
<div class="divider"></div>
<div class="footer">
<p>A game designed by <a href="https://en.wikipedia.org/wiki/Alex_Randolph" target="_blank">Alex Randolph</a></p>
<div class="applause-button" style="text-align: center;">
<applause-button style="width: 58px; height: 58px; margin: 2rem auto;" color="black" multiclap="true" url="https://www.joonas.io/buffalo-chess"/>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>