Run Bob Run

In this version of the game you will add an animated enemy. Tap the screen to jump and move left or right. Try drawing your own animated enemy.

Load State
Add this code to the load.js file at the end of the PreLoad function. This code will load our enemy image data.

    // data used to make our Animated Enemy.  
    // the enemy has two frames, each 8 pixels wide by 8 pixels high
    var EnemyFrame0Data = [
    	'33....33',
    	'..3..3..',
    	'..3..3..',
    	'3..33..3',
    	'.3AAAA3.',
    	'.A..22A.',
    	'.A....A.',
    	'3.AAAA.3'
    ];
    var EnemyFrame1Data = [
    	'........',
    	'........',
    	'........',
    	'........',
    	'..AAAA..',
    	'.A22..A.',
    	'.A....A.',
    	'..AAAA..'
    ];
    
    // combine both arrays of frame data together to make one big array
    var EnemyData = EnemyFrame0Data.concat(EnemyFrame1Data);
    
    // create a binaryImage (pic) from the data
    // this image will have both frames inside it, one ontop of the other.
    // game.create.texture(key, data, pixelHeightX, PixelHeightY, Palette = 0 for default palette, false = generate a bitmap(bmp) image)
    game.bmpEnemySpriteSheet = game.create.texture('enemySpriteSheet',EnemyData, 2, 2, 0, false);
 
        

Play Level 1 State - MAP
In the playlevel1.js file's PRELOAD function, use the map below OR add an X at the beginning of your map. Put the X between two blocks, this way the enemy will bounce between the blocks.

        
        game.map = [
    	'.......................................................................................................',
    	'.......................................................................................................',
    	'.......................................................................................................',
    	'.......................................................................................................',
    	'.......................................................................................................',
    	'.......................................................................................................',
    	'.......................................................................................................',
    	'...................o..o................................................................................',
      '.................o...............................................................oo....................',
      '.......................oo.o.o.o.o.oo...........................................oo..o...................',
      '................o.....................oo.o.oooo.o.oo.o.......................oo.....o.............oo...',
      '.....o......Xo........oo.o.o.o.o.o.ooo.................................oooooo........o......F...oo....o',
      'oooooooooooooo.ooooooo.................................oooooooo.oooooo................ooo.oo.oo........'
    ];
  
   
        

Add enemy SpriteSheet
Add this code right after the code "game.camera.follow(this.bob)". This code will add our GameSheet to the game environment.

        
    // create our enemy
    // ------------------------------------------------------------------------
    
    // add a SpriteSheet to our game called 'enemySpriteSheet'  
    // addSpriteSheet(key, url, data, frameWidth, frameHeight, frameMax, margin, spacing)
    // frameWidth = 8 pixels wide * 2 pixel width = 32
    // frameMax = 2 frames
    game.cache.addSpriteSheet('enemySpriteSheet','', game.bmpEnemySpriteSheet.canvas, 8*2, 8*2, 2,0,0);    
    
   
        

Add a new group to store our enemies
Inside the PRELOAD function, locate the code which creates our block group and our flag group.
this.blocks = game.add.group();
this.flags = game.add.group();
Add our new group.

        
                     this.enemys = game.add.group();  
   
        

Add a new group to store our enemies
Inside the PRELOAD function, locate the code which looks for the Letter F.
if (game.map[i][j] == 'F') {

Add a new IF statement to detect our enemy..Leter X

        
            // if we see the letter X, create an enemy
            if (game.map[i][j] == 'X') {
              
                // create our enemy sprite at specific location
                var enemy = game.add.sprite(j * this.tileSize, i * this.tileSize, 'enemySpriteSheet');
                
                // add physics to our enemy
                game.physics.enable(enemy, Phaser.Physics.ARCADE);
                
                // set it's anchor point to the middle of the image
                enemy.anchor.setTo(0.5, 0.5);
              
                // create an animation and give it a name(key)
                var walk = enemy.animations.add('walk');

                // starts the animation playing by using its key ("walk")
                // enemy.animations.play (key, nbr of frames per second, loop when done = true)
                enemy.animations.play('walk', 10, true);

                // set the enemy in motion
                enemy.body.velocity.x = -50;

                // if enemy hits something, bounce off of it
                enemy.body.bounce.set(1);

                // add our enemy to the group of enemies
                this.enemys.add(enemy);
                
            }
   
        

Run Game and Check for Errors
Press F12 to check console for any problems. Play It! You should see the enemy moving and animated.

Check for collisions
Add this code to the playlevel1.js file's UPDATE function, right after the other collision lines of code.

    // check if enemy collids with a block
    game.physics.arcade.collide(this.enemys, this.blocks);
    game.physics.arcade.overlap(this.bob, this.enemys, this.gameOver);

 
        

Run Game and Check for Errors
Press F12 to check console for any problems. Play It! Can you draw your own animation?

code on plnkr