FCC Tic Tac Toe

Developer
Victoria
Size
5,602 Kb
Views
12,144
  1. FCC Tic Tac Toe Previews
  2. FCC Tic Tac Toe HTML Codes
  3. FCC Tic Tac Toe CSS Codes
  4. FCC Tic Tac Toe JS Codes

How do I make an fcc tic tac toe?

What is a fcc tic tac toe? How do you make a fcc tic tac toe? This script and codes were developed by Victoria on 02 December 2022, Friday.

FCC Tic Tac Toe Previews
IQ Test

FCC Tic Tac Toe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC Tic Tac Toe</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='game'></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/dedupe.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FCC Tic Tac Toe - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Orbitron:400,900');
.game { margin: 40px auto; width: 60%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;
}
.game .table { position: relative; margin: auto; width: 440px; height: 440px;
}
.cell { flex-basis: 140px; width: 140px; height: 140px; margin: 2px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 50px; font-family: sans-serif;
}
.cell:hover{ background-color: #c8dbf9;
}
.cell.up { border-bottom: 2px solid #297480;
}
.cell.bottom { border-top: 2px solid #297480;
}
.cell.right { border-left: 2px solid #297480;
}
.cell.left { border-right: 2px solid #297480;
}
.winner { background-color: #c8dbf9;
}
.cells-wrapper { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center;
}
.game .buttons { width: 50px; margin: 1px; display: inline-flex; justify-content: center;
}
.game .icons:hover { cursor: pointer;
}
.game .computer { color: slategrey;
}
.game .human { color: hotpink;
}
.game .robovoice { font-family: 'Orbitron', sans-serif;
}
.robot { display: flex; flex-flow: column wrap; align-items: center;
}

FCC Tic Tac Toe - Script Codes JS Codes

