/
grogue.html
154 lines (141 loc) · 5.04 KB
/
grogue.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
<html>
<head>
<title>GROGue</title>
<!--<link rel="stylesheet" href="static/css/reset.css">-->
<link rel="stylesheet" href="static/css/grogue.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Brawler">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="static/scripts/gridmangler.js"></script>
<script type="text/javascript" src="static/scripts/eyeofthetiler.js"></script>
<script type="text/javascript" src="static/scripts/tilecodes.js"></script>
<script type="text/javascript" src="static/scripts/gameutils.js"></script>
<script type="text/javascript" src="static/scripts/gameobjects.js"></script>
<script type="text/javascript" src="static/scripts/gamelibrary.js"></script>
<script type="text/javascript" src="static/scripts/levelgen.js"></script>
<script type="text/javascript" src="static/scripts/fov.js"></script>
<script type="text/javascript" src="static/scripts/grogue.js"></script>
<script type="text/javascript">
var game, player_name;
$(document).ready(function ( ) {
var imageFiles = [constants.tiles_image];
/////////////////////////////////////////////////////////
// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
for (var i = 0; i < this.length; i++) {
if (this[i] == element) { this.splice(i,1); }
}
};
// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
checklist = this.toArray();
var img;
this.each(function() {
img = $('<img />').attr({ src: this, id: this });
$('#id_div_preload').append(img);
img.load(function() {
checklist.remove($(this).attr('src'));
if (checklist.length == 0) { callback(); }
});
});
};
////////////////////////////////////////////////////////////
$(document).keydown(
function (e) {
game.keypress(e);
}
);
$('#id_div_open_container').hide();
$(imageFiles).preloadImages(initGame);
});
var initGame = function ( ) {
var tilecodes = getTileCodes();
game = grogue($, tilecodes, level_generator());
game.init();
};
var playerChangeName = function ( ) {
var new_name = prompt("Ahoy! What do they call you?");
player_name = new_name;
game.playerChangeName(new_name);
};
</script>
</head>
<body>
<div id="id_div_container">
<table>
<tr><td><h1 class="game_header">Welcome to GROGue</h1></td><td class="changename"><a href="javascript: playerChangeName()">change your name</a></td></tr>
<tr>
<td>
<canvas id="id_cnv_game" width="360" height="416" >
arg!
</canvas>
</td>
<td>
<table padding="0px">
<tr>
<td>
<canvas id="id_cnv_playerinfo" width="192" height="160" >
hey
</canvas>
</td>
</tr>
<tr>
<td>
<canvas id="id_cnv_equip" width="192" height="96" >
arg!
</canvas>
</td>
</tr>
<tr>
<td>
<canvas id="id_cnv_inventory" width="192" height="64" >
arg!
</canvas>
</td>
</tr>
<tr>
<td>
<canvas id="id_cnv_hoverinfo" width="192" height="90" >
arg!
</canvas>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="id_div_info_footer"></div>
<div id="id_div_info_coords"></div>
<div id="id_div_open_container">
<canvas id="id_cnv_container" width="192" height="96">
buzzzowie!
</canvas>
</div>
</div>
<div id="id_div_readme">
<p>Thanks for checking out Grogue! This is the initial '11-day Roguelike' version, 0.11. Gameplay is limited at this point, but the UI will remain the same.</p>
<br/>
<b>How to play:</b>
<ul>
<li>Movement - Arrow Keys, WASD, or HJKL (vi-keys)</li>
<li>Combat - Bump to attack, Click to shoot (loaded weapons are swapped automatically), SPACE to rest</li>
<li>Reload - SPACE will automatically reload any unloaded pistols</li>
<li>Items - SPACE will also pick up any items on the ground</li>
<li>Inventory - Click to equip/ready, Right-Click to "consume" (Shift-Click to drop)</li>
<li>Interact - SPACE will open/close a mixing barrel or treasure chest</li>
<li>You can turn 3 Grogs into a Fire Rum potion if you put them in a barrel.. but it doesn't do anything special yet!</li>
</ul>
<br/>
<b>Thanks to</b>
<ul>
<li>This <a href="http://roguebasin.roguelikedevelopment.org/index.php/Permissive_Field_of_View_in_Javascript">awesome FOV algorithm</a> in javascript from roguebasin</li>
<li><a href="http://nicolasgallagher.com/pure-css-speech-bubbles/">This guy</a> for simple CSS speech bubbles</li>
<li>All sounds generated using <a href="http://www.bfxr.net/">BFXR</a>, which is amazing</li>
<li><a href="https://sites.google.com/site/broguegame/">Brogue</a> and <a href="http://cardinalquest.com/">Cardinal Quest</a> for being amazing examples</li>
</ul>
</div>
<div id="id_div_preload" style="display: none">
</div>
</body>
</html>