From c894e65a6a1a3aa9d6d0f22f23d429a16172ddae Mon Sep 17 00:00:00 2001 From: Tammy Date: Fri, 29 Jan 2016 10:48:16 -0800 Subject: [PATCH 1/4] it seems to work with tons og bugs --- delete/README.md | 22 +++++ delete/index.css | 18 ++++ delete/index.html | 43 ++++++++ delete/tic-tac-toe.js | 83 ++++++++++++++++ index.css | 20 +++- index.html | 33 +++++-- tic-tac-toe.js | 224 +++++++++++++++++++++++++++++++++++++++++- 7 files changed, 427 insertions(+), 16 deletions(-) create mode 100644 delete/README.md create mode 100644 delete/index.css create mode 100644 delete/index.html create mode 100644 delete/tic-tac-toe.js diff --git a/delete/README.md b/delete/README.md new file mode 100644 index 0000000..1c42428 --- /dev/null +++ b/delete/README.md @@ -0,0 +1,22 @@ +# Tic Tac Toe! +Create a JavaScript class that, when instantiated, draws a playable tic-tac-toe game in your browser! + +## Getting Started +- Create a class using a `function` definition and a `prototype` object. +- Use [jQuery](https://jquery.com/) to enable & manage interactions in the `DOM`. +- Use one markup file, one stylesheet, and one JavaScript file for your solution. + +## Rules & Specs +- The game is played on a 3x3 grid. +- Each player, in turn, selects one available grid spot +- Upon selecting (clicking), the spot is marked as belonging to that player +- If a player claims three spots in a row (horizontally, vertically, or diagonally), they win! +- It is possible (even likely) that games can end in a draw. + +## Added fun! +- Add a single player mode where, after taking your turn, the computer (JavaScript)... + + Selects the first available spot OR + + Randomly selects a spot OR + + Picks the "best" spot (whatever best means) +- Add a _new game_ button that resets the board, allowing a fresh game to be played. +- Keep track of wins and losses for both players, updating the counts whenever a game ends. diff --git a/delete/index.css b/delete/index.css new file mode 100644 index 0000000..b4ec0bb --- /dev/null +++ b/delete/index.css @@ -0,0 +1,18 @@ +/*******tic-tac-toe******/ +#tic-tac-toe .disable {text-transform:uppercase; font-size:30px; font-family:Georgia, "Times New Roman", Times, serif} +#tic-tac-toe #game li {float:left; padding:0; list-style:none; text-align:center; margin-bottom:20px; color:#fff; height:60px; line-height:60px; font-size:40px; color:#ccc} +#tic-tac-toe #game li.disable{color:#fff} +#tic-tac-toe #game {float:left; padding:0; clear:both} +.new_span {width:226px} +#tic-tac-toe #reset { padding:5px 10px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:20px; clear:both; cursor:pointer; float:left; text-align:center; text-transform:uppercase; outline:none; width:204px} +.input-prepend span.pre_text {width:55px} +.input-prepend .span1{width:93px} +.input-prepend {margin-bottom:10px} +.clr {clear:both; height:0} +#tic-tac-toe h1 {text-align:center; font-size:28px} +#tic-tac-toe li::-moz-selection {background:none;color:#000;} +#tic-tac-toe li::-webkit-selection {background:none;color:#000;} +#tic-tac-toe {width:220px; margin:0 auto} +.input-append .win_times {background:#fff; width:101px} +.input-append .win_text {width:52px} +/*******tic-tac-toe END******/ diff --git a/delete/index.html b/delete/index.html new file mode 100644 index 0000000..189e600 --- /dev/null +++ b/delete/index.html @@ -0,0 +1,43 @@ + + + +
+
+
+

Tic Tac Toe

+
+
+ O won0time(s) +
+
+ X won0time(s) +
+ +
+ + + +
+
    +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
    • +
+
 
