From 77517481e16c6a3c4f9291d35b7da62b820816f8 Mon Sep 17 00:00:00 2001 From: Meira Tompkins Date: Mon, 2 Mar 2020 00:25:21 -0500 Subject: [PATCH] tic tactoe --- week-6/css/style.css | 64 ++++++++++++++++++++++++++++++++++++++++ week-6/index.html | 42 ++++++++++++++++++++++++++ week-6/js/tic-tac-toe.js | 64 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 170 insertions(+) create mode 100644 week-6/css/style.css create mode 100644 week-6/index.html create mode 100644 week-6/js/tic-tac-toe.js diff --git a/week-6/css/style.css b/week-6/css/style.css new file mode 100644 index 0000000..248cddb --- /dev/null +++ b/week-6/css/style.css @@ -0,0 +1,64 @@ +/* CSS files add styling rules to your content */ + +* { + box-sizing: border-box; +} + +:root { + --board-size: 200px; + --line-color: grey; + --gap: 5px; +} + +body { + font-family: Arial, Helvetica, sans-serif; + +} + +main { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + + +.gameboard { + width: calc( (3 * var(--board-size)) + (2 * var(--gap)) ); + display: grid; + grid-template-columns: repeat(3, var(--board-size) ); + grid-template-rows: repeat(3, var(--board-size) ); + place-items: stretch; + background-color: var(--line-color); + grid-gap: 5px; + +} + +.square { + display: flex; + justify-content: center; + align-items: center; + background-color: white; + color: #333; + font-size: var(--board-size); + line-height: var(--board-size); + text-transform: uppercase; + margin:0; + padding:0; + cursor: pointer; + +} + +.square:hover { + background-color: #eee; +} + + +.banner { + background-color: lightblue; + position: absolute; + top: 0px; + padding: 1em; + width: 100%; + text-align: center; +} \ No newline at end of file diff --git a/week-6/index.html b/week-6/index.html new file mode 100644 index 0000000..e6ddd46 --- /dev/null +++ b/week-6/index.html @@ -0,0 +1,42 @@ + + + + + + Tic Tac Toe + + + + + + + + +
+ + + +
+ +
{{ board[0][0] }}
+
{{ board[0][1] }}
+
{{ board[0][2] }}
+ +
{{ board[1][0] }}
+
{{ board[1][1] }}
+
{{ board[1][2] }}
+ +
{{ board[2][0] }}
+
{{ board[2][1] }}
+
{{ board[2][2] }}
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/week-6/js/tic-tac-toe.js b/week-6/js/tic-tac-toe.js new file mode 100644 index 0000000..0a863b7 --- /dev/null +++ b/week-6/js/tic-tac-toe.js @@ -0,0 +1,64 @@ +var app = new Vue({ + el: '#vue-app', + data: { + turn: 'x', + board: [ + [null, null, null], + [null, null, null], + [null, null, null] + ] + }, + methods: { + changeIt: function(row,column){ + + this.board[row][column] = this.turn + + let winnerx = "Player 'X', you are a winner!"; + let winnero = "Player 'O', you are a winner!"; + + if (this.board[0,0] == this.turn && this.board[0,1] == this.turn && this.board[0,2] == this.turn) { + this.board[0] ="Winner!"; + alert(winnerx); + }else if(this.board[0,0] == 'o' && this.board[0,1] == 'o' && this.board[0,2] =='o') { + this.board[0] ="Winner!"; + alert(winnero); + }else if(this.board[1,1] == 'x' && this.board[1,0] == 'x' && this.board[1,2] =='x') { + this.board[1] ="Winner!"; + alert(winnerx); + }else if(this.board[1,1] == 'o' && this.board[1,0] == 'o' && this.board[1,2] =='o') { + this.board[1] ="Winner!"; + alert(winnero); + }else if(this.board[2,1] == 'x' && this.board[2,0] == 'x' && this.board[2,2] =='x') { + this.board[2] ="Winner!"; + alert(winnerx); + }else if(this.board[2,1] == 'o' && this.board[2,0] == 'o' && this.board[2,2] =='o') { + this.board[2] ="Winner!"; + alert(winnero); + + + }else if(this.board[0][0] == 'x' && this.board[1][0] == 'x' && this.board[2][0] == 'x'){ + this.board[0][0] = "W"; + this.board[1][0] = "I"; + this.board[2][0] = "N"; + alert(winnerx); + }else if(this.board[0][0] == 'o' && this.board[1][0] == 'o' && this.board[2][0] == 'o'){ + this.board[0][0] = "W"; + this.board[1][0] = "I"; + this.board[2][0] = "N"; + alert(winnero); + }else if(this.board[1][1] == 'o' && this.board[1][0] == 'o' && this.board[1][2] == 'o'){ + this.board[0][0] = "W"; + this.board[1][0] = "I"; + this.board[2][0] = "N"; + alert(winnero); +}else if(this.board[1][1] == 'x' && this.board[1][0] == 'x' && this.board[1][2] == 'x'){ + this.board[0][0] = "W"; + this.board[1][0] = "I"; + this.board[2][0] = "N"; + alert(winnerx); +} + //correctly identifies when someone has won + this.turn = (this.turn == 'x') ? 'o' : 'x'; + } + } +}); \ No newline at end of file