{"id":3077,"date":"2022-09-12T01:24:32","date_gmt":"2022-09-11T20:24:32","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3077"},"modified":"2022-09-12T01:25:32","modified_gmt":"2022-09-11T20:25:32","slug":"make-8-ball-pool-multiplayer-billiards-game-using-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/make-8-ball-pool-multiplayer-billiards-game-using-javascript\/","title":{"rendered":"Make 8 Ball POOL Multiplayer Billiards Game Using JavaScript"},"content":{"rendered":"\n

In this tutorial, I will teach you how to build an 8 Ball Pool Multiplayer Billiards Game Using JavaScript<\/strong>. The complete source code of the JavaScript 8 Ball Pool Game<\/strong> is given in this guide.<\/p>\n\n\n\n

I have also added Live Demo<\/strong> and Download<\/strong> buttons at the end of this tutorial, so you can easily download the code<\/strong> of this 8 Ball Pool game<\/strong> with a single click. You can try it yourself on your computer by downloading the code or even play it online using the Live Demo.<\/p>\n\n\n\n

\n\n\n\n

Features<\/h2>\n\n\n\n
  • Player vs Player match<\/li>
  • Player vs Computer match<\/li>
  • Artificial Intelligence (AI) with various difficulty levels.<\/li>
  • Aim by moving the mouse.<\/li>
  • Left click: shoot.<\/li>
  • Increase\/Decrease shot power.<\/li><\/ul>\n\n\n\n
    \n\n\n\n

    Folder Structure<\/h2>\n\n\n\n
    • assets
      • Note:-<\/strong> All the sound and image files will go here. You can download the complete project including all the asset files at the end of this article.<\/em><\/li><\/ul><\/li>
      • css
        • game-layout.css<\/li><\/ul><\/li>
        • script
          • AI
            • AIPolicy.js<\/li>
            • AITrainer.js<\/li>
            • Opponent.js<\/li><\/ul><\/li>
            • game_objects
              • Ball.js<\/li>
              • Player.js<\/li>
              • Score.js<\/li>
              • Stick.js<\/li><\/ul><\/li>
              • geom
                • Vector2.js<\/li><\/ul><\/li>
                • input
                  • ButtonState.js<\/li>
                  • Keyboard.js<\/li>
                  • Mouse.js<\/li><\/ul><\/li>
                  • lib
                    • LAB.min.js<\/li><\/ul><\/li>
                    • menu
                      • Button.js<\/li>
                      • Label.js<\/li>
                      • MainMenu.js<\/li>
                      • Menu.js<\/li><\/ul><\/li>
                      • system
                        • Color.js<\/li>
                        • Keys.js<\/li><\/ul><\/li>
                        • Assets.js<\/li>
                        • Canvas2D.js<\/li>
                        • Game.js<\/li>
                        • GamePolicy.js<\/li>
                        • GameWorld.js<\/li>
                        • Global.js<\/li><\/ul><\/li>
                        • index.html<\/li><\/ul>\n\n\n\n
                          \n\n\n\n

                          JavaScript 8 Ball Pool Game Full Source Code<\/h2>\n\n\n\n

                          index.html<\/h3>\n\n\n\n
                          <!DOCTYPE html>\n<html>\n<head>\n        <meta http-equiv="content-type" content="text\/html; charset=UTF8">\n    <title>Classic Pool Game<\/title>\n    <link rel="stylesheet" type="text\/css" href="css\/game-layout.css"\/>\n    <link rel="shortcut icon" type="image\/png" href="assets\/sprites\/favicon.png"\/>\n    <script src="script\/lib\/LAB.min.js"><\/script>\n    <script>\n        $LAB\n                .script('script\/system\/Keys.js').wait()\n                .script('script\/system\/Color.js').wait()\n                .script('script\/geom\/Vector2.js').wait()\n                .script('script\/input\/ButtonState.js').wait()\n                .script('script\/input\/Keyboard.js').wait()\n                .script('script\/input\/Mouse.js').wait()\n                .script('script\/Global.js').wait()\n                .script('script\/Canvas2D.js').wait()\n                .script('script\/game_objects\/Score.js').wait()\n                .script('script\/game_objects\/Ball.js').wait()\n                .script('script\/game_objects\/Stick.js').wait()\n                .script('script\/menu\/Label.js').wait()\n                .script('script\/menu\/Button.js').wait()\n                .script('script\/menu\/Menu.js').wait()\n                .script('script\/menu\/MainMenu.js').wait()\n                .script('script\/AI\/Opponent.js').wait()\n                .script('script\/AI\/AIPolicy.js').wait()\n                .script('script\/AI\/AITrainer.js').wait()\n                .script('script\/game_objects\/Player.js').wait()\n                .script('script\/GamePolicy.js').wait()\n                .script('script\/GameWorld.js').wait()\n                .script('script\/Game.js').wait()\n                .script('script\/Assets.js').wait(function () {\n                    Game.start('gameArea','screen', 1500, 825);\n                });\n\n    <\/script>\n<\/head>\n\n<body style = "background-color:black">\n<div id="gameArea">\n    <canvas id="screen" width="2000" height="1000"><\/canvas>\n<\/div>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
                          css\/game-layout.css<\/h3>\n\n\n\n
                          html, body {\n    margin: 0;\n}\n\n\/*#screen{\n\tpadding-left: 0;\n    padding-right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    display: block;\n}*\/<\/pre><\/div>\n\n\n\n
                          script\/AI\/AIPolicy.js<\/h3>\n\n\n\n
                          function AIPolicy(){\n    \n}\n\nAIPolicy.prototype.evaluate = function(state, gamePolicy){\n\n    let evaluation = 1;\n\n    for (var i = 0 ; i < state.balls.length; i++){\n        for(var j = i + 1 ; j < state.balls.length ; j++){\n\n            let firstBall = state.balls[i];\n            let secondBall = state.balls[j];\n\n            if(firstBall === state.whiteBall || secondBall === state.whiteBall \n                || \n                firstBall.inHole || secondBall.inHole){\n                continue;\n            }\n            evaluation += firstBall.position.distanceFrom(secondBall.position);\n        }\n    }\n\n    evaluation = evaluation\/5800;\n\n    if(!gamePolicy.firstCollision){\n        evaluation+= 100;\n    }\n\n    evaluation += 2000 * gamePolicy.validBallsInsertedOnTurn;\n\n    gamePolicy.updateTurnOutcome();\n\n\n    if(gamePolicy.won){\n        if(!gamePolicy.foul){\n            evaluation += 10000;\n        }\n        else{\n            evaluation -= 10000;\n        }\n    }\n\n    if(gamePolicy.foul){\n        evaluation = evaluation - 3000;\n    }\n\n    return evaluation;\n}<\/pre><\/div>\n\n\n\n
                          script\/AI\/AITrainer.js<\/h3>\n\n\n\n
                          function AITrainer(){\n\n    this.AIPolicy = new AIPolicy();\n\n}\n\nAITrainer.prototype.init = function(state, gamePolicy){\n\n    AI.opponents = [];\n    AI.currentOpponent = new Opponent();\n    AI.finishedSession = true;\n    AI.iteration = 0;\n\n    AI.bestOpponentIndex = 0;\n    AI.bestOpponentEval = 0;\n\n    if(gamePolicy.foul){\n        \/\/TO DO: Pick best position for the white ball.\n        state.whiteBall.position.x = 413;\n        state.whiteBall.position.y = 413;\n        state.whiteBall.inHole = false;\n        gamePolicy.foul = false;\n    }\n    AI.initialState = JSON.parse(JSON.stringify(state));\n    AI.initialGamePolicyState = JSON.parse(JSON.stringify(gamePolicy));\n\n    AI.state = state;\n    AI.gamePolicy = gamePolicy;\n\n}\n\nAITrainer.prototype.train = function(){\n\n    if(AI.iteration === TRAIN_ITER){\n        AI.finishedSession = true;\n        AI.playTurn();\n        return;\n    }\n\n    let ballsMoving = AI.state.ballsMoving();\n\n    if(!ballsMoving){\n\n        if(AI.iteration !== 0){\n            AI.currentOpponent.evaluation = AI.AIPolicy.evaluate(this.state, this.gamePolicy);\n\n            AI.opponents.push(JSON.parse(JSON.stringify(AI.currentOpponent)));\n\n            if(AI.currentOpponent.evaluation > AI.bestOpponentEval){\n                AI.bestOpponentEval = AI.currentOpponent.evaluation;\n                AI.bestOpponentIndex =  AI.opponents.length - 1;\n            }\n\n            if(LOG){\n                console.log('-------------'+new Number(AI.iteration+1)+'--------------------');\n                console.log('Current evaluation: ' + AI.currentOpponent.evaluation);\n                console.log('Current power: ' + AI.currentOpponent.power);\n                console.log('Current rotation: ' + AI.currentOpponent.rotation);\n                console.log('---------------------------------');\n            }\n        }\n\n        AI.state.initiateState(AI.initialState.balls);\n        AI.gamePolicy.initiateState(AI.initialGamePolicyState);\n        AI.buildNewOpponent();\n        AI.simulate();\n    }\n\n}\n\nAITrainer.prototype.buildNewOpponent = function(){\n\n    if(AI.iteration % 10 === 0){\n        AI.currentOpponent = new Opponent();\n        AI.iteration++;\n        return;\n    }\n\n    let bestOpponent = AI.opponents[AI.bestOpponentIndex];\n\n    let newPower = bestOpponent.power;\n    newPower += + ((Math.random() * 30) - 15);\n    newPower = newPower < 20 ? 20 : newPower;\n    newPower = newPower > 75 ? 75 : newPower;\n\n    let newRotation = bestOpponent.rotation;\n\n    if(bestOpponent.evaluation > 0){\n        newRotation += (1\/bestOpponent.evaluation)*(Math.random() * 2 * Math.PI - Math.PI)\n    }\n    else{\n        newRotation = (Math.random() * 2 * Math.PI - Math.PI);\n    }\n\n    AI.currentOpponent = new Opponent(newPower,newRotation);\n\n    AI.iteration++;\n\n}\n\nAITrainer.prototype.simulate = function(){\n    AI.state.stick.shoot(AI.currentOpponent.power, AI.currentOpponent.rotation);\n}\n\nAITrainer.prototype.playTurn = function(){\n\n    bestOpponent = AI.opponents[AI.bestOpponentIndex];\n    Game.gameWorld.stick.rotation = bestOpponent.rotation;\n    Game.gameWorld.stick.trackMouse = false;\n\n    setTimeout(() => {\n\n        Game.gameWorld.stick.visible = true;\n        Canvas2D.clear();\n        Game.gameWorld.draw();\n\n        Game.sound = true;\n        Game.gameWorld.initiateState(AI.initialState.balls);\n        Game.policy.initiateState(AI.initialGamePolicyState);\n\n        DISPLAY = true;\n        \n        requestAnimationFrame(Game.mainLoop);\n\n        Game.gameWorld.stick\n        .shoot(\n            bestOpponent.power, \n            bestOpponent.rotation\n        );\n        Game.gameWorld.stick.trackMouse = true;\n\n    }, 1000);\n}\n\nAITrainer.prototype.opponentTrainingLoop = function(){\n\n    Game.sound = false;\n    DISPLAY = false;\n\n    if(DISPLAY_TRAINING){\n        if(!AI.finishedSession){\n            AI.train();\n            Game.gameWorld.handleInput(DELTA);\n            Game.gameWorld.update(DELTA);\n            Canvas2D.clear();\n            Game.gameWorld.draw();\n            Mouse.reset();\n            setTimeout(AI.opponentTrainingLoop,0.00000000001);\n        }\n    }\n    else{\n        while(!AI.finishedSession){\n            AI.train();\n            Game.gameWorld.handleInput(DELTA);\n            Game.gameWorld.update(DELTA);\n            Mouse.reset();\n        }\n    }\n\n}\n\nAITrainer.prototype.startSession = function(){\n        setTimeout(\n            ()=>{\n                Game.gameWorld.stick.visible = false;\n                Canvas2D.clear();\n                Game.gameWorld.draw();\n\n                AI.init(Game.gameWorld, Game.policy);\n                AI.finishedSession = false;\n                AI.opponentTrainingLoop();\n            },\n            1000\n        );\n}\n\nconst AI = new AITrainer();<\/pre><\/div>\n\n\n\n
                          script\/AI\/Opponent.js<\/h3>\n\n\n\n
                          function Opponent(power, rotation){\n    this.power = power || (Math.random() * 75 + 1);\n    this.rotation = rotation || (Math.random()*6.283)-3.141;\n    this.evaluation = 0;\n}<\/pre><\/div>\n\n\n\n
                          script\/game_objects\/Ball.js<\/h3>\n\n\n\n
                          "use strict";\n\nfunction Ball(initPos,color){\n\tthis.initPos = initPos;\n    this.position = initPos.copy();\n    this.origin = new Vector2(25,25);\n    this.velocity = Vector2.zero;\n    this.color = color; \n    this.moving = false;\n    this.visible = true;\n    this.inHole = false;\n}\n\nObject.defineProperty(Ball.prototype, "color",\n    {\n    \tget: function(){\n    \t\tif(this.sprite == sprites.redBall){\n    \t\t\treturn Color.red;\n    \t\t}\n    \t\telse if(this.sprite == sprites.yellowBall){\n    \t\t\treturn Color.yellow;\n    \t\t}\n\t\t\telse if(this.sprite == sprites.blackBall){\n    \t\t\treturn Color.black;\n    \t\t}\n    \t\telse{\n    \t\t\treturn Color.white;\n    \t\t}\n    \t},\n        set: function (value) {\n            if (value === Color.red){\n                this.sprite = sprites.redBall;\n            }\n            else if(value == Color.yellow){\n            \tthis.sprite = sprites.yellowBall;\n            }\n\t\t\telse if(value == Color.black){\n            \tthis.sprite = sprites.blackBall;\n            }\n            else{\n            \tthis.sprite = sprites.ball;\n            }\n        }\n    });\n\nBall.prototype.shoot = function(power, angle){\n    if(power <= 0)\n        return;\n\n    this.moving = true;\n\n    this.velocity = calculateBallVelocity(power,angle);\n}\n\nvar calculateBallVelocity = function(power, angle){\n\n    return new Vector2(100*Math.cos(angle)*power,100*Math.sin(angle)*power);\n}\n\nBall.prototype.update = function(delta){\n\n    this.updatePosition(delta);\n\n    this.velocity.multiplyWith(0.98);\n\n\tif(this.moving && Math.abs(this.velocity.x) < 1 && Math.abs(this.velocity.y) < 1){\n        this.stop();\n    }\n}\n\nBall.prototype.updatePosition = function(delta){\n\n    if(!this.moving || this.inHole)\n        return;\n    var ball = this;\n    var newPos = this.position.add(this.velocity.multiply(delta));\n\n\n\tif(Game.policy.isInsideHole(newPos)){\n        if(Game.sound && SOUND_ON){\n            var holeSound = sounds.hole.cloneNode(true);\n            holeSound.volume = 0.5;\n            holeSound.play();\n        }\n\t\tthis.position = newPos;\n        this.inHole = true;\n        setTimeout(function(){ball.visible=false;ball.velocity = Vector2.zero;}, 100);\n        Game.policy.handleBallInHole(this);\n\t\treturn;\n\t}\n\n    var collision = this.handleCollision(newPos);\n\n    if(collision){\n\t\tthis.velocity.multiplyWith(0.95);\n    }else{\n    \tthis.position = newPos;\n    }\n}\n\nBall.prototype.handleCollision = function(newPos){\n\n\tvar collision = false;\n\n\tif(Game.policy.isXOutsideLeftBorder(newPos, this.origin)){\n        this.velocity.x = -this.velocity.x;\n        this.position.x = Game.policy.leftBorderX + this.origin.x;\n        collision = true;\n    }\n    else if(Game.policy.isXOutsideRightBorder(newPos, this.origin)){\n        this.velocity.x = -this.velocity.x;\n        this.position.x = Game.policy.rightBorderX - this.origin.x;\n        collision = true;\n    }\n\n    if(Game.policy.isYOutsideTopBorder(newPos, this.origin)){\n        this.velocity.y = -this.velocity.y;\n        this.position.y = Game.policy.topBorderY + this.origin.y;\n        collision = true;\n    }\n    else if(Game.policy.isYOutsideBottomBorder(newPos, this.origin)){\n        this.velocity.y = -this.velocity.y;\n        this.position.y = Game.policy.bottomBorderY - this.origin.y;\n        collision = true;\n    }\n\n    return collision;\n}\n\nBall.prototype.stop = function(){\n\n    this.moving = false;\n    this.velocity = Vector2.zero;\n}\n\nBall.prototype.reset = function(){\n\tthis.inHole = false;\n\tthis.moving = false;\n\tthis.velocity = Vector2.zero;\n\tthis.position = this.initPos;\n\tthis.visible = true;\n}\n\nBall.prototype.out = function(){\n\n\tthis.position = new Vector2(0, 900);\n\tthis.visible = false;\n\tthis.inHole = true;\n\n}\n\nBall.prototype.draw = function () {\n    if(!this.visible)\n        return;\n\n\tCanvas2D.drawImage(this.sprite, this.position, 0, 1, new Vector2(25,25));\n};<\/pre><\/div>\n\n\n\n
                          script\/game_objects\/Player.js<\/h3>\n\n\n\n
                          \nfunction Player(matchScore, totalScore){\n    this.color = undefined;\n    this.matchScore = matchScore;\n    this.totalScore = totalScore;\n}<\/pre><\/div>\n\n\n\n
                          script\/game_objects\/Score.js<\/h3>\n\n\n\n
                          "use strict";\n\nfunction Score(position){\n    this.position = position;\n    this.origin = new Vector2(47,82);\n    this.value = 0;\n}\n\nScore.prototype.reset = function(){\n    this.position = position;\n    this.origin = new Vector2(30,0);\n    this.value = 0;\n};\n\nScore.prototype.draw = function () {\n  Canvas2D.drawText(\n      this.value, \n      this.position, \n      this.origin, \n      "#096834", \n      "top", \n      "Impact", \n      "200px"\n    );\n};\n\nScore.prototype.drawLines = function (color) {\n    \n    for(let i=0; i<this.value; i++){\n\n        let pos = this.position.add(new Vector2(i*15,0));\n\n        Canvas2D.drawText(\n            "I", \n            pos, \n            this.origin, \n            color, \n            "top", \n            "Arial", \n            "20px"\n        );\n\n    }\n  };\n\nScore.prototype.increment = function(){\n    this.value++;\n};<\/pre><\/div>\n\n\n\n
                          script\/game_objects\/Stick.js<\/h3>\n\n\n\n
                          "use strict";\n\nfunction Stick(position){\n    this.position = position;\n    this.origin = new Vector2(970,11);\n    this.shotOrigin = new Vector2(950,11);\n    this.shooting = false;\n    this.visible = true;\n    this.rotation = 0;\n    this.power = 0;\n    this.trackMouse = true;\n}\n\nStick.prototype.handleInput = function (delta) {\n\n    if(AI_ON && Game.policy.turn === AI_PLAYER_NUM)\n      return;\n\n    if(Game.policy.turnPlayed)\n      return;\n\n    if(Keyboard.down(Keys.W) && KEYBOARD_INPUT_ON){\n      if(this.power < 75){\n        this.origin.x+=2;\n        this.power+=1.2;\n      }\n    }\n\n    if(Keyboard.down(Keys.S) && KEYBOARD_INPUT_ON){\n      if(this.power>0){\n        this.origin.x-=2;\n        this.power-=1.2;\n      }\n    }\n\n    else if (this.power>0 && Mouse.left.down){\n      var strike = sounds.strike.cloneNode(true);\n      strike.volume = (this.power\/(10))<1?(this.power\/(10)):1;\n      strike.play();\n      Game.policy.turnPlayed = true;\n      this.shooting = true;\n      this.origin = this.shotOrigin.copy();\n\n      Game.gameWorld.whiteBall.shoot(this.power, this.rotation);\n      var stick = this;\n      setTimeout(function(){stick.visible = false;}, 500);\n    }\n    else if(this.trackMouse){\n      var opposite = Mouse.position.y - this.position.y;\n      var adjacent = Mouse.position.x - this.position.x;\n      this.rotation = Math.atan2(opposite, adjacent);\n    }\n};\n\nStick.prototype.shoot = function(power, rotation){\n  this.power = power;\n  this.rotation = rotation;\n\n  if(Game.sound && SOUND_ON){\n    var strike = sounds.strike.cloneNode(true);\n    strike.volume = (this.power\/(10))<1?(this.power\/(10)):1;\n    strike.play();\n  }\n  Game.policy.turnPlayed = true;\n  this.shooting = true;\n  this.origin = this.shotOrigin.copy();\n\n  Game.gameWorld.whiteBall.shoot(this.power, this.rotation);\n  var stick = this;\n  setTimeout(function(){stick.visible = false;}, 500);\n}\n\nStick.prototype.update = function(){\n  if(this.shooting && !Game.gameWorld.whiteBall.moving)\n    this.reset();\n};\n\nStick.prototype.reset = function(){\n  this.position.x = Game.gameWorld.whiteBall.position.x;\n  this.position.y = Game.gameWorld.whiteBall.position.y;\n\tthis.origin = new Vector2(970,11);\n  this.shooting = false;\n  this.visible = true;\n\tthis.power = 0;\n};\n\nStick.prototype.draw = function () {\n  if(!this.visible)\n    return;\n  Canvas2D.drawImage(sprites.stick, this.position,this.rotation,1, this.origin);\n};<\/pre><\/div>\n\n\n\n
                          script\/geom\/Vector2.js<\/h3>\n\n\n\n
                          "use strict";\n\nfunction Vector2(x, y) {\n    this.x = typeof x !== 'undefined' ? x : 0;\n    this.y = typeof y !== 'undefined' ? y : 0;\n}\n\nObject.defineProperty(Vector2, "zero",\n    {\n        get: function () {\n            return new Vector2();\n        }\n    });\n\nObject.defineProperty(Vector2.prototype, "isZero",\n    {\n        get: function () {\n            return this.x === 0 && this.y === 0;\n        }\n    });\n\nObject.defineProperty(Vector2.prototype, "length",\n    {\n        get: function () {\n            return Math.sqrt(this.x * this.x + this.y * this.y);\n        }\n    });\n\nVector2.prototype.addTo = function (v) {\n    if (v.constructor === Vector2) {\n        this.x += v.x;\n        this.y += v.y;\n    }\n    else if (v.constructor === Number) {\n        this.x += v;\n        this.y += v;\n    }\n    return this;\n};\n\nVector2.prototype.add = function (v) {\n    var result = this.copy();\n    return result.addTo(v);\n};\n\nVector2.prototype.subtractFrom = function (v) {\n    if (v.constructor === Vector2) {\n        this.x -= v.x;\n        this.y -= v.y;\n    }\n    else if (v.constructor === Number) {\n        this.x -= v;\n        this.y -= v;\n    }\n    return this;\n};\n\nVector2.prototype.subtract = function (v) {\n    var result = this.copy();\n    return result.subtractFrom(v);\n};\n\nVector2.prototype.divideBy = function (v) {\n    if (v.constructor === Vector2) {\n        this.x \/= v.x;\n        this.y \/= v.y;\n    }\n    else if (v.constructor === Number) {\n        this.x \/= v;\n        this.y \/= v;\n    }\n    return this;\n};\n\nVector2.prototype.divide = function (v) {\n    var result = this.copy();\n    return result.divideBy(v);\n};\n\nVector2.prototype.multiplyWith = function (v) {\n    if (v.constructor === Vector2) {\n        this.x *= v.x;\n        this.y *= v.y;\n    }\n    else if (v.constructor === Number) {\n        this.x *= v;\n        this.y *= v;\n    }\n    return this;\n};\n\nVector2.prototype.multiply = function (v) {\n    var result = this.copy();\n    return result.multiplyWith(v);\n};\n\nVector2.prototype.toString = function () {\n    return "(" + this.x + ", " + this.y + ")";\n};\n\nVector2.prototype.normalize = function () {\n    var length = this.length;\n    if (length === 0)\n        return;\n    this.divideBy(length);\n};\n\nVector2.prototype.copy = function () {\n    return new Vector2(this.x, this.y);\n};\n\nVector2.prototype.equals = function (obj) {\n    return this.x === obj.x && this.y === obj.y;\n};\n\nVector2.prototype.distanceFrom = function(obj){\n    return Math.sqrt((this.x-obj.x)*(this.x-obj.x) + (this.y-obj.y)*(this.y-obj.y));\n}<\/pre><\/div>\n\n\n\n
                          script\/input\/ButtonState.js<\/h3>\n\n\n\n
                          "use strict";\n\nfunction ButtonState() {\n    this.down = false;\n    this.pressed = false;\n}<\/pre><\/div>\n\n\n\n
                          script\/input\/Keyboard.js<\/h3>\n\n\n\n
                          "use strict";\n\nfunction handleKeyDown(evt) {\n    var code = evt.keyCode;\n    if (code < 0 || code > 255)\n        return;\n    if (!Keyboard._keyStates[code].down)\n        Keyboard._keyStates[code].pressed = true;\n    Keyboard._keyStates[code].down = true;\n}\n\nfunction handleKeyUp(evt) {\n    var code = evt.keyCode;\n    if (code < 0 || code > 255)\n        return;\n    Keyboard._keyStates[code].down = false;\n}\n\nfunction Keyboard_Singleton() {\n    this._keyStates = [];\n    for (var i = 0; i < 256; ++i)\n        this._keyStates.push(new ButtonState());\n    document.onkeydown = handleKeyDown;\n    document.onkeyup = handleKeyUp;\n}\n\nKeyboard_Singleton.prototype.reset = function () {\n    for (var i = 0; i < 256; ++i)\n        this._keyStates[i].pressed = false;\n};\n\nKeyboard_Singleton.prototype.pressed = function (key) {\n    return this._keyStates[key].pressed;\n};\n\nKeyboard_Singleton.prototype.down = function (key) {\n    return this._keyStates[key].down;\n};\n\nvar Keyboard = new Keyboard_Singleton();<\/pre><\/div>\n\n\n\n
                          script\/input\/Mouse.js<\/h3>\n\n\n\n
                          "use strict";\n\nfunction handleMouseMove(evt) {\n    var canvasScale = Canvas2D.scale;\n    var canvasOffset = Canvas2D.offset;\n    var mx = (evt.pageX - canvasOffset.x) \/ canvasScale.x;\n    var my = (evt.pageY - canvasOffset.y) \/ canvasScale.y;\n    Mouse._position = new Vector2(mx, my);\n}\n\nfunction handleMouseDown(evt) {\n    handleMouseMove(evt);\n\n    if (evt.which === 1) {\n        if (!Mouse._left.down)\n            Mouse._left.pressed = true;\n        Mouse._left.down = true;\n    } else if (evt.which === 2) {\n        if (!Mouse._middle.down)\n            Mouse._middle.pressed = true;\n        Mouse._middle.down = true;\n    } else if (evt.which === 3) {\n        if (!Mouse._right.down)\n            Mouse._right.pressed = true;\n        Mouse._right.down = true;\n    }\n}\n\nfunction handleMouseUp(evt) {\n    handleMouseMove(evt);\n\n    if (evt.which === 1)\n        Mouse._left.down = false;\n    else if (evt.which === 2)\n        Mouse._middle.down = false;\n    else if (evt.which === 3)\n        Mouse._right.down = false;\n}\n\nfunction Mouse_Singleton() {\n    this._position = Vector2.zero;\n    this._left = new ButtonState();\n    this._middle = new ButtonState();\n    this._right = new ButtonState();\n    document.onmousemove = handleMouseMove;\n    document.onmousedown = handleMouseDown;\n    document.onmouseup = handleMouseUp;\n}\n\nObject.defineProperty(Mouse_Singleton.prototype, "left",\n    {\n        get: function () {\n            return this._left;\n        }\n    });\n\nObject.defineProperty(Mouse_Singleton.prototype, "middle",\n    {\n        get: function () {\n            return this._middle;\n        }\n    });\n\nObject.defineProperty(Mouse_Singleton.prototype, "right",\n    {\n        get: function () {\n            return this._right;\n        }\n    });\n\nObject.defineProperty(Mouse_Singleton.prototype, "position",\n    {\n        get: function () {\n            return this._position;\n        }\n    });\n\nMouse_Singleton.prototype.reset = function () {\n    this._left.pressed = false;\n    this._middle.pressed = false;\n    this._right.pressed = false;\n};\n\nMouse_Singleton.prototype.containsMouseDown = function (rect) {\n    return this._left.down && rect.contains(this._position);\n};\n\nMouse_Singleton.prototype.containsMousePress = function (rect) {\n    return this._left.pressed && rect.contains(this._position);\n};\n\nvar Mouse = new Mouse_Singleton();<\/pre><\/div>\n\n\n\n
                          script\/lib\/LAB.min.js<\/h3>\n\n\n\n
                          \/*! LAB.js (LABjs :: Loading And Blocking JavaScript)\n    v2.0.3 (c) Kyle Simpson\n    MIT License\n*\/\n(function(o){var K=o.$LAB,y="UseLocalXHR",z="AlwaysPreserveOrder",u="AllowDuplicates",A="CacheBust",B="BasePath",C=\/^[^?#]*\\\/\/.exec(location.href)[0],D=\/^\\w+\\:\\\/\\\/\\\/?[^\\\/]+\/.exec(C)[0],i=document.head||document.getElementsByTagName("head"),L=(o.opera&&Object.prototype.toString.call(o.opera)=="[object Opera]")||("MozAppearance"in document.documentElement.style),q=document.createElement("script"),E=typeof q.preload=="boolean",r=E||(q.readyState&&q.readyState=="uninitialized"),F=!r&&q.async===true,M=!r&&!F&&!L;function G(a){return Object.prototype.toString.call(a)=="[object Function]"}function H(a){return Object.prototype.toString.call(a)=="[object Array]"}function N(a,c){var b=\/^\\w+\\:\\\/\\\/\/;if(\/^\\\/\\\/\\\/?\/.test(a)){a=location.protocol+a}else if(!b.test(a)&&a.charAt(0)!="\/"){a=(c||"")+a}return b.test(a)?a:((a.charAt(0)=="\/"?D:C)+a)}function s(a,c){for(var b in a){if(a.hasOwnProperty(b)){c[b]=a[b]}}return c}function O(a){var c=false;for(var b=0;b<a.scripts.length;b++){if(a.scripts[b].ready&&a.scripts[b].exec_trigger){c=true;a.scripts[b].exec_trigger();a.scripts[b].exec_trigger=null}}return c}function t(a,c,b,d){a.onload=a.onreadystatechange=function(){if((a.readyState&&a.readyState!="complete"&&a.readyState!="loaded")||c[b])return;a.onload=a.onreadystatechange=null;d()}}function I(a){a.ready=a.finished=true;for(var c=0;c<a.finished_listeners.length;c++){a.finished_listeners[c]()}a.ready_listeners=[];a.finished_listeners=[]}function P(d,f,e,g,h){setTimeout(function(){var a,c=f.real_src,b;if("item"in i){if(!i[0]){setTimeout(arguments.callee,25);return}i=i[0]}a=document.createElement("script");if(f.type)a.type=f.type;if(f.charset)a.charset=f.charset;if(h){if(r){e.elem=a;if(E){a.preload=true;a.onpreload=g}else{a.onreadystatechange=function(){if(a.readyState=="loaded")g()}}a.src=c}else if(h&&c.indexOf(D)==0&&d[y]){b=new XMLHttpRequest();b.onreadystatechange=function(){if(b.readyState==4){b.onreadystatechange=function(){};e.text=b.responseText+"\\n\/\/@ sourceURL="+c;g()}};b.open("GET",c);b.send()}else{a.type="text\/cache-script";t(a,e,"ready",function(){i.removeChild(a);g()});a.src=c;i.insertBefore(a,i.firstChild)}}else if(F){a.async=false;t(a,e,"finished",g);a.src=c;i.insertBefore(a,i.firstChild)}else{t(a,e,"finished",g);a.src=c;i.insertBefore(a,i.firstChild)}},0)}function J(){var l={},Q=r||M,n=[],p={},m;l[y]=true;l[z]=false;l[u]=false;l[A]=false;l[B]="";function R(a,c,b){var d;function f(){if(d!=null){d=null;I(b)}}if(p[c.src].finished)return;if(!a[u])p[c.src].finished=true;d=b.elem||document.createElement("script");if(c.type)d.type=c.type;if(c.charset)d.charset=c.charset;t(d,b,"finished",f);if(b.elem){b.elem=null}else if(b.text){d.onload=d.onreadystatechange=null;d.text=b.text}else{d.src=c.real_src}i.insertBefore(d,i.firstChild);if(b.text){f()}}function S(c,b,d,f){var e,g,h=function(){b.ready_cb(b,function(){R(c,b,e)})},j=function(){b.finished_cb(b,d)};b.src=N(b.src,c[B]);b.real_src=b.src+(c[A]?((\/\\?.*$\/.test(b.src)?"&_":"?_")+~~(Math.random()*1E9)+"="):"");if(!p[b.src])p[b.src]={items:[],finished:false};g=p[b.src].items;if(c[u]||g.length==0){e=g[g.length]={ready:false,finished:false,ready_listeners:[h],finished_listeners:[j]};P(c,b,e,((f)?function(){e.ready=true;for(var a=0;a<e.ready_listeners.length;a++){e.ready_listeners[a]()}e.ready_listeners=[]}:function(){I(e)}),f)}else{e=g[0];if(e.finished){j()}else{e.finished_listeners.push(j)}}}function v(){var e,g=s(l,{}),h=[],j=0,w=false,k;function T(a,c){a.ready=true;a.exec_trigger=c;x()}function U(a,c){a.ready=a.finished=true;a.exec_trigger=null;for(var b=0;b<c.scripts.length;b++){if(!c.scripts[b].finished)return}c.finished=true;x()}function x(){while(j<h.length){if(G(h[j])){try{h[j++]()}catch(err){}continue}else if(!h[j].finished){if(O(h[j]))continue;break}j++}if(j==h.length){w=false;k=false}}function V(){if(!k||!k.scripts){h.push(k={scripts:[],finished:true})}}e={script:function(){for(var f=0;f<arguments.length;f++){(function(a,c){var b;if(!H(a)){c=[a]}for(var d=0;d<c.length;d++){V();a=c[d];if(G(a))a=a();if(!a)continue;if(H(a)){b=[].slice.call(a);b.unshift(d,1);[].splice.apply(c,b);d--;continue}if(typeof a=="string")a={src:a};a=s(a,{ready:false,ready_cb:T,finished:false,finished_cb:U});k.finished=false;k.scripts.push(a);S(g,a,k,(Q&&w));w=true;if(g[z])e.wait()}})(arguments[f],arguments[f])}return e},wait:function(){if(arguments.length>0){for(var a=0;a<arguments.length;a++){h.push(arguments[a])}k=h[h.length-1]}else k=false;x();return e}};return{script:e.script,wait:e.wait,setOptions:function(a){s(a,g);return e}}}m={setGlobalDefaults:function(a){s(a,l);return m},setOptions:function(){return v().setOptions.apply(null,arguments)},script:function(){return v().script.apply(null,arguments)},wait:function(){return v().wait.apply(null,arguments)},queueScript:function(){n[n.length]={type:"script",args:[].slice.call(arguments)};return m},queueWait:function(){n[n.length]={type:"wait",args:[].slice.call(arguments)};return m},runQueue:function(){var a=m,c=n.length,b=c,d;for(;--b>=0;){d=n.shift();a=a[d.type].apply(null,d.args)}return a},noConflict:function(){o.$LAB=K;return m},sandbox:function(){return J()}};return m}o.$LAB=J();(function(a,c,b){if(document.readyState==null&&document[a]){document.readyState="loading";document[a](c,b=function(){document.removeEventListener(c,b,false);document.readyState="complete"},false)}})("addEventListener","DOMContentLoaded")})(this);<\/pre><\/div>\n\n\n\n
                          script\/menu\/Button.js<\/h3>\n\n\n\n
                          function Button(sprite, position, callback, hoverSprite){\n\n    this.sprite = sprite;\n    this.hoverSprite = hoverSprite ? hoverSprite : sprite;\n    this.position = position;\n    this.callback = callback;\n}\n\nButton.prototype.draw = function(){\n\n    if(this.mouseInsideBorders()){\n        Canvas2D.drawImage(this.hoverSprite, this.position, 0, 1);\n        Canvas2D._canvas.style.cursor = "pointer";\n    }\n    else{\n        Canvas2D.drawImage(this.sprite, this.position, 0, 0.98);\n    }\n}\n\nButton.prototype.handleInput = function(){\n\n    if(Mouse.left.pressed && this.mouseInsideBorders()){\n        this.callback();\n    }\n}\n\nButton.prototype.mouseInsideBorders = function(){\n    \n    mousePos = Mouse.position;\n\n    if(mousePos.x > this.position.x \n        &&\n        mousePos.x < this.position.x + this.sprite.width\n        &&\n        mousePos.y > this.position.y\n        &&\n        mousePos.y < this.position.y + this.sprite.height\n    ){\n        return true;\n    }\n\n    return false;\n}<\/pre><\/div>\n\n\n\n
                          script\/menu\/Label.js<\/h3>\n\n\n\n
                          function Label(text, position, origin, color, textAlign, fontname, fontsize){\n\n    this.text = typeof text !== 'undefined' ? text : '';\n    this.position = typeof position !== 'undefined' ? position : Vector2.zero;\n    this.origin = typeof origin !== 'undefined' ? origin : Vector2.zero;\n    this.color = typeof color !== 'undefined' ? color : Color.black;\n    this.textAlign = typeof textAlign !== 'undefined' ? textAlign : "top";\n    this.fontname = typeof fontname !== 'undefined' ? fontname : "Courier New";\n    this.fontsize = typeof fontsize !== 'undefined' ? fontsize : "20px";\n}\n\nLabel.prototype.draw = function(){\n\n    Canvas2D.drawText(\n        this.text, \n        this.position,\n        this.origin,\n        this.color,\n        this.textAlign,\n        this.fontname,\n        this.fontsize\n    );\n\n}<\/pre><\/div>\n\n\n\n
                          script\/menu\/MainMenu.js<\/h3>\n\n\n\n
                          \nfunction generateMainMenuLabels(headerText){\n\n    let labels = [\n\n        new Label(\n            headerText, \n            new Vector2(100,0),\n            Vector2.zero,\n            "white",\n            "left",\n            "Bookman",\n            "100px"\n        ),\n        new Label(\n            "\u00a9 2018 Chen Shmilovich", \n            new Vector2(1250,700),\n            Vector2.zero,\n            "white",\n            "left",\n            "Bookman",\n            "20px"\n        )\n    ];\n\n\n    return labels;\n}\n\n\nfunction generateMainMenuButtons(inGame){\n\n\n\n    let buttons = [];\n\n    let dev = 0;\n\n    if(inGame){\n        dev = 200;\n        buttons.push(\n            new Button\n                (\n                    \/\/ CONTINUE BUTTON\n                    sprites.continueButton, \n                    new Vector2(200,200),\n                    function(){\n                        Game.mainMenu.active = false;\n                        GAME_STOPPED = false;\n                        setTimeout(Game.continueGame,200);\n                        sounds.fadeOut(Game.mainMenu.sound);\n                    },\n                    sprites.continueButtonHover\n                )\n        )\n    }\n\n    let muteSprite = sprites.muteButton;\n    let muteSpriteHover = sprites.muteButtonHover;\n\n    if(Game.mainMenu.sound && Game.mainMenu.sound.volume === 0){\n        muteSprite = sprites.muteButtonPressed;\n        muteSpriteHover = sprites.muteButtonPressedHover;\n    }\n\n\n    let muteButton = new Button\n    (\n        \/\/ MUTE BUTTON\n        muteSprite, \n        new Vector2(1430,10),\n        function(){\n            if(Game.mainMenu.sound.volume == 0){\n                SOUND_ON = true;\n                Game.mainMenu.sound.volume = 0.8;\n                this.sprite = sprites.muteButton;\n                this.hoverSprite = sprites.muteButtonHover;\n            }\n            else{\n                SOUND_ON = false;\n                Game.mainMenu.sound.volume = 0.0;\n                this.sprite = sprites.muteButtonPressed;\n                this.hoverSprite = sprites.muteButtonPressedHover;\n            }\n        },\n        muteSpriteHover\n    );\n\n    let backButton = new Button\n    (\n        \/\/BACK\n        sprites.backButton, \n        new Vector2(100,150),\n        function(){\n            Game.mainMenu.labels = generateMainMenuLabels("Classic 8-Ball");\n            Game.mainMenu.buttons = generateMainMenuButtons(inGame);\n        },\n        sprites.backButtonHover\n    );\n\n    buttons = buttons.concat([\n        new Button\n        (\n            \/\/ PLAYER vs PLAYER\n            sprites.twoPlayersButton, \n            new Vector2(200,dev+200),\n            function(){\n                AI_ON = false;\n                Game.mainMenu.active = false;\n                GAME_STOPPED = false;\n                setTimeout(Game.startNewGame,200);\n                sounds.fadeOut(Game.mainMenu.sound);\n            },\n            sprites.twoPlayersButtonHover\n        ),\n        new Button\n        (\n            \/\/ PLAYER vs COMPUTER\n            sprites.onePlayersButton, \n            new Vector2(200,dev+400),\n            function(){\n                Game.mainMenu.labels = generateMainMenuLabels("Choose Difficulty");\n\n                Mouse.reset();\n                Game.mainMenu.buttons = [\n                    new Button\n                    (\n                        \/\/EASY\n                        sprites.easyButton, \n                        new Vector2(200,150),\n                        function(){\n                            AI_PLAYER_NUM = 1;\n                            AI_ON = true;\n                            TRAIN_ITER = 30;\n                            Game.mainMenu.active = false;\n                            GAME_STOPPED = false;\n                            setTimeout(Game.startNewGame,200);\n                            sounds.fadeOut(Game.mainMenu.sound);\n                        },\n                        sprites.easyButtonHover\n                    ),\n                    new Button\n                    (\n                        \/\/MEDIUM\n                        sprites.mediumButton, \n                        new Vector2(200,300),\n                        function(){\n                            AI_PLAYER_NUM = 1;\n                            AI_ON = true;\n                            TRAIN_ITER = 50;\n                            Game.mainMenu.active = false;\n                            GAME_STOPPED = false;\n                            setTimeout(Game.startNewGame,200);\n                            sounds.fadeOut(Game.mainMenu.sound);\n                        },\n                        sprites.mediumButtonHover\n                    ),\n                    new Button\n                    (\n                        \/\/HARD\n                        sprites.hardButton, \n                        new Vector2(200,450),\n                        function(){\n                            AI_PLAYER_NUM = 1;\n                            AI_ON = true;\n                            TRAIN_ITER = 100;\n                            Game.mainMenu.active = false;\n                            GAME_STOPPED = false;\n                            setTimeout(Game.startNewGame,200);\n                            sounds.fadeOut(Game.mainMenu.sound);\n                        },\n                        sprites.hardButtonHover\n                    ),\n                    new Button\n                    (\n                        \/\/INSANE\n                        sprites.insaneButton, \n                        new Vector2(200,600),\n                        function(){\n                            AI_PLAYER_NUM = 0;\n                            AI_ON = true;\n                            TRAIN_ITER = 700;\n                            Game.mainMenu.active = false;\n                            GAME_STOPPED = false;\n                            setTimeout(Game.startNewGame,200);\n                            sounds.fadeOut(Game.mainMenu.sound);\n                        },\n                        sprites.insaneButtonHover\n                    ),\n                    muteButton,\n                    backButton\n\n                ];\n            },\n            sprites.onePlayersButtonHover\n        ),\n        muteButton\n    ]);\n\n    return buttons;\n}<\/pre><\/div>\n\n\n\n
                          script\/menu\/Menu.js<\/h3>\n\n\n\n
                          function Menu(){\n    \n}\n\nMenu.prototype.init = function\n(\n    backgroundSprite,\n    labels,\n    buttons,\n    sound\n){  \n    this.background = backgroundSprite;\n    this.labels = labels || [];\n    this.buttons = buttons || [];\n    this.sound = sound ? sound : undefined;\n\n    this.active = false;\n}\n\nMenu.prototype.load = function(){\n    this.sound.currentTime = 0;\n    this.active = true;\n\n    requestAnimationFrame(this.menuLoop.bind(this));\n    if(SOUND_ON){\n        this.sound.volume = 0.8;\n    }\n\n    this.sound.play();\n}\n\nMenu.prototype.draw = function(){\n\n    Canvas2D._canvas.style.cursor = "auto"; \n\n    Canvas2D.drawImage(\n        this.background, \n        Vector2.zero, \n        0, \n        1, \n        Vector2.zero\n    );\n\n\n    for(let i = 0 ; i < this.labels.length ; i++){\n        this.labels[i].draw();\n    }\n\n    for(let i = 0 ; i < this.buttons.length ; i++){\n        this.buttons[i].draw();\n    }\n}\n\nMenu.prototype.handleInput = function(){\n\n    for(let i = 0 ; i < this.buttons.length ; i++){\n        this.buttons[i].handleInput();\n    }\n}\n\nMenu.prototype.menuLoop = function(){\n\n    if(this.active){\n        this.handleInput();\n        Canvas2D.clear();\n        this.draw();\n        Mouse.reset();\n        requestAnimationFrame(this.menuLoop.bind(this));\n    }\n\n}\n<\/pre><\/div>\n\n\n\n
                          script\/system\/Color.js<\/h3>\n\n\n\n
                          "use strict";\n\nvar Color = {\n    aliceBlue: "#F0F8FF",\n    antiqueWhite: "#FAEBD7",\n    aqua: "#00FFFF",\n    aquamarine: "#7FFFD4",\n    azure: "#F0FFFF",\n    beige: "#F5F5DC",\n    bisque: "#FFE4C4",\n    black: "#000000",\n    blanchedAlmond: "#FFEBCD",\n    blue: "#0000FF",\n    blueViolet: "#8A2BE2",\n    brown: "#A52A2A",\n    burlyWood: "#DEB887",\n    cadetBlue: "#5F9EA0",\n    chartreuse: "#7FFF00",\n    chocolate: "#D2691E",\n    coral: "#FF7F50",\n    cornflowerBlue: "#6495ED",\n    cornsilk: "#FFF8DC",\n    crimson: "#DC143C",\n    cyan: "#00FFFF",\n    darkBlue: "#00008B",\n    darkCyan: "#008B8B",\n    darkGoldenrod: "#B8860B",\n    darkGray: "#A9A9A9",\n    darkGreen: "#006400",\n    darkKhaki: "#BDB76B",\n    darkMagenta: "#8B008B",\n    darkOliveGreen: "#556B2F",\n    darkOrange: "#FF8C00",\n    darkOrchid: "#9932CC",\n    darkRed: "#8B0000",\n    darkSalmon: "#E9967A",\n    darkSeaGreen: "#8FBC8B",\n    darkSlateBlue: "#483D8B",\n    darkSlateGray: "#2F4F4F",\n    darkTurquoise: "#00CED1",\n    darkViolet: "#9400D3",\n    deepPink: "#FF1493",\n    deepSkyBlue: "#00BFFF",\n    dimGray: "#696969",\n    dodgerBlue: "#1E90FF",\n    firebrick: "#B22222",\n    floralWhite: "#FFFAF0",\n    forestGreen: "#228B22",\n    fuchsia: "#FF00FF",\n    gainsboro: "#DCDCDC",\n    ghostWhite: "#F8F8FF",\n    gold: "#FFD700",\n    goldenrod: "#DAA520",\n    gray: "#808080",\n    green: "#008000",\n    greenYellow: "#ADFF2F",\n    honeydew: "#F0FFF0",\n    hotPink: "#FF69B4",\n    indianRed: "#CD5C5C",\n    indigo: "#4B0082",\n    ivory: "#FFFFF0",\n    khaki: "#F0E68C",\n    lavender: "#E6E6FA",\n    lavenderBlush: "#FFF0F5",\n    lawnGreen: "#7CFC00",\n    lemonChiffon: "#FFFACD",\n    lightBlue: "#ADD8E6",\n    lightCoral: "#F080FF",\n    lightCyan: "#E0FFFF",\n    lightGoldenrodYellow: "#FAFAD2",\n    lightGray: "#D3D3D3",\n    lightGreen: "#90EE90",\n    lightPink: "#FFB6C1",\n    lightSalmon: "#FFA07A",\n    lightSeaGreen: "#20B2AA",\n    lightSkyBlue: "#87CEFA",\n    lightSlateGray: "#778899",\n    lightSteelBlue: "#B0C4DE",\n    lightYellow: "#FFFFE0",\n    lime: "#00FF00",\n    limeGreen: "#32CD32",\n    linen: "#FAF0E6",\n    magenta: "#FF00FF",\n    maroon: "#800000",\n    mediumAquamarine: "#66CDAA",\n    mediumBlue: "#0000CD",\n    mediumOrchid: "#BA55D3",\n    mediumPurple: "#9370DB",\n    mediumSeaGreen: "#3CB371",\n    mediumSlateBlue: "#7B68EE",\n    mediumSpringGreen: "#00FA9A",\n    mediumTurquoise: "#48D1CC",\n    mediumVioletRed: "#C71585",\n    midnightBlue: "#191970",\n    mintCream: "#F5FFFA",\n    mistyRose: "#FFE4E1",\n    moccasin: "#FFE4B5",\n    navajoWhite: "#FFDEAD",\n    navy: "#000080",\n    oldLace: "#FDF5E6",\n    olive: "#808000",\n    oliveDrab: "#6B8E23",\n    orange: "#FFA500",\n    orangeRed: "#FF4500",\n    orchid: "#DA70D6",\n    paleGoldenrod: "#EEE8AA",\n    paleGreen: "#98FB98",\n    paleTurquoise: "#AFEEEE",\n    paleVioletRed: "#DB7093",\n    papayaWhip: "#FFEFD5",\n    peachPuff: "#FFDAB9",\n    peru: "#CD853F",\n    pink: "#FFC0CB",\n    plum: "#DDA0DD",\n    powderBlue: "#B0E0E6",\n    purple: "#800080",\n    red: "#FF0000",\n    rosyBrown: "#BC8F8F",\n    royalBlue: "#4169E1",\n    saddleBrown: "#8B4513",\n    salmon: "#FA8072",\n    sandyBrown: "#F4A460",\n    seaGreen: "#2E8B57",\n    seaShell: "#FFF5EE",\n    sienna: "#A0522D",\n    silver: "#C0C0C0",\n    skyBlue: "#87CEEB",\n    slateBlue: "#6A5ACD",\n    slateGray: "#708090",\n    snow: "#FFFAFA",\n    springGreen: "#00FF7F",\n    steelBlue: "#4682B4",\n    tan: "#D2B48C",\n    teal: "#008080",\n    thistle: "#D8BFD8",\n    tomato: "#FF6347",\n    turquoise: "#40E0D0",\n    violet: "#EE82EE",\n    wheat: "#F5DEB3",\n    white: "#FFFFFF",\n    whiteSmoke: "#F5F5F5",\n    yellow: "#FFFF00",\n    yellowGreen: "#9ACD32"\n};<\/pre><\/div>\n\n\n\n
                          script\/system\/Keys.js<\/h3>\n\n\n\n
                          "use strict";\n\nvar Keys = {\n    none: 0,\n    back: 8,\n    tab: 9,\n    enter: 13,\n    pause: 19,\n    escape: 27,\n\n    space: 32,\n\n    pageUp: 33,\n    pageDown: 34,\n    end: 35,\n    home: 36,\n    left: 37,\n    up: 38,\n    right: 39,\n    down: 40,\n\n    insert: 45,\n    del: 46,\n\n    d0: 48,\n    d1: 49,\n    d2: 50,\n    d3: 51,\n    d4: 52,\n    d5: 53,\n    d6: 54,\n    d7: 55,\n    d8: 56,\n    d9: 57,\n\n    A: 65,     B: 66,      C: 67,      D: 68,       E: 69,      F: 70,\n    G: 71,     H: 72,      I: 73,      J: 74,       K: 75,      L: 76,\n    M: 77,     N: 78,      O: 79,      P: 80,       Q: 81,      R: 82,\n    S: 83,     T: 84,      U: 85,      V: 86,       W: 87,      X: 88,\n    Y: 89,     Z: 90,\n\n    multiply: 42,\n    add: 43,\n    subtract: 45,\n    decimal: 46,\n    divide: 47\n};<\/pre><\/div>\n\n\n\n
                          script\/Assets.js<\/h3>\n\n\n\n
                          "use strict";\n\nvar sprites = {};\nvar sounds = {};\n\nGame.loadAssets = function () {\n    var loadSprite = function (sprite) {\n        return Game.loadSprite("assets\/sprites\/" + sprite);\n    };\n\n     var loadSound = function (sound) {\n        return new Audio("assets\/sounds\/" + sound);\n    };\n\n    sprites.mainMenuBackground = loadSprite("main_menu_background.png");\n    sprites.background = loadSprite("spr_background4.png");\n    sprites.ball = loadSprite("spr_ball2.png");\n    sprites.redBall = loadSprite("spr_redBall2.png");\n    sprites.yellowBall = loadSprite("spr_yellowBall2.png");\n    sprites.blackBall = loadSprite("spr_blackBall2.png");\n    sprites.stick = loadSprite("spr_stick.png");\n    sprites.twoPlayersButton = loadSprite("2_players_button.png");\n    sprites.twoPlayersButtonHover = loadSprite("2_players_button_hover.png");\n    sprites.onePlayersButton = loadSprite("1_player_button.png");\n    sprites.onePlayersButtonHover = loadSprite("1_player_button_hover.png");\n    sprites.muteButton = loadSprite("mute_button.png");\n    sprites.muteButtonHover = loadSprite("mute_button_hover.png");\n    sprites.muteButtonPressed = loadSprite("mute_button_pressed.png");\n    sprites.muteButtonPressedHover = loadSprite("mute_button_pressed_hover.png");\n    sprites.easyButton = loadSprite("easy_button.png");\n    sprites.easyButtonHover = loadSprite("easy_button_hover.png");\n    sprites.mediumButton = loadSprite("medium_button.png");\n    sprites.mediumButtonHover = loadSprite("medium_button_hover.png");\n    sprites.hardButton = loadSprite("hard_button.png");\n    sprites.hardButtonHover = loadSprite("hard_button_hover.png");\n    sprites.backButton = loadSprite("back_button.png");\n    sprites.backButtonHover = loadSprite("back_button_hover.png");\n    sprites.continueButton = loadSprite("continue_button.png");\n    sprites.continueButtonHover = loadSprite("continue_button_hover.png");\n    sprites.insaneButton = loadSprite("insane_button.png");\n    sprites.insaneButtonHover = loadSprite("insane_button_hover.png");\n    sprites.aboutButton = loadSprite("about_button.png");\n    sprites.aboutButtonHover = loadSprite("about_button_hover.png");\n    sprites.controls = loadSprite("controls.png");\n\n    sounds.side = loadSound("Side.wav");\n    sounds.ballsCollide = loadSound("BallsCollide.wav");\n    sounds.strike = loadSound("Strike.wav");\n    sounds.hole = loadSound("Hole.wav");\n    \n    \/\/ Bossa Antigua Kevin MacLeod (incompetech.com)\n    \/\/ Licensed under Creative Commons: By Attribution 3.0 License\n    \/\/ http:\/\/creativecommons.org\/licenses\/by\/3.0\/\n    sounds.jazzTune = loadSound("Bossa Antigua.mp3");\n}\n\nsounds.fadeOut = function(sound) {\n\n    var fadeAudio = setInterval(function () {\n\n        if(GAME_STOPPED)\n            return;\n\n        \/\/ Only fade if past the fade out point or not at zero already\n        if ((sound.volume >= 0.05)) {\n            sound.volume -= 0.05;\n        }\n        else{\n            sound.pause();\n            clearInterval(fadeAudio);\n        }\n    }, 400);\n}<\/pre><\/div>\n\n\n\n
                          script\/Canvas2D.js<\/h3>\n\n\n\n
                          "use strict";\n\nfunction Canvas2D_Singleton() {\n    this._canvas = null;\n    this._canvasContext = null;\n    this._canvasOffset = Vector2.zero;\n}\n\nObject.defineProperty(Canvas2D_Singleton.prototype, "offset",\n    {\n        get: function () {\n            return this._canvasOffset;\n        }\n    });\n\nObject.defineProperty(Canvas2D_Singleton.prototype, "scale",\n    {\n        get: function () {\n            return new Vector2(this._canvas.width \/ Game.size.x,\n                this._canvas.height \/ Game.size.y);\n        }\n    });\n\nCanvas2D_Singleton.prototype.initialize = function (divName, canvasName) {\n    this._canvas = document.getElementById(canvasName);\n    this._div = document.getElementById(divName);\n\n    if (this._canvas.getContext)\n        this._canvasContext = this._canvas.getContext('2d');\n    else {\n        alert('Your browser is not HTML5 compatible.!');\n        return;\n    }\n    window.onresize = Canvas2D_Singleton.prototype.resize;\n    this.resize();\n};\n\nCanvas2D_Singleton.prototype.clear = function () {\n    this._canvasContext.clearRect(0, 0, this._canvas.width, this._canvas.height);\n};\n\nCanvas2D_Singleton.prototype.resize = function () {\n    var gameCanvas = Canvas2D._canvas;\n    var gameArea = Canvas2D._div;\n    var widthToHeight = Game.size.x \/ Game.size.y;\n    var newWidth = window.innerWidth;\n    var newHeight = window.innerHeight;\n    var newWidthToHeight = newWidth \/ newHeight;\n\n    if (newWidthToHeight > widthToHeight) {\n        newWidth = newHeight * widthToHeight;\n    } else {\n        newHeight = newWidth \/ widthToHeight;\n    }\n    gameArea.style.width = newWidth + 'px';\n    gameArea.style.height = newHeight + 'px';\n\n    gameArea.style.marginTop = (window.innerHeight - newHeight) \/ 2 + 'px';\n    gameArea.style.marginLeft = (window.innerWidth - newWidth) \/ 2 + 'px';\n    gameArea.style.marginBottom = (window.innerHeight - newHeight) \/ 2 + 'px';\n    gameArea.style.marginRight = (window.innerWidth - newWidth) \/ 2 + 'px';\n\n    gameCanvas.width = newWidth;\n    gameCanvas.height = newHeight;\n\n    var offset = Vector2.zero;\n    if (gameCanvas.offsetParent) {\n        do {\n            offset.x += gameCanvas.offsetLeft;\n            offset.y += gameCanvas.offsetTop;\n        } while ((gameCanvas = gameCanvas.offsetParent));\n    }\n    Canvas2D._canvasOffset = offset;\n};\n\nCanvas2D_Singleton.prototype.drawImage = function (sprite, position, rotation, scale, origin) {\n    var canvasScale = this.scale;\n\n    position = typeof position !== 'undefined' ? position : Vector2.zero;\n    rotation = typeof rotation !== 'undefined' ? rotation : 0;\n    scale = typeof scale !== 'undefined' ? scale : 1;\n    origin = typeof origin !== 'undefined' ? origin : Vector2.zero;\n\n    this._canvasContext.save();\n    this._canvasContext.scale(canvasScale.x, canvasScale.y);\n    this._canvasContext.translate(position.x, position.y);\n    this._canvasContext.rotate(rotation);\n    this._canvasContext.drawImage(sprite, 0, 0,\n        sprite.width, sprite.height,\n        -origin.x * scale, -origin.y * scale,\n        sprite.width * scale, sprite.height * scale);\n    this._canvasContext.restore();\n};\n\nCanvas2D_Singleton.prototype.drawText = function (text, position, origin, color, textAlign, fontname, fontsize) {\n    var canvasScale = this.scale;\n\n    position = typeof position !== 'undefined' ? position : Vector2.zero;\n    origin = typeof origin !== 'undefined' ? origin : Vector2.zero;\n    color = typeof color !== 'undefined' ? color : Color.black;\n    textAlign = typeof textAlign !== 'undefined' ? textAlign : "top";\n    fontname = typeof fontname !== 'undefined' ? fontname : "sans-serif";\n    fontsize = typeof fontsize !== 'undefined' ? fontsize : "20px";\n\n    this._canvasContext.save();\n    this._canvasContext.scale(canvasScale.x, canvasScale.y);\n    this._canvasContext.translate(position.x - origin.x, position.y - origin.y);\n    this._canvasContext.textBaseline = 'top';\n    this._canvasContext.font = fontsize + " " + fontname;\n    this._canvasContext.fillStyle = color.toString();\n    this._canvasContext.textAlign = textAlign;\n    this._canvasContext.fillText(text, 0, 0);\n    this._canvasContext.restore();\n};\n\nvar Canvas2D = new Canvas2D_Singleton();\n<\/pre><\/div>\n\n\n\n
                          script\/Game.js<\/h3>\n\n\n\n
                          "use strict";\n\nvar requestAnimationFrame = (function () {\n    return  window.requestAnimationFrame ||\n        window.webkitRequestAnimationFrame ||\n        window.mozRequestAnimationFrame ||\n        window.oRequestAnimationFrame ||\n        window.msRequestAnimationFrame ||\n        function (callback) {\n            window.setTimeout(callback, 1000 \/ 60);\n        };\n})();\n\nfunction Game_Singleton() {\n    this.size = undefined;\n    this.spritesStillLoading = 0;\n    this.gameWorld = undefined;\n    this.sound = true;\n\n    this.mainMenu = new Menu();\n}\n\nGame_Singleton.prototype.start = function (divName, canvasName, x, y) {\n    this.size = new Vector2(x,y);\n    Canvas2D.initialize(divName, canvasName);\n    this.loadAssets();\n    this.assetLoadingLoop();\n};\n\nGame_Singleton.prototype.initialize = function () {\n    this.gameWorld = new GameWorld();\n    this.policy = new GamePolicy();\n    \n    this.initMenus();\n\n    AI.init(this.gameWorld, this.policy);\n};\n\nGame_Singleton.prototype.initMenus = function(inGame){\n\n    let labels = generateMainMenuLabels("Classic 8-Ball");\n\n    let buttons = generateMainMenuButtons(inGame);\n\n    this.mainMenu.init\n    (\n        sprites.mainMenuBackground,\n        labels,\n        buttons,\n        sounds.jazzTune\n    );\n}\n\nGame_Singleton.prototype.loadSprite = function (imageName) {\n    console.log("Loading sprite: " + imageName);\n    var image = new Image();\n    image.src = imageName;\n    this.spritesStillLoading += 1;\n    image.onload = function () {\n        Game.spritesStillLoading -= 1;\n    };\n    return image;\n};\n\nGame_Singleton.prototype.assetLoadingLoop = function () {\n    if (!this.spritesStillLoading > 0)\n        requestAnimationFrame(Game.assetLoadingLoop);\n    else {\n        Game.initialize();\n        requestAnimationFrame(this.mainMenu.load.bind(this.mainMenu));\n    }\n};\n\nGame_Singleton.prototype.handleInput = function(){\n\n    if(Keyboard.down(Keys.escape)){\n        GAME_STOPPED = true;\n        Game.initMenus(true);\n        requestAnimationFrame(Game.mainMenu.load.bind(this.mainMenu));\n    }\n}\n\nGame_Singleton.prototype.startNewGame = function(){\n    Canvas2D._canvas.style.cursor = "auto";\n\n    Game.gameWorld = new GameWorld();\n    Game.policy = new GamePolicy();\n\n    Canvas2D.clear();\n    Canvas2D.drawImage(\n        sprites.controls, \n        new Vector2(Game.size.x\/2,Game.size.y\/2), \n        0, \n        1, \n        new Vector2(sprites.controls.width\/2,sprites.controls.height\/2)\n    );\n\n    setTimeout(()=>{\n        AI.init(Game.gameWorld, Game.policy);\n\n        if(AI_ON && AI_PLAYER_NUM == 0){\n            AI.startSession();\n        }\n        Game.mainLoop();\n    },5000);\n}\n\nGame_Singleton.prototype.continueGame = function(){\n    Canvas2D._canvas.style.cursor = "auto";\n\n    requestAnimationFrame(Game.mainLoop);\n}\n\nGame_Singleton.prototype.mainLoop = function () {\n    \n\n    if(DISPLAY && !GAME_STOPPED){\n        Game.gameWorld.handleInput(DELTA);\n        Game.gameWorld.update(DELTA);\n        Canvas2D.clear();\n        Game.gameWorld.draw();\n        Mouse.reset();\n        Game.handleInput();\n        requestAnimationFrame(Game.mainLoop);\n    }\n};\n\nvar Game = new Game_Singleton();\n<\/pre><\/div>\n\n\n\n
                          script\/GamePolicy.js<\/h3>\n\n\n\n
                          \nfunction GamePolicy(){\n\n    this.turn = 0;\n    this.firstCollision = true;\n    let player1TotalScore = new Score(new Vector2(Game.size.x\/2 - 75,Game.size.y\/2 - 45));\n    let player2TotalScore = new Score(new Vector2(Game.size.x\/2 + 75,Game.size.y\/2 - 45));\n\n    let player1MatchScore = new Score(new Vector2(Game.size.x\/2 - 280,108));\n    let player2MatchScore = new Score(new Vector2(Game.size.x\/2 + 230,108));\n\n    this.players = [new Player(player1MatchScore,player1TotalScore), new Player(player2MatchScore,player2TotalScore)];\n    this.foul = false;\n    this.scored = false;\n    this.won = false;\n    this.turnPlayed = false;\n    this.validBallsInsertedOnTurn = 0;\n\n    this.leftBorderX = BORDER_SIZE;\n    this.rightBorderX = Game.size.x - BORDER_SIZE;\n    this.topBorderY = BORDER_SIZE;\n    this.bottomBorderY = Game.size.y - BORDER_SIZE;\n\n    this.topCenterHolePos = new Vector2(750,32);\n    this.bottomCenterHolePos = new Vector2(750,794);\n    this.topLeftHolePos = new Vector2(62,62);\n    this.topRightHolePos = new Vector2(1435,62);\n    this.bottomLeftHolePos = new Vector2(62,762)\n    this.bottomRightHolePos = new Vector2(1435,762);\n}\n\nGamePolicy.prototype.reset = function(){\n    this.turn = 0;\n    this.players[0].matchScore.value = 0;\n    this.players[0].color = undefined;\n    this.players[1].matchScore.value = 0;\n    this.players[1].color = undefined;\n    this.foul = false;\n    this.scored = false;\n    this.turnPlayed = false;\n    this.won = false;\n    this.firstCollision = true;\n    this.validBallsInsertedOnTurn = 0;\n}\nGamePolicy.prototype.drawScores = function(){\n    Canvas2D.drawText("PLAYER " + (this.turn+1), new Vector2(Game.size.x\/2 + 40,200), new Vector2(150,0), "#096834", "top", "Impact", "70px");\n    this.players[0].totalScore.draw();\n    this.players[1].totalScore.draw();\n\n    this.players[0].matchScore.drawLines(this.players[0].color);\n    this.players[1].matchScore.drawLines(this.players[1].color);\n}\n\nGamePolicy.prototype.checkColisionValidity = function(ball1,ball2){\n\n    let currentPlayerColor = this.players[this.turn].color;\n\n    if(this.players[this.turn].matchScore.value == 7 &&\n       (ball1.color == Color.black || ball2.color == Color.black)){\n        this.firstCollision = false;\n        return;\n       }\n\n    if(!this.firstCollision)\n        return;\n\n    if(currentPlayerColor == undefined){\n        this.firstCollision = false;\n        return;\n    }\n\n    if(ball1.color == Color.white){\n        if(ball2.color != currentPlayerColor){\n            this.foul = true;\n        }\n        this.firstCollision = false;\n    }\n\n    if(ball2.color == Color.white){\n        if(ball1.color != currentPlayerColor){\n            this.foul = true;\n        }\n        this.firstCollision = false;\n    }\n}\nGamePolicy.prototype.handleBallInHole = function(ball){\n\n    setTimeout(function(){ball.out();}, 100);\n\n    let currentPlayer = this.players[this.turn];\n    let secondPlayer = this.players[(this.turn+1)%2];\n\n    if(currentPlayer.color == undefined){\n        if(ball.color === Color.red){\n            currentPlayer.color = Color.red;\n            secondPlayer.color = Color.yellow;\n        }\n        else if(ball.color === Color.yellow){\n            currentPlayer.color = Color.yellow;\n            secondPlayer.color = Color.red;\n        }\n        else if(ball.color === Color.black){\n            this.won = true; \n            this.foul = true;\n        }\n        else if(ball.color === Color.white){\n            this.foul = true;\n        }\n    }\n\n    if(currentPlayer.color === ball.color){\n        currentPlayer.matchScore.increment();\n        this.scored = true;\n        this.validBallsInsertedOnTurn++;\n    }\n    else if(ball.color === Color.white){\n\n        if(currentPlayer.color != undefined){\n            this.foul = true;\n\n            let ballsSet = Game.gameWorld.getBallsSetByColor(currentPlayer.color);\n\n            let allBallsInHole = true;\n\n            for (var i = 0 ; i < ballsSet.length; i++){\n                if(!ballsSet[i].inHole){\n                    allBallsInHole = false;\n                }\n            }\n\n            if(allBallsInHole){\n                this.won = true;\n            }\n        }\n    }\n    else if(ball.color === Color.black){\n\n        if(currentPlayer.color != undefined){\n            let ballsSet = Game.gameWorld.getBallsSetByColor(currentPlayer.color);\n\n            for (var i = 0 ; i < ballsSet.length; i++){\n                if(!ballsSet[i].inHole){\n                    this.foul = true;\n                }\n            }\n            \n            this.won = true;\n        }\n    }\n    else{\n        secondPlayer.matchScore.increment();\n        this.foul = true;\n    }\n}\n\nGamePolicy.prototype.switchTurns = function(){\n    this.turn++;\n    this.turn%=2;\n}\n\nGamePolicy.prototype.updateTurnOutcome = function(){\n    \n    if(!this.turnPlayed){\n        return;\n    }\n\n    if(this.firstCollision == true){\n        this.foul = true;\n    }\n\n    if(this.won){\n        \n        if(!this.foul){\n            this.players[this.turn].totalScore.increment();\n            if(AI.finishedSession){\n                this.reset()\n                setTimeout(function(){Game.gameWorld.reset();\n                }, 1000);\n            }\n        }\n        else{\n            this.players[(this.turn+1)%2].totalScore.increment();\n            if(AI.finishedSession){\n                this.reset();\n                setTimeout(function(){Game.gameWorld.reset();\n                }, 1000);\n            }\n        }\n        return;\n    }\n\n    if(!this.scored || this.foul)\n        this.switchTurns();\n\n    this.scored = false;\n    this.turnPlayed = false;\n    this.firstCollision = true;\n    this.validBallsInsertedOnTurn = 0;\n\n    setTimeout(function(){Game.gameWorld.whiteBall.visible=true;}, 200);\n\n    if(AI_ON && this.turn === AI_PLAYER_NUM && AI.finishedSession){\n        AI.startSession();\n    }\n}\n\nGamePolicy.prototype.handleFoul = function(){\n\n    if(!Mouse.left.down){\n        Game.gameWorld.whiteBall.position = Mouse.position;\n    }\n\n}\nGamePolicy.prototype.isXOutsideLeftBorder = function(pos, origin){\n    return (pos.x - origin.x) < this.leftBorderX;\n}\nGamePolicy.prototype.isXOutsideRightBorder = function(pos, origin){\n    return (pos.x + origin.x) > this.rightBorderX;\n}\nGamePolicy.prototype.isYOutsideTopBorder = function(pos, origin){\n    return (pos.y - origin.y) < this.topBorderY;\n}\nGamePolicy.prototype.isYOutsideBottomBorder = function(pos , origin){\n    return (pos.y + origin.y) > this.bottomBorderY;\n}\n\nGamePolicy.prototype.isOutsideBorder = function(pos,origin){\n    return this.isXOutsideLeftBorder(pos,origin) || this.isXOutsideRightBorder(pos,origin) || \n    this.isYOutsideTopBorder(pos, origin) || this.isYOutsideBottomBorder(pos , origin);\n}\n\nGamePolicy.prototype.isInsideTopLeftHole = function(pos){\n    return this.topLeftHolePos.distanceFrom(pos) < HOLE_RADIUS;\n}\n\nGamePolicy.prototype.isInsideTopRightHole = function(pos){\n    return this.topRightHolePos.distanceFrom(pos) < HOLE_RADIUS;\n}\n\nGamePolicy.prototype.isInsideBottomLeftHole = function(pos){\n    return this.bottomLeftHolePos.distanceFrom(pos) < HOLE_RADIUS;\n}\n\nGamePolicy.prototype.isInsideBottomRightHole = function(pos){\n    return this.bottomRightHolePos.distanceFrom(pos) < HOLE_RADIUS;\n}\n\nGamePolicy.prototype.isInsideTopCenterHole = function(pos){\n    return this.topCenterHolePos.distanceFrom(pos) < (HOLE_RADIUS + 6);\n}\n\nGamePolicy.prototype.isInsideBottomCenterHole = function(pos){\n    return this.bottomCenterHolePos.distanceFrom(pos) < (HOLE_RADIUS + 6);\n}\n\nGamePolicy.prototype.isInsideHole = function(pos){\n    return this.isInsideTopLeftHole(pos) || this.isInsideTopRightHole(pos) || \n           this.isInsideBottomLeftHole(pos) || this.isInsideBottomRightHole(pos) ||\n           this.isInsideTopCenterHole(pos) || this.isInsideBottomCenterHole(pos);\n}\n\nGamePolicy.prototype.initiateState = function(policyState){\n\n    this.turn = policyState.turn;\n    this.firstCollision = policyState.firstCollision;\n    this.foul = policyState.foul;\n    this.scored = policyState.scored;\n    this.won = policyState.won;\n    this.turnPlayed = policyState.turnPlayed;\n    this.validBallsInsertedOnTurn = policyState.validBallsInsertedOnTurn;\n\n    this.players[0].totalScore.value = policyState.players[0].totalScore.value;\n    this.players[1].totalScore.value = policyState.players[1].totalScore.value;\n\n    this.players[0].matchScore.value = policyState.players[0].matchScore.value;\n    this.players[0].color = policyState.players[0].color;\n    this.players[1].matchScore.value = policyState.players[1].matchScore.value;\n    this.players[1].color = policyState.players[1].color;\n\n}<\/pre><\/div>\n\n\n\n
                          script\/GameWorld.js<\/h3>\n\n\n\n
                          "use strict";\n\nfunction GameWorld() {\n\n    this.whiteBallStartingPosition = new Vector2(413,413);\n\n    this.redBalls = [\n    new Ball(new Vector2(1056,433),Color.red),\/\/3\n    new Ball(new Vector2(1090,374),Color.red),\/\/4\n    new Ball(new Vector2(1126,393),Color.red),\/\/8\n    new Ball(new Vector2(1126,472),Color.red),\/\/10;\n    new Ball(new Vector2(1162,335),Color.red),\/\/11\n    new Ball(new Vector2(1162,374),Color.red),\/\/12\n    new Ball(new Vector2(1162,452),Color.red)\/\/14\n    ]\n\n    this.yellowBalls = [\n    new Ball(new Vector2(1022,413),Color.yellow),\/\/1\n    new Ball(new Vector2(1056,393),Color.yellow),\/\/2\n    new Ball(new Vector2(1090,452),Color.yellow),\/\/6\n    new Ball(new Vector2(1126,354),Color.yellow),\/\/7\n    new Ball(new Vector2(1126,433),Color.yellow),\/\/9\n    new Ball(new Vector2(1162,413),Color.yellow),\/\/13\n    new Ball(new Vector2(1162,491),Color.yellow)\/\/15\n    ];\n\n    this.whiteBall = new Ball(new Vector2(413,413),Color.white);\n    this.blackBall = new Ball(new Vector2(1090,413),Color.black);\n\n    this.balls = [\n    this.yellowBalls[0],\n    this.yellowBalls[1],\n    this.redBalls[0],\n    this.redBalls[1],\n    this.blackBall,\n    this.yellowBalls[2],\n    this.yellowBalls[3],\n    this.redBalls[2],\n    this.yellowBalls[4],\n    this.redBalls[3],\n    this.redBalls[4],\n    this.redBalls[5],\n    this.yellowBalls[5],\n    this.redBalls[6],\n    this.yellowBalls[6],\n    this.whiteBall]\n\n    this.stick = new Stick({ x : 413, y : 413 });\n\n    this.gameOver = false;\n}\n\nGameWorld.prototype.getBallsSetByColor = function(color){\n\n    if(color === Color.red){\n        return this.redBalls;\n    }\n    if(color === Color.yellow){\n        return this.yellowBalls;\n    }\n    if(color === Color.white){\n        return this.whiteBall;\n    }\n    if(color === Color.black){\n        return this.blackBall;\n    }\n}\n\nGameWorld.prototype.handleInput = function (delta) {\n    this.stick.handleInput(delta);\n};\n\nGameWorld.prototype.update = function (delta) {\n    this.stick.update(delta);\n\n    for (var i = 0 ; i < this.balls.length; i++){\n        for(var j = i + 1 ; j < this.balls.length ; j++){\n            this.handleCollision(this.balls[i], this.balls[j], delta);\n        }\n    }\n\n    for (var i = 0 ; i < this.balls.length; i++) {\n        this.balls[i].update(delta);\n    }\n\n    if(!this.ballsMoving() && AI.finishedSession){\n        Game.policy.updateTurnOutcome();\n        if(Game.policy.foul){\n            this.ballInHand();\n        }\n    }\n\n};\n\nGameWorld.prototype.ballInHand = function(){\n    if(AI_ON && Game.policy.turn === AI_PLAYER_NUM){\n        return;\n    }\n\n    KEYBOARD_INPUT_ON = false;\n    this.stick.visible = false;\n    if(!Mouse.left.down){\n        this.whiteBall.position = Mouse.position;\n    }\n    else{\n        let ballsOverlap = this.whiteBallOverlapsBalls();\n\n        if(!Game.policy.isOutsideBorder(Mouse.position,this.whiteBall.origin) &&\n            !Game.policy.isInsideHole(Mouse.position) &&\n            !ballsOverlap){\n            KEYBOARD_INPUT_ON = true;\n            Keyboard.reset();\n            Mouse.reset();\n            this.whiteBall.position = Mouse.position;\n            this.whiteBall.inHole = false;\n            Game.policy.foul = false;\n            this.stick.position = this.whiteBall.position;\n            this.stick.visible = true;\n        }\n    }\n\n}\n\nGameWorld.prototype.whiteBallOverlapsBalls = function(){\n\n    let ballsOverlap = false;\n    for (var i = 0 ; i < this.balls.length; i++) {\n        if(this.whiteBall !== this.balls[i]){\n            if(this.whiteBall.position.distanceFrom(this.balls[i].position)<BALL_SIZE){\n                ballsOverlap = true;\n            }\n        }\n    }\n\n    return ballsOverlap;\n}\n\nGameWorld.prototype.ballsMoving = function(){\n\n    var ballsMoving = false;\n\n    for (var i = 0 ; i < this.balls.length; i++) {\n        if(this.balls[i].moving){\n            ballsMoving = true;\n        }\n    }\n\n    return ballsMoving;\n}\n\nGameWorld.prototype.handleCollision = function(ball1, ball2, delta){\n\n    if(ball1.inHole || ball2.inHole)\n        return;\n\n    if(!ball1.moving && !ball2.moving)\n        return;\n\n    var ball1NewPos = ball1.position.add(ball1.velocity.multiply(delta));\n    var ball2NewPos = ball2.position.add(ball2.velocity.multiply(delta));\n\n    var dist = ball1NewPos.distanceFrom(ball2NewPos);\n\n    if(dist<BALL_SIZE){\n        Game.policy.checkColisionValidity(ball1, ball2);\n\n        var power = (Math.abs(ball1.velocity.x) + Math.abs(ball1.velocity.y)) + \n                    (Math.abs(ball2.velocity.x) + Math.abs(ball2.velocity.y));\n        power = power * 0.00482;\n\n        if(Game.sound && SOUND_ON){\n            var ballsCollide = sounds.ballsCollide.cloneNode(true);\n            ballsCollide.volume = (power\/(20))<1?(power\/(20)):1;\n            ballsCollide.play();\n        }\n\n        var opposite = ball1.position.y - ball2.position.y;\n        var adjacent = ball1.position.x - ball2.position.x;\n        var rotation = Math.atan2(opposite, adjacent);\n\n        ball1.moving = true;\n        ball2.moving = true;\n\n        var velocity2 = new Vector2(90*Math.cos(rotation + Math.PI)*power,90*Math.sin(rotation + Math.PI)*power);\n        ball2.velocity = ball2.velocity.addTo(velocity2);\n\n        ball2.velocity.multiplyWith(0.97);\n\n        var velocity1 = new Vector2(90*Math.cos(rotation)*power,90*Math.sin(rotation)*power);\n        ball1.velocity = ball1.velocity.addTo(velocity1);\n\n        ball1.velocity.multiplyWith(0.97);\n    }\n\n}\n\nGameWorld.prototype.draw = function () {\n    Canvas2D.drawImage(sprites.background);\n    Game.policy.drawScores();\n\n    for (var i = 0; i < this.balls.length; i++) {\n        this.balls[i].draw();\n    }\n\n    this.stick.draw();\n};\n\nGameWorld.prototype.reset = function () {\n    this.gameOver = false;\n\n    for (var i = 0; i < this.balls.length; i++) {\n        this.balls[i].reset();\n    }\n\n    this.stick.reset();\n\n    if(AI_ON && AI_PLAYER_NUM === 0){\n        AI.startSession();\n    }\n};\n\nGameWorld.prototype.initiateState = function(balls){\n    \n    for (var i = 0; i < this.balls.length; i++) {\n        this.balls[i].position.x = balls[i].position.x;\n        this.balls[i].position.y = balls[i].position.y;\n        this.balls[i].visible = balls[i].visible;\n        this.balls[i].inHole = balls[i].inHole;\n    }\n\n    this.stick.position = this.whiteBall.position;\n}\n<\/pre><\/div>\n\n\n\n
                          script\/Global.js<\/h3>\n\n\n\n
                          const LOG = false;\n\nconst BALL_SIZE = 38;\nconst BORDER_SIZE = 57;\nconst HOLE_RADIUS = 46;\n\nconst DELTA = 1\/100;\n\nlet DISPLAY = true;\nlet SOUND_ON = true;\nlet GAME_STOPPED = true;\n\nlet KEYBOARD_INPUT_ON = true;\n\nlet TRAIN_ITER = 100;\nlet AI_ON = true;\nlet AI_PLAYER_NUM = 1;\nlet DISPLAY_TRAINING = false;<\/pre><\/div>\n\n\n\n
                          \n\n\n\n
                          How to Play?<\/h2>\n\n\n\n