+
Restart
+
+ + + + + diff --git a/delete/tic-tac-toe.js b/delete/tic-tac-toe.js new file mode 100644 index 0000000..fa8cf66 --- /dev/null +++ b/delete/tic-tac-toe.js @@ -0,0 +1,83 @@ +// JavaScript Document +$(document).ready(function() { +var x = "x" +var o = "o" +var count = 0; +var o_win = 0; +var x_win = 0; +$('#game li').click(function(){ + + if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')) + { + alert('O has won the game. Start a new game') + $("#game li").text("+"); + $("#game li").removeClass('disable') + $("#game li").removeClass('o') + $("#game li").removeClass('x') + $("#game li").removeClass('btn-primary') + $("#game li").removeClass('btn-info') + } + else if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')) + { + alert('X wins has won the game. Start a new game') + $("#game li").text("+"); + $("#game li").removeClass('disable') + $("#game li").removeClass('o') + $("#game li").removeClass('x') + $("#game li").removeClass('btn-primary') + $("#game li").removeClass('btn-info') + } + else if (count == 9) + { + alert('Its a tie. It will restart.') + $("#game li").text("+"); + $("#game li").removeClass('disable') + $("#game li").removeClass('o') + $("#game li").removeClass('x') + $("#game li").removeClass('btn-primary') + $("#game li").removeClass('btn-info') + count = 0 + } + else if ($(this).hasClass('disable')) + { + alert('Already selected') + } + else if (count%2 == 0) + { + count++ + $(this).text(o) + $(this).addClass('disable o btn-primary') + if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')) + { + alert('O wins') + count = 0 + o_win++ +$('#o_win').text(o_win) + } + } + else + { + count++ + $(this).text(x) + $(this).addClass('disable x btn-info') + if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')) + { + alert('X wins') + count = 0 + x_win++ + $('#x_win').text(x_win) + } + } + + }); + $("#reset").click(function () { + $("#game li").text("+"); + $("#game li").removeClass('disable') + $("#game li").removeClass('o') + $("#game li").removeClass('x') + $("#game li").removeClass('btn-primary') + $("#game li").removeClass('btn-info') + count = 0 + + }); +}); diff --git a/index.css b/index.css index ae8b9a0..36c8531 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,19 @@ -html { - + + .square{ + width:100px; + height:100px; +} + +.v{ + border-left:1px solid #000; + border-right:1px solid #000; +} + +.h{ + border-top:1px solid #000; + border-bottom:1px solid #000; +} + +h1 { + margin-left: 60px; } diff --git a/index.html b/index.html index de8d985..6919374 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,34 @@ - - Tic Tac Toe! + +

Tic Tac Toe!

- +
+ + + + + + + + + + + + + + + + +
+
- -

Tic Tac Toe

