« get me outta code hell

index.html - csb-game - Pixelly spin-off of the Command Synergy Battle system used in Final Fantasy XIII
summary refs log tree commit diff
path: root/index.html
blob: 5115aa6406a6fc7b346c9a7695611cedc0a63c1f (plain)
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
<title>Game experiment</title>
<meta charset="utf-8">
<style>
@font-face {
  font-family: 'pixel-font';
  src: url('teeny-tiny-pixls.otf') format('opentype');
}

body {
  font-family: 'pixel-font';
  font-size: 5px;
  background: black;
  color: white;
}

canvas {
  image-rendering: optimizeSpeed;
}

a {
  color: #5F5;
}

u {
  color: #F5F;
}

u.heading {
  color: #AAF;
}

#help { display: none; width: 300px; }
#help:target { display: block; }
</style>
<p><a href="#help">Huh? <i>(Click me!)</i></a></p>
<p id="help"><a href='#'>Close</a><br><br>
First and foremost: Your browser zoom is probably 100%. PLEASE ZOOM IN if you want to.<br>
Okay thank you.<br>
CSB-game is a spinoff of Final Fantasy XIII's <a href="https://finalfantasy.wikia.com/wiki/Command_Synergy_Battle">Command Synergy Battle</a> system. It is very cool and I like it. I've always wanted to make a game based on it a little, so here we are.<br>
<br><u class="heading">CONTROLS</u><br>
* <u>Up/down</u> to navigate menus. Space to select things. <u>Backspace</u> to go out of a menu.<br>
* When you're in the action menu, <u>left/right</u> to change the power of the move you're using. For example, press right twice to select Fira then Firaga.<br>
* Press <u>E</u> to execute a string of actions right away (either before your ATB gauge - the blue bar - is full, or before you've filled your queue full).<br>
* Press <u>Tab</u> at any point to get to the role-switching menu. You can also press backspace from the action menu to get there.<br>
<br><u class="heading">WHAT THE HECK IS AN ATB</u><br>
ATB stands for <u>Active Time Battle</u>. The basic idea of how doing things in this game works is that you have a <u>queue</u> where you pile up actions you want to cast, then once your <u>ATB gauge</u> gets full, all those actions get activated one after the other. Some actions take more <u>ATB segments</u> than others - those ones will take up more space on your queue. Since you're limited to a certain number of ATB segments, you can only queue so many actions in a chain, so pick wisely!<br>
<br><u class="heading">HOW THE HECK DO I STOP MY CHARACTERS FROM DYING</u><br>
You will need to heal them. You can only do that when you're in the Reinforcement role. There are two <u>roles</u> in the game: <u>Aggression</u>, used for kiling things, and <u>Reinforcement</u>, used for keeping your party alive. You can switch between roles at any time by pressing <u>Tab</u>. <u>Each role has its own set of actions</u> based around targetting enemies or allies - you can't heal during an Aggression chain, and you can't suddenly cast Fire while you're healing someone. You will need to react quickly and switch roles often to survive and defeat the enemy!<br>
<br><u class="heading">WHERE THE HECK IS AUTO-BATTLE</u><br>
I haven't added it because <u>I'm lazy</u>. The AI for party members isn't even any good yet.<br>
<br><u class="heading">WHY THE HECK CAN'T MY CHARACTER DO ANYTHING</u><br>
They were probably <u>stunned</u>? That happens when you get hit by a really heavy attack, or a long barrage of lighter attacks. It only takes a second or two for a stun to pass, so don't worry about it.<br>
<br><u class="heading">WHY THE HECK DOES THIS GAME LOOK SO BLURRY</u><br>
Please use <u>Firefox</u>. It's the only browser where I've actually tested the game. Also, the game might look blurry on Retina/Hi-DPI screens. I'm sure there's a fix for that but I haven't bothered myself to find it.<br>
<br><u class="heading">I WANT TO PLAY A BETTER VERSION OF THIS HECKING DEMO</u><br>
Try Final Fantasy XIII?<br>
<br><a href='#'>Close</a></p>
<canvas id="canvas" tabindex="1" width="300" height="240"></canvas>
<script src="index.js"></script>