| 1 | 1 | const TILE_WIDTH = 80; |
| 2 | 2 | const TILE_HEIGHT = 60; |
| 3 | const GRAVITY_STRENGTH = 1000; | |
| 4 | ||
| 5 | var _player = null; | |
| 3 | 6 | |
| 4 | 7 | var tileMap = [ |
| 5 | 8 | [[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]], |
| 6 | 9 | [[0,8],[4,1],[0,3],[4,1],[0,6],[8,1],[0,28]], |
| 7 | 10 | [[0,8],[0,24],[4,1],[0,3],[4,1],[0,6],[8,1],[0,4]], |
| 8 | 11 | [[0,11],[4,1],[0,15],[4,1],[0,13],[4,1],[0,6]], |
| 9 | 12 | [[0,16],[8,1],[0,19],[8,1],[0,11]], |
| 10 | 13 | [[0,9],[4,1],[0,38]], |
| 11 | 14 | [[0,48]], |
| 12 | 15 | [[1,48]] |
| 13 | 16 | ]; |
| 14 | 17 | |
| 15 | 18 | Crafty.init(800, 600, document.getElementById('gamecanvas')); |
| 16 | 19 | |
| 17 | var assets = { | |
| 18 | 'tiles': ['img/tile-1.png', 'img/platform.png', 'img/platformx2.png'] | |
| 19 | }; | |
| 20 | 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] } } } }; | |
| 22 | ||
| 20 | 23 | initialiseGame(); |
| 21 | 24 | |
| 22 | 25 | function initialiseGame () { |
| 23 | 26 | Crafty.load(assets, function(){ |
| 24 | 27 | loadBackground(); |
| 28 | loadSprites(); | |
| 25 | 29 | generateMap(); |
| 30 | spawnEntities(); | |
| 26 | 31 | }); |
| 27 | 32 | } |
| 28 | 33 | |
| 29 | 34 | function loadBackground () { |
| 30 | 35 | Crafty.background('#3BB9FF'); |
| 31 | //Crafty.background('#FFFFFF url(img/bg.png) repeat-x center center'); | |
| 36 | Crafty.background('#FFFFFF url(img/bg.png) repeat-x center center'); | |
| 37 | } | |
| 38 | ||
| 39 | function loadSprites () { | |
| 40 | Crafty.load(playerSprite); | |
| 41 | } | |
| 42 | ||
| 43 | function spawnEntities () { | |
| 44 | spawnPlayer(); | |
| 45 | } | |
| 46 | ||
| 47 | function spawnPlayer (){ | |
| 48 | _player = Crafty.e('Player, 2D, DOM, man_right, SpriteAnimation, Twoway, Collision, Gravity, Tween, Keyboard') | |
| 49 | .attr({x: 50,y: 263}) | |
| 50 | .twoway(200, 510) | |
| 51 | .gravity('FloorTile') | |
| 52 | .gravityConst(GRAVITY_STRENGTH); | |
| 32 | 53 | } |
| 33 | 54 | |
| 34 | 55 | function generateMap () { |
| 35 | 56 | const Y_OFFSET = 600 - (tileMap.length * TILE_HEIGHT); |
| 36 | 57 | tileMap.map(function (tileRow, rowIdx) { |
| 37 | 58 | var xPos = 0; |
| 38 | 59 | var yPos = 0; |
| 39 | 60 | tileRow.map(function (tile, tileIdx) { |
| 40 | 61 | yPos = Y_OFFSET + (rowIdx * 60); |
| 41 | 62 | var tileType = tile[0]; |
| 42 | 63 | var tileNum = tile[1]; |
| 43 | 64 | if (tileType === 0){ |
| 44 | 65 | xPos += (tileNum * 80); |
| 45 | 66 | } |
| 46 | 67 | if (tileType === 1) { |
| 47 | 68 | for(var i=0; i < tileNum; i++){ |
| 48 | 69 | Crafty.e('FloorTile, 2D, DOM, Image, Collision') |
| 49 | 70 | .attr({ x: xPos, y: yPos, w: TILE_WIDTH, h: TILE_HEIGHT }) |
| 50 | 71 | .image(Crafty.assets['img/tile-' + tileType + '.png'].src); |
| 51 | 72 | xPos += 80; |
| 52 | 73 | } |
| 53 | 74 | } |
| 54 | 75 | else{ |
| 55 | 76 | if (tileType === 4) { |
| 56 | 77 | Crafty.e('Platform') |
| 57 | 78 | .setImage('img/platform.png') |
| 58 | 79 | .setPlatform(xPos, yPos, 1) |
| 59 | 80 | .addCoins(Crafty.math.randomInt(1,2)); |
| 60 | 81 | } |
| 61 | 82 | else if (tileType === 8) { |
| 62 | 83 | Crafty.e('Platform') |
| 63 | 84 | .setImage('img/platformx2.png') |
| 64 | 85 | .setPlatform(xPos, yPos, 2) |
| 65 | 86 | .addCoins(Crafty.math.randomInt(1,2)); |
| 66 | 87 | } |
| 67 | 88 | xPos += 80; |
| 68 | 89 | } |
| 69 | 90 | }); |
| 70 | 91 | }); |
| 71 | 92 | } |