|
1 |
const SCREENWIDTH = 800; |
|
2 |
const SCREENHEIGHT = 600; |
1 |
3 |
const TILE_WIDTH = 80; |
2 |
4 |
const TILE_HEIGHT = 60; |
3 |
5 |
const GRAVITY_STRENGTH = 1000; |
|
6 |
const RIGHT = 0; |
|
7 |
const LEFT = 1; |
|
8 |
const NONE = 2; |
4 |
9 |
|
5 |
10 |
var _player = null; |
6 |
11 |
|
7 |
12 |
var tileMap = [ |
8 |
13 |
[[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]], |
9 |
14 |
[[0,8],[4,1],[0,3],[4,1],[0,6],[8,1],[0,28]], |
10 |
15 |
[[0,8],[0,24],[4,1],[0,3],[4,1],[0,6],[8,1],[0,4]], |
11 |
16 |
[[0,11],[4,1],[0,15],[4,1],[0,13],[4,1],[0,6]], |
12 |
17 |
[[0,16],[8,1],[0,19],[8,1],[0,11]], |
13 |
18 |
[[0,9],[4,1],[0,38]], |
14 |
19 |
[[0,48]], |
15 |
20 |
[[1,48]] |
16 |
21 |
]; |
17 |
22 |
|
18 |
23 |
Crafty.init(800, 600, document.getElementById('gamecanvas')); |
19 |
24 |
|
20 |
25 |
var assets = {'tiles': ['img/tile-1.png', 'img/platform.png', 'img/platformx2.png']}; |
21 |
|
var playerSprite = { 'sprites': { 'img/player.png': { tile: 64, tileh: 75, map: { man_left: [10,0], man_right: [10, 0], jump_right: [9, 0] } } } }; |
|
26 |
var playerSprite = { 'sprites': { 'img/playerSprite.png': { tile: 50, tileh: 77, map: { man_still: [0,0], man_left: [0, 1], man_right: [0, 2], jump_right: [6, 4] } } } }; |
22 |
27 |
|
23 |
28 |
initialiseGame(); |
24 |
29 |
|
25 |
30 |
function initialiseGame () { |
26 |
31 |
Crafty.load(assets, function(){ |
27 |
32 |
loadBackground(); |
28 |
33 |
loadSprites(); |
29 |
34 |
generateMap(); |
30 |
35 |
spawnEntities(); |
31 |
36 |
}); |
32 |
37 |
} |
33 |
38 |
|
34 |
39 |
function loadBackground () { |
35 |
40 |
Crafty.background('#3BB9FF'); |
36 |
|
Crafty.background('#FFFFFF url(img/bg.png) repeat-x center center'); |
|
41 |
//Crafty.background('#FFFFFF url(img/bg.png) repeat-x center center'); |
37 |
42 |
} |
38 |
43 |
|
39 |
44 |
function loadSprites () { |
40 |
45 |
Crafty.load(playerSprite); |
41 |
46 |
} |
42 |
47 |
|
43 |
48 |
function spawnEntities () { |
44 |
49 |
spawnPlayer(); |
45 |
50 |
} |
46 |
51 |
|
47 |
52 |
function spawnPlayer (){ |
48 |
|
_player = Crafty.e('Player, 2D, DOM, man_right, SpriteAnimation, Twoway, Collision, Gravity, Tween, Keyboard') |
49 |
|
.attr({x: 50,y: 263}) |
|
53 |
_player = Crafty.e('Player, 2D, DOM, man_still, SpriteAnimation, Twoway, Collision, Gravity, Tween, Keyboard') |
|
54 |
.attr({ |
|
55 |
x: 50, |
|
56 |
y: 263 |
|
57 |
}) |
|
58 |
.reel('moveRight', 500, [[0, 2],[1, 2],[2, 2], [3, 2], [4, 2], [5, 2], [6, 2], [7, 2]]) |
|
59 |
.reel('moveLeft', 500, [[0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1], [6, 1], [7, 1]]) |
|
60 |
.reel('still', 500, [[0,0]]) |
50 |
61 |
.twoway(200, 510) |
51 |
62 |
.gravity('FloorTile') |
52 |
|
.gravityConst(GRAVITY_STRENGTH); |
|
63 |
.gravityConst(GRAVITY_STRENGTH) |
|
64 |
.bind('KeyDown', |
|
65 |
function (e) { |
|
66 |
if (Crafty.keydown['37'] && Crafty.keydown['39']) { |
|
67 |
this.pauseAnimation(); |
|
68 |
this.resetAnimation(); |
|
69 |
this.isMoving = false; |
|
70 |
return; |
|
71 |
} |
|
72 |
if (e.key === Crafty.keys.RIGHT_ARROW && !this.isJumping) { |
|
73 |
this.animate('moveRight', -1); |
|
74 |
} |
|
75 |
else if (e.key === Crafty.keys.LEFT_ARROW && !this.isJumping) { |
|
76 |
this.animate('moveLeft', -1); |
|
77 |
} |
|
78 |
this.isMoving = true; |
|
79 |
} |
|
80 |
) |
|
81 |
.bind('KeyUp', |
|
82 |
function (e) { |
|
83 |
if ((this.isPlaying('moveRight') && e.key === Crafty.keys.RIGHT_ARROW) || |
|
84 |
(this.isPlaying('moveLeft') && e.key === Crafty.keys.LEFT_ARROW)) { |
|
85 |
this.pauseAnimation(); |
|
86 |
this.resetAnimation(); |
|
87 |
this.animate('still'); |
|
88 |
|
|
89 |
/* Check/Set the player's moving state */ |
|
90 |
if (e.key === Crafty.keys.RIGHT_ARROW || e.key === Crafty.keys.LEFT_ARROW) { |
|
91 |
this.isMoving = false; |
|
92 |
return; |
|
93 |
} |
|
94 |
} |
|
95 |
/* Kickstart animation if we need to */ |
|
96 |
if (this.isDown('RIGHT_ARROW') && !this.isJumping) { |
|
97 |
this.animate('moveRight', -1); |
|
98 |
this.isMoving = true; |
|
99 |
} |
|
100 |
else if (this.isDown('LEFT_ARROW') && !this.isJumping) { |
|
101 |
this.animate('moveLeft', -1); |
|
102 |
this.isMoving = true; |
|
103 |
} |
|
104 |
} |
|
105 |
) |
|
106 |
.bind('CheckJumping', function (ground) { |
|
107 |
this.isJumping = true; |
|
108 |
var canJump, doubleJump; |
|
109 |
if(this.canJump === false && !this.inDoubleJumpMode){ |
|
110 |
/* Lets check if there is a platform above us */ |
|
111 |
var platforms = Crafty('Tile'); |
|
112 |
for(var i=0; i < platforms.length; i++){ |
|
113 |
var platform = platforms[i]; |
|
114 |
platform = Crafty(platform); |
|
115 |
if(platform.x < this.x && platform.y < this.y && platform.x+160 > this.x){ |
|
116 |
/* We probably have a platform above us so don't allow double jump */ |
|
117 |
canJump = false; |
|
118 |
doubleJump = false; |
|
119 |
break; |
|
120 |
} |
|
121 |
} |
|
122 |
this.canJump = canJump !== undefined ? canJump : true; |
|
123 |
this.inDoubleJumpMode = doubleJump !== undefined ? doubleJump : true; |
|
124 |
} |
|
125 |
else if(this.inDoubleJumpMode){ |
|
126 |
this.canJump = false; |
|
127 |
} |
|
128 |
this.pauseAnimation(); |
|
129 |
this.resetAnimation(); |
|
130 |
this.sprite(this.currentDirection === RIGHT ? 6 : 2, 4); |
|
131 |
}) |
|
132 |
.bind('LandedOnGround', function (ground) { |
|
133 |
if (this.isJumping) { |
|
134 |
this.isJumping = false; |
|
135 |
this.gravityConst(GRAVITY_STRENGTH); |
|
136 |
/* We cannot get the direction from the velocity. We'll use the current loaded sprite animation */ |
|
137 |
//this.sprite(0, this.getReel().id === 'moveRight' ? 2 : 1); |
|
138 |
this.animate("still"); |
|
139 |
/* We may need to enable controls here as we may have disabled them */ |
|
140 |
if(this.bounced){ |
|
141 |
this.velocity().x = 0; |
|
142 |
this.bounced = false; |
|
143 |
} |
|
144 |
this.inDoubleJumpMode = false; |
|
145 |
} |
|
146 |
/* Will need to enable controls in some circumstances */ |
|
147 |
this.enableControl(); |
|
148 |
}) |
|
149 |
.bind('NewDirection', function (obj) { |
|
150 |
/* 0 is neither right nor left so we don't care about it */ |
|
151 |
if (obj.x === 0) return; |
|
152 |
this.currentDirection = obj.x === 1 ? RIGHT : LEFT; |
|
153 |
if (this.currentDirection === RIGHT && !this.isJumping) { |
|
154 |
if (this.isMoving) { |
|
155 |
/* Start running again */ |
|
156 |
this.animate('moveRight', -1); |
|
157 |
}else { |
|
158 |
this.sprite(0, 2); |
|
159 |
} |
|
160 |
} |
|
161 |
else if (this.currentDirection === LEFT && !this.isJumping) { |
|
162 |
if (this.isMoving) { |
|
163 |
/* Start running again */ |
|
164 |
this.animate('moveLeft', -1); |
|
165 |
}else { |
|
166 |
this.sprite(0, 1); |
|
167 |
} |
|
168 |
} |
|
169 |
}); |
|
170 |
|
|
171 |
/* Set player defaults */ |
|
172 |
_player.isJumping = false; |
|
173 |
_player.currentDirection = RIGHT; |
|
174 |
_player.isMoving = false; |
|
175 |
_player.reel('moveRight'); |
|
176 |
_player.bounced = false; |
|
177 |
_player.inDoubleJumpMode = false; |
53 |
178 |
} |
54 |
179 |
|
55 |
180 |
function generateMap () { |
56 |
181 |
const Y_OFFSET = 600 - (tileMap.length * TILE_HEIGHT); |
57 |
182 |
tileMap.map(function (tileRow, rowIdx) { |
58 |
183 |
var xPos = 0; |
59 |
184 |
var yPos = 0; |
60 |
185 |
tileRow.map(function (tile, tileIdx) { |
61 |
186 |
yPos = Y_OFFSET + (rowIdx * 60); |
62 |
187 |
var tileType = tile[0]; |
63 |
188 |
var tileNum = tile[1]; |
64 |
189 |
if (tileType === 0){ |
65 |
190 |
xPos += (tileNum * 80); |
66 |
191 |
} |
67 |
192 |
if (tileType === 1) { |
68 |
193 |
for(var i=0; i < tileNum; i++){ |
69 |
194 |
Crafty.e('FloorTile, 2D, DOM, Image, Collision') |
70 |
195 |
.attr({ x: xPos, y: yPos, w: TILE_WIDTH, h: TILE_HEIGHT }) |
71 |
196 |
.image(Crafty.assets['img/tile-' + tileType + '.png'].src); |
72 |
197 |
xPos += 80; |
73 |
198 |
} |
74 |
199 |
} |
75 |
200 |
else{ |
76 |
201 |
if (tileType === 4) { |
77 |
202 |
Crafty.e('Platform') |
78 |
203 |
.setImage('img/platform.png') |
79 |
204 |
.setPlatform(xPos, yPos, 1) |
80 |
205 |
.addCoins(Crafty.math.randomInt(1,2)); |
81 |
206 |
} |
82 |
207 |
else if (tileType === 8) { |
83 |
208 |
Crafty.e('Platform') |
84 |
209 |
.setImage('img/platformx2.png') |
85 |
210 |
.setPlatform(xPos, yPos, 2) |
86 |
211 |
.addCoins(Crafty.math.randomInt(1,2)); |
87 |
212 |
} |
88 |
213 |
xPos += 80; |
89 |
214 |
} |
90 |
215 |
}); |
91 |
216 |
}); |
92 |
217 |
} |