1 |
1 |
/* GLOBAL STATE VARIABLES START WITH A __ */ |
2 |
2 |
var _player = null; |
3 |
3 |
var _viewportX = 0; |
4 |
4 |
var _scoreDisplay = ""; |
5 |
5 |
var _gameStartTime = (new Date()).getTime(); |
6 |
6 |
var _timeLeftDisplay = ""; |
7 |
7 |
var _secondsTotal = 120; |
8 |
8 |
|
9 |
9 |
/* State */ |
10 |
10 |
var __STATE = {}; |
11 |
11 |
__STATE.level = 1; |
12 |
12 |
__STATE.gameStarted = false; |
13 |
13 |
__STATE.gameOver = false; |
14 |
14 |
__STATE.timeLeft = _secondsTotal; |
15 |
15 |
__STATE.currentScore = 0; |
16 |
16 |
__STATE.gameOverIsDisplaying = false; |
17 |
17 |
__STATE.numCoinsToCollect = -1; |
18 |
18 |
|
19 |
19 |
const PLAYER_SPEED = 4; |
20 |
20 |
const WALKER_VELOCITY = -80; |
21 |
21 |
const EVENT_PLAYER_DIE = "EVENT_PLAYER_DIE"; |
22 |
22 |
const EVENT_PLAYER_HIT_WALKER = "EVENT_PLAYER_HIT_WALKER"; |
23 |
23 |
const EVENT_PLAYER_HIT_WALL = "EVENT_PLAYER_HIT_WALL"; |
24 |
24 |
const EVENT_GAME_OVER = "EVENT_GAME_OVER"; |
25 |
25 |
|
26 |
26 |
const SCREENWIDTH = 800; |
27 |
27 |
const SCREENHEIGHT = 600; |
28 |
28 |
const TILE_WIDTH = 80; |
29 |
29 |
const TILE_HEIGHT = 60; |
30 |
30 |
const GRAVITY_STRENGTH = 1000; |
31 |
31 |
const RIGHT = 0; |
32 |
32 |
const LEFT = 1; |
33 |
33 |
const NONE = 2; |
34 |
34 |
|
35 |
35 |
var _player = null; |
36 |
36 |
|
37 |
37 |
var tileMap = [ |
38 |
38 |
[[0,1],[8,1],[0,13],[4,1],[0,8],[8,1],[0,5],[4,1],[0,7],[8,1],[0,6],[8,1],[0,2]], |
39 |
39 |
[[0,8],[4,1],[0,3],[4,1],[0,6],[8,1],[0,28]], |
40 |
40 |
[[0,8],[0,24],[4,1],[0,3],[4,1],[0,6],[8,1],[0,4]], |
41 |
41 |
[[0,11],[4,1],[0,15],[4,1],[0,13],[4,1],[0,6]], |
42 |
42 |
[[0,16],[8,1],[0,19],[8,1],[0,11]], |
43 |
43 |
[[0,9],[4,1],[0,38]], |
44 |
44 |
[[0,48]], |
45 |
45 |
[[1,48]] |
46 |
46 |
]; |
47 |
47 |
|
48 |
48 |
Crafty.init(800, 600, document.getElementById('gamecanvas')); |
49 |
49 |
setupGlobalBindings(); |
50 |
50 |
|
51 |
51 |
var assets = {'tiles': ['img/tile-1.png', 'img/platform.png', 'img/platformx2.png']}; |
52 |
52 |
var playerSprite = { 'sprites': { 'img/playerSprite.png': { tile: 50, tileh: 77, map: { man_left: [0, 1], man_right: [0, 2], jump_right: [6, 4] } } } }; |
53 |
53 |
|
54 |
54 |
initialiseGame(); |
55 |
55 |
|
56 |
56 |
function initialiseGame () { |
57 |
57 |
Crafty.load(assets, function(){ |
58 |
58 |
reset(); |
59 |
59 |
loadBackground(); |
60 |
60 |
loadSprites(); |
61 |
61 |
generateMap(); |
62 |
62 |
spawnEntities(); |
63 |
63 |
displayText(); |
64 |
64 |
/* Load sounds */ |
65 |
65 |
Crafty.audio.add("coin", "sounds/coin.wav"); |
66 |
66 |
__STATE.gameStarted = true; |
67 |
67 |
}); |
68 |
68 |
} |
69 |
69 |
|
70 |
70 |
function loadBackground () { |
71 |
71 |
Crafty.background('#3BB9FF'); |
72 |
72 |
//Crafty.background('#FFFFFF url(img/bg.png) repeat-x center center'); |
73 |
73 |
} |
74 |
74 |
|
75 |
75 |
function loadSprites () { |
76 |
76 |
Crafty.load(playerSprite); |
|
77 |
Crafty.load(walkerSprite); |
77 |
78 |
} |
78 |
79 |
|
79 |
80 |
function spawnEntities () { |
80 |
81 |
spawnPlayer(); |
|
82 |
spawnWalkers(); |
81 |
83 |
} |
82 |
84 |
|
83 |
85 |
function spawnPlayer (){ |
84 |
86 |
_player = Crafty.e('Player, 2D, DOM, man_right, SpriteAnimation, Twoway, Collision, Gravity, Tween, Keyboard') |
85 |
87 |
.attr({ |
86 |
88 |
x: 50, |
87 |
89 |
y: 263 |
88 |
90 |
}) |
89 |
91 |
.reel('moveRight', 500, [[0, 2], [1, 2], [2, 2], [3, 2], [4, 2], [5, 2], [6, 2], [7, 2]]) |
90 |
92 |
.reel('moveLeft', 500, [[0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1], [6, 1], [7, 1]]) |
91 |
93 |
.twoway(200, 510) |
92 |
94 |
.gravity('FloorTile') |
93 |
95 |
.gravityConst(GRAVITY_STRENGTH) |
94 |
96 |
.bind('KeyDown', |
95 |
97 |
function (e) { |
96 |
98 |
if (Crafty.keydown['37'] && Crafty.keydown['39']) { |
97 |
99 |
this.pauseAnimation(); |
98 |
100 |
this.resetAnimation(); |
99 |
101 |
this.isMoving = false; |
100 |
102 |
return; |
101 |
103 |
} |
102 |
104 |
if (e.key === Crafty.keys.RIGHT_ARROW && !this.isJumping) { |
103 |
105 |
this.animate('moveRight', -1); |
104 |
106 |
} |
105 |
107 |
else if (e.key === Crafty.keys.LEFT_ARROW && !this.isJumping) { |
106 |
108 |
this.animate('moveLeft', -1); |
107 |
109 |
} |
108 |
110 |
this.isMoving = true; |
109 |
111 |
} |
110 |
112 |
) |
111 |
113 |
.bind('KeyUp', |
112 |
114 |
function (e) { |
113 |
115 |
if ((this.isPlaying('moveRight') && e.key === Crafty.keys.RIGHT_ARROW) || |
114 |
116 |
(this.isPlaying('moveLeft') && e.key === Crafty.keys.LEFT_ARROW)) { |
115 |
117 |
this.pauseAnimation(); |
116 |
118 |
this.resetAnimation(); |
117 |
119 |
/* Check/Set the player's moving state */ |
118 |
120 |
if (e.key === Crafty.keys.RIGHT_ARROW || e.key === Crafty.keys.LEFT_ARROW) { |
119 |
121 |
this.isMoving = false; |
120 |
122 |
return; |
121 |
123 |
} |
122 |
124 |
} |
123 |
125 |
/* Kickstart animation if we need to */ |
124 |
126 |
if (this.isDown('RIGHT_ARROW') && !this.isJumping) { |
125 |
127 |
this.animate('moveRight', -1); |
126 |
128 |
this.isMoving = true; |
127 |
129 |
} |
128 |
130 |
else if (this.isDown('LEFT_ARROW') && !this.isJumping) { |
129 |
131 |
this.animate('moveLeft', -1); |
130 |
132 |
this.isMoving = true; |
131 |
133 |
} |
132 |
134 |
} |
133 |
135 |
) |
134 |
136 |
.bind('Moved', function (obj) { |
135 |
137 |
if (this.x >= (SCREENWIDTH / 2) && this.x <= 3440) { |
136 |
138 |
Crafty.viewport.scroll('_x', (this.x - (SCREENWIDTH / 2)) * -1); |
137 |
139 |
displayScore(); |
138 |
140 |
displayTimeLeft(); |
139 |
141 |
} |
140 |
142 |
}) |
141 |
143 |
.bind('CheckJumping', function (ground) { |
142 |
144 |
this.isJumping = true; |
143 |
145 |
var canJump, doubleJump; |
144 |
146 |
if(this.canJump === false && !this.inDoubleJumpMode){ |
145 |
147 |
/* Lets check if there is a platform above us */ |
146 |
148 |
var platforms = Crafty('Tile'); |
147 |
149 |
for(var i=0; i < platforms.length; i++){ |
148 |
150 |
var platform = platforms[i]; |
149 |
151 |
platform = Crafty(platform); |
150 |
152 |
if(platform.x < this.x && platform.y < this.y && platform.x+160 > this.x){ |
151 |
153 |
/* We probably have a platform above us so don't allow double jump */ |
152 |
154 |
canJump = false; |
153 |
155 |
doubleJump = false; |
154 |
156 |
break; |
155 |
157 |
} |
156 |
158 |
} |
157 |
159 |
this.canJump = canJump !== undefined ? canJump : true; |
158 |
160 |
this.inDoubleJumpMode = doubleJump !== undefined ? doubleJump : true; |
159 |
161 |
} |
160 |
162 |
else if(this.inDoubleJumpMode){ |
161 |
163 |
this.canJump = false; |
162 |
164 |
} |
163 |
165 |
this.pauseAnimation(); |
164 |
166 |
this.resetAnimation(); |
165 |
167 |
this.sprite(this.currentDirection === RIGHT ? 6 : 2, 4); |
166 |
168 |
}) |
167 |
169 |
.bind('LandedOnGround', function (ground) { |
168 |
170 |
if (this.isJumping) { |
169 |
171 |
this.isJumping = false; |
170 |
172 |
this.gravityConst(GRAVITY_STRENGTH); |
171 |
173 |
/* We cannot get the direction from the velocity. We'll use the current loaded sprite animation */ |
172 |
174 |
this.sprite(0, this.getReel().id === 'moveRight' ? 2 : 1); |
173 |
175 |
/* We may need to enable controls here as we may have disabled them */ |
174 |
176 |
if(this.bounced){ |
175 |
177 |
this.velocity().x = 0; |
176 |
178 |
this.bounced = false; |
177 |
179 |
} |
178 |
180 |
this.inDoubleJumpMode = false; |
179 |
181 |
} |
180 |
182 |
/* Will need to enable controls in some circumstances */ |
181 |
183 |
this.enableControl(); |
182 |
184 |
}) |
183 |
185 |
.bind('NewDirection', function (obj) { |
184 |
186 |
/* 0 is neither right nor left so we don't care about it */ |
185 |
187 |
if (obj.x === 0) return; |
186 |
188 |
this.currentDirection = obj.x === 1 ? RIGHT : LEFT; |
187 |
189 |
if (this.currentDirection === RIGHT && !this.isJumping) { |
188 |
190 |
if (this.isMoving) { |
189 |
191 |
/* Start running again */ |
190 |
192 |
this.animate('moveRight', -1); |
191 |
193 |
}else { |
192 |
194 |
this.sprite(0, 2); |
193 |
195 |
} |
194 |
196 |
} |
195 |
197 |
else if (this.currentDirection === LEFT && !this.isJumping) { |
196 |
198 |
if (this.isMoving) { |
197 |
199 |
/* Start running again */ |
198 |
200 |
this.animate('moveLeft', -1); |
199 |
201 |
}else { |
200 |
202 |
this.sprite(0, 1); |
201 |
203 |
} |
202 |
204 |
} |
203 |
205 |
}) |
204 |
206 |
.bind('EnterFrame', function(){ |
205 |
207 |
if(this.x <= -6) this.x = -5; |
206 |
208 |
if(this.x >= 3785) this.x = 3784; |
207 |
209 |
}) |
208 |
210 |
|
209 |
211 |
/* Set player defaults */ |
210 |
212 |
_player.isJumping = false; |
211 |
213 |
_player.currentDirection = RIGHT; |
212 |
214 |
_player.isMoving = false; |
213 |
215 |
_player.reel('moveRight'); |
214 |
216 |
_player.bounced = false; |
215 |
217 |
_player.inDoubleJumpMode = false; |
|
218 |
} |
|
219 |
|
|
220 |
function spawnWalkers () { |
|
221 |
Crafty.e('Delay').delay(spawnWalker, Crafty.math.randomInt(2000, 8000), -1); |
|
222 |
} |
|
223 |
|
|
224 |
function spawnWalker () { |
|
225 |
Crafty.e('Walker') |
|
226 |
.onHit('Player', function(hitData) { |
|
227 |
var playerObj = hitData[0].obj; |
|
228 |
if(playerObj.isJumping){ |
|
229 |
if(this.velocity().x !== 0){ |
|
230 |
pauseAndResetAnimation(this); |
|
231 |
this.animate('die', 1); |
|
232 |
this.velocity().x = 0; |
|
233 |
this.tween({alpha: 0}, 750); |
|
234 |
Crafty.trigger(EVENT_PLAYER_HIT_WALKER); |
|
235 |
} |
|
236 |
} |
|
237 |
else{ |
|
238 |
/* We need to check this is a genuine collision */ |
|
239 |
if(this.getReel().id === 'die') return; |
|
240 |
this.velocity().x = 0; |
|
241 |
this.x += 5; |
|
242 |
pauseAndResetAnimation(this); |
|
243 |
this.reelPosition(1); |
|
244 |
Crafty.trigger(EVENT_PLAYER_DIE); |
|
245 |
} |
|
246 |
}); |
216 |
247 |
} |
217 |
248 |
|
218 |
249 |
function generateMap () { |
219 |
250 |
const Y_OFFSET = 600 - (tileMap.length * TILE_HEIGHT); |
220 |
251 |
tileMap.map(function (tileRow, rowIdx) { |
221 |
252 |
var xPos = 0; |
222 |
253 |
var yPos = 0; |
223 |
254 |
tileRow.map(function (tile, tileIdx) { |
224 |
255 |
yPos = Y_OFFSET + (rowIdx * 60); |
225 |
256 |
var tileType = tile[0]; |
226 |
257 |
var tileNum = tile[1]; |
227 |
258 |
if (tileType === 0){ |
228 |
259 |
xPos += (tileNum * 80); |
229 |
260 |
} |
230 |
261 |
if (tileType === 1) { |
231 |
262 |
for(var i=0; i < tileNum; i++){ |
232 |
263 |
Crafty.e('FloorTile, 2D, DOM, Image, Collision') |
233 |
264 |
.attr({ x: xPos, y: yPos, w: TILE_WIDTH, h: TILE_HEIGHT }) |
234 |
265 |
.image(Crafty.assets['img/tile-' + tileType + '.png'].src); |
235 |
266 |
xPos += 80; |
236 |
267 |
} |
237 |
268 |
} |
238 |
269 |
else{ |
239 |
270 |
if (tileType === 4) { |
240 |
271 |
Crafty.e('Platform') |
241 |
272 |
.setImage('img/platform.png') |
242 |
273 |
.setPlatform(xPos, yPos, 1) |
243 |
274 |
.addCoins(Crafty.math.randomInt(1,2)); |
244 |
275 |
} |
245 |
276 |
else if (tileType === 8) { |
246 |
277 |
Crafty.e('Platform') |
247 |
278 |
.setImage('img/platformx2.png') |
248 |
279 |
.setPlatform(xPos, yPos, 2) |
249 |
280 |
.addCoins(Crafty.math.randomInt(1,2)); |
250 |
281 |
} |
251 |
282 |
xPos += 80; |
252 |
283 |
} |
253 |
284 |
}); |
254 |
285 |
}); |
255 |
286 |
} |
256 |
287 |
|
257 |
288 |
function displayText () { |
258 |
289 |
displayScore(); |
259 |
290 |
displayTimeLeft(); |
260 |
291 |
} |
261 |
292 |
|
262 |
293 |
function displayTimeLeft () { |
263 |
294 |
if(_timeLeftDisplay){ |
264 |
295 |
_timeLeftDisplay.destroy(); |
265 |
296 |
} |
266 |
297 |
_timeLeftDisplay = Crafty.e("2D, DOM, Text") |
267 |
298 |
.attr({ x: 720 - Crafty.viewport._x, y: 20 }) |
268 |
299 |
.text(__STATE.timeLeft) |
269 |
300 |
.textColor('#FF0000') |
270 |
301 |
.textFont({ size: '14px', weight: 'bold', family: 'Courier New' }); |
271 |
302 |
} |
272 |
303 |
|
273 |
304 |
function displayScore () { |
274 |
305 |
if(_scoreDisplay){ |
275 |
306 |
_scoreDisplay.destroy(); |
276 |
307 |
} |
277 |
308 |
_scoreDisplay = Crafty.e("2D, DOM, Text") |
278 |
309 |
.attr({ x: 750 - Crafty.viewport._x, y: 20 }) |
279 |
310 |
.text(pad(__STATE.currentScore, 3)) |
280 |
311 |
.textColor('#FF0000') |
281 |
312 |
.textFont({ size: '14px', weight: 'bold', family: 'Courier New' }); |
282 |
313 |
} |
283 |
314 |
|
284 |
315 |
function displayGameOver(){ |
285 |
316 |
if(Crafty("GameOver")) |
286 |
317 |
Crafty("GameOver").destroy(); |
287 |
318 |
|
288 |
319 |
Crafty.e("GameOver, 2D, DOM, Text") |
289 |
320 |
.attr({ x: 280 - Crafty.viewport._x, y: 280, z:100, w: 250 }) |
290 |
321 |
.text("GAME OVER").textColor('#FF0000').textFont({ size: '36px', weight: 'bold', family: 'Courier New' }); |
291 |
322 |
} |
292 |
323 |
|
293 |
324 |
function displayLevelComplete(){ |
294 |
325 |
if(Crafty("LevelComplete")) |
295 |
326 |
Crafty("LevelComplete").destroy(); |
296 |
327 |
|
297 |
328 |
Crafty.e("LevelComplete, 2D, DOM, Text") |
298 |
329 |
.attr({ x: 270 - Crafty.viewport._x, y: 280, z:100, w: 350 }) |
299 |
330 |
.text("LEVEL COMPLETE").textColor('#33FF33').textFont({ size: '36px', weight: 'bold', family: 'Courier New' }); |
300 |
331 |
} |
301 |
332 |
|
302 |
333 |
function updateScore(amt){ |
303 |
334 |
__STATE.currentScore += amt; |
304 |
335 |
displayScore(); |
305 |
336 |
} |
306 |
337 |
|
307 |
338 |
function pad(num, size) { |
308 |
339 |
var s = num+""; |
309 |
340 |
while (s.length < size) s = "0" + s; |
310 |
341 |
return s; |
311 |
342 |
} |
312 |
343 |
|
313 |
344 |
function setupGlobalBindings () { |
314 |
345 |
Crafty.bind(EVENT_GAME_OVER, function(){ |
315 |
346 |
_player.disableControl(); |
316 |
347 |
pauseAndResetAnimation(_player); |
317 |
348 |
displayGameOver(); |
318 |
349 |
}) |
319 |
350 |
} |
320 |
351 |
|
321 |
352 |
function pauseAndResetAnimation (ent){ |
322 |
353 |
ent.pauseAnimation(); |
323 |
354 |
ent.resetAnimation(); |
324 |
355 |
} |
325 |
356 |
|
326 |
357 |
function reinstateMovement () { |
327 |
358 |
_player.enableControl(); |
328 |
359 |
} |
329 |
360 |
|
330 |
361 |
function reset () { |
331 |
362 |
_player = null; |
332 |
363 |
_viewportX = 0; |
333 |
364 |
_scoreDisplay = ""; |
334 |
365 |
_gameStartTime = (new Date()).getTime(); |
335 |
366 |
_timeLeftDisplay = ""; |
336 |
367 |
_secondsTotal = 120; |
337 |
368 |
|
338 |
369 |
__STATE.gameStarted = false; |
339 |
370 |
__STATE.gameOver = false; |
340 |
371 |
__STATE.timeLeft = _secondsTotal; |
341 |
372 |
__STATE.currentScore = 0; |
342 |
373 |
__STATE.gameOverIsDisplaying = false; |
343 |
374 |
__STATE.numCoinsToCollect = -1; |
344 |
375 |
|
345 |
376 |
/* Position viewport */ |
346 |
377 |
Crafty.viewport.scroll('_x', 0) |
347 |
378 |
} |
348 |
379 |
|
349 |
380 |
Crafty.bind('EnterFrame', function(){ |
350 |
381 |
if(__STATE.gameStarted === false) |
351 |
382 |
return; |
352 |
383 |
|
353 |
384 |
if(Crafty.frame() % 50 === 1){ |
354 |
385 |
__STATE.timeLeft = _secondsTotal - Math.round(((new Date()).getTime() - _gameStartTime) / 1000); |
355 |
386 |
displayTimeLeft(); |
356 |
387 |
} |
357 |
388 |
if(__STATE.gameOver && !__STATE.gameOverIsDisplaying){ |
358 |
389 |
/* Display Game Over */ |
359 |
390 |
Crafty.trigger(EVENT_GAME_OVER); |
360 |
391 |
__STATE.gameOverIsDisplaying = true; |
361 |
392 |
} |
362 |
393 |
}) |