function Game(a,b,c,d){var e=this;this.canvas=document.getElementById(a||"canvas"),this.ctx=this.canvas.getContext("2d"),this.$startButton=document.getElementById(b||"startButton"),this.$stopButton=document.getElementById(c||"stopButton"),this.$pauseButton=document.getElementById(d||"pauseButton"),this.$scoreOutput=document.getElementById("score"),this.$livesOutput=document.getElementById("lives"),this.$overlay=document.getElementById("overlay"),this.$finalScoreOutput=document.getElementById("yourScore"),this.$scoreTable=document.getElementById("leaderBoards"),this.$submitScore=document.getElementById("submitScore"),this.$closeLeaderBoard=document.getElementById("closeLeaderBoard"),this.$nameInput=document.getElementById("nameInput"),this.calculateCnavasSize=function(){this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,e.canvasWidth=this.canvas.clientWidth,e.canvasHeight=this.canvas.clientHeight,window.addEventListener("resize",function(){e.canvas.width=window.innerWidth,e.canvas.height=window.innerHeight,e.canvasWidth=this.canvas.clientWidth,e.canvasHeight=this.canvas.clientHeight})}(),this.$startButton.addEventListener("click",function(){return 1===e.gameState.isPlaying&&e.gameState.isPaused!==!0?void alert("game is already in process, press stop and start to restart game"):(e.$startButton.innerText="Start",e.gameState.isPlaying=1,window.clickCallback=e.gameFunctions.checkSquareIsClicked,e.helpFunctions.listenClick(e.canvas,e.helpFunctions.handleClick),e.canvas.classList.add("show"),e.gameFunctions.generateSquares(),e.gameState.isPaused===!0&&(e.gameState.isPaused=!1),e.$startButton.innerText="Start",void console.log(e.gameState))}),this.$closeLeaderBoard.addEventListener("click",function(){e.helpFunctions.hideLeaderBoard()}),this.$pauseButton.addEventListener("click",function(){0!=e.gameState.isPlaying&&(e.helpFunctions.removeClick(e.canvas,e.helpFunctions.handleClick),e.gameState.isPaused=!0,e.$startButton.innerText="Continue",console.log(e.gameState))}),this.stopGame=function(){e.gameState.isPlaying=0,e.helpFunctions.removeClick(e.canvas,e.helpFunctions.handleClick),e.$startButton.innerText="Start",e.gameFunctions.resetGame(),e.canvas.classList.remove("show")},this.$stopButton.addEventListener("click",e.stopGame),this.leadersScore={},this.gameSettingsDefault={maxSquares:5,maxFallDownSpeed:1,maxSquareYOffset:10,scoreMultiplier:1,squareSize:100,lives:5},this.gameSettings={maxSquares:this.gameSettingsDefault.maxSquares,maxFallDownSpeed:this.gameSettingsDefault.maxFallDownSpeed,maxSquareYOffset:this.gameSettingsDefault.maxSquareYOffset,scoreMultiplier:this.gameSettingsDefault.scoreMultiplier,squareSize:this.gameSettingsDefault.squareSize},this.gameState={isPlaying:0,score:0,lives:5,isPaused:!1,finalScore:0},this.gameStorage={squares:[]},this.objects={Square:function(a,b,c,d,f){this.w=c||e.gameSettings.squareSize||100,this.h=d||e.gameSettings.squareSize||100,this.startY=-(Math.floor(Math.random()*(this.h*e.gameSettings.maxSquareYOffset-20))+20),this.y=b||this.startY||this.h,this.fallDownSpeed=parseFloat((Math.random()*(e.gameSettings.maxFallDownSpeed-1)).toFixed(0))+1,this.color=f||e.gameFunctions.generateRandomColor(),this.fallDown=function(){this.y+=this.fallDownSpeed},this.calcluateStartX=function(){return Math.floor(Math.random()*(e.canvasWidth-this.w))+0},this.x=a||this.calcluateStartX(),this.respawnSquare=function(){this.color=e.gameFunctions.generateRandomColor(),this.startY=-(Math.floor(Math.random()*(this.h*e.gameSettings.maxSquareYOffset-20))+20),this.y=this.startY,this.x=this.calcluateStartX(),this.w=e.gameSettings.squareSize,this.h=e.gameSettings.squareSize,this.fallDownSpeed=this.calculareRandomFallDownSpeed(),console.log("square is respawned","new y is"+this.y),console.log("square is respawned","new x is"+this.x),console.log("new color is"+this.color)},this.calculareRandomFallDownSpeed=function(){return parseFloat((Math.random()*(e.gameSettings.maxFallDownSpeed-1)).toFixed(0))+1},this.checkOutOfScreen=function(){return this.y>=e.canvasHeight&&(e.gameFunctions.renderLives(-1),e.gameFunctions.checkIsAlive(),console.log("square is out of the screen",this),this.respawnSquare(),void 0)}}},this.gameFunctions={clearWindow:function(){e.ctx.clearRect(0,0,e.canvasWidth,e.canvasHeight)},increaseScore:function(a){e.gameState.score+=a||1*e.gameSettings.scoreMultiplier,e.$scoreOutput.innerText=e.gameState.score},renderLives:function(a){var a=a||e.gameSettingsDefault.lives;e.gameState.lives+=a,e.$livesOutput.innerText=e.gameState.lives},checkIsAlive:function(){e.gameState.lives<=0&&(e.$submitScore.addEventListener("click",function(){e.netFunctions.sendUserScore()}),e.helpFunctions.showLeaderBoard(),e.netFunctions.getUserScore(),e.stopGame())},renderSquares:function(a){if(e.gameState.isPaused!==!0&&0!=e.gameState.isPlaying)for(var b=0;b=f&&b<=f+h&&c>=g&&c<=g+i&&(e.gameStorage.squares[d].respawnSquare(),e.gameFunctions.increaseScore(),console.log("you clicked!"),e.gameFunctions.gameAdmin())}},gameAdmin:function(){return e.gameFunctions.checkIsAlive()===!1?(alert("game over"),e.gameState.isPlaying=0,e.helpFunctions.removeClick(e.canvas,e.helpFunctions.handleClick),e.gameState.isPlaying=0,e.$startButton.innerText="Start",e.gameFunctions.resetGame(),void e.canvas.classList.remove("show")):(e.gameSettings.maxFallDownSpeed=1*e.gameState.score/5,e.gameSettings.squareSize=e.gameSettingsDefault.squareSize-Math.floor(1*e.gameState.score),void console.log(e.gameSettings.squareSize))}},this.helpFunctions={listenClick:function(a,b){a.addEventListener("click",b,!1)},removeClick:function(a,b){a.removeEventListener("click",b,!1)},handleClick:function(a){a.preventDefault(),a.stopPropagation(),a.callback=window.clickCallback,window.clickCallback(a)},showLeaderBoard:function(){e.$overlay.classList.remove("hidden")},hideLeaderBoard:function(){e.$overlay.classList.add("hidden")},preventInputfromSpan:function(a){a.addEventListener("change",function(a){a.target.value.length>=20&&(a.target.value=a.target.value.toString().substr(0,20))})}},this.netFunctions={sendUserScore:function(){var a=new XMLHttpRequest;a.open("post","/post",!0),a.setRequestHeader("Content-Type","application/json;charset=UTF-8");var b=e.gameState.finalScore,c=e.$nameInput.value;a.send(JSON.stringify({username:c,score:b})),setTimeout(function(){e.netFunctions.getUserScore()},500)},getUserScore:function(){e.$scoreTable.innerHTML="Loding...",e.gameState.finalScore=e.gameState.score,e.$finalScoreOutput.innerHTML=e.gameState.score;var a=new XMLHttpRequest;a.open("GET","/get",!0),a.setRequestHeader("Content-Type","application/json;charset=UTF-8"),a.onreadystatechange=function(){if(4==a.readyState&&200==a.status){e.helpFunctions.showLeaderBoard();var b=JSON.parse(a.responseText);console.log(b),e.$scoreTable.innerHTML="";var c="UsernameScore",d=c;b.forEach(function(a){d+=""+a.username+""+a.score+""}),e.$scoreTable.innerHTML=d}},a.send()}}}window.addEventListener("load",function(){window.game=new Game,game.helpFunctions.preventInputfromSpan(game.$nameInput),function a(){game.gameFunctions.clearWindow(),game.gameFunctions.renderSquares(game.gameStorage.squares),requestAnimationFrame(a)}()});

Catch them all!) Falling Boxes JS game with increasing difficulty.