API tools faq
paste
Guest User

Untitled

a guest
Mar 19th, 2018
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.50 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <head>
  4. <title>Tic Tac Toe</title>
  5. <style>
  6. h2 {
  7. background-color: coral;
  8. text-align: center;
  9. }
  10.  
  11. #playername {
  12. text-align: right;
  13.  
  14. color: darkred;
  15.  
  16. }
  17.  
  18. #reset {
  19.  
  20. text-align: center;
  21. font-size: medium;
  22. float: right;
  23. position: absolute;
  24. width: 180px;
  25. bottom: 350px;
  26. height: 16px;
  27. padding: 15px;
  28.  
  29. }
  30. </style>
  31. </head>
  32.  
  33. <body>
  34. <h2> Tic-Tac-Toe</h2>
  35. <div id="playername"></div>
  36. <div>
  37. <input type="reset" value="Reset" id="reset"></input>
  38. </div>
  39. <script src='jquery-3.3.1.js'></script>
  40. <script>
  41.  
  42.  
  43. $(document).ready(startGame);
  44.  
  45.  
  46. function startGame() {
  47. var blocks = 9;
  48. var player1 = 'x', player2 = 'o';
  49. var chance = 1;
  50. var buttonId = 1;
  51. var tie = 10;
  52. var isWinner = false;
  53. var checkTie = false;
  54. var cell1, cell2, cell3;
  55. var buttonKey;
  56. var outputArray = [];
  57. var array1, array2, array3, array4, array5, array6, array7, array8, array9;
  58. var horizontalWinningCombinations = [[1, 2, 3], [4, 5, 6], [7, 8, 9],];
  59. var verticalWinningCombinations = [[1, 4, 7], [2, 5, 8], [3, 6, 9]];
  60. var diagonalWinningCombinations = [[1, 5, 9], [3, 5, 7]];
  61.  
  62.  
  63.  
  64. for (var index = 0; index < blocks; index++) {
  65. buttonKey = document.createElement("button");
  66.  
  67. if ((index == 3 || index == 6)) {
  68. lineBreak = document.createElement('br');
  69. document.body.appendChild(lineBreak);
  70. }
  71. buttonKey.id = buttonId;
  72.  
  73.  
  74. buttonKey.setAttribute("value", buttonId);
  75. buttonKey.setAttribute("text", buttonId);
  76. buttonKey.style.fontFamily = "Times New Roman";
  77. buttonKey.style.backgroundSize = "50px";
  78. buttonAttribute();
  79.  
  80. // buttonKey.innerHTML = " + ";
  81. // buttonKey.style.backgroundColor = "#C0C0C0";
  82. buttonKey.style.fontSize = "25px";
  83. buttonKey.style.marginBottom = "10px";
  84. buttonKey.style.marginLeft = "10px";
  85. buttonKey.style.marginRight = "10px";
  86. document.body.appendChild(buttonKey);
  87. buttonId++;
  88. document.getElementById("playername").innerHTML = "Player 1 = 'x'";
  89.  
  90.  
  91.  
  92. buttonKey.addEventListener("click", function (event) {
  93. if (isWinner == true || checkTie == true) {
  94. console.log("Game is over!");
  95. alert("Game Over!")
  96. reset();
  97. }
  98. else {
  99. selectMark(event, event.srcElement);
  100. checkIsWinner();
  101. }
  102. });
  103.  
  104. }
  105.  
  106.  
  107.  
  108. function selectMark(currentObject, currentType) {
  109.  
  110. if (chance % 2 != 0) {
  111.  
  112. document.getElementById("playername").innerHTML = "Current Player: player1 = 'x'" + "<br>" + "<br>";
  113. document.getElementById("playername").innerHTML += "Next Player: player2 = 'o'";
  114. outputArray.push([currentType.id]);
  115. document.getElementById(currentType.id).innerHTML = player1;
  116. document.getElementById(currentType.id).style.backgroundColor = '#238EE1';
  117. chance++;
  118. return;
  119. }
  120.  
  121. document.getElementById("playername").innerHTML = "Current Player :player2 = 'o'" + "<br>" + "<br>";
  122. document.getElementById("playername").innerHTML += "Next Player: player1 = 'x'"
  123. outputArray.push([currentType.id]);
  124. document.getElementById(currentType.id).innerHTML = player2;
  125.  
  126. document.getElementById(currentType.id).style.backgroundColor = '#FF1010';
  127.  
  128. chance++;
  129. }
  130.  
  131.  
  132. function checkIsWinner() {
  133.  
  134. winningCombinations = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7], [2, 5, 8], [3, 6, 9],
  135. [1, 5, 9], [3, 5, 7]];
  136.  
  137. if (chance == 2) {
  138. array1 = outputArray[0];
  139.  
  140. console.log("array1=" + array1);
  141. }
  142.  
  143. if (chance == 3) {
  144. array2 = outputArray[1];
  145.  
  146.  
  147. console.log("array2=" + array2);
  148. }
  149.  
  150. if (chance == 4) {
  151. array3 = outputArray[2];
  152.  
  153. console.log("array3 = " + array3);
  154. }
  155.  
  156. if (chance == 5) {
  157. array4 = outputArray[3];
  158.  
  159. console.log("array4 = " + array4);
  160. }
  161.  
  162. if (chance == 6) {
  163. array5 = outputArray[4];
  164.  
  165. console.log("array5 =" + array5);
  166. }
  167.  
  168. if (chance == 7) {
  169. array6 = outputArray[5];
  170.  
  171. console.log("array6 =" + array6);
  172. }
  173.  
  174. if (chance == 8) {
  175. array7 = outputArray[6];
  176. console.log("array7 =" + array7);
  177. }
  178.  
  179. if (chance == 9) {
  180. array8 = outputArray[7];
  181. console.log("array8 =" + array8);
  182. }
  183.  
  184. if (chance == 10) {
  185. array9 = outputArray[8];
  186. console.log("array9 = " + array9);
  187. }
  188.  
  189.  
  190. isHorizontalWinningCombination();
  191.  
  192. isVerticalWinningCombination();
  193.  
  194. isDiagonalWinningCombination();
  195.  
  196. isTie();
  197.  
  198.  
  199. }
  200.  
  201. function isHorizontalWinningCombination() {
  202. for (var row = 0; row < 3; row++) {
  203.  
  204. cell1 = horizontalWinningCombinations[row][0];
  205. cell2 = horizontalWinningCombinations[row][1];
  206. cell3 = horizontalWinningCombinations[row][2];
  207.  
  208. combinations(cell1, cell2, cell3);
  209. }
  210.  
  211. }
  212.  
  213. function isVerticalWinningCombination() {
  214. for (var row = 0; row < 3; row++) {
  215.  
  216. cell1 = verticalWinningCombinations[row][0];
  217. cell2 = verticalWinningCombinations[row][1];
  218. cell3 = verticalWinningCombinations[row][2];
  219.  
  220. combinations(cell1, cell2, cell3);
  221. }
  222.  
  223. }
  224.  
  225. function isDiagonalWinningCombination() {
  226. for (var row = 0; row < 2; row++) {
  227.  
  228. cell1 = diagonalWinningCombinations[row][0];
  229. cell2 = diagonalWinningCombinations[row][1];
  230. cell3 = diagonalWinningCombinations[row][2];
  231.  
  232. combinations(cell1, cell2, cell3);
  233.  
  234. }
  235. }
  236.  
  237. function isTie() {
  238. tie--;
  239. if (tie <= 1) {
  240. console.log("Its a tie. Game Over !");
  241. checkTie = true;
  242. alert("Its a Tie. Game Over !")
  243. return;
  244. }
  245. }
  246.  
  247. function combinations(cell1, cell2, cell3) {
  248. if (((array1 == cell1 || array1 == cell2 || array1 == cell3) && (array3 == cell1
  249. || array3 == cell2 || array3 == cell3) && (array5 == cell1 || array5 == cell2
  250. || array5 == cell3))) {
  251.  
  252. player1IsWinner();
  253. return;
  254.  
  255. }
  256.  
  257. if ((array1 == cell1 || array1 == cell2 || array1 == cell3) && (array3 == cell1
  258. || array3 == cell2 || array3 == cell3) && (array7 == cell1
  259. || array7 == cell2 || array7 == cell3)) {
  260. player1IsWinner();
  261. return;
  262. }
  263. if ((array1 == cell1 || array1 == cell2 || array1 == cell3) && (array3 == cell1
  264. || array3 == cell2 || array3 == cell3) && (array9 == cell1
  265. || array9 == cell2 || array9 == cell3)) {
  266.  
  267. player1IsWinner();
  268. return;
  269. }
  270.  
  271. if ((array1 == cell1 || array1 == cell2 || array1 == cell3) && (array5 == cell1
  272. || array5 == cell2 || array5 == cell3) && (array7 == cell1 || array7 == cell2
  273. || array7 == cell3)) {
  274.  
  275. player1IsWinner();
  276. return;
  277. }
  278. if ((array1 == cell1 || array1 == cell2 || array1 == cell3) && (array5 == cell1
  279. || array5 == cell2 || array5 == cell3) && (array9 == cell1 || array9 == cell2
  280. || array9 == cell3)) {
  281.  
  282. player1IsWinner();
  283. return;
  284.  
  285. }
  286. if ((array5 == cell1 || array5 == cell2 || array5 == cell3) && (array3 == cell1
  287. || array3 == cell2 || array3 == cell3) && (array7 == cell1 || array7 == cell2
  288. || array7 == cell3)) {
  289.  
  290. player1IsWinner();
  291. return;
  292.  
  293. }
  294. if ((array5 == cell1 || array5 == cell2 || array5 == cell3) && (array3 == cell1
  295. || array3 == cell2 || array3 == cell3) && (array9 == cell1 || array9 == cell2
  296. || array9 == cell3)) {
  297.  
  298. player1IsWinner();
  299. return;
  300.  
  301. }
  302. if ((array5 == cell1 || array5 == cell2 || array5 == cell3) && (array7 == cell1
  303. || array7 == cell2 || array7 == cell3) &&
  304. (array9 == cell1 || array9 == cell2 || array9 == cell3)) {
  305. player1IsWinner();
  306. return;
  307.  
  308. }
  309.  
  310. if ((array1 == cell1 || array1 == cell2 || array1 == cell3) && (array7 == cell1
  311. || array7 == cell2 || array7 == cell3) && (array9 == cell1 || array9 == cell2
  312. || array9 == cell3)) {
  313.  
  314. player1IsWinner();
  315. return;
  316.  
  317. }
  318. if ((array7 == cell1 || array7 == cell2 || array7 == cell3) && (array3 == cell1
  319. || array3 == cell2 || array3 == cell3) && (array9 == cell1 || array9 == cell2
  320. || array9 == cell3)) {
  321. player1IsWinner();
  322. return;
  323.  
  324. }
  325.  
  326. if ((array2 == cell1 || array2 == cell2 || array2 == cell3) && (array4 == cell1
  327. || array4 == cell2 || array4 == cell3) && (array6 == cell1 || array6 == cell2
  328. || array6 == cell3)) {
  329. player2IsWinner();
  330. return;
  331.  
  332. }
  333. if ((array2 == cell1 || array2 == cell2 || array2 == cell3) && (array4 == cell1
  334. || array4 == cell2 || array4 == cell3) && (array8 == cell1 || array8 == cell2
  335. || array8 == cell3)) {
  336. player2IsWinner();
  337. return;
  338. }
  339.  
  340. if ((array2 == cell1 || array2 == cell2 || array2 == cell3) && (array8 == cell1
  341. || array8 == cell2 || array8 == cell3) && (array6 == cell1 || array6 == cell2
  342. || array6 == cell3)) {
  343.  
  344. player2IsWinner();
  345. return;
  346. }
  347. if ((array8 == cell1 || array8 == cell2 || array8 == cell3) && (array4 == cell1
  348. || array4 == cell2 || array4 == cell3) &&
  349. (array6 == cell1 || array6 == cell2 || array6 == cell3)) {
  350.  
  351. player2IsWinner();
  352. return;
  353. }
  354. }
  355.  
  356.  
  357. function player1IsWinner() {
  358.  
  359. console.log("Player 1 is the Winner");
  360. alert("Player 1 wins !!")
  361. isWinner = true;
  362.  
  363. }
  364.  
  365. function player2IsWinner() {
  366.  
  367. console.log("Player 2 is the Winner");
  368. alert("Player 2 wins!!");
  369. isWinner = true;
  370. }
  371.  
  372.  
  373. function reset() {
  374. $('#reset').on("click",function() {
  375.  
  376. buttonAttribute();
  377. chance=1;
  378. isWinner=false;
  379. checkTie=false;
  380. outputArray=[];
  381. });
  382. }
  383. function buttonAttribute(){
  384. buttonKey.innerHTML = " + ";
  385. buttonKey.style.backgroundColor = "#C0C0C0";
  386. }
  387. }
  388. </script>
  389.  
  390. </body>
  391.  
  392. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!