/
index.html
93 lines (80 loc) · 4.44 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
<html>
<head>
<title>PERFECT EMPATHY</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700|Roboto+Mono|Rubik">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="inputblocker"></div>
<div id="instructions">
<span id="instructionstext">
<b>Perfect Empathy</b> is a single player dungeon game where your self-harm causes harm to the monsters you face.
<br>
<br>
You have <b>50 health points</b>, and 40 monster cards to get through. When all monsters are dead, you win.
<br>
<br>
On the top are the 4 monsters in the current room. Some of them might be <b>hearts</b>; you can click them to <b>gain health</b>. But beware - your health cannot go above 50. If you wish to save them for later, eliminate all monsters in the room, and click "next room" to have the hearts reshuffled into the deck.
<br>
<br>
In the middle are the attack slots. There are <b>8 attack slots, two for each monster</b>. To plan an attack, place a card from your hand onto an attack slot. The value facing the monster is the damage you will inflict to them. The value facing you is the damage you will take. <b>Right clicking a card will flip it.</b> To attack, click the "play turn", and all damage will be calculated. Any monsters that were not killed in a turn will <b>inflict their remaining health as damage towards you</b>.
<br>
<br>
To play effectively, you must make use of <b>attack types</b>. The three attack types are: <b>cut, burn, and poison</b>. Each monster has a <b>weakness</b> displayed on its card. Attack with the same element to inflict <b>double damage</b>.
<br>
<br>
There is also a way to minimize damage towards yourself: <b>nullification</b>. All damage facing you is calculated from <b>top to bottom, and left to right</b> (top to bottom meaning that the two attack slots for a monster will be considered sequentially). Certain elements nullify one another if played in the proper order, inflicting only <b>half the damage</b> to you. <b>If you are poisoned, cutting will let the poison bleed out. If you are cut, burning the wound will seal it. If you are burned, poison has slight curative effects for burn wounds.</b> Multiple nullifications can take place in a single turn, so maximize them when possible.
<br>
<br>
Make use of the 8 attack slots. Keep an eye on your health. Plan your attacks. And be patient.
<br>
<br>
Good luck.
<br>
<br>
Want to learn more about the mechanics of <i>Perfect Empathy</i>, or make your own deck of physical cards? Check out the <a href="https://v-os.ca/media/downloads/perfect%20empathy/perfect_empathy_rules.pdf">elaborate rules here</a>.
</span>
</div>
<div id="win">
<span>You win!</span>
</div>
<div id ="lose">
<spam>You died.</spam>
</div>
<div id="main">
<div id="log">
<span id="logtext"></span>
</div>
<div id="field">
<div class="cardslot monster"></div><div class="cardslot monster"></div><div class="cardslot monster"></div><div class="cardslot monster end"></div>
<div class="cardslot attack"></div><div class="cardslot attack"></div><div class="cardslot attack"></div><div class="cardslot attack end"></div>
<div class="cardslot attack hidden"></div><div class="cardslot attack hidden"></div><div class="cardslot attack hidden"></div><div class="cardslot attack hidden end"></div>
</div>
<div id="hand">
<div class="handslot hand"></div><div class="handslot hand"></div><div class="handslot hand"></div><div class="handslot hand"></div><div class="handslot hand end"></div>
</div>
<div id="stats">
<div class="stat statleft">
<span class="statfield" id="room"></span>
<br>
<span class="statfield" id="monsters"></span>
</div>
<div class="stat statmiddle">
<span class="statfield" id="health"></span>
</div>
<div class="stat statright">
<a href="#" class="statfield statlink" id="skip">Next Room</a>
<a href="#" class="statfield statlink" id="turn">Play Turn</a>
</div>
</div>
<a href="#" id="instructionsbutton">Instructions</a>
<a href="#" id="logbutton">Log</a>
</div>
<div id="cards"></div>
<script src="script/cards.js"></script>
<script src="script/elementHelpers.js"></script>
<script src="script/abstractHelpers.js"></script>
<script src="script/master.js"></script>
</body>
</html>