54 |
55 |
56 |
57 |
111 |
124 |
125 |
126 |
--------------------------------------------------------------------------------
/js/spaceinvaders.js:
--------------------------------------------------------------------------------
1 | /*
2 | spaceinvaders.js
3 |
4 | the core logic for the space invaders game.
5 |
6 | */
7 |
8 | /*
9 | Game Class
10 |
11 | The Game class represents a Space Invaders game.
12 | Create an instance of it, change any of the default values
13 | in the settings, and call 'start' to run the game.
14 |
15 | Call 'initialise' before 'start' to set the canvas the game
16 | will draw to.
17 |
18 | Call 'moveShip' or 'shipFire' to control the ship.
19 |
20 | Listen for 'gameWon' or 'gameLost' events to handle the game
21 | ending.
22 | */
23 |
24 | // Constants for the keyboard.
25 | var KEY_LEFT = 37;
26 | var KEY_RIGHT = 39;
27 | var KEY_SPACE = 32;
28 |
29 | // Creates an instance of the Game class.
30 | function Game() {
31 |
32 | // Set the initial config.
33 | this.config = {
34 | bombRate: 0.05,
35 | bombMinVelocity: 50,
36 | bombMaxVelocity: 50,
37 | invaderInitialVelocity: 25,
38 | invaderAcceleration: 0,
39 | invaderDropDistance: 20,
40 | rocketVelocity: 120,
41 | rocketMaxFireRate: 2,
42 | gameWidth: 400,
43 | gameHeight: 300,
44 | fps: 50,
45 | debugMode: false,
46 | invaderRanks: 5,
47 | invaderFiles: 10,
48 | shipSpeed: 120,
49 | levelDifficultyMultiplier: 0.2,
50 | pointsPerInvader: 5,
51 | limitLevelIncrease: 25
52 | };
53 |
54 | // All state is in the variables below.
55 | this.lives = 3;
56 | this.width = 0;
57 | this.height = 0;
58 | this.gameBounds = {left: 0, top: 0, right: 0, bottom: 0};
59 | this.intervalId = 0;
60 | this.score = 0;
61 | this.level = 1;
62 |
63 | // The state stack.
64 | this.stateStack = [];
65 |
66 | // Input/output
67 | this.pressedKeys = {};
68 | this.gameCanvas = null;
69 |
70 | // All sounds.
71 | this.sounds = null;
72 |
73 | // The previous x position, used for touch.
74 | this.previousX = 0;
75 | }
76 |
77 | // Initialis the Game with a canvas.
78 | Game.prototype.initialise = function(gameCanvas) {
79 |
80 | // Set the game canvas.
81 | this.gameCanvas = gameCanvas;
82 |
83 | // Set the game width and height.
84 | this.width = gameCanvas.width;
85 | this.height = gameCanvas.height;
86 |
87 | // Set the state game bounds.
88 | this.gameBounds = {
89 | left: gameCanvas.width / 2 - this.config.gameWidth / 2,
90 | right: gameCanvas.width / 2 + this.config.gameWidth / 2,
91 | top: gameCanvas.height / 2 - this.config.gameHeight / 2,
92 | bottom: gameCanvas.height / 2 + this.config.gameHeight / 2,
93 | };
94 | };
95 |
96 | Game.prototype.moveToState = function(state) {
97 |
98 | // If we are in a state, leave it.
99 | if(this.currentState() && this.currentState().leave) {
100 | this.currentState().leave(game);
101 | this.stateStack.pop();
102 | }
103 |
104 | // If there's an enter function for the new state, call it.
105 | if(state.enter) {
106 | state.enter(game);
107 | }
108 |
109 | // Set the current state.
110 | this.stateStack.pop();
111 | this.stateStack.push(state);
112 | };
113 |
114 | // Start the Game.
115 | Game.prototype.start = function() {
116 |
117 | // Move into the 'welcome' state.
118 | this.moveToState(new WelcomeState());
119 |
120 | // Set the game variables.
121 | this.lives = 3;
122 | this.config.debugMode = /debug=true/.test(window.location.href);
123 |
124 | // Start the game loop.
125 | var game = this;
126 | this.intervalId = setInterval(function () { GameLoop(game);}, 1000 / this.config.fps);
127 |
128 | };
129 |
130 | // Returns the current state.
131 | Game.prototype.currentState = function() {
132 | return this.stateStack.length > 0 ? this.stateStack[this.stateStack.length - 1] : null;
133 | };
134 |
135 | // Mutes or unmutes the game.
136 | Game.prototype.mute = function(mute) {
137 |
138 | // If we've been told to mute, mute.
139 | if(mute === true) {
140 | this.sounds.mute = true;
141 | } else if (mute === false) {
142 | this.sounds.mute = false;
143 | } else {
144 | // Toggle mute instead...
145 | this.sounds.mute = this.sounds.mute ? false : true;
146 | }
147 | };
148 |
149 | // The main loop.
150 | function GameLoop(game) {
151 | var currentState = game.currentState();
152 | if(currentState) {
153 |
154 | // Delta t is the time to update/draw.
155 | var dt = 1 / game.config.fps;
156 |
157 | // Get the drawing context.
158 | var ctx = this.gameCanvas.getContext("2d");
159 |
160 | // Update if we have an update function. Also draw
161 | // if we have a draw function.
162 | if(currentState.update) {
163 | currentState.update(game, dt);
164 | }
165 | if(currentState.draw) {
166 | currentState.draw(game, dt, ctx);
167 | }
168 | }
169 | }
170 |
171 | Game.prototype.pushState = function(state) {
172 |
173 | // If there's an enter function for the new state, call it.
174 | if(state.enter) {
175 | state.enter(game);
176 | }
177 | // Set the current state.
178 | this.stateStack.push(state);
179 | };
180 |
181 | Game.prototype.popState = function() {
182 |
183 | // Leave and pop the state.
184 | if(this.currentState()) {
185 | if(this.currentState().leave) {
186 | this.currentState().leave(game);
187 | }
188 |
189 | // Set the current state.
190 | this.stateStack.pop();
191 | }
192 | };
193 |
194 | // The stop function stops the game.
195 | Game.prototype.stop = function Stop() {
196 | clearInterval(this.intervalId);
197 | };
198 |
199 | // Inform the game a key is down.
200 | Game.prototype.keyDown = function(keyCode) {
201 | this.pressedKeys[keyCode] = true;
202 | // Delegate to the current state too.
203 | if(this.currentState() && this.currentState().keyDown) {
204 | this.currentState().keyDown(this, keyCode);
205 | }
206 | };
207 |
208 | Game.prototype.touchstart = function(s) {
209 | if(this.currentState() && this.currentState().keyDown) {
210 | this.currentState().keyDown(this, KEY_SPACE);
211 | }
212 | };
213 |
214 | Game.prototype.touchend = function(s) {
215 | delete this.pressedKeys[KEY_RIGHT];
216 | delete this.pressedKeys[KEY_LEFT];
217 | };
218 |
219 | Game.prototype.touchmove = function(e) {
220 | var currentX = e.changedTouches[0].pageX;
221 | if (this.previousX > 0) {
222 | if (currentX > this.previousX) {
223 | delete this.pressedKeys[KEY_LEFT];
224 | this.pressedKeys[KEY_RIGHT] = true;
225 | } else {
226 | delete this.pressedKeys[KEY_RIGHT];
227 | this.pressedKeys[KEY_LEFT] = true;
228 | }
229 | }
230 | this.previousX = currentX;
231 | };
232 |
233 | // Inform the game a key is up.
234 | Game.prototype.keyUp = function(keyCode) {
235 | delete this.pressedKeys[keyCode];
236 | // Delegate to the current state too.
237 | if(this.currentState() && this.currentState().keyUp) {
238 | this.currentState().keyUp(this, keyCode);
239 | }
240 | };
241 |
242 | function WelcomeState() {
243 |
244 | }
245 |
246 | WelcomeState.prototype.enter = function(game) {
247 |
248 | // Create and load the sounds.
249 | game.sounds = new Sounds();
250 | game.sounds.init();
251 | game.sounds.loadSound('shoot', 'sounds/shoot.wav');
252 | game.sounds.loadSound('bang', 'sounds/bang.wav');
253 | game.sounds.loadSound('explosion', 'sounds/explosion.wav');
254 | };
255 |
256 | WelcomeState.prototype.update = function (game, dt) {
257 |
258 |
259 | };
260 |
261 | WelcomeState.prototype.draw = function(game, dt, ctx) {
262 |
263 | // Clear the background.
264 | ctx.clearRect(0, 0, game.width, game.height);
265 |
266 | ctx.font="30px Arial";
267 | ctx.fillStyle = '#ffffff';
268 | ctx.textBaseline="middle";
269 | ctx.textAlign="center";
270 | ctx.fillText("Space Invaders", game.width / 2, game.height/2 - 40);
271 | ctx.font="16px Arial";
272 |
273 | ctx.fillText("Press 'Space' or touch to start.", game.width / 2, game.height/2);
274 | };
275 |
276 | WelcomeState.prototype.keyDown = function(game, keyCode) {
277 | if(keyCode == KEY_SPACE) {
278 | // Space starts the game.
279 | game.level = 1;
280 | game.score = 0;
281 | game.lives = 3;
282 | game.moveToState(new LevelIntroState(game.level));
283 | }
284 | };
285 |
286 | function GameOverState() {
287 |
288 | }
289 |
290 | GameOverState.prototype.update = function(game, dt) {
291 |
292 | };
293 |
294 | GameOverState.prototype.draw = function(game, dt, ctx) {
295 |
296 | // Clear the background.
297 | ctx.clearRect(0, 0, game.width, game.height);
298 |
299 | ctx.font="30px Arial";
300 | ctx.fillStyle = '#ffffff';
301 | ctx.textBaseline="center";
302 | ctx.textAlign="center";
303 | ctx.fillText("Game Over!", game.width / 2, game.height/2 - 40);
304 | ctx.font="16px Arial";
305 | ctx.fillText("You scored " + game.score + " and got to level " + game.level, game.width / 2, game.height/2);
306 | ctx.font="16px Arial";
307 | ctx.fillText("Press 'Space' to play again.", game.width / 2, game.height/2 + 40);
308 | };
309 |
310 | GameOverState.prototype.keyDown = function(game, keyCode) {
311 | if(keyCode == KEY_SPACE) {
312 | // Space restarts the game.
313 | game.lives = 3;
314 | game.score = 0;
315 | game.level = 1;
316 | game.moveToState(new LevelIntroState(1));
317 | }
318 | };
319 |
320 | // Create a PlayState with the game config and the level you are on.
321 | function PlayState(config, level) {
322 | this.config = config;
323 | this.level = level;
324 |
325 | // Game state.
326 | this.invaderCurrentVelocity = 10;
327 | this.invaderCurrentDropDistance = 0;
328 | this.invadersAreDropping = false;
329 | this.lastRocketTime = null;
330 |
331 | // Game entities.
332 | this.ship = null;
333 | this.invaders = [];
334 | this.rockets = [];
335 | this.bombs = [];
336 | }
337 |
338 | PlayState.prototype.enter = function(game) {
339 |
340 | // Create the ship.
341 | this.ship = new Ship(game.width / 2, game.gameBounds.bottom);
342 |
343 | // Setup initial state.
344 | this.invaderCurrentVelocity = 10;
345 | this.invaderCurrentDropDistance = 0;
346 | this.invadersAreDropping = false;
347 |
348 | // Set the ship speed for this level, as well as invader params.
349 | var levelMultiplier = this.level * this.config.levelDifficultyMultiplier;
350 | var limitLevel = (this.level < this.config.limitLevelIncrease ? this.level : this.config.limitLevelIncrease);
351 | this.shipSpeed = this.config.shipSpeed;
352 | this.invaderInitialVelocity = this.config.invaderInitialVelocity + 1.5 * (levelMultiplier * this.config.invaderInitialVelocity);
353 | this.bombRate = this.config.bombRate + (levelMultiplier * this.config.bombRate);
354 | this.bombMinVelocity = this.config.bombMinVelocity + (levelMultiplier * this.config.bombMinVelocity);
355 | this.bombMaxVelocity = this.config.bombMaxVelocity + (levelMultiplier * this.config.bombMaxVelocity);
356 | this.rocketMaxFireRate = this.config.rocketMaxFireRate + 0.4 * limitLevel;
357 |
358 | // Create the invaders.
359 | var ranks = this.config.invaderRanks + 0.1 * limitLevel;
360 | var files = this.config.invaderFiles + 0.2 * limitLevel;
361 | var invaders = [];
362 | for(var rank = 0; rank < ranks; rank++){
363 | for(var file = 0; file < files; file++) {
364 | invaders.push(new Invader(
365 | (game.width / 2) + ((files/2 - file) * 200 / files),
366 | (game.gameBounds.top + rank * 20),
367 | rank, file, 'Invader'));
368 | }
369 | }
370 | this.invaders = invaders;
371 | this.invaderCurrentVelocity = this.invaderInitialVelocity;
372 | this.invaderVelocity = {x: -this.invaderInitialVelocity, y:0};
373 | this.invaderNextVelocity = null;
374 | };
375 |
376 | PlayState.prototype.update = function(game, dt) {
377 |
378 | // If the left or right arrow keys are pressed, move
379 | // the ship. Check this on ticks rather than via a keydown
380 | // event for smooth movement, otherwise the ship would move
381 | // more like a text editor caret.
382 | if(game.pressedKeys[KEY_LEFT]) {
383 | this.ship.x -= this.shipSpeed * dt;
384 | }
385 | if(game.pressedKeys[KEY_RIGHT]) {
386 | this.ship.x += this.shipSpeed * dt;
387 | }
388 | if(game.pressedKeys[KEY_SPACE]) {
389 | this.fireRocket();
390 | }
391 |
392 | // Keep the ship in bounds.
393 | if(this.ship.x < game.gameBounds.left) {
394 | this.ship.x = game.gameBounds.left;
395 | }
396 | if(this.ship.x > game.gameBounds.right) {
397 | this.ship.x = game.gameBounds.right;
398 | }
399 |
400 | // Move each bomb.
401 | for(var i=0; i