Tool for training your super bullet directions in Samurai Gunn 2
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

260 lines
15 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/favicon.ico">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SG2 Super Training</title>
<script src="https://jeremyckahn.github.io/keydrown/dist/keydrown.min.js"></script>
<script src=script.js></script>
</head>
<body>
<div class="modal fade" id="neutral-dirs-modal" tabindex="-1" aria-labelledby="neutral-dirs-modal-title"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="neutral-dirs-modal-title">What are the "neutral" inputs?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="clearfix">
<img src="assets/trickyangles.gif" class="float-start m-2">
<p>
As you probably already know, super bullets in Samurai Gunn 2 can be fired in 16
different directions. 8 of these are relatively easy (those being the up, down, left, right,
and 45° shots) while the others, the 22.5° shots take more practice. For <a
href="/22.5">complicated reasons</a>, 4 of these shots are even harder than the other 4.
However, there is a trick that allows you to perform these harder angles in a significantly
easier way.
</p>
<p>
On the left are the four angles are the ones I'm referring to. Each of them requires you to
first dash in a vertical direction, and then shoot in a horizontal direction. Without
getting into why (details are in the link above), that's not easy to do! Instead, what if we
could have the game do it for us?
</p>
</div>
<div class="clearfix">
<div class="d-table float-end m-2" style="max-width: 195px;">
<img src="assets/neutralshotexample.gif">
<img src="assets/neutraldashexample.gif">
</div>
<p>
Luckily, we absolutely can. See, the game doesn't actually care that we're holding the
correct direction while we shoot and dash. All it cares about is that the shot and the dash
<em>come out</em> in the right direction. You may think these are synonymous, but there's
one important situation where they aren't: When no input is held. As demonstrated on the
right, shooting and dashing have separate behaviours when not holding any direction.
Specifically, <strong>shooting goes in the direction you're facing</strong> and
<strong>dashing goes in the opposite of whichever direction you last held</strong>.
</p>
</div>
<p>
This website, which attempts to accurately emulate all aspects of Samurai Gunn 2's super
bullet system, does take this into account. Those are what the "Neutral Dash Direction" and
"Neutral Shot Direction" displays are under "Show Inputs". So if this knowledge is new to
you, you can try it out right away! Hop over to Quiz Mode and shoot a few supers until it
asks you for one of these trickier angles. Show the hint, and it will tell you which
direction you need to dash and shoot to get the angle it asks. See if you can figure out how
to make the game do the work for you!
</p>
<p>
For example, say it wants you to dash up and shoot left. Well, you know that a neutral shot
will come out in whichever direction you're facing, so you can tap left to make sure you're
facing that way. You also know that a dash will come out in the opposite direction of what
you most recently held, so you can tap down to set that behaviour to go up. Looking at the
input window, you can verify that your neutral dash points up and your neutral shot points
left. Simply input a super without holding any directions, and you'll fire it off in the
correct direction!
</p>
<p>
With time, this will become second nature. You'll no longer need to keep the input window
open to verify you've done it right. Soon after, you won't even need the hint open; you'll
just recognize the pattern. Once it's been burned into your muscle memory, you can start
wowing your opponents with trick shots from across the map.
</p>
<p>
Happy training!
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="main" class="container-fluid bg-custom">
<div class="container-fluid">
<div class="row mx-2 mt-2">
<div id="maincol" class="col-sm">
<nav id="tabs" class="nav nav-pills justify-content-center">
<li class="nav-item px-2">
<a id="free-tab" data-mode="Free Mode" class="nav-link" href="#">Free Mode</a>
</li>
<li class="nav-item px-2">
<a id="quiz-tab" data-mode="Quiz Mode" class="nav-link" href="#">Quiz Mode</a>
</li>
</nav>
<div id="free-mode" data-mode="Free Mode" class="">
<div class="row m-2">
<div id="free-result" class="dir-display"></div>
</div>
</div>
<div id="quiz-mode" data-mode="Quiz Mode" class="d-none">
<div class="row m-2">
<div id="quiz-target" class="dir-display"></div>
</div>
<div class="row text-center m-2">
<div class="col fluid">
<div
class="card card-body h-100 align-items-center d-flex justify-content-center bg-card">
<h5 class="card-title">Score</h5>
<h1 id="score" class="card-text">0</h1>
</div>
</div>
<div class="col-6">
<div
class="card card-body h-100 align-items-center d-flex justify-content-center bg-card">
<h5 class="card-title">Hint</h5>
<p class="card-text">
<button id="hint-toggle" class="btn btn-secondary shadow-none" type="button">
Show
</button>
</p>
<div class="collapse" id="hint-collapse">
<p id="hint-text"></p>
</div>
</div>
</div>
<div class="col fluid">
<div
class="card card-body h-100 align-items-center d-flex justify-content-center bg-card">
<h5 class="card-title">Best</h5>
<h1 id="best" class="card-text">0</h1>
</div>
</div>
</div>
<div class="row text-center m-2">
<div class="col fluid">
<div
class="card card-body h-100 align-items-center d-flex justify-content-center bg-card">
<h5 class="card-title">Feedback</h5>
<p id="feedback-text">Come on, let's play!</p>
<div id="quiz-miss-image-collapse" class="collapse w-25">
<div id="quiz-miss-image" class="dir-display small"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm pt-5">
<div class="row align-items-end">
<div class="col-auto">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Leniency Frames</div>
</div>
<input name="frames" id="frames" class="form-control" type="number" value="10" min="0">
</div>
</div>
</div>
<div class="row align-items-end">
<div class="col">
<div id="character" class="btn-group w-100 d-flex" role="group">
<button type="button" data-frames="8" class="btn btn-secondary shadow-none w-100">Hayao
(8)</button>
<button type="button" data-frames="10" class="btn btn-secondary shadow-none w-100">Other
(10)</button>
<button type="button" data-frames="12" class="btn btn-secondary shadow-none w-100">Ghost
(12)</button>
</div>
</div>
</div>
<div class="row my-5">
<div class="col-auto">
<button type="button" id="rebind" class="btn btn-secondary shadow-none">Bind
Controls</button>
<p id="bind-feedback"></p>
</div>
</div>
<div class="row">
<div class="col-auto">
<button type="button" id="input-display-toggle" class="btn btn-secondary shadow-none">Show
Inputs</button>
</div>
</div>
<div id="input-display" class="row collapse">
<div class="col fluid">
<div class="card card-body h-100 w-100 bg-card">
<div class="row w-100 m-4">
<div class="col-sm text-center">
<h5 class="card-title">Direction</h5>
<div id="input-display-direction" class="input-dir"></div>
</div>
<div class="col-sm text-center">
<h5 class="card-title">Remaining Dash Frames</h5>
<h1 id="remaining-dash-frames" class="card-text">0</h1>
</div>
<div class="col-sm text-center">
<h5 class="card-title">Shooting</h5>
<h1 id="shooting" class="card-text">...</h1>
</div>
</div>
<div class="row w-100 m-4">
<div class="col-sm text-center">
<h5 class="card-title">Neutral Dash Direction</h5>
<div id="input-display-neutral-dash" class="input-dir"></div>
</div>
<div class="col-sm text-center">
<h5 class="card-title">Neutral Shot Direction</h5>
<div id="input-display-neutral-shoot" class="input-dir"></div>
</div>
</div>
<div class="row">
<div class="col">
<button id="modal-button" class="badge bg-secondary btn shadow-none"
data-bs-toggle="modal" data-bs-target="#neutral-dirs-modal">What?</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="fixed-bottom">
<span class="text-muted">Check out the <a
href="https://git.hollymcfarland.com/monorail/sg2-super-training">source
code</a>!</span>
</footer>
<!-- Required Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>
</body>
</html>