Final manual updates.

This commit is contained in:
Steve 2018-04-07 10:02:38 +01:00
parent b082d9957b
commit fe7636e925
3 changed files with 47 additions and 48 deletions

View File

@ -1,27 +1,15 @@
<html>
<head>
<title>Blob Wars : Attrition - Gameplay Manual</title>
<style>
body {font-family: sans; font-size: 14px; background: #111; color: #fff; line-height: 24px;}
h3 {margin-top: 50px; background-color: #234; padding: 5px;}
h4 {background-color: #345; padding: 5px;}
a {color: #0af; text-decoration: none;}
a:hover {color: #0af; text-decoration: underline;}
table {border-collapse: collapse;}
table, th, td {border: 1px solid white; padding: 8px;}
span.highlight {color: #fb0; font-weight: bold;}
img.screenshot {width: 800px; padding: 2px; border: 1px solid #ccc; margin-left: auto; margin-right: auto; display: block;}
div.annotation {font-size: 12px; position: absolute; background-color: #08f; color: #fff; padding: 5px; font-weight: bold; border: 1px #fff solid; text-align: center}
div.annotationContainer {position: relative; width: 800px; display: block; margin-left: auto; margin-right: auto;}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div style="width: 1024px; margin-left: auto; margin-right: auto; background-color: #000; padding: 10px; border: 1px #555 solid">
<div style="text-align: center;">
<p>
<img src="title.png"><br>
Gameplay Manual<br>
<img src="title.png" /><br />
Gameplay Manual<br />
</p>
<p style="font-size: 14px">Last updated: 2nd April 2018</p>
</div>
@ -57,6 +45,7 @@ Blob Wars : Attrition supports both keyboard and joypad controls. A joypad must
<p>
The game's default controls are listed below. These can all be changed by going to the Options screen and selecting "Controls ...". See the Options section of this manual for more information.
</p>
<p>
<table>
<tr><td>Up</td><td>W</td></tr>
<tr><td>Down</td><td>S</td></tr>
@ -83,7 +72,7 @@ Most missions in the game feature multiple objectives which are listed at the st
<div class="annotation" style="left: 400px; top: 235px;">3</div>
<div class="annotation" style="left: 460px; top: 235px;">4</div>
<div class="annotation" style="left: 200px; top: 235px;">5</div>
<img src="gameplay1.jpg" class="screenshot">
<img src="gameplay1.jpg" class="screenshot" />
<ol>
<li>Health, Power, Oxygen, and Weapon</li>
<li>Inventory</li>
@ -95,7 +84,7 @@ Most missions in the game feature multiple objectives which are listed at the st
<p>
Bob starts the game with 10 health points, which are depleted as he takes damage. When Bob's health is reduced to 0, he is killed and the mission is failed. Picking up cherries will help to regain health (see further below for more information). Bob also has a power level, that is used by both the aqua lung and jetpack. This can be replenished by picking up batteries (see further below for more information). It also naturally regenerates over time.
</p>
<img src="gameplay3.jpg" class="screenshot">
<img src="gameplay3.jpg" class="screenshot" />
<p>
Pressing Escape anytime during gameplay will bring up a menu, allowing you to access options, stats, trophy information, and to also quit the mission.
</p>
@ -162,7 +151,7 @@ Teeka is a buddy of Bob's who sometimes accompanied him on missions. He can some
</p>
<h3>Title Screen</h3>
<p><img src="title.jpg" class="screenshot"></p>
<p><img src="title.jpg" class="screenshot" /></p>
<p>
The title screen offers a range of options.
<ul>
@ -184,7 +173,7 @@ The title screen offers a range of options.
<div class="annotation" style="left: 200px; top: 360px;">2</div>
<div class="annotation" style="left: 525px; top: 275px;">3</div>
<div class="annotation" style="left: 440px; top: 200px;">4</div>
<img src="hub1.jpg" class="screenshot">
<img src="hub1.jpg" class="screenshot" />
<ol>
<li>Progress statistics</li>
<li>An incomplete mission</li>
@ -200,7 +189,7 @@ The title screen offers a range of options.
<div class="annotation" style="left: 620px; top: 150px;">2</div>
<div class="annotation" style="left: 160px; top: 275px;">3</div>
<div class="annotation" style="left: 635px; top: 300px;">4</div>
<img src="hub2.jpg" class="screenshot">
<img src="hub2.jpg" class="screenshot" />
<ol>
<li>Mission name</li>
<li>Mission description</li>
@ -223,7 +212,7 @@ At any time during gameplay, pressing Pause will display the mission's current o
<div class="annotation" style="left: 135px; top: 145px;">2</div>
<div class="annotation" style="left: 645px; top: 215px;">3</div>
<div class="annotation" style="left: 600px; top: 315px;">4</div>
<img src="gameplay2.jpg" class="screenshot">
<img src="gameplay2.jpg" class="screenshot" />
<ol>
<li>A completed objective</li>
<li>An incomplete (required) objective</li>
@ -240,7 +229,7 @@ Pressing the Radar key (Tab by default) during a mission will bring up the radar
<div class="annotation" style="left: 400px; top: 150px;">1</div>
<div class="annotation" style="left: 80px; top: 210px;">2</div>
<div class="annotation" style="left: 600px; top: 400px;">3</div>
<img src="radar.jpg" class="screenshot">
<img src="radar.jpg" class="screenshot" />
<ol>
<li>Radar map area</li>
<li>Blip directional arrows</li>
@ -262,7 +251,7 @@ The options screen can be access at most times during the game. It allow you to
</p>
<p>
<img src="options.jpg" class="screenshot">
<img src="options.jpg" class="screenshot" />
<ul>
<li><span class='highlight'>Fullscreen</span>: activate the fullscreen mode for the game. Note that you must exit and restart the game in order for this change to take effect.</li>
<li><span class='highlight'>Window Size</span>: select the window size of the game. Change this if things appear too big or too small. Note that you must exit and restart the game in order for this change to take effect.</li>
@ -277,7 +266,7 @@ The options screen can be access at most times during the game. It allow you to
</p>
<p>
<img src="controls.jpg" class="screenshot">
<img src="controls.jpg" class="screenshot" />
</p>
<p>
To change a control, highlight the relevant options and press Return or Space, then press the keyboard control or joypad button of your choosing. Pressing backspace will clear a control setting. Note that menus can always be navigated by using the arrow keys, and by pressing Return or Space.
@ -316,30 +305,7 @@ Blob Wars : Attrition is a port of the Android game of the same name. It is the
</div>
<script src='jquery-2.1.3.min.js'></script>
<script>
var toc = $('#toc');
var i = 1;
$('h3,h4').each(function(i, e) {
var link = 'link' + i;
var a = $('<a>').attr('href', '#' + link).append(e.innerText);
$(e).before($('<a>').attr('name', link));
if (e.tagName == 'H3')
{
toc.append("&blacksquare; <a href='#" + link + "'>" + e.innerText + "</a><br>");
}
if (e.tagName == 'H4')
{
toc.append("<span style='text-indent: 2em; display: inline-block'>&#9643 <a href='#" + link + "'>" + e.innerText + "</a></span><br>");
}
});
</script>
<script src='toc.js'></script>
</body>
</html>

11
manual/style.css Normal file
View File

@ -0,0 +1,11 @@
body {font-family: sans; font-size: 14px; background: #111; color: #fff; line-height: 24px;}
h3 {margin-top: 50px; background-color: #234; padding: 5px;}
h4 {background-color: #345; padding: 5px;}
a {color: #0af; text-decoration: none;}
a:hover {color: #0af; text-decoration: underline;}
table {border-collapse: collapse;}
table, th, td {border: 1px solid white; padding: 8px;}
span.highlight {color: #fb0; font-weight: bold;}
img.screenshot {width: 800px; padding: 2px; border: 1px solid #ccc; margin-left: auto; margin-right: auto; display: block;}
div.annotation {font-size: 12px; position: absolute; background-color: #08f; color: #fff; padding: 5px; font-weight: bold; border: 1px #fff solid; text-align: center}
div.annotationContainer {position: relative; width: 800px; display: block; margin-left: auto; margin-right: auto;}

22
manual/toc.js Normal file
View File

@ -0,0 +1,22 @@
$(document).ready(function() {
var toc = $('#toc');
var i = 1;
$('h3,h4').each(function(i, e) {
var link = 'link' + i;
var a = $('<a>').attr('href', '#' + link).append(e.innerText);
$(e).before($('<a>').attr('name', link));
if (e.tagName == 'H3')
{
toc.append("&blacksquare; <a href='#" + link + "'>" + e.innerText + "</a><br />");
}
if (e.tagName == 'H4')
{
toc.append("<span style='text-indent: 2em; display: inline-block'>&#9643 <a href='#" + link + "'>" + e.innerText + "</a></span><br />");
}
});
});