-
- - --> - diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 33c03a0..69aa963 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -1,7 +1,223 @@ function TicTacToe() { + this.board = [["","",""], ["","",""], ["","",""]]; + this.count = 0; + } -} + var checkSpot = function(col, row, sign , board) { + if (board[col][row] === sign) { + return true; + } else {return false;} + } -TicTacToe.prototype = { - -} +TicTacToe.prototype.CheckRow = function(col, row, sign) { + if (row === 0) { + if (checkSpot(col, 1, sign, this.board) && (checkSpot(col,2, sign, this.board))) { + return true; + } else if ( row === 1) { + if (checkSpot(col, 0, sign, this.board) && (checkSpot(col,2, sign, this.board))) + return true; + } else { + if (checkSpot(col, 0, sign, this.board) && (checkSpot(col,1, sign, this.board))) + return true; + } + } +}; + +TicTacToe.prototype.CheckCol = function(col, row, sign) { + if (col === 0) { + if (checkSpot(1, row, sign, this.board) && (checkSpot(2,row, sign, this.board))) + return true; + } else if ( col === 1) { + if (checkSpot(0, row, sign, this.board) && (checkSpot(2,row, sign, this.board))) + return true; + } else { + if (checkSpot(0, row, sign, this.board) && (checkSpot(1,row, sign, this.board))) + return true; + } +}; + +TicTacToe.prototype.checkOblique = function(col, row, sign) { + if ((col === 0) && (row == 1) || (col == 1 && row === 0) || (col == 1 && col == 2) || (col == 2 && row == 1) ) { + return false; + } else if ((checkSpot(0,0,sign, this.board) && checkSpot(1,1,sign, this.board) && checkSpot(2,2, sign, this.board)) || (checkSpot(0,1,sign, this.board) && checkSpot(1,1,sign, this.board) && checkSpot(2,0,sign, this.board))){ + return true; + } +}; + +TicTacToe.prototype.checkAvai = function(col, row) { + if (this.board[col][row] === "") { + return true; + } else { return false;} +}; + + + + $(document).ready(function() { + var game = new TicTacToe(); + + $("#zz").click(function(){ + if (!game.checkAvai(0,0)) { + throw new Error ("This spot is already claimed!"); + } else if (game.count % 2 === 0) { + $(this).text("O"); + game.board[0][0]="O"; + if (game.CheckRow(0,0,"O") ||game.CheckCol(0,0,"O") || game.checkOblique(0,0,"O") ) { + alert('Y wins'); } else { + game.count ++;} + } else { + $(this).text("X"); + game.board[0][0]="X"; + if (game.CheckRow(0,0,"X") ||game.CheckCol(0,0,"X") || game.checkOblique(0,0,"X") ) { + alert('X wins'); } else { + game.count ++;} + } + }); + + $("#zo").click(function(){ + if (!game.checkAvai(0,1)) { + throw new Error ("This spot is already claimed!"); + } else if (game.count % 2 === 0) { + $(this).text("O"); + game.board[0][1] = "O"; + if (game.CheckRow(0,1,"O") ||game.CheckCol(0,1,"O") || game.checkOblique(0,1,"O") ) { + alert('Y wins'); } else { + game.count ++;} + } else { + $(this).text("X"); + game.board[0][1] = "X"; + if (game.CheckRow(0,1,"X") ||game.CheckCol(0,1,"X") || game.checkOblique(0,1,"X") ) { + alert('X wins'); } else { + game.count ++;} + } + }); + + $("#zt").click(function(){ + if (!game.checkAvai(0,2)) { + throw new Error ("This spot is already claimed!"); + } else if (game.count % 2 === 0) { + $(this).text("O"); + game.board[0][2] = "O"; + if (game.CheckRow(0,2,"O") ||game.CheckCol(0,2,"O") || game.checkOblique(0,2,"O") ) { + alert('Y wins'); } else { + game.count ++;} + } else { + $(this).text("X"); + game.board[0][2] = "X"; + if (game.CheckRow(0,2,"X") ||game.CheckCol(0,2,"X") || game.checkOblique(0,2,"X") ) { + alert('X wins'); } else { + game.count ++;} + } + }); + + $("#oz").click(function(){ + if (!game.checkAvai(1,0)) { + throw new Error ("This spot is already claimed!"); + } else if (game.count % 2 === 0) { + $(this).text("O"); + game.board[1][0] = "O"; + if (game.CheckRow(1,0,"O") ||game.CheckCol(1,0,"O") || game.checkOblique(1,0,"O") ) { + alert('Y wins'); } else { + game.count ++;} + } else { + $(this).text("X"); + game.board[1][0] = "X"; + if (game.CheckRow(1,0,"X") ||game.CheckCol(1,0,"X") || game.checkOblique(1,0,"X") ) { + alert('X wins'); } else { + game.count ++;} + } + }); + + $("#oo").click(function(){ + if (!game.checkAvai(1,1)) { + throw new Error ("This spot is already claimed!"); + } else if (game.count % 2 === 0) { + $(this).text("O"); + game.board[1][1] = "O"; + if (game.CheckRow(1,1,"O") ||game.CheckCol(1,1,"O") || game.checkOblique(1,1,"O") ) { + alert('Y wins'); } else { + game.count ++;} + } else { + $(this).text("X"); + game.board[1][1] = "X"; + if (game.CheckRow(1,1,"X") ||game.CheckCol(1,1,"X") || game.checkOblique(1,1,"X") ) { + alert('X wins'); } else { + game.count ++;} + } + }); + + $("#ot").click(function(){ + if (!game.checkAvai(1,2)) { + throw new Error ("This spot is already claimed!"); + } else if (game.count % 2 === 0) { + $(this).text("O"); + game.board[1][2] = "O"; + if (game.CheckRow(1,2,"O") ||game.CheckCol(1,2,"O") || game.checkOblique(1,2,"O") ) { + alert('Y wins'); } else { + game.count ++;} + } else { + $(this).text("X"); + game.board[1][2]= "X"; + if (game.CheckRow(1,2,"X") ||game.CheckCol(1,2,"X") || game.checkOblique(1,2,"X") ) { + alert('X wins'); } else { + game.count ++;} + } + }); + + $("#tz").click(function(){ + if (!game.checkAvai(2,0)) { + throw new Error ("This spot is already claimed!"); + } else if (game.count % 2 === 0) { + $(this).text("O"); + game.board[2][0] = "O"; + if (game.CheckRow(2,0,"O") ||game.CheckCol(2,0,"O") || game.checkOblique(2,0,"O") ) { + alert('Y wins'); } else { + game.count ++;} + } else { + $(this).text("X"); + game.board[2][0] = "X"; + if (game.CheckRow(2,0,"X") ||game.CheckCol(2,0,"X") || game.checkOblique(2,0,"X") ) { + alert('X wins'); } else { + game.count ++;} + } + }); + + $("#to").click(function(){ + if (!game.checkAvai(2,1)) { + throw new Error ("This spot is already claimed!"); + } else if (game.count % 2 === 0) { + $(this).text("O"); + game.board[2][1] = "O"; + if (game.CheckRow(2,1,"O") ||game.CheckCol(2,1,"O") || game.checkOblique(2,1,"O") ) { + alert('Y wins'); } else { + game.count ++;} + } else { + $(this).text("X"); + game.board[2][1] = "X"; + if (game.CheckRow(2,1,"X") ||game.CheckCol(2,1,"X") || game.checkOblique(2,1,"X") ) { + alert('X wins'); } else { + game.count ++;} + } + }); + + $("#tt").click(function(){ + if (!game.checkAvai(2,2)) { + throw new Error ("This spot is already claimed!"); + } else if (game.count % 2 === 0) { + $(this).text("O"); + game.board[2][2] = "O"; + if (game.CheckRow(2,2,"O") ||game.CheckCol(2,2,"O") || game.checkOblique(2,2,"O") ) { + alert('Y wins'); } else { + game.count ++;} + } else { + $(this).text("X"); + game.board[2][2] = "X"; + if (game.CheckRow(2,2,"X") ||game.CheckCol(2,2,"X") || checkOblique(2,2,"X") ) { + alert('X wins'); } else { + game.count ++;} + } + + if (game.count == 9) + {alert("it's a tie");} + + }); +}); From 0fe4b68faa5a0eb3ada81820228bdf8090d9cf9b Mon Sep 17 00:00:00 2001 From: Tammy Date: Fri, 29 Jan 2016 10:48:47 -0800 Subject: [PATCH 2/4] delted unwanted files --- delete/README.md | 22 ------------ delete/index.css | 18 ---------- delete/index.html | 43 ---------------------- delete/tic-tac-toe.js | 83 ------------------------------------------- 4 files changed, 166 deletions(-) delete mode 100644 delete/README.md delete mode 100644 delete/index.css delete mode 100644 delete/index.html delete mode 100644 delete/tic-tac-toe.js diff --git a/delete/README.md b/delete/README.md deleted file mode 100644 index 1c42428..0000000 --- a/delete/README.md +++ /dev/null @@ -1,22 +0,0 @@ -# Tic Tac Toe! -Create a JavaScript class that, when instantiated, draws a playable tic-tac-toe game in your browser! - -## Getting Started -- Create a class using a `function` definition and a `prototype` object. -- Use [jQuery](https://jquery.com/) to enable & manage interactions in the `DOM`. -- Use one markup file, one stylesheet, and one JavaScript file for your solution. - -## Rules & Specs -- The game is played on a 3x3 grid. -- Each player, in turn, selects one available grid spot -- Upon selecting (clicking), the spot is marked as belonging to that player -- If a player claims three spots in a row (horizontally, vertically, or diagonally), they win! -- It is possible (even likely) that games can end in a draw. - -## Added fun! -- Add a single player mode where, after taking your turn, the computer (JavaScript)... - + Selects the first available spot OR - + Randomly selects a spot OR - + Picks the "best" spot (whatever best means) -- Add a _new game_ button that resets the board, allowing a fresh game to be played. -- Keep track of wins and losses for both players, updating the counts whenever a game ends. diff --git a/delete/index.css b/delete/index.css deleted file mode 100644 index b4ec0bb..0000000 --- a/delete/index.css +++ /dev/null @@ -1,18 +0,0 @@ -/*******tic-tac-toe******/ -#tic-tac-toe .disable {text-transform:uppercase; font-size:30px; font-family:Georgia, "Times New Roman", Times, serif} -#tic-tac-toe #game li {float:left; padding:0; list-style:none; text-align:center; margin-bottom:20px; color:#fff; height:60px; line-height:60px; font-size:40px; color:#ccc} -#tic-tac-toe #game li.disable{color:#fff} -#tic-tac-toe #game {float:left; padding:0; clear:both} -.new_span {width:226px} -#tic-tac-toe #reset { padding:5px 10px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:20px; clear:both; cursor:pointer; float:left; text-align:center; text-transform:uppercase; outline:none; width:204px} -.input-prepend span.pre_text {width:55px} -.input-prepend .span1{width:93px} -.input-prepend {margin-bottom:10px} -.clr {clear:both; height:0} -#tic-tac-toe h1 {text-align:center; font-size:28px} -#tic-tac-toe li::-moz-selection {background:none;color:#000;} -#tic-tac-toe li::-webkit-selection {background:none;color:#000;} -#tic-tac-toe {width:220px; margin:0 auto} -.input-append .win_times {background:#fff; width:101px} -.input-append .win_text {width:52px} -/*******tic-tac-toe END******/ diff --git a/delete/index.html b/delete/index.html deleted file mode 100644 index 189e600..0000000 --- a/delete/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - -
-
-
-

