forked from Grimy/Grimy.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathboe.html
373 lines (352 loc) · 16.4 KB
/
boe.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
<!DOCTYPE html>
<title>Battles of Equestria</title>
<link rel="icon" type="image/png" href='boe.ico'>
<meta charset=utf-8>
<style>
table { border: 5px outset #222; border-spacing: 0; }
th, td {
width: 64px;
height: 64px;
max-height: 64px;
overflow: scroll;
box-sizing: border-box;
border: 1px inset #222;
font: bold 32px georgia;
transition: box-shadow 150ms ease-in;
}
tr:nth-child(even) > :nth-child(even) { background: #eee; color: #222; }
tr:nth-child(even) > :nth-child(odd) { background: #222; color: #eee; }
tr:nth-child(odd) > :nth-child(even) { background: #222; color: #eee; }
tr:nth-child(odd) > :nth-child(odd) { background: #eee; color: #222; }
.target { cursor: pointer; box-shadow: inset 0 0 3px 3px #3b1; }
.selected { cursor: pointer; box-shadow: inset 0 0 3px 3px #d33; }
svg {
display: block;
width: 90%;
height: 90%;
margin: auto;
stroke: none;
fill-rule: evenodd;
position: relative;
}
text {
position: absolute;
bottom: 0;
font-size: 10px;
fill: #d33;
}
.apple > circle { fill: #d33; }
.apple > circle:nth-child(1) { fill: #3b1; }
path { fill: #ccc; }
circle { fill: #07f; }
.j2 circle { fill: #640; }
body > svg { display: none; }
</style>
<table>
<caption></caption>
<tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
</table>
<p>This is Battles of Equestria version 0.1.6
(<a href=https://github.com/Grimy/Grimy.github.io/commits/master>changelog</a>)</p>
<p>Game design and balance: <a href=https://www.facebook.com/CheckMateBronieGames>Aragox</a></p>
<p>Graphics: <a href=http://tardifice.deviantart.com/>Tardifice</a></p>
<p>Coding: <a href=https://github.com/Grimy>Grimy</a></p>
<p></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
"use strict";
// Game data
// Each byte is life life life life owner piece piece piece
// byte >> 4 is the actual life total
// byte & 8 is 0 for P1, 8 for P2
// byte & 7 is the piece type
var EMPTY = 0, TREE = 16, FOAL = 21;
var ATTACK = [0, 2, 2, 1, 3, 1];
var LIFE = [1, 9, 4, 2, 1, 1];
var SPEED = [0, 2, 1, 3, 2, 2];
var POWER = [0, 1, 1, 0, 3, 0];
var selected = Number.NaN;
var powering = Number.NaN;
var power = 0;
var fleeing = 0;
var turn = 0;
var summons = [4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var board = new Uint8Array(49);
(function () { for (var i = 0; i < 14; i++) {
var piece = [4, 3, 2, 1, 2, 3, 4][i] || 5;
piece += LIFE[piece] << 4;
board[i] = piece | 8;
board[48 - i] = piece;
}})();
function set(i, piece) {
var old = board[i];
board[i] = piece;
return old;
}
// Game rules
function pick(i) {
summons[fleeing & 15] -= power == 1;
if (i == selected) {
// Do nothing
} else if (fleeing > 0) {
fleeing = set(i, fleeing);
} else if (selected != selected || power == 3) {
power = power == 3 ? 2 : 0;
return powering = selected = i;
} else { // Normal movement
fleeing = set(i, set(selected, 0));
powering = i;
}
if (fleeing == TREE || board[i] == TREE) {
summons[TREE & 15] += board[i] != EMPTY && fleeing != EMPTY;
board[i] += fleeing;
board[i] = (board[i] & 15) | (LIFE[board[i] & 7] << 4)
fleeing = 0;
} else if (fleeing > 0) { // Fight!
fleeing -= ATTACK[board[i] & 7] << 4;
summons[fleeing & 15] += fleeing < 0;
}
power = fleeing > 0 || power ? 0 : POWER[board[powering] & 7];
if (power == 1) {
fleeing = (board[powering] & 7) == 1 ? FOAL | (board[powering] & 8) : TREE;
if (!summons[fleeing & 15])
power = fleeing = 0;
}
turn = power ? board[powering] & 8 : fleeing > 0 ? fleeing & 8 : (board[powering] & 8) ^ 8;
selected = power ? powering : fleeing > 0 ? i : Number.NaN;
}
function canMove(from, to) {
if (from == to)
return true;
// Can’t summon on an existing piece
if (power == 1 && board[to] != EMPTY)
return false;
// Can’t move on a friend
var friend = (board[to] & 7) && (board[to] & 8) == turn;
if (power != 3 && board[from] != TREE && friend)
return from != from;
// Can’t levitate enemies
if (power == 3 && !(friend || board[to] == TREE))
return false;
// Can’t eat apple trees with alicorns
if (((fleeing || board[from]) & 7) == 1 && board[to] == TREE
|| board[from] == TREE && (board[to] & 7) == 1)
return false;
var dx = to % 7 - from % 7;
var dy = ~~(to / 7) - ~~(from / 7);
var dist = Math.abs(dx) + Math.abs(dy);
var speed = fleeing > 0 ? 1 : power || SPEED[board[from] & 7];
return dist <= speed && dist && (speed == 3 || dist != 2 ||
(dx && dy ? !board[from + dx] || !board[from + 7 * dy] : !board[from + to >> 1]));
}
// Style data
$('tr').slice(1).append($('<th></th>' + '<td></td>'.repeat(7)));
$('th').text(i => " 1234567ABCDEFG".charAt(i));
var src = undefined;
function display(target) {
$('caption').text('Player ' + (turn ? 2 : 1) + ', ' +
(power ? 'use your power!' : fleeing > 0 ? 'flee!' : 'make a move!'))
$('th').eq(0).text(turn ? "\u263E" : "\u263C");
$('td').html(i => {
var piece = board[i];
if ((piece & 7) == 0)
return piece == EMPTY ? '' : "<svg><use xlink:href='#" + piece + "' /></svg>"
var life = 1 + (piece >> 4);
var hearts = life > 5 ? "\u2665" + 'x' + life : "\u2665".repeat(life);
return "<svg><use xlink:href='#" + (piece & 7) + "' /><text y='100%'>" + hearts + "</text></svg>"
}).attr('class', i => {
return 'target '.repeat(canMove(selected, i)) +
'selected '.repeat(selected == i) +
'j2'.repeat((board[i] & 8) != 0);
});
var sprite = $('td').eq(target);
if (src && power != 2) {
var from = {left: src.left - sprite.offset().left, top: src.top - sprite.offset().top};
sprite.children().css(from).animate({left: 0, top: 0}, 200);
}
src = selected == selected ? sprite.offset() : undefined;
// if (turn)
// setTimeout(ia, 0);
}
function ia() {
while (turn) {
do { var i = Math.floor(Math.random() * 49); } while (!canMove(selected, i));
pick(i);
display(i);
}
}
$('table').on('click', 'td.target', function() {
var i = $('td').index(this);
pick(i);
display(i);
});
display();
</script>
<svg id='1' viewBox='0 0 1024 1024'>
<circle cx='512' cy='512' r='488'/>
<path d="M511 225C509 231 506 236 507 244C509 250
516 256 514 263C507 292 491 322 480 350C456 406 433 463 411 521C387 497
363 472 340 449C328 437 311 424 303 411C299 404 304 394 301 387C295 375
282 372 271 375C255 380 248 398 255 413C260 421 271 420 274 428C282 446
281 470 285 490C293 535 302 581 308 627C273 606 233 592 200 569C194 566
196 560 195 555C194 548 190 542 184 539C163 530 137 552 147 573C151 581
157 585 164 587C169 588 175 585 178 591C187 607 191 627 197 645C210 679
223 714 234 749C239 763 244 777 249 792C251 797 253 805 259 808C267 813
285 806 294 804C325 798 356 792 388 786C470 770 552 765 636 776C665 780
695 785 725 792C736 795 753 805 764 802C770 800 772 792 774 787C780 771
785 756 790 741C803 705 816 669 829 634C836 614 841 592 850 574C855 564
869 567 875 556C881 543 875 519 859 520L859 518C847 518 838 517 831
528C827 533 828 539 821 544C806 556 788 566 772 578C761 585 750 594 739
599C748 557 749 512 754 470C756 456 755 438 760 426C763 418 776 418 780
409C786 398 783 376 768 375C760 365 740 373 735 382C730 391 735 402 731
410C724 422 711 433 702 444C684 463 668 484 650 503C619 423 582 345 552
266C549 258 554 255 557 249C560 242 560 234 557 228C547 207 524 213 511
225zM544 306L541 453L541 517L561 579L600 695L633 672L644 662L644
644L641 595L636 528L617 480L576 383L555 331L544 306M521 309C499 351 483
399 465 444C452 478 433 512 423 548C420 560 420 575 418 588C416 611 413
634 411 658C410 664 406 677 410 682C412 686 419 688 423 690C433 696 444
703 456 708C470 675 478 638 489 605C495 586 501 566 508 548C511 537 517
525 518 514C523 479 518 442 520 408C520 384 520 361 521 338C521 329 524
317 521 309M735 440C718 462 697 482 679 504C673 511 663 519 659 528C655
538 660 559 661 570C664 596 664 622 667 649L701 626L713 615L719 581L729
499L734 459L735 440M300 441L322 582L329 622L333 640L349 650L388 670C389
641 393 612 397 585C398 573 403 556 400 545C398 534 381 522 374 515C350
491 327 460 300 441M828 565C805 579 783 595 762 610C756 614 741 621 738
628C737 632 740 641 741 646C745 660 748 675 752 690C763 684 774 673 785
665C790 661 797 657 800 651C809 637 812 618 817 603C820 593 830 574 828
565M540 586L538 639L537 736C548 733 561 721 571 714C574 712 580 710 581
705C582 697 573 680 570 673C563 654 557 635 551 616C547 606 545 594 540
586M517 591C503 621 495 654 485 686C483 692 473 712 476 718C477 722 483
724 487 726C496 731 505 738 516 741C516 707 515 673 517 640C517 626 522
603 517 591M206 598C208 621 222 647 229 670C232 677 234 691 240 697C244
701 251 703 257 706C266 710 275 716 286 719C291 703 298 688 304 673C306
668 311 659 310 655C308 648 290 643 285 640C259 625 233 609 206 598M717
641L683 665L668 677L668 696L671 752C686 745 702 729 716 719C720 715 729
711 731 705C734 701 730 694 729 690C727 678 724 667 721 656C720 650 720
645 717 641M306 728L377 760L385 694L347 673L332 666L324 681L306 728M645
690C634 697 617 704 609 715C606 719 611 727 612 732C614 737 615 744 619
748C623 752 641 754 646 753C651 752 649 742 649 739C648 727 647 716 647
706C646 700 647 694 645 690M767 754L775 731L788 692C780 695 762 706 759
714C755 723 764 745 767 754M405 707L399 762L426 758L439 755L449 729C436
721 419 709 405 707M250 727C252 739 257 759 265 769L277 738L250 727M696
763L750 778L738 729L709 750L696 763M563 748L595 748L589 730C580 732 568
741 563 748M468 741L465 754L488 750L468 741M297 749L284 784L326 775L345
770C331 762 312 751 297 749z"/>
</svg>
<svg id='2' viewBox='0 0 1024 1024'>
<circle cx='512' cy='512' r='488'/>
<path d='M295 723C277 727 260 731 243 735C236 736 227 737 224 745C221 752
226 764 227 773C232 797 237 822 242 847C245 858 246 870 261 867C316 856
371 840 426 827C439 823 454 820 468 817C473 815 481 815 485 811C491 804
485 790 483 783C477 760 471 738 465 716C464 709 462 695 456 691C451 687
445 689 440 690C429 693 419 694 409 697C403 621 386 550 401 475C405 458
409 440 416 425C440 376 507 345 559 365C587 376 610 404 623 431C644 475
643 524 639 572C636 598 634 625 629 652C625 670 619 687 617 706C604 703
593 699 581 697C576 696 570 693 566 696C559 700 558 713 556 720C549 742
543 766 537 789C535 796 528 810 534 817C539 821 547 822 554 824L597
834C631 843 666 851 701 860C722 866 745 874 768 876C768 873 771 872 772
870C775 865 776 859 777 854C783 832 789 810 795 788C797 779 804 765 800
757C797 750 786 749 780 747C762 742 744 735 726 732C732 703 743 675 750
647C762 599 767 552 772 504C779 433 782 359 755 292C747 272 736 254 723
237C685 186 624 153 562 149C518 146 473 154 432 168C383 184 335 210 306
254C270 305 260 368 257 430C255 480 256 531 263 581C269 628 282 676 295
723z"/>
<circle cx='479' cy='255' r='20'/>
<circle cx='479' cy='255' r='20'/>
<circle cx='600' cy='266' r='20'/>
<circle cx='374' cy='349' r='20'/>
<circle cx='690' cy='363' r='20'/>
<circle cx='327' cy='485' r='20'/>
<circle cx='710' cy='522' r='20'/>
<circle cx='331' cy='623' r='20'/>
<circle cx='693' cy='641' r='20'/>
<circle cx='368' cy='778' r='20'/>
<circle cx='657' cy='781' r='20'/>
</svg>
<svg id='3' viewBox='0 0 1024 1024'>
<circle cx='512' cy='512' r='488' />
<path d="M212 472C186 469 159 459 134
461C100 462 51 484 69 526C71 531 74 536 79 540C88 549 100 554 111
559C142 575 179 583 214 591L214 592C188 599 146 637 172 663C175 667 179
669 184 672C226 694 280 692 327 692C322 713 302 748 318 768C325 778 339
777 350 775C375 771 400 755 423 743C431 739 445 734 450 725C456 723 462
715 463 709L461 708L460 710L459 710C455 706 445 710 443 714C435 714 426
720 420 724C407 731 395 737 383 743C375 746 366 751 358 749C351 748 347
740 346 734C342 718 347 702 352 688C354 682 359 673 354 667C347 660 330
664 322 664C292 664 260 668 232 662C222 659 208 657 204 646C201 640 205
633 209 629C218 617 232 607 245 600C249 597 262 590 257 582C251 573 226
572 217 570C188 565 157 555 132 542C120 536 97 526 101 510C104 497 117
492 129 489C155 483 184 483 212 486C220 486 244 493 249 484C255 471 241
457 233 450C206 426 172 411 147 384C139 376 133 367 127 358C123 352 121
345 130 343C150 337 178 348 197 356C234 372 270 391 305 412C328 426 350
439 362 466C377 497 364 528 368 561C374 611 435 639 481 635C484 623 471
618 463 614C442 602 414 595 402 573C387 543 403 514 401 484C400 459 382
439 364 424C308 376 241 342 170 325C148 320 102 309 93 339C86 360 100
379 115 394C144 423 180 444 212 472M541 629L542 634C556 639 572 634 587
629C598 625 610 620 621 613C637 602 650 587 654 568C658 548 653 529 653
510C652 490 656 470 667 454C681 431 706 419 729 407C775 380 826 347 881
342C883 341 886 341 889 342C913 344 887 372 879 381C854 409 819 424 791
450C783 456 766 473 774 484C780 492 797 487 805 486C835 485 864 482 893
489C905 492 927 500 922 518C918 529 903 536 894 541C866 555 835 564 805
571C790 574 772 574 764 588C774 600 791 607 804 618C818 630 829 647 807
657C803 659 799 660 796 661C765 668 734 664 703 664C694 664 677 661 670
666C663 672 669 683 671 689C676 703 688 743 666 749C657 751 647 746 640
742C623 734 607 726 591 717C585 715 569 704 564 710L562 709L566 721C574
723 583 733 592 738C617 752 646 771 676 775C695 778 711 772 710 750C710
743 709 736 708 730C705 716 700 704 697 692C743 692 797 694 840 672C883
649 842 601 810 592L810 591C843 584 878 575 909 561C920 555 933 550 943
541C959 527 963 501 949 485C938 471 919 464 903 462C872 457 842 470 812
472C842 445 878 424 907 396C921 381 935 363 931 342C926 314 890 318 870
322C812 331 753 357 705 389C672 411 628 439 622 481C617 512 637 542 620
574C605 602 563 607 541 629z"/>
</svg>
<svg id='4' viewBox='0 0 1024 1024'>
<circle cx='512' cy='512' r='488'/>
<path d="M431 836C432 828 427 823 421 819C411 810 393 802 386 790C383 786
386 777 387 772C389 755 390 739 394 723C435 763 496 782 552 762C577 753
597 737 618 720C618 742 621 766 625 788C626 793 628 808 636 807C644 806
645 789 645 784C648 759 650 731 647 707C640 628 644 548 635 469C630 420
621 370 610 323C599 274 583 221 554 181C539 160 517 141 492 156C475 165
464 181 456 198C442 222 432 248 423 275C402 338 395 406 385 472C377 530
366 588 357 647C353 681 346 715 340 749C338 760 332 780 335 792C338 801
351 807 359 811C381 824 405 834 431 836zM503 202C496 205 491 213 488
219C479 234 472 252 467 270C460 289 455 309 450 330C448 337 443 348 444
356C446 363 457 370 464 373C487 388 517 391 543 380C551 377 569 371 572
362C575 354 568 337 565 329C557 301 549 273 537 246C532 233 527 220 518
210C514 205 509 200 503 202M579 393C546 418 509 425 470 411C459 407 450
400 440 395C432 418 433 445 429 470C428 478 423 492 425 500C429 510 441
520 449 528C463 542 481 557 502 561C529 566 557 548 578 531C584 526 592
520 597 513C601 506 596 490 595 483C592 461 588 440 584 420C583 411 583
400 579 393M418 543C411 576 409 610 404 644C402 655 395 675 399 686C405
700 425 713 439 720C488 750 537 743 582 708C592 700 605 691 612 679C616
672 611 654 611 646C608 613 606 581 602 550C590 558 580 568 568 575C532
595 494 596 459 576C443 567 432 553 418 543z"/>
</svg>
<svg id='5' viewBox='0 0 1024 1024'>
<circle cx='512' cy='512' r='390'/>
<path d="M517 203C503 216 495 236 486 254C472 282 458 310 443 338C437 347
433 358 427 368C425 372 423 378 419 381C415 383 408 383 404 384C392 385
381 386 370 388C338 392 306 396 275 400C257 402 237 402 221 410C222 426
242 439 253 451C277 476 303 500 327 525C337 535 352 545 358 558C362 565
355 582 354 590C348 617 343 645 338 673C334 694 330 715 326 737C325 742
321 755 329 758C333 759 338 756 343 754C353 749 362 744 373 739C406 723
439 706 472 689C481 685 499 671 510 672C521 673 537 686 548 692C580 709
612 728 645 745C655 750 665 757 675 762C679 763 685 766 689 762C692 758
690 752 690 748C688 736 686 724 685 713C680 677 673 642 668 607C667 595
660 576 662 565C663 560 668 558 671 555C677 549 684 543 691 536C717 510
745 484 773 459C782 451 791 443 799 434C802 430 807 426 805 421C803 416
796 416 792 415C780 413 768 411 756 409C720 404 686 397 651 392C641 390
631 389 622 387C617 386 611 387 608 384C598 376 593 355 588 345C572 312
557 279 541 246C535 231 529 212 517 203z"/>
</svg>
<svg id='16' class='apple' viewBox='0 0 1024 1024'>
<circle cx='512' cy='512' r='390'/>
<circle cx='332' cy='293' r='35'/>
<circle cx='603' cy='365' r='35'/>
<circle cx='792' cy='426' r='35'/>
<circle cx='453' cy='799' r='35'/>
<circle cx='471' cy='561' r='35'/>
<circle cx='252' cy='558' r='35'/>
<circle cx='674' cy='624' r='35'/>
</svg>