Guest User

tic tac toe.js

a guest
Jan 5th, 2016
30
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var cells = {}; // This object is used for recording all the values of buttons in the game
  2. // These functions help in the game
  3. function valueAssign(id, newValue) {document.getElementById(id).value = newValue} // assigns value to button/cell of tictactoe
  4. function valueGrabber(id) {return document.getElementById(id).value} // Grabs current value of cell/button
  5. function innerHTMLAssign(id, newValue){document.getElementById(id).innerHTML = newValue} //Used only to assign value to the <p> id= "winner"
  6. function innerHTMLGrabber(id){return document.getElementById(id).innerHTML} // I don't use it but made it just in case if it needed
  7. function resetCells(){
  8.     cells.A1 = "";
  9.     cells.A2 = "";
  10.     cells.A3 = "";
  11.     cells.B1 = "";
  12.     cells.B2 = "";
  13.     cells.B3 = "";
  14.     cells.C1 = "";
  15.     cells.C2 = "";
  16.     cells.C3 = "";
  17. } // This functions reset the cells object ONLY and doesn't reset buttons of HTML
  18. function gameRestart(){
  19.     innerHTMLAssign('playAgain',"") // play again asks for playing again its the restart game button from which gamer restarts game
  20.     document.getElementById('playAgain').style.border = "0px solid black"
  21.     document.getElementById('playAgain').disabled = true // I disable it becuase when game restarts it becomes invisible and then it shifts its positoin on top but it can be clicked so I disable it
  22.     // For JS
  23.     valueAssign('A1', "");
  24.     valueAssign('A2', "");
  25.     valueAssign('A3', "");
  26.     valueAssign('B1', "");
  27.     valueAssign('B2', "");
  28.     valueAssign('B3', "");
  29.     valueAssign('C1', "");
  30.     valueAssign('C2', "");
  31.     valueAssign('C3', "");
  32.     innerHTMLAssign('winner', "");
  33.     buttonLock(false) // buttonlocks is used to prevent player to change the button value if result is declared
  34. }// This function is used when player wants to restart the game it resets all fields
  35. function buttonLock(bool){
  36.     document.getElementById('A1').disabled = bool
  37.     document.getElementById('A2').disabled = bool
  38.     document.getElementById('A3').disabled = bool
  39.     document.getElementById('B1').disabled = bool
  40.     document.getElementById('B2').disabled = bool
  41.     document.getElementById('B3').disabled = bool
  42.     document.getElementById('C1').disabled = bool
  43.     document.getElementById('C2').disabled = bool
  44.     document.getElementById('C3').disabled = bool
  45. } // The button lock function which can disable or enable cells/ buttons
  46. function afterGameOver(){
  47.     resetCells(); // Will reset cells object
  48.     innerHTMLAssign('playAgain',"&#8635;") // will make playagain appear
  49.     document.getElementById('playAgain').style.border = "1px solid black" // will make playagain appear
  50.     document.getElementById('playAgain').disabled = false // unlock the diabled playagain button
  51.     buttonLock(true) // this will lock all buttons so that player couldn't change the value of buttons after the winner is declarede
  52. }// This function is triggered by refree or the fucntions who declares winner of the game down is the refre function
  53. function refre(){
  54.      /*The functions has some problems if you try to do some weird moves it'll fail to declare winner
  55.      below are the if statements which are based on cells object for information
  56.      they compare cells like if the X in A1 A2 A3 are all X i.e. a Diagonal is formed of X which means X is winner then function return
  57.      result which'll be pasted on the <p> with id winner
  58.      it also calls afterGameOver() which does all the work of locking buttons and showing restart game button with id playAgain
  59.      Actually I use if statement cells.A2 == "X" which concludes that X is winner
  60.      the if statement out has condiotoin "(cells.A1 == "X" && cells.A2 == "X" && cells.A3 == "X") || (cells.A1 == "O" && cells.A2 == "O" && cells.A3 == "O")"
  61.      becuase of the this if ((cells.A1 == "X" && cells.A2 == "X" && cells.A3 == "X") || (cells.A1 == "O" && cells.A2 == "O" && cells.A3 == "O")) {
  62.      statement refree knows somebody won but WHO X or O the decision is taken by nested if statment it also calls afterGameOver()
  63.      so the nested if statement checks for who is winner by checking middle value of the 3 cells
  64.      X== USER O == COM
  65.      */
  66.     if ((cells.A1 == "X" && cells.A2 == "X" && cells.A3 == "X") || (cells.A1 == "O" && cells.A2 == "O" && cells.A3 == "O")) {
  67.         if (cells.A2 == "X") {
  68.             afterGameOver();
  69.             return "You Win!";
  70.         } else if(cells.A2 == "O"){
  71.             afterGameOver();
  72.             return  "You Lose!";
  73.         }
  74.     } if ((cells.B1 == "X" && cells.B2 == "X" && cells.B3 == "X") || (cells.B1 == "O" && cells.B2 == "O" && cells.B3 == "O")) {
  75.         if (cells.B2 == "X") {
  76.             afterGameOver();
  77.             return "You Win!";
  78.         } else if(cells.B2 == "O"){
  79.             afterGameOver();
  80.             return  "You Lose!";
  81.         }
  82.     } if ((cells.C1 == "X" && cells.C2 == "X" && cells.C3 == "X") || (cells.C1 == "O" && cells.C2 == "O" && cells.C3 == "O")) {
  83.         if (cells.C2 == "X") {
  84.             afterGameOver();
  85.             return "You Win!";
  86.         } else if(cells.C2 == "O"){
  87.             afterGameOver();
  88.             return  "You Lose!";
  89.         }
  90.     } if ((cells.A1 == "X" && cells.B1 == "X" && cells.C1 == "X") || (cells.A1 == "O" && cells.B1 == "O" && cells.C1 == "O")) {
  91.         if (cells.B1 == "X") {
  92.             afterGameOver();
  93.             return "You Win!";
  94.         } else if(cells.B1 == "O"){
  95.             afterGameOver();
  96.             return  "You Lose!";
  97.         }
  98.     } if ((cells.A2 == "X" && cells.B2 == "X" && cells.C2 == "X") || (cells.A2 == "O" && cells.B2 == "O" && cells.C2 == "O")) {
  99.         if (cells.B2 == "X") {
  100.             afterGameOver();
  101.             return "You Win!";
  102.         } else if(cells.B2 == "O"){
  103.             afterGameOver();
  104.             return  "You Lose!";
  105.         }
  106.     } if ((cells.A3 == "X" && cells.B3 == "X" && cells.C3 == "X") || (cells.A3 == "O" && cells.B3 == "O" && cells.C3 == "O")) {
  107.         if (cells.B3 == "X") {
  108.             afterGameOver();
  109.             return "You Win!";
  110.         } else if(cells.B3 == "O"){
  111.             afterGameOver();
  112.             return  "You Lose!";
  113.         }
  114.     } if ((cells.A1 == "X" && cells.B2 == "X" && cells.C3 == "X") || (cells.A1 == "O" && cells.B2 == "O" && cells.C3 == "O")) {
  115.         if (cells.B2 == "X") {
  116.             afterGameOver();
  117.             return "You Win!";
  118.         } else if(cells.B2 == "O"){
  119.             afterGameOver();
  120.             return  "You Lose!";
  121.         }
  122.     } if ((cells.C1 == "X" && cells.B2 == "X" && cells.A3 == "X") || (cells.C1 == "O" && cells.B2 == "O" && cells.A3 == "O")) {
  123.         if (cells.B2 == "X") {
  124.             afterGameOver();
  125.             return "You Win!";
  126.         } else if(cells.B2 == "O"){
  127.             afterGameOver();
  128.             return  "You Lose!";
  129.         }
  130.     } else { // the statement below is not working properly, why, I don't know it just declares about Draw
  131.         if (valueGrabber('A3') != "" && valueGrabber('A1') != "" && valueGrabber('A2') != "" && valueGrabber('B2') != "" && valueGrabber('B3') != "" && valueGrabber('B1') != "" && valueGrabber('C2') != "" && valueGrabber('C1') != "" && valueGrabber('C3') != "") {
  132.             afterGameOver();
  133.             return  "Draw!";
  134.         }
  135.     }  
  136. }// if u try to make weird moves refree will fail to make decision
  137. function markO(id){
  138.     if (valueGrabber(id) == "") {
  139.         valueAssign(id, "O")
  140.     }
  141. } // In this game user plays first then the COM but COM is O user is X computer must know where to mark the O it must not overwrite some cell so if statment checks that cell is empty or not?
  142. function records(){
  143.     cells.A1 = valueGrabber('A1');
  144.     cells.A2 = valueGrabber('A2');
  145.     cells.A3 = valueGrabber('A3');
  146.     cells.B1 = valueGrabber('B1');
  147.     cells.B2 = valueGrabber('B2');
  148.     cells.B3 = valueGrabber('B3');
  149.     cells.C1 = valueGrabber('C1');
  150.     cells.C2 = valueGrabber('C2');
  151.     cells.C3 = valueGrabber('C3');
  152. } // the function keeps record of all values in the object cells
  153. function ai_X(){
  154.     /*
  155.    
  156.     This is brain which tells expected moves of USER to COM...
  157.     It actually thinks for USER and tells COM where the user may mark his X in next move
  158.     like if he marks XX in horizontal then he'll probably move XXX so that he can win
  159.     At that time COM knows in next move USER will try to complete the line so
  160.     COM will mark at the horizontal line like XXO so that USER will be blocked and will not win
  161.     Ultra special and Super Special conditions are the conditions when USER doesn't play as expected
  162.     One can make a shape of kite in the Square of Tictactoe by clicking on A2 B1 C2 and B3 too fool the COM if the Ultra speical condition is not there
  163.     COM will not react in such cases and will grant USER to play and fill 4 buttons (A2 B1 C2 and B3) without playing his move
  164.     Still COM is stupid and it couldn't understand other weird moves played by USER to fool it
  165.  
  166.     */
  167.  
  168.     // Ultra Super Special Condition
  169.     if (cells.B2 == "X" && cells.C3 == "X") {
  170.         if(valueGrabber("C1") == "")    {
  171.             return "C1"
  172.         }
  173.     }
  174.     // Super Special Condition
  175.     if (cells.A2 == "X" && cells.C2 == "X") {
  176.         if(valueGrabber("B1") == "")    {
  177.             return "B1"
  178.         }
  179.     }
  180.     // Special Conditions
  181.     if (cells.B1 == "X" && cells.C2 == "X") {
  182.         if(valueGrabber("A3") == "")    {
  183.             return "A3"
  184.         }
  185.     } if (cells.C2 == "X" && cells.B3 == "X") {
  186.         if(valueGrabber("A1") == "")    {
  187.             return "A1"
  188.         }
  189.     } if (cells.B3 == "X" && cells.A2 == "X") {
  190.         if(valueGrabber("C1") == "")    {
  191.             return "C1"
  192.         }
  193.     } if (cells.A2 == "X" && cells.B1 == "X") {
  194.         if(valueGrabber("C3") == "")    {
  195.             return "C3"
  196.         }
  197.     }
  198.     // Diagonal /
  199.     /*
  200.     Till now you've got a good idea of what ai_X function does
  201.     if USER had played two moves diagonally and now its turn of COM
  202.     ai_X tells COM that the user may try to compelte his Diagonal with X
  203.     with this hint COM marks his O to stop USER completing his diagonal, same with the horizontal and vertical lines
  204.  
  205.     */
  206.     if (cells.A3 == "X" && cells.B2 == "X") {
  207.         if(valueGrabber("C1") == "")    {
  208.             return "C1"
  209.         }
  210.     } if (cells.C1 == "X" && cells.B2 == "X") {
  211.         if(valueGrabber("A3") == "")    {
  212.             return "A3"
  213.         }
  214.     } if (cells.C1 == "X" && cells.A3 == "X") {
  215.         if(valueGrabber("B2") == "")    {
  216.             return "B2"
  217.         }
  218.     }
  219.     // Diagonal \
  220.     if (cells.B2 == "X" && cells.C3 == "X") {
  221.         if(valueGrabber("A1") == "")    {
  222.             return "A1"
  223.         }
  224.     } if (cells.A1 == "X" && cells.B2 == "X") {
  225.         if(valueGrabber("C3") == "")    {
  226.             return "C3"
  227.         }
  228.     } if (cells.A1 == "X" && cells.C3 == "X") {
  229.         if(valueGrabber("B2") == "")    {
  230.             return "B2"
  231.         }
  232.     }
  233.     // Vertical Lines
  234.     if (cells.A2 == "X" && cells.A3 == "X") {
  235.         if(valueGrabber("A1") == "")    {
  236.             return "A1"
  237.         }
  238.     } if (cells.A1 == "X" && cells.A3 == "X") {
  239.         if(valueGrabber("A2") == "")    {
  240.             return "A2"
  241.         }
  242.     } if (cells.A1 == "X" && cells.A2 == "X") {
  243.         if(valueGrabber("A3") == "")    {
  244.             return "A3"
  245.         }
  246.     }
  247.  
  248.     if (cells.B2 == "X" && cells.B3 == "X") {
  249.         if(valueGrabber("B1") == "")    {
  250.             return "B1"
  251.         }
  252.     } if (cells.B1 == "X" && cells.B2 == "X") {
  253.         if(valueGrabber("B3") == "")    {
  254.             return "B3"
  255.         }
  256.     } if (cells.B1 == "X" && cells.B3 == "X") {
  257.         if(valueGrabber("B2") == "")    {
  258.             return "B2"
  259.         }
  260.     }
  261.  
  262.     if (cells.C1 == "X" && cells.C2 == "X") {
  263.         if(valueGrabber("C3") == "")    {
  264.             return "C3"
  265.         }
  266.     } if (cells.C2 == "X" && cells.C3 == "X") {
  267.         if(valueGrabber("C1") == "")    {
  268.             return "C1"
  269.         }
  270.     } if (cells.C1 == "X" && cells.C3 == "X") {
  271.         if(valueGrabber("C2") == "")    {
  272.             return "C2"
  273.         }
  274.     }
  275.     // Horizontal Lines
  276.     if (cells.A1 == "X" && cells.C1 == "X") {
  277.         if(valueGrabber("B1") == "")    {
  278.             return "B1"
  279.         }
  280.     } if (cells.A1 == "X" && cells.B1 == "X") {
  281.         if(valueGrabber("C1") == "")    {
  282.             return "C1"
  283.         }
  284.     } if (cells.B1 == "X" && cells.C1 == "X") {
  285.         if(valueGrabber("A1") == "")    {
  286.             return "A1"
  287.         }
  288.     }
  289.  
  290.     if (cells.A2 == "X" && cells.C2 == "X") {
  291.         if(valueGrabber("B2") == "")    {
  292.             return "B2"
  293.         }
  294.     } if (cells.B2 == "X" && cells.C2 == "X") {
  295.         if(valueGrabber("A2") == "")    {
  296.             return "A2"
  297.         }
  298.     } if (cells.A2 == "X" && cells.B2 == "X") {
  299.         if(valueGrabber("C2") == "")    {
  300.             return "C2"
  301.         }
  302.     }
  303.  
  304.     if (cells.B3 == "X" && cells.C3 == "X") {
  305.         if(valueGrabber("A3") == "")    {
  306.             return "A3"
  307.         }
  308.     } if (cells.A3 == "X" && cells.C3 == "X") {
  309.         if(valueGrabber("B3") == "")    {
  310.             return "B3"
  311.         }
  312.     } if (cells.A3 == "X" && cells.B3 == "X") {
  313.         if(valueGrabber("C3") == "")    {
  314.             return "C3"
  315.         }
  316.     }
  317. }
  318. function ai_O(){
  319.     /*
  320.     This is function ai_O which helps COM to make decision
  321.     You know COM just can't keep blocking USER and reult game intro a DRAW he must win so
  322.     COM gets clues about the expected moves of USER through ai_X function which makes COM to block USER
  323.     Similarly ai_O function helps COM to win by telling COM where to mark his O when he has successfully blocked USER
  324.     Now USER has played a stupid move which yeilds nothing to him
  325.     It's turn of COM and COM has already marked his two Os on a vertical line now he just want one O on the line to win in such cases
  326.     ai_O function will tell COM to mark on the vertical line to make the COM winner
  327.     Diagonal, Vertical and all the statements are similar to ai_X
  328.     In a nutshell both ai_O and ai_X know, if 2 marks are near i.e. diagonally or vertically or horizontally
  329.     predict the next i.e. 3rd move of USER or COM
  330.  
  331.     */
  332.     // Diagonal /
  333.     if (cells.A3 == "O" && cells.B2 == "O") {
  334.         if (valueGrabber("C1") == "")   {
  335.             return "C1"
  336.         }
  337.     } if (cells.C1 == "O" && cells.B2 == "O") {
  338.         if (valueGrabber("A3") == "")   {
  339.             return "A3"
  340.         }
  341.     } if (cells.C1 == "O" && cells.A3 == "O") {
  342.         if (valueGrabber("B2") == "")   {
  343.             return "B2"
  344.         }
  345.     }
  346.     // Diagonal \
  347.     if (cells.B2 == "O" && cells.C3 == "O") {
  348.         if (valueGrabber("A1") == "")   {
  349.             return "A1"
  350.         }
  351.     } if (cells.A1 == "O" && cells.B2 == "O") {
  352.         if (valueGrabber("C3") == "")   {
  353.             return "C3"
  354.         }
  355.     } if (cells.A1 == "O" && cells.C3 == "O") {
  356.         if (valueGrabber("B2") == "")   {
  357.             return "B2"
  358.         }
  359.     }
  360.     // Vertical Lines
  361.     if (cells.A2 == "O" && cells.A3 == "O") {
  362.         if (valueGrabber("A1") == "")   {
  363.             return "A1"
  364.         }
  365.     } if (cells.A1 == "O" && cells.A3 == "O") {
  366.         if (valueGrabber("A2") == "")   {
  367.             return "A2"
  368.         }
  369.     } if (cells.A1 == "O" && cells.A2 == "O") {
  370.         if (valueGrabber("A3") == "")   {
  371.             return "A3"
  372.         }
  373.     }
  374.  
  375.     if (cells.B2 == "O" && cells.B3 == "O") {
  376.         if (valueGrabber("B1") == "")   {
  377.             return "B1"
  378.         }
  379.     } if (cells.B1 == "O" && cells.B2 == "O") {
  380.         if (valueGrabber("B3") == "")   {
  381.             return "B3"
  382.         }
  383.     } if (cells.B1 == "O" && cells.B3 == "O") {
  384.         if (valueGrabber("B2") == "")   {
  385.             return "B2"
  386.         }
  387.     }
  388.  
  389.     if (cells.C1 == "O" && cells.C2 == "O") {
  390.         if (valueGrabber("C3") == "")   {
  391.             return "C3"
  392.         }
  393.     } if (cells.C2 == "O" && cells.C3 == "O") {
  394.         if (valueGrabber("C1") == "")   {
  395.             return "C1"
  396.         }
  397.     } if (cells.C1 == "O" && cells.C3 == "O") {
  398.         if (valueGrabber("C2") == "")   {
  399.             return "C2"
  400.         }
  401.     }
  402.     // Horizontal Lines
  403.     if (cells.A1 == "O" && cells.C1 == "O") {
  404.         if (valueGrabber("B1") == "")   {
  405.             return "B1"
  406.         }
  407.     } if (cells.A1 == "O" && cells.B1 == "O") {
  408.         if (valueGrabber("C1") == "")   {
  409.             return "C1"
  410.         }
  411.     } if (cells.B1 == "O" && cells.C1 == "O") {
  412.         if (valueGrabber("A1") == "")   {
  413.             return "A1"
  414.         }
  415.     }
  416.  
  417.     if (cells.A2 == "O" && cells.C2 == "O") {
  418.         if (valueGrabber("B2") == "")   {
  419.             return "B2"
  420.         }
  421.     } if (cells.B2 == "O" && cells.C2 == "O") {
  422.         if (valueGrabber("A2") == "")   {
  423.             return "A2"
  424.         }
  425.     } if (cells.A2 == "O" && cells.B2 == "O") {
  426.         if (valueGrabber("C2") == "")   {
  427.             return "C2"
  428.         }
  429.     }
  430.  
  431.     if (cells.B3 == "O" && cells.C3 == "O") {
  432.         if (valueGrabber("A3") == "")   {
  433.             return "A3"
  434.         }
  435.     } if (cells.A3 == "O" && cells.C3 == "O") {
  436.         if (valueGrabber("B3") == "")   {
  437.             return "B3"
  438.         }
  439.     } if (cells.A3 == "O" && cells.B3 == "O") {
  440.         if (valueGrabber("C3") == "")   {
  441.             return "C3"
  442.         }
  443.     }
  444. }
  445. function prior(){
  446.     /*
  447.     The function prior is really essential for game more than the ai_X and ai_O
  448.     The prior actually does the move which can be the difference between Win and Lose
  449.     if USER is about to win and has to mark one X to win
  450.     And COM is also about to win he has to mark one O in the line to win
  451.     at such time COM will confuse whom to listen ai_X is telling to block USER annd ai_O is telling to mark O and win
  452.     at such cases winning is important so prior function helps COM to make a decision when he's confused about whom to listen?
  453.  
  454.     Till there are no 2 marks consecuently ai_X and ai_O don't work in such cases either game continues or COM doesn't play his move and lets
  455.     USER to play more than one move at a time Which is bad
  456.     */
  457.     var aix = ai_X() // The value that function return is asigned to var aix
  458.     var aio = ai_O() // The value that this function returns is assigned to var aio
  459.     if (aio != undefined) {
  460.         if (aio != undefined) { // Truly speaking I started this project after a month or two so I don't remember why I nested two if statements with same conditions let it be
  461.             return aio // if aio is not equal to undefined which means it has something to tell COM, COM will listen to aio to win within one move
  462.         }
  463.     } else if (aio == undefined){ // aio is telling us nothing which means COM's NOT about win within one move at such time COM must block USER
  464.         if (aix != undefined) { // aix is not equal to undefined i.e. it has something to tell COM, COM will listen to aix this time
  465.             return aix // Now COM will listen to aix to block the USER
  466.         }
  467.     }
  468. }
  469.  
  470. // Now not sure some code is excess I use it for Debugging to see where problem lies but now help me becuase I failed to put enough AI into it... :(
  471. function userClick(value, id){
  472.     if (value == "") {
  473.         valueAssign(id, "X")
  474.         records() // It records move played by USER
  475.         computerChoice(id) // COM will make choice on basis of records and id
  476.         var winner = refre() // refre returns strings "you win " and "you lose" they are stored in var winner
  477.         if (winner != undefined){// refre is executed several times but when it dectects nothing it returns undefined
  478.             innerHTMLAssign('winner', winner) // when winner isn't equal to undefined it means somebody is winner then the string is assigned to <p> id = 'winner'
  479.         }
  480.     }
  481. }
  482. function computerChoice(id){
  483.     do {
  484.         if (id != "B2") {
  485.             markO("B2") // Little bit code that makes sure that if USER clicks on any other button than B2 then It'll mark on B2 becuase its more strategic
  486.         } else if (id == "B2") {
  487.             markO("A1") // Unfortunately If USER clicks on central cell B2 then COM will mark on A1
  488.         }
  489.     }while(false) // It just executes on startup of game
  490.     markO(prior())
  491.     records() // Keeping tracks of things is must so record() records move played by markO(prior())
  492.  
  493. };
Add Comment
Please, Sign In to add comment