<div id="main"></div>

 <!--Game Page-->
<script type="text/template" id="t-GamePage">
            <p class="score">Score: <span>0</span></p>
            <div class="game">
                <div class="winner"></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <p><a href="#Help">Help...</a></p>
 </script>

<!--Help Page-->
 <script type="text/template" id="t-HelpPage">
            <h1>This is the Help Page</h1>
            <textarea rows="4" cols="50">
                At w3schools.com you will learn how to make a website. We                offer free tutorials in all web development technologies.
            </textarea>
            <p><a href="#Game">Return to game...</a></p>
 </script>              
.game div {
  width:100px;
  height:100px;
  display:inline-block;
  background:blue;
  margin: 10px;
}

.game {
  width:250px;
  margin:0 auto;
  outline: 1px solid;
}

.game .winner {
  background:red;
}


//Applicaion
function Application(el){
    this._el=el;
    
   
    window.addEventListener("hashchange",this._ShowPageFromHash.bind(this));
    this._ShowPageFromHash();
}


Application.prototype._GetPage = function(hashName){
    if(hashName==="Help"){
       return HelpPage;
    }
    else{
        return GamePage;
    }
};

Application.prototype._getNewPage = function(page){
    if(page===GamePage){
        if (!this.game){
            this.game=new page;
        }
        return this.game;
    }else{
        return new page;
    }
};

Application.prototype._ShowPageFromHash = function(){
     var hashName = window.location.hash.substr(1);
     var page=this._GetPage(hashName);
     
    this._ShowPage(page);
};

Application.prototype._ShowPage = function(page){
    //exit from the old page
    if(this.activePage){
        this.activePage.exit();
    }
    
    var p = this._getNewPage(page);
    var html = document.getElementById("t-" + p.template).innerHTML;
    this._el.innerHTML=html;
    
    this.activePage = p;
    p.start(this._el);
};

//page
function Page(template){
   this.template=template;
}

Page.prototype.start =function(el){ this._el = el;};
Page.prototype.exit =function(){};

//Helppage
function HelpPage(){
    Page.call(this,"HelpPage");
}

HelpPage.prototype=Object.create(Page.prototype);

//GamePage
function GamePage(){
    Page.call(this,"GamePage");
    
    this.Score =0;
    this.indxWinner=-999;
   
}

GamePage.prototype=Object.create(Page.prototype);

GamePage.prototype._refreshGame = function () {
    this.indxWinner = Math.floor(Math.random() *     this.squareLen);
   this.LoadGame();
};

GamePage.prototype.LoadGame = function () {
    var win = this.el_ex.game.querySelector(".winner");
    win.classList.remove("winner");
    
    var index = this.indxWinner;
    this.el_ex.divs[index].classList.add("winner");
    
    this.el_ex.p.textContent = this.Score;
    
};

GamePage.prototype.setScore= function (event) {
    var s = event.target;
    if (!s.parentElement===this.el_ex.game){
       return;
   }
   
   if (s.classList.contains("winner")) {
       this.Score+=5;
   }
    else{
        this.Score -=5;
    }
   
    this._refreshGame();
};

GamePage.prototype.start = function(el){
    Page.prototype.start(el);
    
    this.el_ex = {
                root: el,
                game: el.querySelector(".game"),
                divs: el.querySelectorAll(".game div"),
                p: el.querySelector(".score span")
    };
    
    this.squareLen= this.el_ex.divs.length;
     this.el_ex.game.addEventListener("click",this.setScore.bind(this));
  if(this.indxWinner<0){
     this._refreshGame();
  }else{
    this.LoadGame();
  }
    
};


//main
var el =document.getElementById("main");
var app = new Application(el);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.