'use strict';
var definition = {	'undefined': undefined,	'true': 'X',	'false': 'O'
};
var cellBordersClass = function cellBordersClass(cell) {	var classNames = [];	var boardWidth = 3;	var cellCount = 9;	if (cell < boardWidth) classNames.push('up');	if (cell >= cellCount - boardWidth) classNames.push('bottom');	if ((cell + boardWidth) % boardWidth === 0) classNames.push('left'); //0 3 6	if ((cell + 1) % boardWidth === 0) classNames.push('right'); // 2, 5, 8	return classNames.join(' ');
};
var Game = React.createClass({	displayName: 'Game',	getInitialState: function getInitialState() {	return {	field: [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],	playerSide: true,	history: []	};	},	winnerRow: function winnerRow(field) {	for (var i = 0; i <= 6; i += 3) {	if (field[i] !== undefined && field[i] === field[i + 1] && field[i + 1] === field[i + 2]) {	return [i, i + 1, i + 2];	}	}	for (var i = 0; i <= 2; i++) {	if (field[i] !== undefined && field[i] === field[i + 3] && field[i + 3] === field[i + 6]) {	return [i, i + 3, i + 6];	}	}	for (var i = 0, j = 4; i <= 2; i += 2, j -= 2) {	if (field[i] !== undefined && field[i] == field[i + j] && field[i + j] === field[i + 2 * j]) {	return [i, i + j, i + 2 * j];	}	}	},	hasWinner: function hasWinner(field) {	return !!this.winnerRow(field);	},	isEnd: function isEnd(field) {	return field.filter(function (cell) {	return cell === undefined;	}).length === 0;	},	aiTurn: function aiTurn() {	var _this = this;	var _state = this.state;	var field = _state.field;	var playerSide = _state.playerSide;	var history = _state.history;	var choice = undefined;	var score = function score(side, depth) {	return side === undefined ? 0 : side === playerSide ? 10 - depth : depth - 10;	};	var availableTurns = function availableTurns(field) {	return field.reduce(function (acc, cell, i) {	if (cell === undefined) return acc.concat([i]);else return acc;	}, []);	};	//var drawBoard = b => '\n' + _.chunk(b, 3).map(line => '|' + line.map(point => point === true ? 'X' : point === false ? 'O' : ' ').join('|') + '|').join('\n') + '\n'	//undefined;	var minimax = function minimax(game, depth) {	if (_this.hasWinner(game.board)) {	return score(game.side, depth);	}	if (_this.isEnd(game.board)) {	return score(undefined, depth);	}	var scores = [];	var moves = [];	availableTurns(game.board).forEach(function (move) {	var possibleGame = {	board: [].concat(game.board.slice(0, move), [game.side], game.board.slice(move + 1, game.board.length)),	side: !game.side	};	scores.push(minimax(possibleGame, depth + 1));	moves.push(move);	});	var winIndexMove = scores.indexOf((game.side !== playerSide ? _.max : _.min)(scores));	choice = moves[winIndexMove];	return scores[winIndexMove];	};	minimax({ board: field, side: !playerSide }, 0);	if (choice !== undefined) {	setTimeout(function () {	return _this.setState({	field: [].concat(field.slice(0, choice), [!playerSide], field.slice(choice + 1, field.length)),	history: history.concat([choice])	});	}, 1000);	}	},	handleClick: function handleClick(cell) {	var _this2 = this;	if (this.state.field[_.last(this.state.history)] === this.state.playerSide) return;	if (this.state.history.length === 0 && this.state.playerSide === false) return;	return function () {	var _state2 = _this2.state;	var field = _state2.field;	var history = _state2.history;	var playerSide = _state2.playerSide;	if (field[cell] === undefined) {	_this2.setState({	field: [].concat(field.slice(0, cell), [playerSide], field.slice(cell + 1, field.length)),	history: history.concat([cell])	}, function () {	return _this2.aiTurn();	});	}	};	},	handleStart: function handleStart() {	var _state3 = this.state;	var field = _state3.field;	var playerSide = _state3.playerSide;	var history = _state3.history;	var centerCell = 4;	if (history.length === 0 && playerSide === false) {	this.setState({	field: [].concat(field.slice(0, centerCell), [!playerSide], field.slice(centerCell + 1, field.length)),	history: history.concat([centerCell])	});	}	},	handleSideClick: function handleSideClick(side) {	var _this3 = this;	this.setState({ playerSide: side,	field: [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],	history: []	}, function () {	if (side === false) _this3.handleStart();	});	},	render: function render() {	var _this4 = this;	var _state4 = this.state;	var field = _state4.field;	var history = _state4.history;	var playerSide = _state4.playerSide;	var winner = this.hasWinner(field) ? field[_.last(history)] : undefined;	var winnerRow = this.winnerRow(field);	var end = this.isEnd(field);	return React.createElement(	'div',	{ className: 'game' },	React.createElement('i', { className: 'fa fa-user fa-5x icons human', onClick: function onClick() {	return _this4.handleSideClick(true);	} }),	React.createElement(	'div',	{ className: 'table' },	React.createElement(	'div',	{ className: 'cells-wrapper' },	field.map(function (cell, i) {	return React.createElement(	'div',	{ key: i,	className: classNames('cell', cellBordersClass(i), {	'winner': winner !== undefined && winnerRow.indexOf(i) !== -1,	'human': playerSide && cell || !playerSide && !cell,	'computer': playerSide && !cell || !playerSide && cell	}),	onClick: winner !== undefined || end ? function () {	return _;	} : _this4.handleClick(i) },	definition[cell]	);	})	)	),	React.createElement(	'div',	{ className: 'robot' },	React.createElement(	'p',	{ className: 'robovoice' },	'I\'ll destroy you'	),	React.createElement('i', { className: 'fa fa-android fa-5x icons computer', onClick: function onClick() {	return _this4.handleSideClick(false);	} })	)	);	}
});
React.render(React.createElement(Game, null), document.getElementById('game'));
FCC Tic Tac Toe - Script Codes
FCC Tic Tac Toe - Script Codes
Home Page Home
Developer Victoria
Username Enieste
Uploaded December 02, 2022
Rating 3
Size 5,602 Kb
Views 12,144
Do you need developer help for FCC Tic Tac Toe?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Victoria (Enieste) Script Codes
Name
FCC Reacted Markdown
FCC Wiki viewer
React TODO
D3 paths
FCC Tribute page
Profile
FCC Local Weather
FCC Game of Life
FCC Twitchtv JSON API
FCC Random quote machine
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!