Compare v03 to v04
Produced: 13/1/17 5:34:05 pm
   
Mode:  All  
Left file: /Users/peetj/github/cs-js-beg-platformer/versions/game-03.js  
Right file: /Users/peetj/github/cs-js-beg-platformer/versions/game-04.js  

	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	}