diff --git a/.vscode/settings.json b/.vscode/settings.json index aef8443..cbb7b3a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } \ No newline at end of file diff --git a/index.html b/index.html index 10a15d1..b353d1d 100644 --- a/index.html +++ b/index.html @@ -3,40 +3,40 @@ Tic Tac Toe - + - + -
-
-

Welcome to Tic Tac Toe

-

Get ready to play!

- - -
+

TIC TAC TOE Game

+ + + +
+ + + + + + + + + + + + + + + + + +
- - - - - - - - - - - - - - - - - - -
-
- + + + + + diff --git a/main.js b/main.js index 2994e56..fb448ab 100644 --- a/main.js +++ b/main.js @@ -1,102 +1,56 @@ 'use strict'; -// brings in the assert module for unit testing -const assert = require('assert'); -// brings in the readline module to access the command line -const readline = require('readline'); -// use the readline module to print out to the command line -const rl = readline.createInterface({ - input: process.stdin, - output: process.stdout -}); +document.turn = "X"; + +function move(square){ + if (square.innerText == ''){ + + square.innerText = document.turn + switchTurn(); + + }else{ + console.log('pick another square') + } + + + } +function switchTurn(){ + if (checkwinner(document.turn)){ + console.log(document.getElementById('message').innerText= `${document.turn} is winner`) + } + if(document.turn == "X"){ + document.turn = "O" + } + else{ + document.turn = "X" + } + + } + function checkwinner(move){ +var result = false +if(checkRow(1,2,3,move)|| +checkRow(4,5,6,move)|| +checkRow(7,8,9,move)|| +checkRow(1,4,7,move)|| +checkRow(2,5,8,move)|| +checkRow(3,6,9,move)|| +checkRow(1,5,9,move)|| +checkRow(3,5,7,move)){ + return true; +} +result = true; + } +function checkRow(a,b,c, move){ +var result = false +if(getbox(a)== move && getbox(b)== move && getbox(c)== move){ + result = true + +} +return result +} +function getbox(number){ +return document.getElementById("b"+number).innerText -// creates and empty "board" for the user to see where marks can be placed. -// using let because the variable is expected to change with more 'X's and 'O's to add -let board = [ - [' ', ' ', ' '], - [' ', ' ', ' '], - [' ', ' ', ' '] -]; - -// assigns the first mark as 'X' -// using let because the variable is expected to change from 'X' to 'O' and back -let playerTurn = 'X'; - -// is a function that print the current status of the board using the variable - board -const printBoard = () => { - console.log(' 0 1 2'); - console.log('0 ' + board[0].join(' | ')); - console.log(' ---------'); - console.log('1 ' + board[1].join(' | ')); - console.log(' ---------'); - console.log('2 ' + board[2].join(' | ')); -} - -const horizontalWin = () => { - // Your code here to check for horizontal wins -} - -const verticalWin = () => { - // Your code here to check for vertical wins -} - -const diagonalWin = () => { - // Your code here to check for diagonal wins -} - -const checkForWin = () => { - // Your code here call each of the check for types of wins -} - -const ticTacToe = (row, column) => { - // Your code here to place a marker on the board - // then check for a win -} - -const getPrompt = () => { - printBoard(); - console.log("It's Player " + playerTurn + "'s turn."); - rl.question('row: ', (row) => { - rl.question('column: ', (column) => { - ticTacToe(row, column); - getPrompt(); - }); - }); } -// Unit Tests -// You use them run the command: npm test main.js -// to close them ctrl + C -if (typeof describe === 'function') { - - describe('#ticTacToe()', () => { - it('should place mark on the board', () => { - ticTacToe(1, 1); - assert.deepEqual(board, [ [' ', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); - }); - it('should alternate between players', () => { - ticTacToe(0, 0); - assert.deepEqual(board, [ ['O', ' ', ' '], [' ', 'X', ' '], [' ', ' ', ' '] ]); - }); - it('should check for vertical wins', () => { - board = [ [' ', 'X', ' '], [' ', 'X', ' '], [' ', 'X', ' '] ]; - assert.equal(verticalWin(), true); - }); - it('should check for horizontal wins', () => { - board = [ ['X', 'X', 'X'], [' ', ' ', ' '], [' ', ' ', ' '] ]; - assert.equal(horizontalWin(), true); - }); - it('should check for diagonal wins', () => { - board = [ ['X', ' ', ' '], [' ', 'X', ' '], [' ', ' ', 'X'] ]; - assert.equal(diagonalWin(), true); - }); - it('should detect a win', () => { - assert.equal(checkForWin(), true); - }); - }); -} else { - - getPrompt(); - -} diff --git a/tictactoe.css b/tictactoe.css index 4526ff0..76c22a6 100644 --- a/tictactoe.css +++ b/tictactoe.css @@ -1,7 +1,24 @@ + + body{ + justify-content: center; + margin-left: 500px; + } + +tr{ + display: grid; + grid-template-columns: 100px 100px 100px; + height: 200px; + text-align: center; + justify-content: center; + margin-top: 30px; +} td{ - height:150px; - width:150px; + border: 1px solid; text-align: center; border: 5px solid black; font-size: 100px; + height: 150px; + + } +