Player can die, also changed the backgrounds.

melonjs-tutorial/boilerplate-master/data/map/area01.tmx

@@ -17,13 +17,13 @@
   </tile>
  </tileset>
  <imagelayer name="Parallex_layer1">
-  <image source="../img/area01_bkg0.png"/>
+  <image source="../img/area01_altbkg0.png"/>
   <properties>
    <property name="ratio" value="0.25"/>
   </properties>
  </imagelayer>
  <imagelayer name="Parallex_layer2">
-  <image source="../img/area01_bkg1.png"/>
+  <image source="../img/area01_altbkg1.png"/>
   <properties>
    <property name="ratio" value="0.35"/>
   </properties>

melonjs-tutorial/boilerplate-master/data/map/area02.tmx

@@ -16,14 +16,14 @@
    </properties>
   </tile>
  </tileset>
- <imagelayer name="Parallex_layer1" x="-32">
-  <image source="../img/area01_bkg0.png"/>
+ <imagelayer name="Parallex_layer1">
+  <image source="../img/area01_altbkg0.png"/>
   <properties>
    <property name="ratio" value="0.25"/>
   </properties>
  </imagelayer>
  <imagelayer name="Parallex_layer2">
-  <image source="../img/area01_bkg1.png"/>
+  <image source="../img/area01_altbkg1.png"/>
   <properties>
    <property name="ratio" value="0.35"/>
   </properties>

melonjs-tutorial/boilerplate-master/js/entities/entities.js

@@ -29,6 +29,16 @@ game.PlayerEntity = me.Entity.extend({
       }
     }
 
+    // Did we fall off the screen?
+    if (this.body.falling && 
+        this.pos.y > (me.game.viewport.pos.y + me.game.viewport.height)) {
+      // We need to die
+      this.alive = false;
+      me.game.viewport.fadeIn("#dddddd", 1700, function() {
+        me.state.change(me.state.PLAY);
+      });
+    }
+
     this.body.update(dt);
 
     // check for collision with sthg
@@ -43,14 +53,15 @@ game.PlayerEntity = me.Entity.extend({
     return false;
   },
 
-  collideHandler: function(response) {
+  collideHandler: function(response, obj) {
     if (response.b.body.collisionType === me.collision.types.ENEMY_OBJECT) {
       if ((response.overlapV.y>0) && !this.body.jumping) {
         // bounce (force jump)
         this.body.falling = false;
         this.body.vel.y = -this.body.maxVel.y * me.timer.tick;
         this.body.jumping = true;
         me.audio.play("stomp");
+        response.b.die();
       } else {
         // Let's flicker in case we touched an enemy
         this.renderable.flicker(true);
@@ -100,6 +111,11 @@ game.EnemyEntity = me.Entity.extend({
     this.body.setVelocity(3.3, 6);
   },
 
+  die: function() {
+    this.alive = false;
+    me.game.world.removeChild(this);
+  },
+
   onCollision: function(res, obj) {
     // res.y > 0 means touched by something on the bottom
     // which means at top bosition for this one

melonjs-tutorial/boilerplate-master/js/resources.js

@@ -11,8 +11,8 @@ game.resources = [
   // our main player
   {name: "gripe_run_right", type: "image", src: "data/img/sprite/gripe_run_right.png" },
   // backgrounds
-  {name: "area01_bkg0", type: "image", src: "data/img/area01_bkg0.png" },
-  {name: "area01_bkg1", type: "image", src: "data/img/area01_bkg1.png" },
+  {name: "area01_altbkg0", type: "image", src: "data/img/area01_altbkg0.png" },
+  {name: "area01_altbkg1", type: "image", src: "data/img/area01_altbkg1.png" },
 
   // coin
   { name: "spinning_coin_gold", type: "image", src: "data/img/sprite/spinning_coin_gold.png" },