Removing images and changing the background color

Now you know how to add images you might also be interested in knowing how to remove them. It's really intuitive: you added images with the addChild method, so you are going to remove them with the removeChild method.

Moreover, we will change the background color by adding an actual background layer, which covers the entire scene with a solid color.

There are just a couple of lines to add to gamescript.js:

var gameScene = cc.Scene.extend({
  onEnter:function () {
  this._super();
    var gameLayer = new game();
    gameLayer.init();
    this.addChild(gameLayer);
  }
});
var backgroundLayer;
var game = cc.Layer.extend({
  init:function () {
    this._super();
    backgroundLayer = cc.LayerColor.create(new cc.Color(40,40,40,255), 320, 480);
this.addChild(backgroundLayer);
    var target = cc.Sprite.create("assets/target.png");
    backgroundLayer.addChild(target,0);
    target.setPosition(160,240);
setTimeout(function(){
    backgroundLayer.removeChild(target);
    }, 3000);
  }
});

In the preceding code, backgroundLayer is a new layer that will be filled with a new color with the RGBA format (in this case, a full opaque dark grey), which will also contain the target image.

After three seconds since its creation, the target is removed from backgroundLayer with the removeChild method.