event on collision - display scoreboard

[crffty]

I've been following the Zenva "HTML5 Mobile Game Development with Phaser" tutorial but have run into a problem.

I need to call the scoreboard on collegian between the player and obstacle sprites.  but when I try I get "Uncaught TypeError: scoreboard is not a constructor".  Can anyone suggest how this can be fix, or a better way of going about it.

vaultage.game = function() {};


vaultage.game.prototype = {
  create : function() {

    // physics engine
    this.game.physics.startSystem(Phaser.Physics.ARCADE);

    // player
    this.player = this.add.sprite(45, 200, 'player');

    // obstacles
    this.obstacles = this.game.add.group();
    this.obstacles.enableBody = true;

    // score text
    this.score = this.game.add.bitmapText(700, 10, 'courier', this.game.time.totalElapsedSeconds(), 20);
    this.startingTime = new Date();

    // run the functions to create obstacles
    this.createObstacles();
    this.nextObstacle();

  },
  update : function() {

    // time tracker
    var thisTime = new Date();
    var diff = (thisTime.getTime() - this.startingTime.getTime())/1000;
    this.score.text = diff;
  
    if (this.game.physics.arcade.collide(this.player, this.obstacles)) {
      this.endGame();
    }

  },

  shutdown : function() {
  },

  endGame: function(player, obstacles) {

    player.kill();
    this.obstacles.stopScroll();
    this.ground.stopScroll();
    this.background.stopScroll();

    var scoreboard = new scoreboard(this.game);

  }

}

scoreboard prefab :-

var scoreboard = function(game) {
  Phaser.Group.call(this, game);
}

scoreboard.prototype = Object.create(Phaser.Group.prototype);
scoreboard.prototype.constructor = scoreboard;

score.prototype.show = function(score) {
  var bmd, background, gameoverText, startText;

  bmd = this.game.add.bitmapData(this.game.width, this.game.height);
  bmd.ctx.fillStyle = '#000';
  bmd.ctx.fillRect(0, 0, this.game.width, this.game.height);

  background = this.game.add.sprite(0,0, bmd);
  background.alpha = 0.5;
  this.add(background);
  this.y = this.game.height;
};

scoreboard.prototype.restart = function() {

  gameoverText = this.game.add.bitmapText(0, 100, 'courier', 'game over', 20);
  gameoverText.x = this.game.width/2 - (gameoverText.textWidth /2);
  this.add(gameoverText);

  startText = this.game.add.bitmapText(0, 300, 'courier', 'Play Again', 16);
  startText.x = this.game.width/2 - (startText.textWidth /2);
  this.add(startText);

  this.game.add.tween(this).to({y: 0}, 1000, phaser.Easing. Bounce.out, true);

  this,game.input.onDown.addOnce(this.restart, this);
};

scoreboard.prototype.restart = function() {
  this.game..state.start('Game', true, false);

};

the scoreboard is basically the same as the zenva one with some small changes. i'll be altering more once I get my mead around what. but so far its not showing at all. 

*the prefab is linked in my index.html 

 

Edited December 8, 2016 by crffty
refining question

[crffty]

I'm still stuck on this problem. is anyone could help I would greatly appreciate it 

[Branlin]

What went wrong?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Errors/Not_a_constructor

"There was an attempt to use an object or a variable as a constructor, but that object or variable is not a constructor (class). "

Your variable (scoreboard) after new is not a constructor

var scoreboard = new scoreboard(this.game);

How to fix? Declare your scoreboard class code before follow:

vaultage.game = function() {};