Skip to content

Newbranch #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fidelis0788 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Newbranch #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6adcb75
initial commit my TTT game
Jun 15, 2020
6ae1d0a
initial commit my ttt gui
Jun 21, 2020
3632da5
commit my changes
Jun 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"liveServer.settings.port": 5501
"liveServer.settings.port": 5502
}
60 changes: 30 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,40 @@
<head>
<meta charset="utf-8">
<title>Tic Tac Toe</title>
<!--bootstrap & style links -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="tictactoe.css">
<!-- link to JavaScript code -->

<script src="dom-tictactoe.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Welcome to Tic Tac Toe</h1>
<p>Get ready to play!</p>
<!-- uses the built-in onclick attribute to call the resetBoard function -->
<button onclick="resetBoard()" type="button" class="btn btn-primary btn-lg" name="button">Restart</button>
</div>
<h1>TIC TAC TOE Game</h1>
<body>
<button onclick="resetBoard()" type="button" class="btn" name="button">Restart</button>

<div id="message"></div>
<table>
<tr class = "square">
<td class="square"id="b1" onclick="move(this)"></td>
<td class="square"id="b2" onclick="move(this)"></td>
<td class="square"id="b3" onclick="move(this)"></td>

<td class="square"id="b4" onclick="move(this)"></td>
<td class="square"id="b5" onclick="move(this)"></td>

<td class="square"id="b6" onclick="move(this)"></td>

<td class="square"id="b7" onclick="move(this)"></td>

<td class="square"id="b8" onclick="move(this)"></td>

<td class="square"id="b9" onclick="move(this)"></td>
</tr>
</table>

<table align="center">
<tr>
<!-- Each table-data (td) has an id that matches it's position in the array or arrays [0][1] -->
<td id='0-0' onclick="handleClick(this)" ></td>
<td id='0-1' onclick="handleClick(this)" ></td>
<td id='0-2' onclick="handleClick(this)" ></td>
</tr>
<tr>
<!-- onclick calls a function called handleClick and passes itself to it("this") -->
<td id='1-0' onclick="handleClick(this)" ></td>
<td id='1-1' onclick="handleClick(this)" ></td>
<td id='1-2' onclick="handleClick(this)" ></td>
</tr>
<tr>
<td id='2-0' onclick="handleClick(this)" ></td>
<td id='2-1' onclick="handleClick(this)" ></td>
<td id='2-2' onclick="handleClick(this)" ></td>
</tr>
</table>
</div>
</body>


</body>
<script src="./main.js"></script>
</body>
</html>
146 changes: 50 additions & 96 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();

}
21 changes: 19 additions & 2 deletions tictactoe.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;


}