Tic Tac Toe

-
-
- O won0time(s) -
-
- X won0time(s) -
- -
- - - -
-
    -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
  • +
    • -
-
 
-
Restart
-
- - - - - diff --git a/delete/tic-tac-toe.js b/delete/tic-tac-toe.js deleted file mode 100644 index fa8cf66..0000000 --- a/delete/tic-tac-toe.js +++ /dev/null @@ -1,83 +0,0 @@ -// JavaScript Document -$(document).ready(function() { -var x = "x" -var o = "o" -var count = 0; -var o_win = 0; -var x_win = 0; -$('#game li').click(function(){ - - if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')) - { - alert('O has won the game. Start a new game') - $("#game li").text("+"); - $("#game li").removeClass('disable') - $("#game li").removeClass('o') - $("#game li").removeClass('x') - $("#game li").removeClass('btn-primary') - $("#game li").removeClass('btn-info') - } - else if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')) - { - alert('X wins has won the game. Start a new game') - $("#game li").text("+"); - $("#game li").removeClass('disable') - $("#game li").removeClass('o') - $("#game li").removeClass('x') - $("#game li").removeClass('btn-primary') - $("#game li").removeClass('btn-info') - } - else if (count == 9) - { - alert('Its a tie. It will restart.') - $("#game li").text("+"); - $("#game li").removeClass('disable') - $("#game li").removeClass('o') - $("#game li").removeClass('x') - $("#game li").removeClass('btn-primary') - $("#game li").removeClass('btn-info') - count = 0 - } - else if ($(this).hasClass('disable')) - { - alert('Already selected') - } - else if (count%2 == 0) - { - count++ - $(this).text(o) - $(this).addClass('disable o btn-primary') - if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')) - { - alert('O wins') - count = 0 - o_win++ -$('#o_win').text(o_win) - } - } - else - { - count++ - $(this).text(x) - $(this).addClass('disable x btn-info') - if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')) - { - alert('X wins') - count = 0 - x_win++ - $('#x_win').text(x_win) - } - } - - }); - $("#reset").click(function () { - $("#game li").text("+"); - $("#game li").removeClass('disable') - $("#game li").removeClass('o') - $("#game li").removeClass('x') - $("#game li").removeClass('btn-primary') - $("#game li").removeClass('btn-info') - count = 0 - - }); -}); From 0170219e11fe028a2a4aec58bc8d01a19f6ac555 Mon Sep 17 00:00:00 2001 From: Tammy Date: Fri, 29 Jan 2016 15:21:38 -0800 Subject: [PATCH 3/4] done --- index.css | 4 ++++ tic-tac-toe.js | 18 ++++++++---------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/index.css b/index.css index 36c8531..d6db74d 100644 --- a/index.css +++ b/index.css @@ -17,3 +17,7 @@ h1 { margin-left: 60px; } + +td { + text-align: center; +} diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 69aa963..5e70685 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -25,7 +25,7 @@ TicTacToe.prototype.CheckRow = function(col, row, sign) { TicTacToe.prototype.CheckCol = function(col, row, sign) { if (col === 0) { - if (checkSpot(1, row, sign, this.board) && (checkSpot(2,row, sign, this.board))) + if (checkSpot(1,row, sign, this.board) && (checkSpot(2,row, sign, this.board))) return true; } else if ( col === 1) { if (checkSpot(0, row, sign, this.board) && (checkSpot(2,row, sign, this.board))) @@ -37,9 +37,9 @@ TicTacToe.prototype.CheckCol = function(col, row, sign) { }; TicTacToe.prototype.checkOblique = function(col, row, sign) { - if ((col === 0) && (row == 1) || (col == 1 && row === 0) || (col == 1 && col == 2) || (col == 2 && row == 1) ) { + if ((col === 0) && (row == 1) || (col == 1 && row === 0) || (col == 1 && row == 2) || (col == 2 && row == 1) ) { return false; - } else if ((checkSpot(0,0,sign, this.board) && checkSpot(1,1,sign, this.board) && checkSpot(2,2, sign, this.board)) || (checkSpot(0,1,sign, this.board) && checkSpot(1,1,sign, this.board) && checkSpot(2,0,sign, this.board))){ + } else if ((checkSpot(0,0,sign, this.board) && checkSpot(1,1,sign, this.board) && checkSpot(2,2, sign, this.board)) || (checkSpot(0,2,sign, this.board) && checkSpot(1,1,sign, this.board) && checkSpot(2,0,sign, this.board))){ return true; } }; @@ -50,8 +50,6 @@ TicTacToe.prototype.checkAvai = function(col, row) { } else { return false;} }; - - $(document).ready(function() { var game = new TicTacToe(); @@ -61,7 +59,7 @@ TicTacToe.prototype.checkAvai = function(col, row) { } else if (game.count % 2 === 0) { $(this).text("O"); game.board[0][0]="O"; - if (game.CheckRow(0,0,"O") ||game.CheckCol(0,0,"O") || game.checkOblique(0,0,"O") ) { + if (game.CheckRow(0,0,"O") || game.CheckCol(0,0,"O") || game.checkOblique(0,0,"O") ) { alert('Y wins'); } else { game.count ++;} } else { @@ -211,13 +209,13 @@ TicTacToe.prototype.checkAvai = function(col, row) { } else { $(this).text("X"); game.board[2][2] = "X"; - if (game.CheckRow(2,2,"X") ||game.CheckCol(2,2,"X") || checkOblique(2,2,"X") ) { + if (game.CheckRow(2,2,"X") ||game.CheckCol(2,2,"X") || game.checkOblique(2,2,"X") ) { alert('X wins'); } else { game.count ++;} } - if (game.count == 9) - {alert("it's a tie");} - }); + + if (game.count == 9) + {alert("it's a tie");} }); From 811b83cea1767ff7b51154520c13dfe448470b27 Mon Sep 17 00:00:00 2001 From: Tammy Date: Wed, 10 Feb 2016 22:47:07 -0800 Subject: [PATCH 4/4] I refactored two methods --- tic-tac-toe.js | 47 ++++++++++++++++++++++++++--------------------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/tic-tac-toe.js b/tic-tac-toe.js index 5e70685..391a033 100644 --- a/tic-tac-toe.js +++ b/tic-tac-toe.js @@ -6,33 +6,36 @@ function TicTacToe() { var checkSpot = function(col, row, sign , board) { if (board[col][row] === sign) { return true; - } else {return false;} + } else { + return false; + } } TicTacToe.prototype.CheckRow = function(col, row, sign) { - if (row === 0) { - if (checkSpot(col, 1, sign, this.board) && (checkSpot(col,2, sign, this.board))) { - return true; - } else if ( row === 1) { - if (checkSpot(col, 0, sign, this.board) && (checkSpot(col,2, sign, this.board))) - return true; - } else { - if (checkSpot(col, 0, sign, this.board) && (checkSpot(col,1, sign, this.board))) - return true; + countSign = 0; + for (var i = 0; i < 3 ; i++) { + if (checkSpot(col, i, sign, this.board)) { + countSign++; } } + if (countSign === 3) { + return true; + } else { + return false + } }; TicTacToe.prototype.CheckCol = function(col, row, sign) { - if (col === 0) { - if (checkSpot(1,row, sign, this.board) && (checkSpot(2,row, sign, this.board))) - return true; - } else if ( col === 1) { - if (checkSpot(0, row, sign, this.board) && (checkSpot(2,row, sign, this.board))) - return true; + countSign = 0; + for (var i = 0; i < 3 ; i++) { + if (checkSpot(i, row, sign, this.board)) { + countSign++; + } + } + if (countSign === 3) { + return true; } else { - if (checkSpot(0, row, sign, this.board) && (checkSpot(1,row, sign, this.board))) - return true; + return false } }; @@ -60,13 +63,15 @@ TicTacToe.prototype.checkAvai = function(col, row) { $(this).text("O"); game.board[0][0]="O"; if (game.CheckRow(0,0,"O") || game.CheckCol(0,0,"O") || game.checkOblique(0,0,"O") ) { - alert('Y wins'); } else { + alert('Y wins'); + } else { game.count ++;} } else { $(this).text("X"); game.board[0][0]="X"; - if (game.CheckRow(0,0,"X") ||game.CheckCol(0,0,"X") || game.checkOblique(0,0,"X") ) { - alert('X wins'); } else { + if (game.CheckRow(0,0,"X") || game.CheckCol(0,0,"X") || game.checkOblique(0,0,"X") ) { + alert('X wins'); + } else { game.count ++;} } });